設計ガイドの読み方

設計ガイドの推奨の読み方と、典型的な項目を説明しています。

構成

設計ガイドは以下の項目で構成されています。

項目の表示順は以下の順序にしたがいますが、必須項目以外は、設計ガイドによって定義されている場合とされていない場合があります。

  1. タイトル(必須)
  2. 概要(必須)
  3. 基本的な考え方
  4. 構成
  5. レイアウト
  6. 種類
  7. ライティングパターン
  8. {その他のルール}
  9. 関連リンク
  10. 参考文献

設計ガイドの読み方

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

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

  • デザインカンプの作成や実装をしたい場合は、構成レイアウトを確認したうえで、配置やスタイリングをしてください。
  • とりうるバリエーションの確認は、種類ライティングパターンに書かれています。
  • 余裕があれば、関連リンクを読むことで、その設計ガイドに関連する内容を参照できます。

項目の説明

書き方のテンプレートは「設計ガイドのテンプレート」から参照できます。

1. タイトル

設計ガイドの主題です。内容を端的に表現する名称を設定しています。

2. 概要

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

3. 基本的な考え方

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

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

4. 構成

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

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

5. レイアウト

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

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

6. 種類

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

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

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

7. ライティングパターン

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

8. {その他のルール}

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

9. 関連リンク

主題に関連する他の設計ガイド、コンポーネント等へのリンクです。

10. 参考文献

設計ガイドを書く際に参考にした、外部サイトのリンクです。

© 2021, SmartHR, Inc.