デザインパターン
デザインパターンの構成
デザインパターンは以下の項目で構成されています。
項目の表示順は以下の順序にしたがいますが、必須項目以外は、デザインパターンによって定義されている場合とされていない場合があります。
- タイトル(必須)
- 概要(必須)
- 用語定義
- 基本的な考え方
- 構成
- レイアウト
- 種類
- ライティングパターン
- {その他の基準}
- 関連リンク
- 参考文献
デザインパターンの読み方
まずは、概要と用語定義、基本的な考え方を読みましょう。基本的な考え方には、そのガイドを定義した前提となる考え方やスタンスが書かれています。
この上で、目的に応じて以下を読んでいくことを推奨します。
- デザインカンプの作成や実装をしたい場合は、構成とレイアウトを確認したうえで、配置やスタイリングをしてください。
- とりうるバリエーションの確認は、種類やライティングパターンに書かれています。
- 余裕があれば、関連リンクを読むことで、そのデザインパターンに関連する内容を参照できます。
項目の説明
書き方のテンプレートは「デザインパターンのテンプレート」から参照できます。
1. タイトル
デザインパターンの主題です。内容を端的に表現する名称を設定しています。
2. 概要
「主題とはなにか」を1〜2文で表した説明文です。
主題の役割やドキュメントの内容の要約を書いています。
3. 用語定義
タイトルが固有名詞である場合など、主題を説明するうえで前提となる用語の定義を書いている項目です。 内容が短い場合は、概要文に含まれることもあります。
4. 基本的な考え方
主題を定義するうえでの基本方針や原則を書いている項目です。
主に、表示やレイアウトの基準を定義している場合に使います。
また、アクセシビリティ
やライティング
の考え方を強調して言及する場合は、本項目の子セクションとして説明します。
5. 構成
主題を構成する要素の全体像と、それぞれの要素を説明します。
要素ごとに子セクションを分け、要素の役割や、要素のみに関する余白、種類、文言の基準や制約を定義している項目です。 要素に閉じない、主題全体に関わる内容は、後続のレイアウトや種類、ライティングパターンに書いています。
6. レイアウト
主題を配置する際の余白のとり方や配置の制約を説明します。
構成で定義した要素間の配置関係もここに含みます。
デザインカンプの作成や実装をしたい場合は、このレイアウトを元に配置やスタイリングをします。
7. 種類
主題全体のUIバリエーションを説明します。
種類やパターンごとに子セクションを分け、その種類になる条件や役割を定義している項目です。
主に、UIパターンを定義している場合に使いますが、表示やレイアウトの基準を定義している場合に、基準の種類を書くこともあります。
ライティングのみに関するバリエーションは、ライティングパターンで説明します。
8. ライティングパターン
ライティングガイドラインから抜粋した、主題の文言のパターン、バリエーションを掲載します。
9. {その他の基準}
基本的に3〜7項目に当てはめることを推奨しますが、これらに当てはまらない内容を説明する場合に使用する自由項目です。
10. 関連リンク
主題に関連する他のデザインパターン、コンポーネント等へのリンクです。
11. 参考文献
デザインパターンを書く際に参考にした、外部サイトのリンクです。