はじめに

「なにか想定していたものと違う」
「これはどういう意図なのだろう」

何かを作ろうとしたとき、人は必ず、理想とするものを頭の中に持っています。しかし、それを現実のものとして形作るのは非常に困難な作業です。たとえば料理を作るとき、頭の中ではしっかりとした理想形を描けていても、それを100%再現することは、プロの料理人でもなかなか難しいと思います。ましてや、それを他の人に作ってもらうとなると再現性は更に低くなるでしょう。もし、あなたが料理人だとして、自分の考えた料理を誰かに再現してもらうと思ったとき、どういう方法を取るでしょうか。
一番最初に思いつくのが、料理のレシピを作り、作業者にその手順通りに料理をしてもらおうとするでしょう。このとき、再現性を高めようと思った場合、レシピを詳細に書くと思います。また誤解がないよう、わかりやすく伝えようとも思うはずです。

WEBサイトもこれと同じです。デザイナーが作ったデザインをコーダーが実装するためには、レシピに対応するもの=デザイン（ここでは狭義の意味で見た目）+スタイルガイドが必要になります。

「デザインが必要なのはわかるけど、スタイルガイドが必要なのはどうして？」
「コーダーが楽したいからスタイルガイドが必要なだけじゃないの？」

もしかしたらこのような疑問、疑義が出てきたかもしれません。
結論から言えば、スタイルガイドはそのWEBサイトの統一感、ブランディングのためにも必須であり、デザイナーとコーダー双方にとって欠かすことのできない制作物の一部です。

なぜ、スタイルガイドが重要なのか、次章から解説して参ります。

スタイルガイドとは何なのか

そもそもスタイルガイドとは何なのでしょうか。

一言で言うならば、デザイナーとコーダーのためのルールを定めたものです。フォント、色、間隔、ボタン、その他要素を定めることでWEBサイトに一貫性をもたらすことを目的としています。もし、ルールが定められず至るところでバラバラのスタイルが適用されていたらどうなるでしょうか。おそらく非常に見にくく、そのサイトを運営している企業の色=ブランドを感じられないものになってしまうでしょう。スタイルガイドはデザインをぶれないようにするために必要な制作の要素です。

さて、スタイルガイドはルールを定めたものである、とするなら、次のような疑問が湧くかもしれません。

「スタイルガイドがなくてもデザイナーが頭の中でルールをしっかりと定めていれば問題ないのでは？」

これは部分的にはそのとおりです。しかし、これはデザイナーがコーディングも担当する場合に限ります。
冒頭で料理人の例を出しましたが、多くの場合、デザイナーとコーダーの作業は分離しています。当然のことながら、デザインだけではデザイナーの意図はコーダーの側に100%は伝わりません。情報の伝達は必ずある程度の損失を含ます。スタイルガイドを必須とする理由の2つ目はここにあります。料理人が自分の料理を正しく他人に伝えるのと同様に、デザイナーがコーダーに意図を正しく伝えるためにスタイルガイドは必要となるのです。

スタイルガイドの実例

さて、では具体的にスタイルガイドはどう定めていけばよいのでしょうか。

最低限決めて置かなければならないのは、フォント、色、間隔、ボタンなどでしょう。手前味噌ではありますが、スタイルガイドの例を作成してみました。下記のリンクを押して頂けるとスタイルガイドの例を見ることができますので参照してください。

スタイルガイドの例

Typography

WEBサイトでどんなフォントを使うのかを一覧にしたものです。
Typefaceでは書体とfontWeightを定めています。

その下のStylesはWEBサイトで使用する文字の凡例です。
スタイルの名称、文字の大きさ、行間、字間を定めています。（スタイルの名称は運用上わかりやすいものが良いと思います）

ColorPalette

WEBサイトで使用する色の一覧です。
サンプルではサイトのテーマカラーとしてmain,secondary,primaryの3色を指定しています。

またフォームなどで表示される文字の色などを指定したAlertsもあります。

ColorPaletteではWEBサイトで使う色を漏れなくすべて定めます。

Base

Baseではスマートフォン、タブレット、PCでのGridの設定のほか、マージンやパディングに用いるSpacingについて定めています。例では16pxをベースに設定しています（調整として8pxも採用）。

Controls

ControlsではButton、フォームで使用するText Field、そしてhover時の変化を定めます。今回XDの共有ではButtonのhover時の動きも付けていますが、XD上で細かい動きを再現できない場合は、無理に動かすのではなく、スタイルガイド上で動きに関する注釈をつけるなどして伝えるとよいでしょう。

その他

今回はインストラクションとして数を絞りましたが、他に定めるべき項目としてはiconだったり、リンク文字の指定なども考えられます。

おわりに

最後にスタイルガイドを定める利点を整理します。

1.デザインの一貫性が保たれる
一貫性が保たれることによってサイト全体のテーマが担保されます。一貫性はブランディングとも紐付いており、極めて重要です。また一貫性を保つことでコンポーネント化もしやすくなり、コーディングのしやすさが担保されます。

2.作業スピードの向上
スタイルガイドを作ることで見るべき情報のほとんどがそこに集約されます。実装者はそこにある指示をもとに文字や色、その他数値を参照すればよく、毎回デザインから情報を拾う必要がなくなります。また一箇所にあつまることで情報伝達のミスを減らす効果も期待できます。

スタイルガイド作りは労力や費用対効果の観点から導入を難しく感じますが、一度作るとフォーマットの使い回しができるので、上記の利点を含め導入する価値は十分あると思います。

上で挙げた例や、dribbbleなどでのサイトでもスタイルガイドの例が掲載されているので、それらを参考に一度スタイルガイドを作成してみてはどうでしょういか。

【参考サイト】

dribbble