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

Yasuhisa Hasegawa

Dec 17, 2013 • 2 min read

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

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

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

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

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

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

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

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

フロントエンドとは別に、ライティング用の簡易ガイドラインをまとめることもあります。

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

Yasuhisa Hasegawa

Web やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。