モバイル向けの Next Experience テーマの構成

  • リリースバージョン: Zurich
  • 更新日 2025年07月31日
  • 所要時間：5分

    • ネクストエクスペリエンステーマを有効にし、モバイルアプリのテーマを作成して適用する方法について説明します。

    ネクストエクスペリエンス を有効化

    重要:
    ネクストエクスペリエンステーマは、Utah 以降のバージョンの ServiceNow® インスタンスで使用します。

    ネクストエクスペリエンステーマを使用するには、インスタンスでネクストエクスペリエンスを有効にする必要があります。アクティブ化の手順と ネクストエクスペリエンスの詳細については、「 Next Experience でのテーマの探索」を参照してください。

    モバイルアプリで利用可能なテーマ

    テーマは、UX テーマ [sys_ux_theme] テーブルのレコードによって定義されます。インスタンスには、モバイル UI で使用するための 3 つのベースシステムテーマ (Coral、Polaris、モバイルレガシー) が含まれています。
    図 : 1. テーマの遺産、ポラリス、サンゴの比較
    3つの画像を並べて、レガシー、ポラリス、コーラルというさまざまなテーマのルックアンドフィールの違いを示しています。
    注:
    • Zurich バージョン以降では、ネクストエクスペリエンスが有効になっているデフォルトのテーマは Coral です。
    • Utah から Yokohama バージョンの場合、Polaris はネクストエクスペリエンスが有効になっているデフォルトのテーマです。これらのオプションのいずれかを使用できます。
    • デフォルトのネクストエクスペリエンステーマとして Polaris を使用している Zurich にアップグレードする既存のお客様は、別のテーマが選択されていない限り、Polaris をモバイルテーマとして保持します。
    珊瑚
    Coral は、バージョン Zurich 以降でネクストエクスペリエンスが有効になっているインスタンスのデフォルトのテーマです。Zurichテーマにアップグレードしたお客様のテーマは、自動的に Coral にアップグレードされません。代わりに、手動でテーマを選択する必要があります。構成手順については、「 モバイルアプリビルダーでのネクストエクスペリエンステーマの割り当て」を参照してください。Coral テーマは、ユーザーエクスペリエンスを向上させるためにブランド中立のイラストを特徴とする新鮮なルックアンドフィールを提供します。
    [モバイルカラーのデフォルト] と呼ばれるコア UX スタイル [sys_ux_style] レコードは、Coral テーマに含まれています。このレコードは変更できませんが、ユーザーはこのレコードのコピーを作成するか、新しいテーマレコードを作成できます。新規またはコピーしたレコードの優先度を高くして、[ モバイルカラーのデフォルト ] レコードで指定された色を上書きします。
    Polaris
    Polaris は、Utah から Yokohama のバージョンで ネクストエクスペリエンス が有効になっているインスタンスのデフォルトテーマです。
    注:
    Zurichテーマにアップグレードするお客様の場合、Coralに手動でアップグレードしない限り、Polarisはネクストエクスペリエンステーマのままです。
    Mobile Colors Default と呼ばれる新しいコア UX スタイル [sys_ux_style] レコードが Polaris テーマに含まれています。このレコードは変更できませんが、ユーザーはこのレコードのコピーを作成するか、新しいテーマレコードを作成できます。新規またはコピーしたレコードの優先度を高くして、[ モバイルカラーのデフォルト ] レコードで指定された色を上書きします。
    モバイル レガシー
    モバイルレガシーは代替テーマです。Utah 以降にアップグレードされた、ネクストエクスペリエンスが有効になっていないインスタンスは、このテーマを使用します。

    Polaris または Coral テーマの下には、[ Mobile Colors Default] という名前の UX スタイル [sys_ux_style] レコードがあります。このレコードは、色変数名とそれらに関連付けられた色を定義します。

    テーマとスタイルを作成する

    インスタンスの UX テーマ [sys_ux_theme] テーブルに ネクストエクスペリエンス テーマを作成します。デフォルトでは、 ネクストエクスペリエンス が有効になっているインスタンスは Coral テーマを使用します。( Utah から Yokohama バージョンまで、デフォルトは Polaris テーマです)。ネクストエクスペリエンスが有効になっていないインスタンスは、モバイルレガシーテーマを使用します。これらのテーマは変更できませんが、いずれかをコピーしてそのコピーを変更できます。

    各 UX テーマレコードは、テーマをインスタンスに適用するときの UI の外観を定義する 1 つ以上の UX スタイル [sys_ux_style] レコードにリンクされています。テーマレコードと同様に、デフォルトのスタイルレコードは編集できませんが、コピーできます。

    ネクストエクスペリエンステーマの構成の詳細については、「Next Experience のテーマと設定の構成」を参照してください。

    重要:
    モバイルアプリでは、UX スタイルの色要素のみを使用します。フォント、シャドウ、不透明度、およびテーマ内のその他の色以外の要素などの要素は、モバイル UI の外観を変更しません。

    モバイルクライアントへのテーマのアサイン

    新しい [モバイルテーマ] フィールドを使用して、モバイルアプリビルダーでモバイルアプリのテーマを設定します。

    [モバイルテーマ] フィールドが空の場合
    インスタンスは、 ネクストエクスペリエンス が有効かどうかのステータスを確認し、モバイルアプリに使用する UX テーマ [sys_ux_theme] レコードを決定します。デフォルトでは、次のようになります。
    • Zurichバージョンでは、ネクストエクスペリエンスが有効になっている場合は、Coral テーマが使用されます。
    • UtahからYokohamaの場合、ネクストエクスペリエンスが有効になっている場合は、Polaris テーマが使用されます。
      注:
      ネクストエクスペリエンスを使用する場合は、モバイルアプリごとに異なるモバイルテーマを使用できます。
    • ネクストエクスペリエンスを無効にすると、モバイルレガシーテーマが使用されます。
    [クライアントのテーマ] フィールドが空でない場合
    モバイルアプリでは、常にフィールドで指定されたテーマを使用してモバイルアプリのテーマを設定します。

    カスタムモバイルコンポーネントで色変数を使用する

    一貫したユーザーエクスペリエンスを提供するために、モバイルコンポーネントを設計するときに色変数を使用します。次のコンポーネントは、色変数を利用します。
    • UI ルール
    • ナビゲーションセクション
    • マップのピン
    • アイコン
    • テンプレートを表示
    • モバイルビューボタン
    • 入力説明フィールド

    色変数の使用方法は、ビルドするコンポーネントによって異なります。これらの各コンポーネントにカラー変数を適用する方法については、「 モバイルのカラーテーマに関する考慮事項」を参照してください。