---
sourceDocument: Xanadu モバイルの構成とナビゲーション
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/xanadu/mobile

 Release :

    - xanadu

ft:locale :

    - ja-JP

ft:publication_title :

    - Xanadu モバイルの構成とナビゲーション

ft:clusterId :

    - mobile

bundleId :

    - mobile

workflow :

    - Platform


---

# モバイルのカラーテーマに関する考慮事項

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

* リリースバージョン: Xanadu
* 
* 更新日 2024年08月01日
* 
* ![](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/~99hvWI2E71BtXhS7y_blw "色変数を使用してモバイル UI ルールのテーマを変更する方法について説明します。")
* [アイコン UI セクションの色変数のサポート](https://servicenow-prod.fluidtopics.net/3jYbb0K8NFcd88poLQoQqw "色変数を使用してモバイルアイコンの UI セクションのテーマを変更する方法について説明します。")
* [マップアイコンの色変数のサポート](https://servicenow-prod.fluidtopics.net/QZT91eSMga5MsPSoMrfbZw "色変数を使用してモバイルマップアイコンのテーマを変更する方法について説明します")
* [アイコンの色変数のサポート](https://servicenow-prod.fluidtopics.net/P2WIuQAAzI~wp1SgzQZDYA "色変数を使用してモバイルマップ画面のテーマを変更する方法を学習します")
* [カードビューテンプレートの色変数のサポート](https://servicenow-prod.fluidtopics.net/FcQbEELbCmfOKC86iNHvzQ "色変数を使用してモバイルカードビューのテーマを変更する方法について説明します。")
* [カードビューボタンの色変数のサポート](https://servicenow-prod.fluidtopics.net/iyDnEQBeouLPbT~CoT7i3g "色変数を使用してモバイルカードビューボタンのテーマを変更する方法について説明します。")
* [入力説明の色変数のサポート](https://servicenow-prod.fluidtopics.net/uBif_vRW~9iiK8irBNomXQ "色変数を使用してモバイル入力の説明のテーマを変更する方法について説明します。")
{#color-guide-landing__ul_o3v_4j5_cxb}