---
sourceDocument: オーストラリアのモバイル構成とナビゲーション
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/mobile

 Release :

    - australia

ft:locale :

    - ja-JP

ft:publication_title :

    - オーストラリアのモバイル構成とナビゲーション

ft:clusterId :

    - mobile

bundleId :

    - mobile

workflow :

    - Development, Data and Analytics


---

# カラーテーマの考慮事項

# モバイルのカラーテーマに関する考慮事項 {#ariaid-title1}

* リリースバージョン: Australia
* 
* 更新日 2026年03月12日
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：3分

モバイル アプリケーションで色を使用してユーザー エクスペリエンスを向上させる方法について説明します。環境に適した色を使用すると、アプリ内でユーザーをガイドし、重要な情報をすばやく識別するのに役立ちます。

## 色の使用 {#color-guide-landing__section_rgn_mth_vwb}

アプリ全体で色の決定に一貫性を保ちます。特定のタスクやワークフローを色に関連付けると、ユーザーが適切な場所にいないことを把握しやすくなります。関連するアプレットに同じ色または同様の色を使用することを検討してください。たとえば、インシデント関連のアプレットには青を選択し、作業指示書アプレットには緑を選択すると、ユーザーが関連するタスクにすばやく取り掛かるのに役立ちます。

使用する色が多すぎないようにしてください。2〜3色のシンプルなデザインは、すっきりとした、よりアクセスしやすいレイアウトになります。

色を使用してコントラストを付け、読みやすさを高めることができます。テキストが表示される領域では、視覚障がいのあるユーザーと色覚異常のユーザーの両方に対応できるように、テキストと背景のコントラストが高いことを確認してください。Web コンテンツアクセシビリティガイドライン (WCAG) 2.0 に準拠するには、少なくとも 3:1 のコントラスト比が必要です。色のコントラストを測定するのに役立つツールがオンラインにいくつかあります。

高コントラストの補色は、ユーザーの焦点を導くことができます。これらの色を使用して、ユーザーの注意が必要なアプリケーションの領域を強調表示します。

## 色変数の一般的なガイドライン {#color-guide-landing__section_z3c_xhv_xvb}

色変数の使用を開始する前に、次のガイドラインに留意してください。

ネクストエクスペリエンス を有効にする必要があります
:   色変数は、 ネクストエクスペリエンス が有効な場合にのみ有効になります。それ以外の場合、色変数は無視されます

変数に使用できる色は、\[UX テーマプロパティ\] テーブルにあります

:   色変数は、UX テーマプロパティ \[sys_ux_theme_property\] テーブルで定義された色を使用します。

色変数は加法プロパティです
:   新しい色変数が構成されていない場合、既存の色プロパティ (ハードコードされた色を使用) は引き続き機能します。ただし、色のプロパティは、テーマに基づいて要素の色を動的に変更することはできません。

色変数は色のプロパティを上書きします
:   色変数が有効になっており、色変数の値が見つかった場合、色変数は対応する非可変色プロパティ ネクストエクスペリエンス 上書きします。
:   たとえば、次の UI ルールアクション構成があるとします。

        {"BackgroundColorVariable": "--now-color-primary-0", "BackgroundColor": "#3f2c11"}

    および、この構成の Web カラーマップ:

        {"--now-color-primary-0": "#22ff00"}

    この UI ルールアクションの解決済み背景色が `#22ff00` になります。

変数が見つからない場合、または値がない場合に、色のプロパティが使用されます
:   変数が空の場合、または色変数値が見つからない場合、色変数は上書きされません。このような場合は、色プロパティ (HEX) が使用されます。
:   たとえば、次の構成が与えられるとします。

        {"BackgroundColorVariable": "", "BackgroundColor": "#3f2c11"}

    色の値は `#3f2c11` です。
:   この構成の場合:

        {"BackgroundColorVariable": "--now-color-primary-0", "BackgroundColor": "#3f2c11"}

    および、この構成の Web カラーマップ:

        {"--now-color-primary-1": "#1134a1"}

    背景色の値は `#3f2c11` です。

色変数は命名規則を使用します
:   色変数の命名規則は、既存の色プロパティに `変数` サフィックスを追加することです。
:   たとえば、`BackgroundColorVariable` は `BackgroundColor` に使用されます

16 進数変数と色変数の両方を設定する
:

## コンポーネント別の色変数のサポート {#color-guide-landing__section_xrp_fj5_cxb}

色変数を使用してモバイルコンポーネントのテーマを変更する方法については、これらのリンクを参照してください。

* [UI ルールの色変数のサポート](https://servicenow-prod.fluidtopics.net/l02~RasZNyT2n~m1WFBDEw "色変数を使用してモバイル UI ルールのテーマを変更する方法について説明します。")
* [アイコン UI セクションの色変数のサポート](https://servicenow-prod.fluidtopics.net/VsJqD31ZchjFpTAPmzSQPQ "色変数を使用してモバイルアイコン UI セクションのテーマを変更する方法について説明します。")
* [マップアイコンの色変数のサポート](https://servicenow-prod.fluidtopics.net/_tKVUAh2iIwqDSInwXbCuQ "色変数を使用してモバイルマップアイコンのテーマを変更する方法について説明します")
* [アイコンの色変数のサポート](https://servicenow-prod.fluidtopics.net/Sq5I768bX2rKXwGibTAxrw "色変数を使用してモバイルマップ画面のテーマを変更する方法を学びます")
* [カードビューテンプレートでの色変数のサポート](https://servicenow-prod.fluidtopics.net/gqZmLvsfOjUGxd6hY5Qygg "色変数を使用してモバイルカードビューのテーマを変更する方法について説明します。")
* [カードビューボタンの色変数のサポート](https://servicenow-prod.fluidtopics.net/KSIbVHn9kbx8F6grDxpt2w "色変数を使用してモバイルカードビューボタンのテーマを変更する方法について説明します。")
* [入力説明の色変数のサポート](https://servicenow-prod.fluidtopics.net/rKrVGwiumI6kS~lL~t7HMQ "色変数を使用してモバイル入力説明のテーマを変更する方法について説明します。")
{#color-guide-landing__ul_o3v_4j5_cxb}