デザインパターン（共通）

構成

デザインパターンは以下の項目で構成されています。

項目の表示順は以下の順序にしたがいますが、必須項目以外は、デザインパターンによって定義されている場合とされていない場合があります。

まずは、概要と基本的な考え方を読みましょう。基本的な考え方には、そのガイドを定義した前提となる考え方やスタンスが書かれています。

この上で、目的に応じて以下を読んでいくことを推奨します。

書き方のテンプレートは「デザインパターンのテンプレート」から参照できます。

デザインパターンの主題です。内容を端的に表現する名称を設定しています。

「主題とはなにか」を1〜2文で表した説明文です。
主題の役割やドキュメントの内容の要約を書いています。

主題を定義するうえでの基本方針や原則を書いている項目です。
主に、表示ルールやレイアウトルールを定義している場合に使います。

また、アクセシビリティやライティングの考え方を強調して言及する場合は、本項目の子セクションとして説明します。

主題を構成する要素の全体像と、それぞれの要素を説明します。

要素ごとに子セクションを分け、要素の役割や、要素のみに関する余白、種類、文言のルールや制約を定義している項目です。要素に閉じない、主題全体に関わる内容は、後続のレイアウトや種類、ライティングパターンに書いています。

主題を配置する際の余白のとり方や配置の制約を説明します。
構成で定義した要素間の配置関係もここに含みます。

デザインカンプの作成や実装をしたい場合は、このレイアウトを元に配置やスタイリングをします。

主題全体のUIバリエーションを説明します。
種類やパターンごとに子セクションを分け、その種類になる条件や役割を定義している項目です。

主に、UIパターンを定義している場合に使いますが、表示ルールやレイアウトルールを定義している場合に、ルールの種類を書くこともあります。

ライティングのみに関するバリエーションは、ライティングパターンで説明します。

ライティングガイドラインから抜粋した、主題の文言のパターン、バリエーションを掲載します。

基本的に3〜7項目に当てはめることを推奨しますが、これらに当てはまらない内容を説明する場合に使用する自由項目です。

主題に関連する他のデザインパターン、コンポーネント等へのリンクです。

デザインパターンを書く際に参考にした、外部サイトのリンクです。