問題解決のためのスタイルガイド入門

人によってスタイルガイドという言葉から受ける印象は様々です。スタイルガイドで解決しなければならない課題は何かを明確にすることで、デザイナーと開発者がより密接にスタイルガイド開発に取り組むことができるようになります。

定義が広いスタイルガイド

フロントエンド開発者からスタイルガイドという言葉を耳にするようになりました。効率的、かつ一貫性のある見た目とコードをつくるための共有ツールとして、スタイルガイドが使われることがあります。一見、目新しくみえるスタイルガイドですが、最近生まれた新しいアイデアではありません。ロゴやコーポレートカラーの使い方を記したスタイルガイドは昔からありますし、ライターにもスタイルガイドがあります。

このように、開発者も、デザイナーも、ライターも同じように「スタイルガイド」という言葉を使っています。人によって、その言葉から受ける印象も異なれば、必要としている要素も異なります。YUI 並の UI アセット をスタイルガイドに含めることを期待している人もいます。アプリや Web サイト開発におけるスタイルガイドを作る際に難しいのは、何で作って管理するかではなく、どの範囲をスタイルガイドとしてまとめるかです。

一緒につくるスタイルガイド

Webサイト向けのスタイルガイドに含める要素は、案件によって変えるようにしています。Style Guide Boilerplate を基に HTML 要素を網羅しておくことは、どの案件でも最低限必要になりますが、それ以外は以下の条件を見ながら変えるようにしています。

ブランドガイドラインがあるかどうか
ロゴ、色、タイポグラフィなど明確なガイドラインが社内で共有されているかどうか。大企業なら当然ありますが、規模が小さい会社だとロゴに関わる情報しかない場合があります。また、Web での扱い方まで考慮されていないこともあります。
現行 Web サイトに課題があるかどうか
UI の細かい装飾や、色の使い方に一貫性がない場合があります。課題が明確にあるところは、具体性の高い UI キットを用意するようにしています。
社内にデザイナーがいるかどうか
外注ばかりできませんし、好きなようにデザインされると統制がきかなくなります。即座に社内でサイトの更新や改善をするために十分な道具を提供する必要があります。

スタイルガイドで補助する範囲が決まったら、私が作るか、デザイナーもしくは開発者が作ることになります。分業をしていて、コードはデザイナーが担当しない場合もありますが、以下のようなアドバイスをして作ってもらうようにしています。

  • スタイルガイドは『規則』ではなく『作る為の基準』であること
  • スタイルガイドの構成が分かるドキュメンテーションも作ること
  • 幅はレイアウト要素に依存させ、部品ひとつひとつは基本可変であること
  • サイトで表現したい雰囲気を、レイアウトではなく、部品で表現すること
  • 可能な限り、CSS をつかえば作れる見た目にすること
  • 普遍的なルールではく、常に変わり続けることを想定する
ライティングガイドラインフロントエンドとは別に、ライティング用の簡易ガイドラインをまとめることもあります。

最後に、様々な企業の Web サイト向けスタイルガイドを紹介します。見ると分かりますが、スタイルガイドをいってもガイドに入れている範囲や詳細度は様々。今回、紹介した「決めるポイント」を参考に自社に合ったスタイルガイドの開発を始めてみてください。

Frontrend Advent Calendar 2013

筆者について

Experience Points

電子書籍「エクスペリエンス ポイント」発売中

の初の電子書籍。過去 4 年間にわたり Web と体験について扱ったコラム・エッセーを 34 集めました。概念だけでなく、啓蒙するためのヒントなど、明日から考えを行動にうつすためのヒントが掲載されています。
500円で .epub 又は Kindle 形式で購入できます。

閉じる 共有する

記事はお楽しみいただけましたか?役に立つ情報でしたか?ぜひ他の場所で共有してみてください。