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

WEB制作・開発実例・コラム
2019.02.24
2019.02.28

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

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

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

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

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

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

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

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

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

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

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

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

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データなどよりも直感的なデザインガイドラインにする事が可能だからです。

Style Guide Template in CSS

Style Guide Template in CSSは、HTML/CSSのテンプレートです。シンプルに最低限の要素のみで構成されているため、手軽に使えます。まずはこのテンプレートで作成してみて、目的やプロジェクトによってアレンジしていくのも良いと思います。

Stylify Me

Stylify Meでは、URLを入力するだけでガイドラインを自動生成してくれます。
項目は少なく、カラーとフォントの種類、画像の解像度だけなので、ガイドラインを作る為の素材としてや、デザインのチェックなどに使えそうです。

最後に

いかがでしたでしょうか。デザインガイドラインとはどのようなものか、メリットや参考例、テンプレートのご紹介をさせていただきました。

個人的には、デザインにおける一貫性がいかに大事かと言う事を最近はよく感じています。。適切なデザインガイドラインを作成し、大きな意味で”良いデザイン”をしていけるようになりたいと思います。それでは!

コラム

最新コラム

人気コラム

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)