Constellationの既定のデザイン
Pega Constellationデザインシステムは、プリセットの設定による情報に基づいたデフォルトのデザインとテンプレートのセットである既定のデザインに従うことで、設計時間を短縮し、設計者がユーザーのニーズに焦点を当てたページやフローを作成できるように設定されています。既定のデザイン：
- 新しいユースケースが発見されたり規制されたりすると、時間の経過とともに反復されます
- パターンやコンポーネントのカスタマイズを排除しません
- 市場投入までの時間を短縮し、ユーザーニーズへの注力を強化します
既定のデザインにより、より大きな意思決定に集中できます
デザインには、問題を解決する多くの方法があります。モーダル内のNext ボタンの場所が一つの例です。ボタンを右下に置き、本のページを開く必要のある企業もあります。一部の企業は、それを下の中央に配置してより自然な読み取りフローを提供します。また別の企業は、重要な入力や情報がモーダルの一番上に表示される場合は、左揃えでボタンを配置します。これらのソリューションはすべて、一貫性と読みやすさを解消するために機能しますが、小さな意思決定では、チーム間の計画時間と実装リソースの両方を消費します。デザイナーに代わり、既定のデザインでこれらの問題の多くを解決します。より簡単に言うと、既定のデザインにより、モーダル内の実際の内容と、アプリケーションを通したユーザーのフローでモーダルが意味をなすタイミングに焦点を当てることができます。
次の図は、ユーザーのワークフロー中にモーダルがどのように表示されるかを示しています。
Pega Constellationデザインシステムにおける既定のデザインコンセプト
Constellationデザインシステムでは、さまざまなツールやコンセプトを既定として使用しています。アプリケーションデザイナーやデザイナーと緊密に連携する人は、デザイントークン、テーマ、パターン、コンポーネントという用語に精通している必要があります。
デザイントークン
デザイントークンは、複数のチャネルやテクノロジーにわたって重要なデザインとUXの原則を伝えるために使用されるツールです。トークンは、ウェブ、デスクトップ、モバイル、ツール、アプリケーション全体でスタイル要素を統一するために使用されます。Pega Platformアプリケーションはネイティブ要素とウェブデザイン要素が融合するため、Pega Platformアプリケーションではデザイントークンを使用することが重要です。
Constellationデザインシステムには、次の4種類のデザイントークンが含まれています。
| デザイントークンの種類 | 説明 | 例 |
|---|---|---|
| プリミティブ | 未加工のデザイン要素を表現する |
|
| ミーニングフル | 機能目的をプリミティブトークンに結びつける |
|
| コンポーネント共有 | コンポーネントトークンに依存し、コンポーネント間で共有できる繰り返されるコンポーネントパーツ。これらは多くの場合、プリミティブトークンとミーニングフルトークンの両方を使用します。 |
|
| コンポーネント固有 | すべてのコンポーネントには、そのコンポーネントに固有のトークンのセットがあり、間隔からレイアウトに至るまで、スタイル設定のすべての要素を定義します。これらは、プリミティブ、ミーニングフル、またはコンポーネント共有のトークンの組み合わせを使用できます。 |
|
一部のデザイントークンは、カスタムブランディングを可能にするために、アプリケーションをカスタマイズするときに編集できます。たとえば、base.palette.brand-primaryなどのミーニングフルトークンや既定のカラーファミリーなどの基本トークンの変更などです。
テーマ
テーマは、ブランド基準に従ってアプリケーションのスタイルを設定するために使用されるシンプルな設定です。
次の図は、テキスト、色、ボタンのブランディングを含むテーマの3つの例を示しています。
パターン
パターンは、反復と拡張が可能な、コンポーネントとユーザーフローの組み合わせで、一貫したエクスペリエンスを実現します。
次の図は、アプリケーションで再利用できるパターンの3つの例を示しています。
Constellationデザインシステムのパターンには、以下のようなものがあります。
- コンテンツを検索して選択するワークフロー（検索、選択、検索結果など）
- システムメッセージと応答（エラー通知、空の状態、ワーニングなど）
- メインナビゲーションとブレッドクラムによる情報の操作
- ワークステージの移動
コンポーネント
コンポーネントとは、特定の機能を実行するUI要素と組み合わせです。
次の図は、一般的なUI要素であるテキストフィールドを示しています。
ビジネス目標に焦点を当て、あらゆるコンテキストで完全に機能する可能性のある複雑なコンポーネントをウィジェットと呼んでいます。たとえば、ユーザーがアプリケーションに初めてログインしたときに受け取るメッセージを定義できる、ホームページウェルカムウィジェットがあります。
次の問題に答えて、理解度をチェックしましょう。
既定のエクスペリエンス
真のデザインシステムは、包括的で、簡単にアップグレードでき、既定のエクスペリエンスを生み出します。デザインパターン、UIコンポーネント、技術的な動作、視覚的な取り扱いが相互に補完し、特定の方法で使用して一般的なビジネス問題を解決し、ユーザーのスピードとワークフローを改善し、アクセシビリティやローカリゼーションなどの法的要件を満たします。
ただし、これはデザインシステムに柔軟性や創造性がないことを意味するものではありません。配置、コンテンツの表示、実行する作業の流れ、アプリケーションのブランディングに関する多くの最終的な意思決定は、システム上で作業するデザイナーが決めることができます。デザイナーとしてアイデアを整理し、フローを最適化し、ユーザーが目標を達成し、ビジネスのニーズに応えるという、真に重要なことに集中することができます。
スタイルガイドとパターンライブラリは、デザインシステムのコンポーネントです。 次の図は、デザインシステムのさまざまな部分の関係を示しています。
スタイルガイドはブランドに固有で厳密に規定されており、UIの表示のみを対象とし、スタイルに重点を置いています。パターンライブラリは、アプローチが非常に多様で規定されておらず、スタイルに依存せず、ニーズに重点を置いています。デザインシステムは、自動アップグレード、規定のデザイン、規制への準拠を特徴とし、技術に依存せず、ニーズとスタイルに重点を置いています。
以下のインタラクションで理解度をチェックしてください。
このトピックは、下記のモジュールにも含まれています。
トレーニングを実施中に問題が発生した場合は、Pega Academy Support FAQsをご確認ください。