UI Builder ページの表示スタイルの管理

テーマを使用すると、エクスペリエンスの視覚的なスタイルを変更し、ブランドのルックアンドフィールを表現できます。

注:

テーマは、CSM の構成可能ワークスペースおよび App Engine Studio の ワークスペース とポータルのエクスペリエンスのみに適用できます。モバイルアプリのテーマを作成するには、「Legacy mobile theming」を参照してください。

テーマの開始

エクスペリエンスに適用するテーマを作成する前に、ユーザーが操作するすべてのエクスペリエンスのテーマ作成計画を作成します。テーマ作成計画では、次の質問を考慮することができます。

• ユーザーはどのような種類のエクスペリエンスを操作しますか？
• これらのエクスペリエンスの表示スタイルにはどのような類似点や相違点があるべきですか？

たとえば、すべてのエクスペリエンスを通じて単一のルックアンドフィールを表す 1 つのテーマを作成する場合は、メインテーマのみを作成することができます。ただし、全体的なブランドスタイルに基づく複数のブランディングバリエーションが必要な場合は、メインテーマを作成し、そのテーマを拡張してテーマのバリエーションを作成できます。

メインテーマの作成

メインテーマは、組織のブランドの全体的なルックアンドフィールを表します。メインテーマを作成するときは、次の点を考慮してください。

• 次のタイプの要素について、ユーザーに表示するブランド色はどれですか？
  1. プライマリ、または最も重要なアクション。
  2. セカンダリ、または補足アクション。

ブランド色を選択したら、テーマの次の Next Experience CSS カスタムプロパティに色値を RGB トリプレットとしてアサインすることができます。

表 : 1. テーマの Next Experience CSS カスタムプロパティ

CSS カスタムプロパティ	アサインする RGB 色値
--now-color_brand--primary	プライマリブランド色。 注: この色は明るい背景に頻繁に表示されるため、彩度の高いより暗い色が最適です。暗い背景は現在サポートされていません。
--now-color--primary-1	前記と同じです。プライマリブランド色。 注: この色は明るい背景に頻繁に表示されるため、彩度の高いより暗い色が最適です。暗い背景は現在サポートされていません。
--now-color--primary-0	プライマリブランド色のやや明るいバリエーション。
--now-color--primary-2	プライマリブランド色のやや暗いバリエーション。
--now-color--primary-3	プライマリブランド色の最も暗いバリエーション。
--now-color_brand--secondary	セカンダリブランド色。
--now-color--secondary-1	前記と同じです。セカンダリブランド色。
--now-color--secondary-0	セカンダリブランド色のやや明るいバリエーション。
--now-color--secondary-2	セカンダリブランド色のやや暗いバリエーション。
--now-color--secondary-3	セカンダリブランド色の最も暗いバリエーション。

これらの CSS カスタムプロパティは、テーマ [sys_ux_theme] レコードで「UI ビルダー でのカスタムテーマの作成 (高度な機能)」の手順を実行するために使用できます。

注:

インスタンスで、すべてのエクスペリエンスにメインテーマが自動的に適用されるわけではありません。メインテーマをエクスペリエンスに適用する方法の詳細については、「エクスペリエンスへのテーマの適用」を参照してください。

次の画像は、ワークスペース およびポータルで Next Experience CSS カスタムプロパティが表示される場所を示しています。テーマで使用する CSS カスタムプロパティを決定するときは、これらの画像を参照してください。

図 : 1. ワークスペース エクスペリエンスで CSS カスタムプロパティが表示される場所

図 : 2. ポータルエクスペリエンスで CSS カスタムプロパティが表示される場所

メインテーマのバリエーションの作成

ユーザー向けに構築しているエクスペリエンスのタイプに応じて、メインテーマのバリエーションを作成できます。メインテーマのバリエーションを作成してエクスペリエンスに適用する場合は、次の質問を考慮してください。

• このエクスペリエンスでユーザーが持っているロールは何ですか？
• このエクスペリエンスでユーザーが最も重視しているタスクはどれですか？
• このエクスペリエンスで作業するときに、ユーザーはどのように感じるでしょうか？

チームにこれらの質問を問いかけることで、メインテーマのバリエーションを作成するアプローチをよりよく理解できます。たとえば、ワークスペース でアクションを完了するための厳格なサービスレベルアグリーメント (SLA) を持つ履行者向けのテーマのバリエーションを作成しているとします。このような場合は、すべてのボタンテキストを大文字に変換して、ワークスペース のプライマリアクションとセカンダリアクションにさらに注意を喚起することを検討すべきです。

メインテーマとその 2 つのバリエーションをスタイル設定する方法の例を次に示します。

図 : 3. メインのワークスペーステーマ

注:

インスタンスでは、エクスペリエンスにメインテーマとテーマのバリエーションが自動的に適用されるわけではありません。メインテーマとそのバリエーションの作成のステップ実行例については、「UI ビルダー のテーマの拡張」を参照してください。

CSS エディターのテーマ変数

[sys_ux_theme] テーブルでテーマ変数を定義している場合は、それらを UI ビルダー スタイル CSS エディターで直接使用してページにスタイリングを追加できます。

UI ビルダー は、テーマで定義したテーマ変数と、CSS 構成を入力する CSS プロパティと値をインテリジェントに予測または提案します。

[開く] アイコン () を使用して、モーダルで CSS スタイルエディターを展開します。展開されたモーダルには検索オプションがあり、より広い作業スペースで変数を完全に表示できます。展開されたエディターには 2 つのタブも表示されます。[エディター] タブには、CSS コードの完全なビューが表示されます。[変数] タブには、ユーザーのテーマによって定義された変数が表示されます。

図 : 4. スタイルの編集

テーマプレビューテンプレート

UI ビルダー ページを作成し、[テーマプレビュー] ページテンプレートを適用して、適用されたテーマがページでどのように表示されるかを確認します。

図 : 5. テーマプレビューテンプレート

[テーマプレビュー] ページには、テーマが適用されたときに共通のコンポーネントがどのように表示されるかが示されます。たとえば、定義したテーマに応じて、[テーマプレビュー] ページは次のように表示されます。

図 : 6. [テーマプレビュー] ページ

• エクスペリエンスへのテーマの適用
  テーマを適用してエクスペリエンスの表示スタイルを変更し、すべてのページで一貫したルックアンドフィールを提供します。