運用しやすいデザインガイドラインの作り方

デザインガイドラインは、デザインの品質やユーザビリティを高めるだけでなく、制作の効率化にも役立ちます。
しかし、実際には、ガイドラインに従って細かいページまでデザインするのは大変な作業です。
今回の記事では、運用しやすいガイドラインについて検討した事を紹介したいと思います。

また、この記事では、デザイン制作ツール上のロゴ、色、フォント等を含むデザイン上のコンポーネント一覧を、デザインガイドラインとして記載しています。

デザインガイドラインを3つのレベルに分ける

私が提案するのは、デザインガイドラインを3つのレベルに分ける方法です。
それぞれのレベルは以下のようになります。

• 基本デザイン

• リッチデザイン

• カテゴリ別デザイン

それぞれのレベルについて詳しく見ていきましょう。

基本デザイン

基本デザインとは、シンプルなデザインで、利用規約やプライバシーポリシーなどのページが作れるようなものです。 ヘッダーやフッター、見出しや段落、表などの基本的なHTML要素と、リンク先ごとのアイコンが対象です。 基本デザインは、原則として変更や追加をしません。 基本デザインがあれば、どんなページでも最低限の品質を保つことができます。

リッチデザイン

リッチデザインとは、キャンペーンや告知などで使用するデザインで、目立たせたい要素を強調するものです。 大きな見出しやカスタムした表、大きなボタンなどが対象です。 新しいデザインを作るときはこのリッチデザインに入れます。 リッチデザインは基本デザインと比べて変更や追加が多くなりますが、それによって基本デザインが崩れることを防ぎます。

カテゴリ別デザイン

カテゴリ別デザインとは、グローバルメニューやディレクトリ構造に沿ったページで使うデザインです。 カテゴリ別に用意しておき、それぞれ独自のデザインを入れます。 カテゴリ別デザインは他のカテゴリとの整合性を気にしなくても良いものとします。 そうすることで参照すべきデザインが少なくなり、把握しやすくなります。 ランディングページなどの独自性が高いページもこのカテゴリ別デザインで対応できます。

デザインガイドラインの運用コスト

デザインガイドラインを参照して新しいページを作成するときは、既存のデザインパーツが使えるかどうかを調べる必要があります。 しかし、似たようなデザインパーツが多く並んでいると、違いを理解するのに時間がかかります。 また、自分で作成したパーツでも、適切な場所に追加するためには再度調べる必要があります。 これらの作業は、運用コストとして発生します。

しかし、デザインガイドラインを3つのレベルに分けることで、運用コストを減らすことができます。

• デザイナーは基本デザインとリッチデザイン、対応するカテゴリのデザインを押さえておけば良いので全てのパーツを確認する必要はありません。

• デザイン追加の際は、リッチデザインか、カテゴリデザインに入るので、基本デザインが崩れる心配がありません。

• 全部のルールを確認する必要がない為、開発スピードは上がります。

• ヘルプメンバーなどルール全体を把握していないスタッフが参加しやすくなります。

もちろん、カテゴリ別で同様のデザインが作成される可能性はありますが、その部分は許容するという緩いルールを設けることで、デザインガイドラインが正常に運用されている状態を保つことができます。

以上、運用しやすいデザインガイドラインについて検討した事をご紹介しました。
この方法が参考になれば幸いです。