> ## Documentation Index
> Fetch the complete documentation index at: https://domoinc-openapi-sync-dataflows.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# App Studioのテーマを使ってデザインする
export const InlineImage = ({src, alt = '', height = '1.6em'}) => {
return 
;
};
### はじめに
[App Studio Appを作成](/ja/s/article/000005295#create_an_app) する場合、最初に行うのはテーマの選択です。
Appがユーザーにどのように表示されるかは、テーマによって決定されます。テーマには以下のような要素が含まれています。
* フォント
* 色
* カードと表のスタイル
* タブ
* 角丸
テーマは、Appテーマとカスタムテーマの2種類に分かれています。
この記事では、テーマの [選択](#app_themes) と [編集](#edit_your_theme) 、App Studio App間でのテーマのコピーや [テーマの再利用](#copy_custom_theme) の方法について説明します。
***
テーマを選択する
* [Appテーマ](#app_themes)
* [カスタムテーマ](#custom_themes)
* [カスタムテーマを保存する](#save_a_custom_theme)
テーマを編集する
[テーマを編集する](#edit_your_theme)
* [テーマを変更する](#change_theme)
* [現在のテーマを編集する](#edit_current_theme)
* [デフォルトを設定する](#configure_defaults)
* [レイアウト（ナビゲーションとタブ）のスタイルを設定する](#style_layout)
* [Appのレイアウトを編集する](#edit_app_layout)
* [カードのスタイルを設定する](#style_cards)
* [表のスタイルを設定する](#style_tables)
* [ボタンのスタイルを設定する](#style_buttons)
* [テキストコンポーネントのスタイルを設定する](#style_text_components)
* [フォントのスタイルを設定する](#style_fonts)
* [フォームのスタイルを設定する](#style_forms)
* [色を選択する](#choose_colors)
* [Appの背景色を設定する](#set_app_background_color)
* [テーマのカラーパレット/チャートのカラーパレット](#theme_color_palette)
* [色ピッカー](#color_picker)
テーマを再利用する
* [カスタムテーマをコピーする](#copy_custom_theme)
* [Appのホームからカスタムテーマをダウンロードする](#download_custom_theme_apps_home)
* [App内からカスタムテーマをダウンロードする](#download_custom_theme_inside_app)
* [カスタムテーマを新しいAppにアップロードする — JSONファイル](#upload_custom_theme_json_file)
* [既存のAppからカスタムテーマをインポートする](#import_from_existing_app)
***
### Appテーマ
App Studioには、フォント、カラー、スタイルなどが事前に構築されたパッケージが複数用意されています。これらのパッケージはAppテーマと呼ばれます。Appテーマは［テーマ］モーダルの最初のタブに表示され、「Essential」や「Saturated Brand」といった名前が付いています。
**［テーマ］タイル** > **［適用］** の順に選択すると、Appにテーマが適用されて [Appエディター](/ja/s/article/000005295#edit_an_app) が開きます。 **［テーマを探索］** を選択すると、そのテーマの詳細を確認できます。
テーマを探索すると、パッケージに含まれる様々なサンプルを見ることができます。
**［このテーマを使用する］** を選択してAppに適用すると、 [Appエディター](/ja/s/article/000005295#edit_an_app) が開きます。テーマの編集や [別のテーマへの切り替え](/ja/s/article/000005543#change_theme) は、いつでも可能です。
[このページのトップへ](#intro)
### カスタムテーマ
［テーマ］モーダルにあるもう1つのタブは、 **［カスタムテーマ］** です。
App Studioを初めて使用するときは、カスタムテーマは使用できません。カスタムテーマを作成するには、事前に構築された [Appテーマ](#app_themes) を選択し、それに変更を加えてカスタムテーマとして保存します。カスタムテーマは、そのAppの［テーマ］モーダルの **［カスタムテーマ］** タブに表示されます。 [カスタムテーマは別のAppで再利用](#copy_custom_theme) できます。カスタムテーマを1つ作成すれば、それを複製したり、編集したり、別のカスタムテーマとして保存したりできます。
# カスタムテーマを保存する
以下の手順は、Appテーマや別のカスタムテーマに変更を加えた後に、そのテーマを自分の **カスタムテーマ** に保存する方法です。
1. [Appエディター](/ja/s/article/000005295#edit_an_app) でテーマに変更を加えたら、 **［Appテーマ］** に移動します。
2. **［テーマ］** で、 **［カスタムとして保存］** を選択します。
**注記：** このオプションは、テーマに変更を加えるまで表示されません。
3. 新しいカスタムテーマに名前を付けて保存します。最大文字数は30文字です。
新しいテーマが、テーマモーダルの **［カスタムテーマ］** タブに表示されます。
[このページのトップへ](#intro)
### テーマを編集する
Appエディターを開くと、デフォルトで左側のナビゲーションに **［Appテーマ］** エリアが表示されます。
このエリアでは、プレビューのサムネイルの表示、別のテーマの選択、現在のテーマの編集、Appの新しい要素の [デフォルト](#configure_defaults) 設定を行うことができます。
# テーマを変更する
**［Appテーマ］** エリアで、プレビューのサムネイルの上にカーソルを置き、 **［テーマを変更］** を選択します。
［テーマ］モーダルが開きます。 [Appテーマ](#app_themes) を使用するか、 [カスタムテーマ](#custom_themes) を使用するかを選択します。
別のAppのカスタムテーマを使用する場合は、 [こちら](#copy_custom_theme) で、テーマをコピーして再利用する方法を参照してください。
[このページのトップへ](#intro)
# 現在のテーマを編集する
現在のテーマを編集するには、 **［Appテーマ］** エリアに移動して、プレビューのサムネイルの下の **［編集スタイル］** を選択します。
**［テーマスタイル］** インターフェースには、 **［スタイル］** と **［デフォルト］** の2つのタブがあります。
**重要：**
スタイルに変更を加えた後は、 [カスタムテーマとして保存](#save_a_custom_theme) して、［テーマ］モーダルで利用できます。
**［スタイル］** タブで、Appのレイアウト、カード、ボタンなどのスタイルを選択します。完全なリストは、この記事の を参照してください。
[このページのトップへ](#intro)
#### デフォルトを設定する
**［デフォルト］** タブ（ **［Appテーマ］** > **［編集スタイル］** > **［デフォルト］** タブ）では、以下の要素をAppに追加する際に、それらの表示方法を選択できます。要素は、追加後にいつでも編集できます。
* Appナビゲーション
* タブ
* カード（単一値、チャート、コントロール、画像、ドキュメント）
* 表
* ボタン
* ヘッダー
* テキストヘッダーとボックス
* フォント
* フォーム
[このページのトップへ](#intro)
#### レイアウトのスタイルを設定する
レイアウト設定によって、Appのメインナビゲーションとタブのスタイルが決まります。 **［Appテーマ］** > **［編集スタイル］** で、 **［スタイル］** タブにある **［レイアウトコンポーネント］** で **［編集スタイル］** を選択し、変更を加えます。
スタイルエディターで、各要素について **編集** を選択できます。
各要素の色、フォント、リンクなどを選択します（App Studioの色については、 [こちら](#choose_colors) を参照してください）。
**［シャドウを表示］** のボックスをオンにすると、要素に影が付きます。
パネルの上部の **［リセット］** を選択すれば、いつでもすべての設定をデフォルト値にリセットできます。
##### Appのレイアウトを編集する
**［Appテーマ］** の **［レイアウト］** で、App全体について以下の設定を変更できます。
* **［Appの幅］ —** ［Appの幅］は、様々なサイズの画面で、Appの全ページがスペースを埋める方法を変更します。自動幅または固定幅のどちらを使用するかを選択できます。
* **［自動幅］ —** 余白は固定され、ページは画面に合わせて柔軟に調整されます。
* **［固定幅］ —** ページの幅は固定され、余白は画面に合わせて柔軟に調整されます。
* **［Appの密度］ —** Appの密度は、App内のオブジェクト間のスペースを決定します。オプションは、［デフォルト］（4px）、［快適性］（8px）、［コンパクト］（2px）、［なし］（0px）、［カスタム］です。
[このページのトップへ](#intro)
#### カードのスタイルを設定する
Appにカードを組み込む際には、Appのブランドに合わせて8種類のカードスタイルから選んでカスタマイズできます。
**［Appテーマ］** > **［編集スタイル］** を選択し、 **［スタイル］** タブにある **［カード数］** で **［編集スタイル］** を選択して変更を加えます。
このパネルで **編集** を選択し、カードのスタイルを個別にカスタマイズします（App Studioのカラーの詳細については、 [こちら](#choose_colors) を参照してください）。
パネルの上部の **［リセット］** を選択すれば、いつでもすべての設定をデフォルト値にリセットできます。
**間隔のコントロール —** カードやその他の要素のスペースを調整することで、以下のカスタマイズが可能です。
* **［カード内のパディング］（［デフォルト］、［快適性］、［コンパクト］、［マイクロ］、［カスタム］） —**
このパディングでは、要素の端とその要素内のコンテンツの間のスペースを調整します。
* **［カードコンテンツの間隔］（［デフォルト］、［快適性］、［Compact］、［なし］） —**
このパディングでは、カード内のテキストとコントロール、表、可視化の間のスペースを調整します。
* **［ヘッダーコンテンツの下のスペース］ —**
要素のヘッダーとその他のコンテンツの間のスペースです。
**［コンテンツの詳細なスペース］** を選択すると、以下のコントロールが表示されます。
* カードコンテンツの間隔（［デフォルト］、［快適性］、［Compact］、［なし］）
* タイトルの下のスペース
* まとめ数字の下のスペース
* タイムフレームの下のスペース
* 説明の下のスペース
* ヘッダーコンテンツの下のスペース
**注記：** **［コンテンツの詳細なスペース］では、プレビューは利用できません。**
詳細なコントロールの変更が終了したら、パネルの上部にあるパスで **［カードのスタイルを編集する］** を選択してカードのスタイルのコントロールに戻ります。
[このページのトップへ](#intro)
#### 表のスタイルを設定する
表のスタイルは、3種類から選んでカスタマイズできます。
**［Appテーマ］** > **［編集スタイル］** を選択し、 **［スタイル］** タブにある **［表］** で **［編集スタイル］** を選択します。
このパネルで **編集** を選択し、表のスタイルを個別にカスタマイズします。App Studioの色については [こちら](#choose_colors) を、スペースのコントロールについては [こちら](#spacing) を参照してください。
パネルの上部の **［リセット］** を選択すれば、いつでもすべての設定をデフォルト値にリセットできます。
**［表の外観］** のコントロールでは、変更の影響を受ける境界線を選択できます（オプションは［全て］、［ヘッダーの下］、［水平］、［縦］、［なし］です）。
カスタマイズする境界線を選択したら、以下を選択できます。
* 境界線の重み（0～4ピクセル）
* 境界線の色\*\*
* 行の高さ（［デフォルト］、［快適性］、［コンパクト］）
* 行の色\*\*
**［高度な表の外観］** を選択すると、以下の項目をカスタマイズできます。
* ［互い違いの行の色を表示］トグル
* ［互い違いの行の色］の設定
* 各列ヘッダーのフォントの選択
* ヘッダーのフォントの色
* ヘッダーの背景色
* 合計行のフォント
* 合計行のフォントの色
* 合計行の背景色
* 小計行のフォント
* 小計行のフォントの色
* 小計行の背景色
* URLのフォントの色
[このページのトップへ](#intro)
#### ボタンのスタイルを設定する
ボタンのスタイルは、5種類から選んでカスタマイズできます。
**［Appテーマ］** > **［編集スタイル］** を選択し、 **［スタイル］** タブにある **［ボタン］** で **［編集スタイル］** を選択します。
このパネルで **編集** を選択し、ボタンのスタイルを個別にカスタマイズします（App Studioのカラーの詳細については、 [こちら](#choose_colors) を参照してください）。
パネルの上部の **［リセット］** を選択すれば、いつでもすべての設定をデフォルト値にリセットできます。
[このページのトップへ](#intro)
#### テキストコンポーネントのスタイルを設定する
このセクションでは、2つのヘッダースタイルと3つのカードスタイルを設定できます。ヘッダースタイルで設定できるのは、フォントと色のみです。カードスタイルには、 [間隔](#spacing) など、さらに多くのオプションもあります（App Studioの色については、 [こちら](#choose_colors) を参照してください）。
**［Appテーマ］** > **［編集スタイル］** を選択し、 **［スタイル］** タブにある **［テキストコンポーネント］** で **［編集スタイル］** を選択します。
[このページのトップへ](#intro)
#### フォントのスタイルを設定する
5種類の見出しスタイルと、本文、段落、ボタンのそれぞれで1種類のスタイルをカスタマイズできます。
**［Appテーマ］** > **［編集スタイル］** を選択し、 **［スタイル］** タブにある **［フォントスタイル］** で **［編集スタイル］** を選択します。
\*いずれのスタイルでも **編集** を選択すると、フォントファミリー（［Condensed］、［Monospace］、［Sans］、［Serif］、［Slab］）、フォントの太さ、フォントサイズ、斜体にするかどうかを選択できます。
[このページのトップへ](#intro)
#### フォームのスタイルを設定する
フォームでは、3種類のスタイルを選んでカスタマイズできます。
**［Appテーマ］** > **［編集スタイル］** を選択し、 **［スタイル］** タブにある **［Appのコンポーネント］** で **［編集スタイル］** を選択します。
いずれのスタイルでも **編集** を選択すると、フォームの外観、カードの外観、パディング、フォントスタイルのコントロールのプレビューが表示されます。
**［フォームの外観］** のコントロールでは、以下の項目をカスタマイズできます。
* **［フォームのプライマリボタン］ —** 使用可能な [ボタン](#style_buttons) のスタイルのいずれかを選択できます。
* **［フォームのセカンダリボタン］—** 使用可能な [ボタン](#style_buttons) のスタイルのいずれかを選択できます。
* **［フォームコントロールの色］と透明度 —** この色は、チェックボックスやラジオボタンの選択など、フォームの入力フィールドコントロールに適用されます。
**［パディング］** コントロールでは、カード内のパディング（［デフォルト］、［快適性］、［コンパクト］、［マイクロ］、［カスタム］）をカスタマイズできます。カードの端とカード内のコンテンツの間のスペースを調整します。
[このページのトップへ](#intro)
#### 色を選択する
**［Appテーマ］** の **［色］** で、Appの背景色を選択できます。事前構築済みのカラーパレットから色を選択することもできます。事前構築済みのカラーパレットには、テーマカラーのセットとチャートカラーのセットが含まれています。独自のパレットを作成する場合は、 **［テーマ色を編集］** を選択します。
##### Appの背景色を設定する
Appの背景色を使用すると、色の塗りつぶしまたは画像の塗りつぶしを設定できます。
* **［色の塗りつぶし］ —** 「 [色ピッカー](#color_picker) 」を参照してください。 **［テーマで編集］** を選択すると、 **［テーマのカラーパレット］/［チャートのカラーパレット］** が展開されます。
* **［画像の塗りつぶし］ —** ［画像の塗りつぶし］を使用すると、背景として使用する画像をマシンから選択できます。
**［デフォルトの色］** を選択して、背景を白（HEX：FFFFFF）で塗りつぶすこともできます。
[このページのトップへ](#intro)
##### ［テーマのカラーパレット］/［チャートのカラーパレット］
**［Appテーマ］** の **［色］** で **［テーマ色を編集］** を選択すると、［テーマのカラーパレット］と［チャートのカラーパレット］が表示されます。
**［テーマのカラーパレット］** ドロップダウンには、8つの作成済みのカラーパレットがあります。各カラーパレットには、プライマリカラーと3つのアクセントカラーが含まれ、各色にはあらかじめグラデーションが設定されています。
すべての色は編集可能ですが、 **チャートには3つのベースとなるアクセントカラーが使用され、これらを変更するとチャートの外観に影響します。** カラーパレットを自社ブランドの色に変更して、Appをパーソナライズできます。
含まれている色のいずれかを編集するか、 **［カスタムの色］** で **追加** を選択すると、 [色ピッカー](#color_picker) が開きます。含まれているアクセントカラーを編集すると、プライマリカラーにもとづいてアクセントカラーの候補が表示されます。
App全体で黒または白のフォントを使用するか、 **［自動］** を選択してフォントの背景色にもとづいてフォントを変更するかを選択できます。
**［チャートのカラーパレット］** ドロップダウンには、11の作成済みのチャートのカラーパレットがあります。
チャートのカラーパレットは、チャートの系列の数に応じて、どの色を表示するか、また棒グラフ、折れ線グラフ、または円グラフで色がどの順番で使用されるかを決定します。各カラーパレットには、3つの系列の色が用意されています。系列の色が4つ以上必要な場合は、 **［展開された系列］** でこれらを管理できます。
###### 展開された系列
チャートの色の **［展開された系列］** は、チャートの系列数が増えると使用されます。また、折れ線グラフで使用されることもあります。展開された系列の色を追加したり、編集したりすることができます。 **［展開された系列］** で **追加** を選択すると、選択したテーマの色で専用の [色ピッカー](#color_picker) が表示されます。
系列の色を並べ替えるには、色のハンドルを目的の順番にドラッグします。
[このページのトップへ](#intro)
**色ピッカー**
App Studio全体の色のドロップダウンを選択すると、現在のテーマの色のパレットとグレースケールの色のパレットが表示されます。
現在選択されている色の不透明度を調整することもできます。
**［テーマで編集］** を選択すると、 **［色］** セクションが開き、テーマのカラーパレットに変更を加えることができます。後述の「色」を参照してください。
**［カスタムの色］** で **追加** を選択すると、スポイトツール付きの色ピッカーが表示され、色を正確に選択できます。色ピッカーでは、HEX値とRGB値も使用できます。
スポイトツールを使用するか色の値を入力した後、 **［+色を追加］** を選択すると、色ピッカーのカスタムの色のパレットに色が追加され、 **［キャンセル］** を選択すると変更が破棄されます。
[このページのトップへ](#intro)
### カスタムテーマをコピーする
Appが [ロック](/ja/s/article/000005295#app_configuration) されていない場合、Appの所有者と編集者はブランディングを維持するために、別のApp Studio Appで作成された [カスタムテーマ](#custom_themes) を選択して再利用できます。また、カスタムテーマをJSONファイルとしてダウンロードし、後で使用することもできます。Appがロックされている場合は、所有者だけがテーマをコピーして再利用できます。
カスタムテーマをコピーまたは再利用するには、ダウンロードとアップロードの2つのプロセスを完了する必要があります。これらのプロセスには、 [Appのホーム](#download_custom_theme_apps_home) からダウンロードする場合と、 [App内](#download_custom_theme_inside_app) からダウンロードする場合、また、 [新しいApp](#upload_custom_theme_json_file) にアップロードする場合と、 [既存のApp](#import_from_existing_app) にアップロードする場合があります。それぞれの手順については以下で説明します。
**注記：**
* JSONテーマファイルには、
テーマスタイル、色、Appのブランディングに関する情報のみが含まれています。その他のAppやデータ関連の情報は含まれていません 。
* 別のAppからテーマをインポートすると、そのAppで現在動作中のテーマをインポートして適用します。
そのAppのカスタムテーマライブラリに保存されている以前のテーマを使用する場合は、そのAppに移動して [JSONテーマファイルをダウンロード](#download_custom_theme_inside_app) します。そのJSONテーマファイルは、どのAppにもアップロードできます。
**注記：** 背景画像テーマはコピー *されません* 。必要に応じて個別に適用する必要があります。
# Appのホームからカスタムテーマをダウンロードする
1. Appのホームに移動して、ダウンロードしたいカスタムテーマを含むAppを見つけます。
2. そのAppの上にカーソルを置き、 **［詳細］** （縦の三点メニュー）から **［テーマファイルをダウンロード］** を選択します。
これにより、現在のすべてのカスタマイズを含め、そのAppで使用されているカスタムテーマのJSONファイルをダウンロードできます。別のカスタマイズを含む古いテーマを使用する場合は、「 [App内からカスタムテーマをダウンロードする](#download_custom_theme_inside_app) 」を参照してください。
[このページのトップへ](#intro)
# App内からカスタムテーマをダウンロードする
1. Appエディター内で
**［Appテーマ］** に移動してプレビューのサムネイルにカーソルを置き、 **［テーマを変更］** を選択して［テーマ］モーダルを開きます。
2. モーダルの **［カスタムテーマ］** タブに移動し、ダウンロードしたいテーマを選んで **［テーマをダウンロード］** を選択します。
カスタムテーマのJSONファイルがコンピューターにダウンロードされます。
[このページのトップへ](#intro)
# カスタムテーマを新しいAppにアップロードする — JSONファイル
別のAppでカスタムテーマを再利用するには、まず、Appのホームに表示される新しいAppを作成する必要があります。
1. Appのホームに移動し、再利用したいカスタムテーマを含むAppを見つけます。
2. そのAppの上にカーソルを置き、 **［詳細］** （三点リーダー）から **［編集］** を選択します。
Appエディターが開きます。
3. 左側のナビゲーションの
**［Appテーマ］** でプレビューのサムネイルにカーソルを置き、 **［テーマを変更］** を選択して［テーマ］モーダルを開きます。
4. モーダルの **［カスタムテーマ］** タブに移動し、 **［テーマをアップロード］** を選択します。
5. ダウンロードしたJSONファイルを選択します。テーマが正常にアップロードされると、モーダルの **［カスタムテーマ］** タブに表示されます。
**重要：** テーマファイルのサイズは150KB未満にする必要があります。ファイルが大きすぎる場合は、エラーになります。
6. テーマのサムネイルを選択し、 **［適用］** をクリックしてアップロードしたテーマをAppに取り込みます。
7. Appエディターで **［保存］** を選択し、テーマの変更を完了します。
[このページのトップへ](#intro)
# 既存のAppからカスタムテーマをインポートする
1. カスタムテーマを適用するAppのAppエディターを開きます。
2. 左側のナビゲーションの
**［Appテーマ］** でプレビューのサムネイルにカーソルを置き、 **［テーマを変更］** を選択して［テーマ］モーダルを開きます。
3. **［Appテーマ** ］タブで、 **［Appからテーマをインポート］** を選択します。
4. 適用したいカスタムテーマを含むAppを見つけて選択します。 **［テーマをインポート］** を選択します。
5. モーダルには、インポート、適用、完了の3つのステップが表示されます。インポートが完了したら、モーダルを閉じます。
6. Appエディターで **［保存］** を選択し、テーマの変更を完了します。
[このページのトップへ](#intro)
日本語