--- 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) 所要時間：7分 色変数を使用してモバイルマップ画面のテーマを変更する方法を学びます |-|-| | モバイルアイコンには、アイコンの外観を定義するために使用される \[ 外観を設定 \] セクションがあります。FontColorVariable スタイルオプションを使用して、色変数 a 色を使用します。 このスタイルを使用すると、UX テーマプロパティ \[sys_ux_theme_property\] テーブルから任意の色変数を定義できます。利用可能な変数のリストについては、以下のカラーデザインガイドを参照してください。 マップ画面の作成の詳細については、「 [アイコン UI セクションの構成](https://servicenow-prod.fluidtopics.net/jVBe2Nio5bQ~q7J6yip1fA "アイコン UI セクションタイプを使用して、画面、ランチャー画面、および機能に移動します。")」を参照してください。 モバイルでのアイコンの作成の詳細については、「 [モバイルアイコン](https://servicenow-prod.fluidtopics.net/pnjZMX52YqYSvXpZ3RIguQ "アイコンを使用して、モバイルアプリケーションのナビゲーションとアクションの一意の識別子を指定します。")」を参照してください。 | | [ ] {#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} | | Warning | ![警告モバイルアイコン]() | モバイル変数 : * オプション 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: `アラート--moderate-2` * オプション 2: `アラート--moderate-3` * オプション 3 (アクセス可能): `アラート--中-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 | ![モバイル情報アイコン]() | モバイル変数 : * オプション 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}