--- 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) 所要時間：6分 色変数を使用してモバイルマップ画面のテーマを変更する方法を学習します |-|-| | モバイルアイコンには、アイコンの外観を定義するための \[ 外観の設定 \] セクションがあります。FontColorVariable スタイル オプションを使用して、色変数を色として使用します。 このスタイルを使用すると、UX テーマプロパティ \[sys_ux_theme_property\] テーブルから任意の色変数を定義できます。使用可能な変数のリストについては、以下のカラーデザインガイドを参照してください。 マップ画面の作成の詳細については、「 [アイコン UI セクションの構成](https://servicenow-prod.fluidtopics.net/YQjRCdSsLLkr1QrXwbjvIg "アイコン UI セクションタイプを使用して、画面、ランチャー画面、機能に移動します。")」を参照してください。 モバイルでのアイコン作成の詳細については、「 [モバイルのアイコン](https://servicenow-prod.fluidtopics.net/kcSI0BHOfQYi33oMeE3HTQ "アイコンを使用して、モバイルアプリケーションのナビゲーションとアクションに一意の識別子を提供します。")」を参照してください。 | | [ ] {#color-var-mobile-icons__table_st2_mtb_yvb} ## モバイルアイコンのカラーガイド {#color-var-mobile-icons__section_ffp_xkg_cxb} 色変数は次のように分類されます。 設計ガイドラインを使用して、ユースケースに適した色変数を識別します。 アラートカラーパレット : アラートカラーパレットの色は、重要なステータス、状況、およびタスクを強調表示します。アラートの色は、装飾や整理のためではなく、特定の意味を伝えるために使用します。 グループ化されたカラーパレット : グループ化されたカラーパレットの色は、業種の色規則に従います。これらの色を使用して、色付きのアイテムが特定の業界または基幹業務に関連付けられていることを示します。各色の意味はコンテキストによって異なりますが、アプリ内では一貫している必要があります。 各サポート色には、アセスメント可能なオプションを含む 3 つのオプションがあります。ユーザーのナビゲーションを向上させるために、テキストを含まないアイコンにアクセシブルな色のオプションを使用することを検討してください。 {#color-var-mobile-icons__table_otd_c1q_1xb__entry__3} | 色名 | 例 | カラー変数 | |-|-|-| | 重大 | ![重要なモバイルアイコン]() | モバイル変数 : * オプション 1: `alert--critical-2` * オプション 2: `alert--critical-3` * オプション 3 (アクセス可能): `alert--critical-4` {#color-var-mobile-icons__ul_hqj_lzh_cxb} Web 変数 : * オプション 1:`--now-color_alert--critical-2` * オプション 2:`--now-color_alert--critical-3` * オプション 3 (アクセス可能):`--now-color_alert--critical-4` {#color-var-mobile-icons__ul_wvy_lzh_cxb} | | 高 | ![高モバイルアイコン]() | モバイル変数 : * オプション 1: `alert--high-2` * オプション 2: `alert--high-3` * オプション 3 (アクセス可能): `alert--high-4` {#color-var-mobile-icons__ul_lsh_rxm_cxb} Web 変数 : * オプション 1:`--now-color_alert--high-2` * オプション 2:`--now-color_alert--high-3` * オプション 3 (アクセス可能):`--now-color_alert--high-4` {#color-var-mobile-icons__ul_msh_rxm_cxb} | | 訓告 | ![警告モバイルアイコン]() | モバイル変数 : * オプション 1: `alert--warning-2` * オプション 2: `alert--warning-3` * オプション 3 (アクセス可能): `alert--warning-4` {#color-var-mobile-icons__ul_hxg_5xm_cxb} Web 変数 : * オプション 1:`--now-color_alert--warning-2` * オプション 2:`--now-color_alert--warning-3` * オプション 3 (アクセス可能):`--now-color_alert--warning-4` {#color-var-mobile-icons__ul_ixg_5xm_cxb} | | 中 | ![モデレートモバイルアイコン]() | モバイル変数 : * オプション 1: `alert--moderate-2` * オプション 2: `alert--moderate-3` * オプション 3 (アクセス可能): `alert--moderate-4` {#color-var-mobile-icons__ul_upy_vxm_cxb} Web 変数 : * オプション 1:`--now-color_alert--moderate-2` * オプション 2:`--now-color_alert--moderate-3` * オプション 3 (アクセス可能):`--now-color_alert--moderate-4` {#color-var-mobile-icons__ul_vpy_vxm_cxb} | | 情報 | ![Info Mobile のアイコン]() | モバイル変数 : * オプション 1: `alert--info-2` * オプション 2: `alert--info-3` * オプション 3 (アクセス可能): `alert--info-4` {#color-var-mobile-icons__ul_bhs_xxm_cxb} Web 変数 : * オプション:1`--now-color_alert--info-2` * オプション 2:`--now-color_alert--info-3` * オプション 3 (アクセス可能):`--now-color_alert--info-4` {#color-var-mobile-icons__ul_chs_xxm_cxb} | | 好意的 | ![ポジティブモバイルアイコン]() | モバイル変数 : * オプション 1: `alert--positive-2` * オプション 2: `alert--positive-3` * オプション 3 (アクセス可能): `alert--positive-4` {#color-var-mobile-icons__ul_hy3_1ym_cxb} Web 変数 : * オプション 1:`--now-color_alert--positive-2` * オプション 2:`--now-color_alert--positive-3` * オプション 3 (アクセス可能):`--now-color_alert--positive-4` {#color-var-mobile-icons__ul_iy3_1ym_cxb} | | 低 | ![低モバイルアイコン]() | モバイル変数 : * オプション 1: `alert--low-2` * オプション 2: `alert--low-3` * オプション 3 (アクセス可能): `alert--low-4` {#color-var-mobile-icons__ul_avy_bym_cxb} Web 変数 : * オプション 1:`--now-color_alert--low-2` * オプション 2:`--now-color_alert--low-3` * オプション 3 (アクセス可能):`--now-color_alert--low-4` {#color-var-mobile-icons__ul_bvy_bym_cxb} | [表 : 1. アラートカラーパレット] {#color-var-mobile-icons__table_otd_c1q_1xb} {#color-var-mobile-icons__table_f5d_c1q_1xb__entry__3} | 色名 | 例 | カラーバリエーション | |-|-|-| | 青 | ![青色のモバイルアイコン]() | Web 変数 : * オプション 1:`--now-color_grouped--blue-2` * オプション 2:`--now-color_grouped--blue-3` * オプション 3 (アクセス可能):`--now-color_grouped--blue-4` {#color-var-mobile-icons__ul_lqy_gym_cxb} | | 茶色 | ![茶色のモバイルアイコン]() | Web 変数 : * オプション 1:`--now-color_grouped--brown-2` * オプション 2:`--now-color_grouped--brown-3` * オプション 3 (アクセス可能):`--now-color_grouped--brown-4` {#color-var-mobile-icons__ul_kcy_kym_cxb} | | グレイ | ![グレーのモバイルアイコン]() | Web 変数 : * オプション 1:`--now-color_grouped--gray-2` * オプション 2:`--now-color_grouped--gray-3` * オプション 3 (アクセス可能):`--now-color_grouped--gray-4` {#color-var-mobile-icons__ul_ols_lym_cxb} | | 緑 | ![緑色のモバイルアイコン]() | Web 変数 : * オプション 1:`--now-color_grouped--green-2` * オプション 2:`--now-color_grouped--green-3` * オプション 3 (アクセス可能):`--now-color_grouped--green-4` {#color-var-mobile-icons__ul_fy1_nym_cxb} | | 緑黄 | ![緑黄のモバイルアイコン]() | Web 変数 : * オプション 1:`--now-color_grouped--green-yelow-2` * オプション 2:`--now-color_grouped--green-yelow-3` * オプション 3 (アクセス可能):`--now-color_grouped--green-yelow-4` {#color-var-mobile-icons__ul_l5v_nym_cxb} | | マゼンタ | ![マゼンタのモバイルアイコン]() | Web 変数 : * オプション 1:`--now-color_grouped--magenta-2` * オプション 2:`--now-color_grouped--magenta-3` * オプション 3 (アクセス可能):`--now-color_grouped--magenta-4` {#color-var-mobile-icons__ul_vlk_pym_cxb} | | オレンジ | ![オレンジ色のモバイルアイコン]() | Web 変数 : * オプション 1:`--now-color_grouped--orange-2` * オプション 2"`--now-color_grouped--orange-3` * オプション 3 (アクセス可能):`--now-color_grouped--orange-4` {#color-var-mobile-icons__ul_xyn_qym_cxb} | | ピンク | ![ピンクのモバイルアイコン]() | Web 変数 : * オプション 1:`--now-color_grouped--pink-2` * オプション 2:`--now-color_grouped--pink-3` * オプション 3 (アクセス可能):`--now-color_grouped--pink-4` {#color-var-mobile-icons__ul_xsm_rym_cxb} | | 紫 | ![紫色のモバイルアイコン]() | Web 変数 : * オプション 1:`--now-color_grouped--purple-2` * オプション 2:`--now-color_grouped--purple-3` * オプション 3 (アクセス可能):`--now-color_grouped--purple-4` {#color-var-mobile-icons__ul_dbl_sym_cxb} | | 青緑 | ![青緑色のモバイルアイコン]() | Web 変数 : * オプション 1:`--now-color_grouped--teal-2` * オプション 2:`--now-color_grouped--teal-3` * オプション 3 (アクセス可能):`--now-color_grouped--teal-4` {#color-var-mobile-icons__ul_egx_tym_cxb} | | 黄 | ![黄色のモバイルアイコン]() | Web 変数 : * オプション 1:`--now-color_grouped--yellow-2` * オプション 2:`--now-color_grouped--yellow-3` * オプション 3 (アクセス可能):`--now-color_grouped--yellow-4` {#color-var-mobile-icons__ul_w3p_vym_cxb} | [表 : 2. グループ化されたカラーパレット] {#color-var-mobile-icons__table_f5d_c1q_1xb}