デザインガイドラインを作ろう

皆さんは、ホームページ制作における「デザインガイドライン」というものをご存知でしょうか。デザインガイドラインとは、ホームページのデザインで守るべき規則やルールを定めた指針のことです。

デザインガイドラインを作成しておくことで、デザインの品質やユーザビリティが担保でき、ホームページの運用管理もしやすくなります。ゆえに、デザインガイドラインの作成は非常に重要です。

しかし、「デザインガイドラインって何？」「どのように作ればいいの？」という方も多いでしょう。そこで今回は、デザインガイドラインの基礎知識について、分かりやすく解説していきます。作成時のポイントや具体例なども紹介するので、ぜひ参考にしてみてください。

ホームページにおけるデザインガイドラインとは

まずは、ホームページにおける「デザインガイドライン」とは何か、簡単に解説します。

上述の通り、デザインガイドラインとは、ホームページのデザインで守るべき規則やルールを定めた指針のこと。色・文字・レイアウトなど様々なデザイン要素について約束事を決め、文書などにまとめ、共有できる状態にします。スタイルガイド・デザイン指示書・実装指示書などと呼ばれることもあります。

デザインガイドラインは、ホームページを作る前に作成して終わり、というものではありません。ホームページを運営管理していく中で、追記を行ったり変更を加えたりしながら、長期的に活用していくものです。

デザインガイドラインを作成するメリット

デザインガイドラインを作らなくても、ホームページ制作を行うことは可能です。しかし、デザインガイドラインを作成しておけば、様々なメリットを享受することができます。

以下では、デザインガイドラインを作成する主なメリットについて解説します。具体的には、次の3つです。

• 見た目に統一感を持たせることができ、デザインの品質が保てる
• ホームページの運用がしやすくなる
• ユーザビリティが担保できる

見た目に統一感を持たせることができ、デザインの品質が保てる

ホームページの制作関係者が多ければ多いほど、描いているイメージがそれぞれ微妙に違っていたり、どこかでデザインの共有ミスが生じてしまったりする可能性が高くなります。規則やルールが曖昧なまま制作を進めた場合、デザインの品質は落ちてしまうでしょう。

しかし、デザインガイドラインを作っておけば、デザインの方向性や細かい仕様などを、制作関係者全員で正しく共有することができます。ゆえに、デザインの品質は保たれ、統一感のあるホームページを作成できます。

ホームページの運用がしやすくなる

基本的に、ホームページは公開して終わりではありません。公開した後も、デザインの変更やアップデートを繰り返していきます。その際、デザインガイドラインがあれば、どの部分をどのような基準で改修するべきなのかを考えやすくなります。

また、ホームページ管理の担当者が変更になるケースもあるでしょう。デザインガイドラインを作成しておけば、新しい担当者は、そこに書いてあるルールや規則を把握した上で、スムーズにホームページの運用を引き継ぐことができます。

ユーザビリティが担保できる

上記の通り、デザインガイドラインを作成することによって、デザインの品質は保たれ、統一感のあるホームページを作成することができます。そのため、見やすくて分かりやすいUIを実現でき、ホームページの操作性も向上します。

ホームページの使い勝手が悪ければ、Webマーケティングは成功しません。「ユーザビリティを担保できる」という意味でも、デザインガイドラインの作成は必要不可欠だと言えるでしょう。

デザインガイドライン作成のポイント

デザインガイドラインを作成する際は、以下の3つのポイントを意識してみてください。

• クライアントの課題の解決につながるよう作成する
• ガイドラインに落とし込むレベル（細かさ）を決める
• ガイドラインの利用者を想定して作成する

それぞれ簡単に解説していきます。

クライアントの課題の解決につながるよう作成する

デザイン作成では、クライアントが抱えている課題を解決することを第一に考えます。そのため、クライアントの課題によって、デザインガイドラインの内容も大きく変化します。

クライアントの悩みを丁寧に聞き出した上で、全体のコンセプトや細かいデザイン設計などを考えるようにしましょう。

ガイドラインに落とし込むレベル（細かさ）を決める

ガイドラインに落とし込むレベルを決めることも大切です。例えば、ルールや規則を細かく設定しておけば、デザイン制作に慣れていない人が担当になっても、安定した運用管理が可能になるでしょう。

一方で、経験豊富な担当者しかいないのであれば、細かいルールや規則を設定する必要はありません。むしろ、ガイドラインに幅をもたせ、柔軟に対応してもらった方が良い場合もあるでしょう。

ガイドラインの利用者を想定して作成する

ガイドラインを利用するのが自社の担当者だけとは限りません。別部署の人がチェックすることもあれば、外注先のデザイナーが見ることもあるでしょう。誰がどのように利用するのかを想定しながら、ガイドラインを作成してみてください。

デザインガイドラインに記す情報の例

最後に、デザインガイドラインに記載する情報の具体例を紹介します。

ガイドラインには、以下のような項目を記載するのが一般的です。

• デザインコンセプト
• トーン＆マナー（デザインの方向性、画像・文章のテイストなど）
• カラー（配色、主要カラーコードなど）
• フォント（主要フォントファミリー、主要フォントサイズ、PC版とSP版の違いなど）
• レイアウト（基本余白、ヘッダー、フッター、PC版とSP版の違いなど）
• コンポーネント(アイコン、ボタン、スライダー、タブ、SNSシェアボタンなど)
• グラフィック（商品イメージビジュアル、バナーなど）

デザインガイドラインの作成に慣れていない方は、まずは上記の項目について考えてみましょう。

まとめ

デザインガイドラインの基礎知識について簡単に解説しました。
デザインに一貫性を持たせ、質の高いホームページを作るためには、ガイドラインを作成しておくのが効果的です。

当記事を参考にしながら、ぜひデザインガイドラインを作成してみてください。