Experience Builder におけるテーマは、アプリの外観の大部分を定義する一連のデザイン仕様です。テーマ設定を使用することで、色、フォント、ボタンのスタイルやその他の外観設定をアプリ全体でグローバルに定義することができ、個々のウィジェットやその他のアプリ エレメントでこれらの設定を変更する必要はありません。
テーマ設定ではプライマリー カラーとセカンダリー カラー、(情報、成功、警告、エラーを示す) 機能の色、ニュートラル カラーを定義し、いずれの色も、アプリの視覚的アイデンティティーが組織のブランディングや個人の好みと一致するようにカスタマイズすることができます。 サーフェス (ページ、テーブル ウィジェットのセル、ウィンドウなど) の色や対話型エレメント (ドロップダウン ボタン、オンとオフの状態の切り替えスイッチ、キーボード フォーカス インジケーターなど) の色を定義できます。 テーマは、タイポグラフィー、アプリ エレメントの枠線の半径、リンク テキストの下線スタイルなどにも影響します。 テーマはアプリのレイアウトとコンテンツには影響しません。
テーマは多くのアプリ エレメントのデフォルトの外観を定義しますが、ウィジェット、ページ、およびその他のエレメントの設定でアプリのテーマをオーバーライドして、個々のエレメントの外観を変更することができます。
Experience Builder アプリまたはテンプレートのテーマ設定を確認するには、[テーマ] をクリックして [テーマ] パネルを開きます。
テーマの選択
[テーマ] パネルを開くと、あらかじめ用意されたテーマのリストが表示されます。 テーマのサムネイルのアイコンは、各テーマがライト テーマ 
であるかダーク テーマ 
であるかを示しています。
次のあらかじめ用意されているテーマから選択できます:
- [プライム] - プライマリー カラーが青色、セカンダリー カラーが紫色のライト テーマ。 これがデフォルトのテーマです。
- [アストロ] - プライマリー カラーが青色、セカンダリー カラーが紫色のダーク テーマ。
- [オーシャン] - プライマリー カラーが青色、セカンダリー カラーが緑色のライト テーマ。
- [ベルベット] - プライマリー カラーが赤色、セカンダリー カラーが青色のライト テーマ。
- [アビス] - プライマリー カラーが紫色、セカンダリー カラーが青色のダーク テーマ。
- [メドウ] - プライマリー カラーが緑色、セカンダリー カラーが茶色のライト テーマ。
- [共有テーマ] - テーマを組織の共有テーマの設定と同期します。 このテーマを選択した場合、色、タイポグラフィー、その他のテーマ設定をカスタマイズすることはできません。 このテーマを選択しなかった場合でも、ウィジェットの色の設定を構成するときに組織の共有テーマから色を選択できます。
注意:
ArcGIS Online 2025 年 10 月のアップデートで新しいテーマ システムが導入されました。 このアップデート以降に作成されたすべてのアプリで新しいシステムが使用されます。 このアップデートより前に作成されたアプリでは、[テーマ] 設定でテーマを変更しない限り、以前のシステムのテーマが引き続き使用されます。
テーマのさまざまな変数が同様にマッピングされているわけではないため、既存のアプリを古いテーマから新しいテーマに切り替えたときに、アプリの一部が予期しない外観になる可能性があることに注意してください。 古いアプリ テーマを引き続き使用することをおすすめします。
新しいテーマに切り替える場合は、古いテーマと同じモードのテーマを選択します。 古いライト テーマから新しいライト テーマに切り替えるか、古いダーク テーマから新しいダーク テーマに切り替えます。
テーマのカスタマイズ
テーマを選択した後、[カスタマイズ] をクリックすると、追加のテーマ設定が表示されます。
注意:
[リセット] をクリックすると、テーマがデフォルトの設定に戻ります。
色の設定
[色] タブの設定では、アプリのさまざまな部分の色を定義します。
カラー パレット コンポーネントを使用して、ブランドの色、機能の色、ニュートラル カラー、サーフェスの色、対話型エレメントの色を定義できます。
ブランドの色と機能の色
ブランドの色は、アプリ全体で最もよく使用される色です。 注目を集めたり対話形式で情報をやり取りしたりするときに使用するメインの色です。
- プライマリー カラーはユーザー インターフェイスの最も目立つコンポーネント (フローティング アクション ボタン、強調したいボタン、アクティブな状態など) に使用されます。 強調したい塗りつぶし、テキスト、アイコンにはこれを使用する必要があります。
- セカンダリー カラーは、ユーザー インターフェイス内のあまり目立たない塗りつぶし、テキスト、アイコンに使用されます。
機能の色は、アラート メッセージ (ウィジェットがタスクを正常に実行したときに表示されるメッセージなど) で使用されます。
- 情報の色は、情報メッセージに使用されます。
- 成功の色は、成功ステータス メッセージ (ウィジェットの処理が成功したときに表示されるメッセージなど) に使用されます。
- 警告の色は、警告メッセージに使用されます。
- エラーの色は、エラー メッセージ (ウィジェットの処理が失敗したときに表示されるメッセージなど) に使用されます。
カラー パレット コンポーネントを使用して、ブランドと機能の 6 つの色それぞれのベース カラーを 1 つ定義できます。
アプリをさらにダイナミックにするため、Experience Builder ではアプリの周囲に各色のさまざまなシェードが使用されます。ブランドの色と機能の色それぞれの横にあるプレビューに、明るいシェード、メインのシェード、暗いシェードの 3 つのシェードでテキストがどのように表示されるかが示されます。 テキストの色は、コントラストと表示が最適になるように自動的に選択されます。
たとえば、ボタンは 3 つのカラー シェードを使用して状態と操作を伝えます。 次の図では、ボタンにプライマリー テーマ カラーが使用されています。 ボタンのデフォルト色はメインのシェード、ホバー状態の色は暗いシェード、押した状態の色は明るいシェードです。
注意:
一部のボタンには押したときのリップル アニメーション効果が付いているため、一部のボタンの押した状態の色は明るいシェードとは異なる場合があります。 このアニメーションでは、透過表示によってボタンの色がさらに明るくなります。
情報、成功、警告、エラー メッセージでも、3 つのカラー シェードすべてが使用されます。
デフォルトのブランドの色または機能の色を変更する場合、[色の選択を最適化] チェックボックスをオンにすることで、コントラストと表示が最適になる、選択した色のシェードを自動的に生成できます。
ニュートラル カラー
ニュートラル カラーはアプリケーションの基本色を定義します。 具体的には、ニュートラル カラーはテキスト、背景、枠線、分割ラインのデフォルト色を定義します。
[ニュートラル] で、カラー パレットを使用してベースとなるニュートラル カラーを選択できます。 このベース カラーに基づいて、13 のシェードが表示されます。 これらはすべて、アプリ全体で使用されるニュートラル カラーです。
ブランドの色、機能の色、ニュートラル カラーによってテーマ色は構成され、これらの色はウィジェット設定、ページ設定、色を定義可能なその他のエレメントの設定内のカラー パレット コンポーネントに表示されます。
サーフェスの色と対話型エレメントの色
[サーフェス] の下にある色の設定を使用して、エレメントの背景の色や、これらのエレメントの上に表示されるテキストの色を定義できます。 デフォルトで、これらの色はニュートラル カラーにリンクされています。
- ページの色は、ページ、セクション、およびスクリーン グループのメイン ステージに適用されます。
- コンテナーの色は、カード ウィジェット、リスト ウィジェット内のリスト アイテム、テーブル ウィジェット内のセルに適用されます。
- オーバーレイの色は、ウィンドウ、ツールチップ、モーダル、ポップアップに適用されます。
[対話型エレメント] の下にある色の設定を使用して、ドロップダウン メニュー ボタン、改ページ ボタン、メニューのアクティブなタブ、切り替えボタンなどのエレメントの色を定義できます。
- デフォルト色は、デフォルト状態の対話型ボタンに適用されます。 デフォルトで、この色はニュートラル カラーにリンクされています。
- 選択状態は、選択されている状態の対話型ボタンに適用されます。 デフォルトで、この色はプライマリー テーマ カラーにリンクされています。
- [キーボード フォーカス] の色は、アプリ ページでキーボード フォーカスがある対話型エレメントを示すインジケーターに適用されます。 これは、キーボードを使用してアプリを操作するときに便利です。 デフォルトで、この色はプライマリー テーマ カラーにリンクされています。
注意:
デフォルトで、サーフェスの色と対話型エレメントの色はすべて、ニュートラル カラーまたはプライマリー テーマ カラーのどちらかにリンクされています。 ニュートラル カラーまたはプライマリー テーマ カラーを変更すると、リンク先の色も変わります。 サーフェスまたは対話型エレメントのいずれかの色を関連付けられているカラー パレットで変更した場合、それらの色はニュートラル カラーまたはプライマリー テーマ カラーとのリンクが解除されますが、[リセット] をクリックすることで再度リンクできます。
サーフェスの色または対話型エレメントの色を変更すると、関連付けられているテキストの色が、十分なコントラストがある色に自動的に変わります。 最小コントラスト比は 3:1 です。 コントラストの基準を満たさない色にテキストの色を変更した場合、別の色を選択するよう求める警告が表示されます。
タイポグラフィーの設定
[タイポグラフィー] タブで、テキストに関連する次の設定を変更できます:
- [フォント] - 見出しと本文のテキストのフォントを選択します。
- [見出し] - 見出しテキストのフォントを選択します。
- [本文] - 本文テキストのフォントを選択します。 本文テキストには、ラベルなど、その他すべてのアプリ テキストが含まれます。
- [フォント サイズ] - スライディング スケールを使用して一般フォントのサイズを定義します。 サイズの範囲は [非常に小さい] から [非常に大きい] までです。 フォント サイズが小さくなるにしたがって、エリアに収まるテキスト コンテンツが増えるのに対し、フォント サイズが大きくなるにしたがって、読みやすくなります。
Experience Builder にはデフォルトのフォントが用意されています。 フォント ドロップダウン メニューで [Google Fonts の追加] をクリックすることで、フォントを追加できます。 [Google Fonts の追加] ウィンドウが表示され、テキスト ボックスにフォントの URL を入力できます。 [OK] をクリックしてフォントを追加します。
詳細テーマ設定
[詳細] タブで、次の設定を変更できます:
- [枠線の半径] - アプリ エレメントの枠線の半径の一般スタイルを選択します。 枠線の半径は、コンテナー、ボタン、入力ボックスなどのエレメントのコーナーの形状に影響します。 選択したテーマで定義されている枠線の半径を使用することも、[なし]、[小]、[中]、[大]、[特大] から選択することもできます。
- [コンポーネント] - 入力フィールドとリンク テキストの外観をカスタマイズします。
- [入力フィールド] - 入力フィールドの色を選択します。 入力フィールドには、テキスト入力ボックス、検索ボックス、およびデフォルト状態のチェックボックス、ラジオ ボタン、切り替えスイッチなどがあります。
- [リンク] - リンク テキストの下線スタイルと色を選択します。 選択したテーマで定義されているスタイルを下線スタイルとして使用することも、[下線なし]、[実線の下線]、[点線の下線] から選択することもできます。