皆さんはブランドガイドラインを見たことはありますか?あまり馴染みがないかもしれませんが、ブランドに一貫性を持たせるために作られる企業のロゴやビジュアルなどに関するガイドラインのことで、スタイルガイドと呼ばれることもあります。社内だけでなく社外に向けて公開されている場合も多く、調べてみると有名なWebサービスでは用意しているところがほとんどでした。そこで今回は各サービスのブランドガイドラインをまとめて紹介します!

Facebook

https://www.facebookbrand.com/
ロゴやボタン、スクリーンショットなどがダウンロードできます。Webサイトや印刷物などあちこちにロゴやボタンが使用されるFacebookは、データがAI、PSD、PNG、EPSで用意されています。かなり細かくルールを定めていて、もし印刷時に技術的な制約で指定の色を使えないときは白黒で印刷する、という決まりがありました。

Instagram

http://help.instagram.com/304689166306603
ロゴ使用時や自分のInstagramアカウントを宣伝したいときの注意事項まで書かれています。今年の夏ガイドラインを更新し、関連アプリに”Instagram”、”IG”、”Insta”、”Gram”と言ったInstagramを連想させるようなアプリ名を使うことを禁止しました。これにより例えばInstagramをMacで閲覧するためのアプリInstaDeskは、その後に名前をPhotoDeskに変更しています。

Twitter

https://twitter.com/logo
Facebookと同じように、あちこちでロゴを使われることが多いTwitter。データはPNGとEPSのみの配布です。Twitter birdに吹き出しを付けたり、角度を変えたり、アニメーションにしたりすることは禁止されてると、画像と共に紹介しています。

MailChimp

http://mailchimp.com/about/brand-assets/
ロゴやブランドのカラーテーマ、マスコットキャラクターのFreddieの画像などがダウンロードできます。「表記は”MailChimp”で、”Mailchimp”でも”mailchimp”でもない」というようなことが書いているのですが、Goodpatchも”GoodPatch”と書かれることが多いので弊社で作った際にはぜひ書いておきたいです。

Pinterest

http://business.pinterest.com/brand-guidelines/
PinterestもTwitterと同じように、文字だけでなく具体的な例と共にロゴや表現の使用例を挙げています。わかりやすくていいですね。

Dribbble

https://dribbble.com/branding
ロゴとボールのアイコンの配布、色の指定などがあります。他と比べるとそこまで細かい決まりはない印象です。

Google

http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077
BehanceにアップされたGoogleのビジュアルデザインガイドライン。アイコンやタイポグラフィー、色などに関するルールが定められています。こちらは社内のデザイナー向けでしょうか。

Foursquare

https://foursquare.com/about/logos
ロゴやアイコン、チェックインボタンなどがダウンロードでき、Brand Book(PDF)では、ロゴ使用時の注意事項だけでなく、印刷用、Web用のタイポグラフィーや使用しているアイコンやバッジなどの解説も書かれています。

Dropbox

https://www.dropbox.com/branding
Dropboxのブランドガイドラインなのでロゴデータは全てDropboxに上がっています。あまり見たことがないのですが、グレーのロゴも用意されていました。各国の言語で用意されているのが親切ですね。

Fancy

http://fancy.com/resources/logo
Fancyはロゴ、カラー、ネーミングに関する記述のみと短めです。こちらも日本語がありました。

GitHub

https://github.com/logos
GitHubではロゴの使用など基本的なことだけが書かれていますね。

YouTube

http://www.youtube.com/yt/brand/using-logo.html
YouTubeも例をたくさん挙げているのでわかりやすいですね。ロゴは可能な最小サイズまで決められていました。また色に関しては 別ページで詳しい解説があります。

Firefox


ロゴの使用例や解説などがあります。ガイドラインとはまた別ですが、過去のロゴが悪い例として挙っているので比較できて面白いですね。

 

以上13のブランドガイドラインを紹介しました。Web制作者の方ならFacebookやTwitterなどはボタンの設置の際などに見たことがあるかもしれませんが、他のは見たことがなかったという方も多いのではないでしょうか?ブランドガイドラインを作る機会があったらぜひ参考にしてみてくださいね!