作業時間短縮も！企業イメージを高めるスタイルガイドの作りかた

明確なビジョンがないまま進むプロジェクトは、見知らぬ土地でナビゲーションもなくドライブをしているようなものです。スタイルガイドは、ブランドまたはウェブサイトを作るにあたってデザインのナビゲーションとなります。

スタイルガイドとは？

スタイルガイドとはブランドのビジュアルを統一させるために作成されるドキュメントのことです。基本的なスタイルガイドには

ロゴ、フォント（書体）、カラー

が入ります。それに加え使用する写真のスタイル、やっていいこといけないことの使用ガイド、文書のスタイルなどの情報が入ります。WEBサイトに対してのスタイルガイドにはこれに加えボタンの形やホバーやクリック、訪問済みリンクのボタンのカラー、使用するアイコンなどへの定義が追加されます。

スタイルガイドを作る利点

スタイルガイドがあれば使用するカラーやフォント、イメージに迷うことがありません。将来新しい人がプロジェクトに取り掛かる際にもブランドのイメージを瞬時に共有することができます。

後々（外部エンジニアに追加ページなどの依頼を頼んだ時に）個人的な好みによってデザインを変えられてしまった。といったことも防ぐことができます。

スタイルガイドはウェブサイトの制作だけではなく、後々の販売促進物や、メールマガジン、サードパーティ製品などにも使用することができ、それぞれバラバラの部品に一貫性を持たせてることで、最終的に一体感のある体験を作り出すことができます。

そして、統一されたブランドは覚えやすくマーケティングがしやすいだけでなく、よりプロフェッショナルな印象を与えることができます。

成功するスタイルガイドの作り方

せっかくスタイルガイドを作っても、プロダクトのデザインで使えるものになっていなければ、いずれ誰からも参照されない状態になってしまいます。ここではスタイルガイドを作る時に気をつけたいTIPを紹介します。

1. ブランディング戦略を確認する

ブランディング戦略とは、ブランドの特徴や個性をはっきり提示し、共通したイメージで顧客が認識できるように働きかけることです。いくら綺麗なスタイルガイドをつくっても、実際にブランドのイメージに合うもの、使用するユーザーに合っているものでなければ、ユーザーエクスペリエンスのクオリティは落ちますし、後に最初から作り直すことになってしまいます。

スタイルガイドを作る前に、ブランドのアイデンティティー（特徴と個性）を確認しましょう。

大切なのは、ブランド（またはそのウェブサイト）は

何のためにあるのか、また使うユーザーは誰なのか？

ということを認識を再共有することです。

2. ロゴはただのせない

ただロゴをのせるだけではなく、明るいカラーのバックグラウンドと暗いカラーのバックグラウンド、白黒バージョンをのせること。また、やってはいけないこと、やってもいいことを載せた使用ガイドラインを作っておきましょう。

3. フォント（書体）の数はおさえる

フォントはタイトルとパラグラフで分けたとしても基本的に１つか２つ。フォントの大きさや線の太さも設定します。細い線が特徴的なフォントを基本のフォントとして設定したときに、小さいカラーボタンにそのまま使用すると文字が見えにくくて....

といった理由でボタン用のフォントを増やしたりすることはあるかと思いますが、このページは期間限定だからなどと増やすことはやめましょう。

4. カラーもおさえる

ブランドのカラーは基本の１色に対しサポートする２色が理想的。黒と白も１色としてカウントすること。色を足したいときは、基本的なカラーに黒を白を足したシェイドカラーとティントカラーを使うのがおすすめです。

5. 細かく作りすぎない

基本的なスタイルガイドはロゴ、カラー、フォントで、その上に何が入っていなければいけないというものは特になく、対応するプロジェクトに合わせ必要な分をカスタマイズで追加していきます。

最初に全部揃えておけば後から心配しなくていい。 という考え方から開発前の時点から細かい設定を詰め込みすぎてしまっても、後からでてきた細かい問題の修正に対応するものでなければ、スタイルシートは使われなくなっていまします。 スタイルガイドは本当に守りたい必要なことをガイドとして設定するものです。 設定はできる限り最小限に抑えつつ、定義されたものはしっかり守ることが大事です。まだ確実に分かっていないものは無理に作らないこと。迷ったものはとりあえず作っておくのではなく、とりあえずタイトルを残しておく。後から必要になった時に埋め共有できます。 スタイルガイドは育っていくものです。

まとめ

何かの立ち上げ作業は忙しく、ついスタイルガイドをおろそかにしてしまいがちですが、デザインはずっとついて回るものでブランド、ウェブサイトの顔であることを忘れてはいけません。 いくらサービスが良いプロダクトでもデザインに問題があれば、ファンは増えません。とりあえずを重ねて放置してしまいバラバラのスタイルの部品が揃いに揃ってしまってあとに、全部にまとまりを出す修正することは時間もコストもかかります。 最初から少し丁寧に時間をかけていくだけで、今後ずっと役に立ちスタイルガイドを作ることができ、そのスタイルガイドは将来のあなたの時間と作業を助けてくれるとても強い味方となるでしょう。