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

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

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

    色の選択に関する注意事項

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

    モバイルアプリのテーマの色の配置

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

    モバイル機能

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

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

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

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

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

    画面テンプレート

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

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

    設定と通知

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

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

    モーダル

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

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