モバイル用のテーマの色に関するガイドライン

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間:2分
  • モバイル用のテーマで選択した色がどのようにモバイルアプリケーションに適用されかについて説明します。

    重要:
    Tokyo以前のServiceNow®インスタンスで従来のモバイルテーマを使用します。Utah 以降のリリースについては、「モバイル向けのネクストエクスペリエンスのテーマ」を参照してください。

    色の選択に関する考慮事項

    モバイルアプリケーションの色を選択するときは、次の情報を考慮してください。
    • 選択した色が、画面アイコンや UI スタイルなど、アプリの他の部分の色とどのように表示されるか。使用する色が多すぎないようにしてください。2〜3色のシンプルなデザインは、すっきりとした、よりアクセスしやすいレイアウトになります。
    • 選択した色が、アプリ内に表示される可能性のある他の要素の色とどのように表示されるか。ナレッジ記事やサービスポータルページなどの要素がアプリに表示される場合があります。既存の要素とうまく機能しない配色は避けてください。
    • コントラストの高い補色がユーザーの集中力をどれだけ導くことができるか。色選択を使用して、ユーザーの注意が必要なアプリの領域を強調表示します。
    • 色を使用してコントラストを提供し、読みやすさを高める方法。テキストが表示される領域では、視覚障がいのあるユーザーと色覚異常のユーザーの両方に対応できるように、テキストと背景色のコントラストが高いことを確認してください。
    重要:
    現在、 ServiceNow® モバイル Android アプリは、#RGB 表記を使用したアプリのテーマの色の指定をサポートしていません。ただし、#RRGGBB 表記は iOS アプリと Android アプリの両方でサポートされています。

    モバイルアプリのテーマの色の場所

    この例は、デフォルトのモバイルアプリテーマで使用されている色を示しています。この画像の数字を使用して、モバイルアプリのさまざまな領域でこれらの色が表示される場所を確認します。 デフォルトのモバイルテーマで使用される色

    モバイル機能

    次の図を使用して、色の選択がモバイルアプリ内の要素にどのように影響するかを確認してください。

    アプリケーション起動ページ
    アプリケーションの起動ページでテーマの色が適用される場所の図。
    ナビゲーションバー
    ナビゲーションバーでテーマの色が適用される場所の図。
    リスト
    リスト内でテーマの色が適用される場所の図。
    仮想エージェント
    仮想エージェントでテーマの色が適用される場所の図。
    検索
    検索コンポーネントでテーマの色が適用される場所の図。
    アクション
    アクションカードでテーマの色が適用される場所の図。

    レコード画面とコンポーネント

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

    レコード画面
    レコード画面でテーマの色が適用される場所の図。
    チェックリスト
    チェックリスト内でテーマの色が適用される場所の図。
    アクティビティストリーム
    アクティビティストリームでテーマの色が適用される場所の図。
    リンク
    リンク内でテーマの色が適用される場所の図。
    電子署名
    電子署名でテーマの色が適用される場所の図。

    画面テンプレート

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

    カレンダー
    カレンダー画面でテーマの色が適用される場所の図。
    マップ
    マップ画面でテーマの色が適用される場所の図。
    注:
    マップ画面に関連付けられているリストストリームレコードの [ ピンの色 ] フィールドによって、マップ上のピンの色が決まります。
    URL テンプレート
    URL テンプレート画面でテーマの色が適用される場所の図。

    設定と通知

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

    通知
    通知画面でテーマの色が適用される場所の図。
    設定
    設定画面でテーマの色が適用される場所の図。
    オフラインモードの設定
    オフラインモードの設定画面でテーマの色が適用される場所の図。
    位置情報管理の設定
    位置情報管理設定画面でテーマの色が適用される場所の図
    PIN 設定
    PIN 設定画面でテーマの色が適用される場所の図。
    Siri ショートカット設定 (iOS のみ)
    Siri ショートカット設定画面でテーマの色が適用される場所の図。

    モーダル

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

    Android モーダル
    Android モーダルでテーマの色が適用される場所の図。
    iOS モーダル
    iOS モーダルでテーマの色が適用される場所の図。