SEO対策なら株式会社ペコプラ > Webサイト制作 > Webデザイン > デザインガイドラインを作ろう！

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

Webサイト制作

Webデザイン

2019.02.24

こんにちは！みなさんはデザインガイドラインを作った事はありますか？
今回はデザインガイドを初めて作らなければいけない方向けに、デザインガイドラインのメリットや参考例、作り方などについてまとめていきたいと思います。

1 デザインガイドラインとは
2 デザインガイドラインを作るメリット
- 2.1 見た目の印象に統一感をもたせられる
- 2.2 サイトの運用、管理がしやすくなる
3 デザインガイドラインの項目
- 3.1 世の中のデザインガイドラインを見てみる
4 まずはここから！おすすめのテンプレート
- 4.1 Style Guide Template in CSS
- 4.2 Stylify Me
5 最後に

デザインガイドラインとは

デザインガイドラインとは、全体を通して一貫性のあるデザインを作成するために、様々なデザイン要素の指針などを定めたものです。

WEBサイト制作におけるデザインガイドラインは、静的なビジュアル面はもちろん、アニメーションやUIといった動作の指示も含まれる事が多いです。

また、デザインガイドラインは初めに作成して完成というものではなく、サイトを運営する中で追記したり変更したりもします。

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

デザインガイドラインを作るのはひと手間ふた手間で、なかなか後回しにしたりついつい作成しないという事もあるかもしれませんが、メリットはたくさんあります。

デザインガイドラインを作るメリットは大きくは2つあります。

見た目の印象に統一感をもたせられる。
サイトの運用、管理がしやすくなる

見た目の印象に統一感をもたせられる

１人でデザインしていても進めるうちに方向がズレたりする経験はありませんか？それがチームや社外の人間が入ってくるともっととっ散らかることは目に見えています。
デザインガイドラインがあれば、制作関係者全員がノウハウや根本的な考え方を共有しながら一貫性が損なわれない、見た目も統一感のある成果物を作る事ができます。

サイトの運用、管理がしやすくなる

WEBサイトというものは公開して終わりと言う事は滅多にありません。公開後もバナーの追加やデザインの改修、アップデートなど様々な作業が発生します。そんなときにデザインガイドラインは辞書のようなメモのようなそんな役割を果たします！
長期的に運用が必要なケース程、その効果を発揮します。

デザインガイドラインの項目

それでは実際デザインガイドラインに記載する項目はどのようなものあるでしょうか。
下記にまとめました。

カラー: 背景色; メインカラー; サブカラー; アクセントカラー
フォント: 色; 書体; サイズ
見出し: h1〜
ボタン: デフォルト; 主ボタン
リスト: ul; ol
その他: アイコン; フォーム; テーブル; 余白の取り方; 禁止事項; 指針など

カラーや、ボタンといったパーツなどWEB制作における基本的な要素に加えて、禁止事項や指針などを記す事もあります。

世の中のデザインガイドラインを見てみる

ここで大手雑貨店のFrancfrancがオンラインで公開しているデザインガイドラインを見てみましょう。

Francfranc Brand Identity Guidelines

ここではガイドラインの採用について、

デザイン開発におけるコミュニケーションコストを抑えながら、品質やブランド価値を高めるという目的で作成されています。デザインガイドラインはすべての関係者が参照し、従うべき方針を述べています。

と書かれています。

他ページにおいても、カラーが何色だとか、フォントサイズがいくつだとかいう数値的な指定が記されているわけではありません。

▼レイアウトについて

[ブランドの魅力を損なうことなく、情報を伝える]
「Communication（コミュニケーション）」デザインフォーマットにおいて写真にテキストを使用し、ブランドや商品の訴求をする際には「構図」や「余白」を意識して見やすく読みやすいレイアウトを心がけてください。
テキストにむやみにシャドーをつけて写真に配置することは、ビジュアルコミュニケーション及びテキストコンテンツにおける視認性の弊害となりますので避けてください。Francfranc Brand Identity Guidelines レイアウトについて

▼色の使い方に関してもある程度制作側に解釈の幅を持たせている

金色・銀色のカラーマネジメントについては、背景色（その環境のベースとなる色※）やトレンドについても考慮をし、Francfrancのブランドイメージにふさわしいかをデザインディレクターやデザイナーは常にチェックしてください。統一感のない金銀が一紙面に入り乱れたり、軽薄な表現にならないように留意してください。Francfranc Brand Identity Guidelines Color palette ( gold and silver )

あくまでブランドポリシーだけを記し、色や余白の取り方などといったところは製作者側に任せるといった、一見自由度の高いデザインガイドラインです。ただその分ブランドとは何かといった部分をしっかり理解し、デザインをしなければいけないというクオリティーと責任感を求められていますね。

デザインガイドラインにはこれと言ったテンプレートはありません。
プロジェクトのメンバー、内容、社外向けなのか社内向けなのかなど、案件によって適切なデザインガイドラインを作成していきましょう。

まずはここから！おすすめのテンプレート

とはいえ、ゼロから作成するよりは、便利なテンプレートやサービスを使う方が効率的です。
デザインガイドラインを作成する為のpsdや、html、オンラインサービスはいくつかありますが、個人的にはhtmlファイルで作成するのがオススメします。
動作面も実装出来ることや、様々なデバイスで確認が出来るので、psdデータなどよりも直感的なデザインガイドラインにする事が可能だからです。