デザインスタイルガイドのすすめ

デザイナーの小池です。

WEBサイトを制作するとき、トンマナを定めるためにコンセプトシートを作成したり、 TOPページと下層ページを1・2ページ提示することがあるかと思います。
TOPページが決まるまで長ければ1〜2ヶ月かかってしまう場合もあり、
時間を置いていざ下層ページの制作に入るとき、

  • 「あれ?ここのスペース何ピクセルだっけ?」
  • 「書体は何だっけ?」
  • 「文字の色は#000000? #333333?どっち?」
  • 「下層ページは他の人にやってもらうから、共有しなくちゃ! でも自分でもよく覚えてない...」

といったように、自分が作ったデザインなのに把握できておらず困ることがあります。

そこでおすすめなのがこのデザインスタイルガイド。
簡単にいうと書体、ボタン、色など、各パーツごとにまとまっているガイドラインです。

メリット
  • 制作がスムーズ
  • デザインのブレがなくなる
  • 共有しやすい
  • デザインの価値が上がる
  • コーダーにも親切
デメリット
  • 特になし

後でやろうと思うと時間もかかるし面倒なので、デザインと同時にガイドラインを書いていくと全体的にまとまっていくと思います。

実際に作ってみます。

1.色

勢いで制作すると、「グレー何個あるの?」「この色とこの色一緒にできないの?」など自分でも説明できないことが出てきます。メインカラー、サブカラー、アクセントカラー、その他カラーをまとめておきましょう。カラーはスタイルガイドから取る、と意識しておくと全体の整合性が強まります。 ig_color.jpg 参照 : http://rizzo.lonelyplanet.com/styleguide/design-elements/colours

2.書体の種類とサイズ

文章はデバイスフォント、欧文はROBOTでh1のサイズは20pxで上下border付きなど各見出しを整理しておきましょう。 ig_font.jpg 参照 : https://dribbble.com/shots/1570099-Style-guide-typography-page/attachments/241293

3.使用アイコン

いろいろな形があるためばらつきやすいです。
一箇所にまとめておくとアイコンの雰囲気やバランス、サイズなどが確認しながら制作できます。 ig_icon.jpg 参照 : http://www.premiumpixels.com/freebies/80-mini-icons-psd-icon-font/

4.ボタン

意味的にサイズや形の違うボタンが何種類か存在するかと思います。
hover時のデザインもお忘れなく。 ig_button.jpg 参照 : http://designmodo.github.io/Flat-UI/

5.イメージ写真のサイズ

主にタイトル的に入る画像や文章中に入る挿絵や図表、写真のサイズをまとめていきます。 ig_image.jpg 参照 : http://makeawebsitehub.com/social-media-image-sizes-cheat-sheet/

その他、テーブルや、フォーム、スペースなど

まとめ

いろいろ細かく整理することはできると思いますが、わかりづらい箇所からまとめておけばいいと思います。
パーツをモジュール化することにより、デザインの見返しなどの煩わしい作業がなくなり、時間の短縮や整合性を保ったブレのないスマートな作業ができます。

スマホアプリ制作、Web制作、UIコンサルなどのご依頼はこちら

お問い合わせ