---
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) 所要時間：2分

モバイル用のテーマで選択した色がどのようにモバイルアプリケーションに適用されかについて説明します。
重要:  
Tokyo およびそれ以前の ServiceNow® インスタンスで従来のモバイルテーマを使用します。Utah以降のリリースについては、「[モバイルの Next Experience テーマ設定](https://servicenow-prod.fluidtopics.net/ZyglHFVaNmtXqxko9bKaBQ "ネクストエクスペリエンステーマを使用して、モバイルアプリのカラースキームをインスタンスの Web エクスペリエンスと一貫性を持たせます。")」を参照してください。

## 色の選択に関する注意事項 {#sg-theme-colors__section_rc4_wmv_kjb}

モバイルアプリケーションの色を選択するときは、次のことを考慮して行ってください。

* 選択した色が、画面アイコンや UI スタイルなど、アプリの他の部分の色でどのように表示されるか。あまり多くの色を使用することは避けてください。2 \~ 3 色のシンプルなデザインにすることで、より使いやすいすっきりしたレイアウトになります。
* 選択した色が、アプリケーション内で表示される可能性がある他の要素の色と対比してどう見えるか。アプリ内に、ナレッジ記事やサービスポータルページなどの要素が表示されることがあります。既存の要素と調和しないカラースキームを使用しないようにしてください。
* コントラストの強い補色がどのようにユーザーの視線を導くことができるか。アプリの中でユーザーの注目を引く必要のある領域を強調する色を選択します。
* より読みやすくするためのコントラストを出すために、どのように色を使用すればよいか。テキストが表示される領域では、視覚障がいや色覚異常があるユーザーに対応するため、テキストと背景色のコントラストを強くします。
{#sg-theme-colors__ul_wdh_xnv_kjb}  
重要:  
現在、ServiceNow® モバイル Android アプリは、アプリのテーマの色を指定するための #RGB 表記の使用をサポートしていません。ただし、#RRGGBB 表記は iOS と Android の両方のアプリでサポートされています。

## モバイルアプリのテーマの色の配置 {#sg-theme-colors__section_nws_bqv_kjb}

|-|-|
| この例は、モバイルアプリのデフォルトのテーマで使用される色を示しています。この画像の番号で、モバイルアプリの各領域でこれらの色がどのように表示されるかを確認します。 |   |
[ ]

{#sg-theme-colors__table_zvg_ps1_ljb}

## モバイル機能 {#sg-theme-colors__section_ej2_rs1_ljb}

以下の図で、選択した色がモバイルアプリ内の要素にどのように影響するかを確認します。

アプリケーションの起動ページ
:

ナビゲーションバー
:

リスト
:

仮想エージェント
:

検索
:

アクション
:

## レコード画面とコンポーネント {#sg-theme-colors__section_ykh_ts1_ljb}

次の図を使用して、選択した色がモバイルアプリ内のレコード画面とそのコンポーネントにどのように影響するかを確認します。

レコード画面
:

チェックリスト
:

アクティビティストリーム
:

リンク
:

電子署名
:

## 画面テンプレート {#sg-theme-colors__section_kvf_sv1_ljb}

次の図を使用して、色の選択がモバイルアプリ内のさまざまな画面テンプレートにどのように影響するかを確認します。

カレンダー
:

マップ
:   
    注:  
    マップ画面に関連付けられているリストストリームレコードの \[ ピンの色 \] フィールドによって、マップ上のピンの色が決まります。

URL テンプレート
:

## 設定と通知 {#sg-theme-colors__section_ccd_sy1_ljb}

次の図を使用して、色の選択がモバイルアプリ内のさまざまな設定と通知画面にどのように影響するかを確認します。

通知
:

設定
:

オフラインモード設定
:

位置情報管理設定
:

PIN 設定
:

Siri ショートカット設定 (iOS のみ)
:

## モーダル {#sg-theme-colors__section_d23_41b_ljb}

次の図を使用して、Android および iOS のモーダルで色の選択がどのように表示されるかを確認します。

Android のモーダル
:

iOS のモーダル
: