Design System オブジェクトについて説明するにあたり、旅行代理店の
顧客向けアプリケーションを開発する場合を考えます。
まず、デザインチームと協力して、アプリケーションの最初の 3 画面を作成します。
デザイナーは、Web アプリケーション向けに次のデスクトップサイズの画面を提示しました:
1. ホームページ
2. 観光名所のページ: メニューで [ Home ] をクリックするか、ホームページの 4 つの画像から対応する画像 (観光名所の画像) を選択したときに表示されます。
3. ViewAttraction ページ: 観光名所の詳細情報を表示します。観光名所のページで観光名所をクリックすると表示されます。
この 3 つの画面を比較すると、見た目や機能に一定のパターンが認められ、
デザインシステムが存在することが容易に見て取れます。
これらの画面ですぐに特定できるパターンには、次のものがあります:
● ヘッダーとフッターが繰り返されている。
● ヘッダー: すべてのページのトップに、画面の幅全体を占め、高さが同じメイン画像 (
ヒーローイメージ) があり、その上にページで重要なテキストと Chatbot を開くためのアイコンが表示される。
● ヒーローイメージ上のテキストは、まったく同じスタイルが適用されている (色、フォント、位置など)。
● その他のタイプのテキストもスタイルが統一されている (ヒーローイメージの左下に表示されるタイトル、ヒーローイメージの右下のコンテンツテキストなど)。
これらをはじめとする多くの概念化により、ソリューションのデザインとメンテナンスが簡素化されます。
効率、効果、俊敏性と保守性に優れたソリューションにつながるのは、できる限りコンポーネント化を進め、同じ定義を再利用できるよう抽象化を行うことです。これは、画面のデザインと実装の両方に当てはまります。
次に、ヘッダーに注目して、こうした概念の実践例を簡単なレベルから理解していきます。
GeneXus 17 Upgrade 6 以降。