ビジュアルスタイルガイドの作り方

あらゆるビジネスに必要なドキュメントの中でも、特に重要なものであるのに多くのビジネスに存在していないものと言えば、ビジュアルスタイルガイドです。どうしてこのようなガイドが重要であるか。それは、ブランドとしての統一感を、あらゆる制作物や発行物に、誰がそれを作成したとしても実現することができるからです。

スタイルガイドには、その会社が必要とするあらゆる情報が込められています。ウェブサイトや広告、内部メモなど多岐にわたり、この小さなドキュメントで、あらゆることを網羅できるのです。では、そこまで大切な書類であるにも関わらず、多くの人がこれを軽視するのはどうしてなのでしょうか。

その大きな理由は時間です。スタイルガイドは無から突然生まれるものではありません。スタイルガイドを作るにはそれなりの時間が掛かります。しかし、自社のスタイルを他の人に伝えられるように説明するとなると、その度にかなりの時間が掛かります。色の指定やフォントの指定、アイコンの使い方などを、必要に応じてその度に説明するのは手間であると言えるでしょう。それならば、スタイルガイドを作成してしまった方が結果として時間の節約になるのです。

では、どのようにスタイルガイドを作成するべきか。そのようなことについて考えてみましょう。

ブランドにとってロゴはとても大切なものですから、常に見え方には気を配らなくてはいけません。まず、ロゴの使い方について明記するところから始めましょう。

例えばTemplyは、ロゴの正しい使い方を説明すると共に、他に何色にすることが許可されるかということを説明しています。

そのブランドガイドを用いて作成された年間報告書が上の画像のものです。

また、ロゴの『間違った使い方』の例を掲載しておくことも大切です。デザイナーはクリエイティブなものですから、そのクリエイティブの方向性を正しく導くことができるようにすることが重要なのです。例えばオックスフォード大学の例を見てみましょう。ロゴがどのように見えるべきであるか、逆にどのように見えることが拙いのかがはっきりと記載されています。

ロゴを複数持っている場合には、ひとつのページに上記の情報を全てまとめられるようにするか、それぞれのロゴに1ページを割いて説明できるようにすると良いでしょう。FedExのスタイルガイドを参考にすると良いかもしれません。

デザイナーやプログラムによって、どのような色を使うかということは大きく変わってきます。そうなると、適切なカラーコードを指定することで、印刷時やデジタル表示における見え方を統一することが求められます。

それぞれの色の見え方はちょっとコードが違うだけで大きく変わってしまうこともあります。必ず、適切なコードや色番号が指定されていることを確認しましょう。それが結果として時間と経費の節約になるのです。

どのようなものを作るにしても、フォントは非常に重要なものです。プロらしく見えるためには、タイポグラフィが統一されていなければいけません。目的に合わせてフォントを変える場合に備えて、スタイルガイド内でどういったフォントを使うべきかを指定しておきましょう。

例えばThe New Agencyのスタイルガイドを見てみると、複数のフォントの組み合わせが指定されています。サイズやカーニング、リーディングに至るまで詳細な情報が得られる、完璧なスタイルガイドです。

それを活用したウェブサイトが上記のような見た目となります。

図解にどのような図を用いるかということもぜひスタイルガイドに入れておきましょう。ガイドの中に、どういった組み合わせを用いるのが良いかということを織り込んでおくと良いでしょう。

Sam Small for BUNKRの例を見てみると、パターンとアイコンが効果的に用いられていることを確認できます。サイズのバリエーションや色の指定の他、ちょっとした変更の加え方の例もあります。

白黒でレシート、そしてフルカラーで封筒といったように、自由自在にパターンを使いこなすことができています。

どのような写真を撮るか、どのように写真を見せるかということもブランドとなります。特定のスタイルには特定の反応が返ってくるものであり、スタイルを感じる写真にはブランドが感じられるものなのです。したがって、フォトグラフィに関するスタイルガイドを作成しておくこともやはり大切ということになります。

Redfernのブランドスタイルガイドを見ると、写真撮影の際にどのようなことを考慮するべきかということが詳細に指定されています。

フォトグラファーに対して何らかの仕様を伝える際には、実例も一緒に示すと分かりやすいでしょう。

例えばDistrictのスタイルガイドに従って撮影された上と下の写真は、非常に似たスタイルになっていることが分かります。

オンライン上でのブランドの在り方として、自身のウェブサイトにブランドとしてのスタイルが反映されていることは非常に重要なことです。その上で印刷物に関する仕様を流用できるケースは少なくありませんが、中にはウェブ独自の仕様を考えなければいけないケースもあります。

ウェブサイトは通常複数のページから成り立っており、それぞれに繋がりがあるようでなければいけません。どういった情報が重要であるかを踏まえた上でヒエラルキーを意識しましょう。ボタンやナビゲーションバーなどもブランドのスタイルに合わせ、404ページのデザインもしておくと良いでしょう。

ブランドとしてどういったことを語っていくのか、その口調はどのようなものかということを意識しなければなりません。理想を言えば特定のひとりの人間がブランドを代表して文字や言葉で発信していくことができれば統一感を生むことができますが、それは到底不可能なことです。そこで、書き方や口調、トーンについて、確実なガイドラインを作成しておくことが大切になるのです。

例えば特定のワードやフレーズを入れる、避けるべき言葉をリストアップしておくなどすると良いでしょう。例えば65歳以上の編み物が好きな女性をターゲットにしたブランドなら、そのオーディエンスを狙った『言葉使い』というものがあるはずです。

例えば販促物などを作成する場合には、スタイルガイドはどのように見せるべきでしょうか。以下の例を見てみましょう。

このTerra Primaのスタイルガイドは、次のようにして実際のプロダクトに活用されています。

スタイルガイドの要素を組み合わせることで、現実的にどういったものが生まれるかということを確認できたのではないでしょうか。

さて、これでスタイルガイドに関する基本が分かりました。もしかすると、上記の全てが必ず自分のブランドに必要なのか、と考えている人も居るかもしれません。

全てが必要かと言われると、実際のところ、必ずしも全てということは無いでしょう。あらゆるブランドには、異なる情報が求められるからです。あるブランドのスタイルガイドは100ページ以上になるかもしれませんし、1ページで収まるようなスタイルガイドで充分なブランドもあるかもしれません。自分のブランドに何が必要かを考えてみると良いでしょう。

また重要なこととして、『ブランドは変化するものである』ということをおさえておきましょう。今作ったスタイルガイドが、一年を通して使うことのできるものになるかは分からないのです。柔軟に変化を受け入れつつ、しかし古いバージョンに立ち戻ることができるよう、更新前のものも大切に保存しておきましょう。

最後に考えなければいけないのは、この資料を内部資料とするか、それとも後悔資料とするかということです。これにはどちらにも一長一短あります。もしも公開すれば誰でもこの資料を参照できるようになる一方、ブランド力を悪用されてしまうこともあるかもしれません。もし内部資料にすれば、アップデートが容易になり、また社外に出すものでないためこのドキュメント自体の見た目に拘る必要もありません。ただ、外部にその内容を伝えるのは苦労することもあるでしょう。

ただいずれにせよ重要なのは、分かりやすく簡潔なスタイルガイドを作ることです。結局のところスタイルガイドの目的とは、デザインのプロセスをスムーズかつシンプルにすることであるということを忘れてはいけません。