Constellationアプリケーションのテーマとスタイル
ブランドガイドラインに従うことは、どの組織にとっても重要です。App Studioを使用すると、開発者はConstellationデザインシステムの色、フォントスタイル、その他のスタイル要素を組織のブランディングに合わせて簡単に適用できます。
App Studioでテーマを設定するには、ナビゲーションペインで「Settings > Themes」をクリックします。 新しいアプリケーションに提供されるデフォルトのテーマを変更するか、「Add」をクリックして独自のカスタマイズされたテーマを作成します。
アクセシビリティは高品質なアプリにも不可欠であり、App Studioのテーマランディングページでは、Webコンテンツアクセシビリティガイドライン（WCAG）のガイドラインに準拠していない色の組み合わせにフラグを設定するなど、アクセシビリティ要件を満たすために必要な構成を開発者に提供します。
次の画像は、テーマ設定のアクセシビリティ要件が満たされていない場合に表示されるメッセージを示しています。
補足： アプリケーションのテーマの構成の詳細については、「テーマの定義」を参照してください。
Center of Excellenceレイヤー
Center of Excellence（COE）レイヤーを使用してデザインシステムを実装します。COEレイヤーからUI要素を継承すると、製品の保守性が向上し、特定のUI要素の更新が容易になります。ベストプラクティスとして、すぐに使用できるコンポーネントを使用し、カスタマイズを減らして、再利用可能なコンポーネントを含むCOEレイヤーを作成します。COEレイヤーでは、テーマ、Webフォント、アイコン、デザインテンプレートなど、デザインシステムのすべての要素を実装できます。
デザインシステムの深さに応じて、デフォルトのCOEレイヤーを使用するか、独自のレイヤーを構築するかを決定できます。
COEレベルでブランディングとテーマを定義し、アプリケーションポートフォリオ内の複数のアプリケーション間で共有します。
ヒント： 従来のUIのスキンとは異なり、テーマは継承をサポートしていません。テーマを使用して、複数のアプリケーション間で共有される高レベルのデザイントークンのセットを定義するのがベストプラクティスです。テーマを特定のアプリケーション向けに特殊化する必要がある場合は、COEレイヤーテーマのコピーを保存し、上位のルールセットに更新します。
次の図は、システム間でのCOEレイヤーの使用例を示しています。各プロジェクトでは、COEレイヤーからの事前定義されたコンポーネントを再利用します。これらのコンポーネントは、異なるチャネル間で使用できます。
デザイントークン
プラットフォーム間でのアプリケーションの一貫性は非常に重要です。たとえば、モバイルのプライマリーボタンのスタイルは、デスクトップのプライマリーボタンのスタイルと一致する必要があります。プラットフォーム間で一貫性を実現するために、高品質のデザインシステムでは、多くの場合、デザイントークンを使用します。これは、コンポーネントのスタイル設定の側面を1か所に設計して保存し、システムがプラットフォーム固有のスタイル設定を自動的に生成できるようにする戦略です。Constellationライブラリのコンポーネントは、すべてデザイントークンを使用します。
高度なユースケースや特定のConstellationコンポーネントのより詳細なスタイル設定のために、開発者は各コンポーネントのデザイントークンのデフォルト値を変更できます。
補足： デザイントークンの詳細については、「デザイントークン」を参照してください。
以下のインタラクションで理解度をチェックしてください。
このトピックは、下記のモジュールにも含まれています。
トレーニングを実施中に問題が発生した場合は、Pega Academy Support FAQsをご確認ください。