複数人でデザインするなら必須！誰にでもわかるデザインスタイルガイド作成のコツ

更新日: 2018年06月28日

SNSマーケティング

年を経るごとにWebサイトを作るのは複雑になっているので、ビジネス性が高くなればなるほど一人ではなく複数人で設計を行うのが一般的になっています。
デザインはビジネス上の目的を遂行するだけでなく、ユーザーにとって親みのあるエンゲージメントを築くためにも重要な役割を担っています。

その時に気をつけなければならないのは、チームで同じページを作成していてもそれぞれのメンバーはホームページの別々のパーツを作っているので、デザインドキュメントやWebデザインスタイルガイドを作成してデザインの方向性を決めておくことです。

どのページでも一貫したユーザー体験を作るためにはこうしたスタイルガイドを事前に作成すると便利です。
また、スタイルガイドを作成しておけば、将来サードパーティー製の製品ができた時にもブランドガイドラインを守りながら製品をリリースすることができ、ブランド全体のひとつのプロダクトとして認識してもらうことも可能です。

今回は、複数人でデザインするときに不可欠なデザインスタイルガイドの概要や作成手順についてご紹介します。

スタイルガイドとは？

スタイルガイドとは、別々のホームページのパーツでも一貫してデザインできるように、デザイナーやエンジニアが守るべきパーツのコンポーネントやデザインルールの総称です。

複数のデザイナーが巨大なWebサイトやアプリケーションを構築しているときには、解釈の誤差をできる限り小さくして、個人的な好みによってスタイルをいじらないようにするためにスタイルガイドは重要な役割を担います。
また、開発中には、Webサイト上で使用するパーツをあらかじめ定義しておくことで、開発者はパーツの再利用をしやすくなります。
さらに、どんなパーツをコーディングすべきかが事前に分かり、最初からどのように表示されるのかが正確にわかるので、開発スピードが格段に速くなります。

より簡単に素早く開発するのであれば、ホバーやクリック、訪問済みリンクやボタン、タイトルなど、可能な限りすべてのインタラクティブ要素を含めておくのが大切です。

優れたデザインスタイルガイドを作ろう

1. ブランドを定義しよう

まず最初に、デザインによってどのようなブランドを構築したいかを考えましょう。
ブランドの奥にあるストーリーを知り、チームを観察し、企業のビジョン、ミッション、バリューを理解しましょう。
これから作成するスタイルガイドが目に見える形でも見えない形でも企業文化を表現しているのを確認できるので、ブランドを深掘りするのは重要です。

コーディングができない場合は、Photoshopを開いてタイトルをつけ、ドキュメントの詳細とスタイルガイドの概要を入力してガイドを作成し始めましょう。
もちろんコーディングができる場合は、HTML文書を作成して再利用可能なアセットを作り始めることができますね。

2. タイポグラフィを定義しよう

タイポグラフィがWebデザインの95％を占めると断言するデザイナーがいるほど、Webデザインにおいてタイポグラフィは重要な要素です。
タイポグラフィがしっかりと定義されていれば、ユーザーとのコミュニケーションを取るための手段となるからです。

タイポグラフィを定義するときには、*ヒエラルキー(重要度の階層)*を設定することが大切です。
ヘッダーの種類だけをとっても、H1からH6まであります。
次に、本文や太字、斜字などのバリエーションも決めます。
また、リンクテキストや部分的に使うテキストパーツについても事前に決めておきましょう。

3. カラーパレットを定義しよう

ユーザーは色によってブランドを定義し、色によってブランドを連想します。
例えばコカコーラであれば赤、LOFTなら黄色、ポカリスエットなら青といった具合です。

通常、スタイルガイドではホームページで一番よく使われる色をプライマリーカラーとして設定します。
場合によっては、プライマリーカラーを引き立たせるためにUIの色を決めるのにセカンダリーカラーやターシャリーカラーを設定する場合もあります。
また、各ブランドカラーの邪魔にならないように、白や黒、グレーなどのニュートラルな色を使う場合もあります。

4. トンマナを定義しよう

トンマナとは*「トーン＆マナー」を意味するコピーライティング用語で、実際のコピーを書く時にどのようなスタンスで文章を書くか*を定義するものです。
スタイルガイドをブランドを規定するものと定義するならば、「どのように語りかけるか」もユーザー体験の中で大きな要素を占めるので、面白おかしく書くのか、真面目に書くのかをさまざま決めておきましょう。

5. アイコンを定義しよう

アイコンやピクトグラムは時に文字以上に意味を伝える役割があります。
アイコンを上手に活用することでホームページの来訪者に今何が起きているのか、次に何が起きるのかを即座に伝えることができます。
また、アイコンは年齢、性別などを問わず誰でも理解することができ、誤解を避けるためのツールとしても活躍します。
アイコンを利用する際は、一貫性のためにあらかじめどのアイコンを利用するかピックアップしておきましょう。

参考：
見ただけでわかる！おもしろピクトグラムを無料配布しているサイト13選