AppleのデザイナーたちがiOSを開発するときに、細かな要素の一つひとつをどのような考えのもとにデザインしていったのか、興味を抱いたことはありませんか。実は、それを知ることができる資料が公開されています。
文章の世界には、スタイルガイドというものがあります。大勢の執筆者の間で言葉づかいや表記を統一するための規約集のことです。そして、今回ご紹介するのは、文章ではなくウェブデザインについて定めたスタイルガイドです。我々はこれをデジタル スタイル ガイドと呼んでいます。
具体的には、デジタル スタイル ガイドとは、ドキュメントやシンボルマークなどでブランドらしさを表現するためのデザインの基準を定めたマニュアルです。その主な目的は、ブランドで一貫したデザインスタイルを確立し、すべてのチャネルと媒体で統一を図ることです。デジタル スタイル ガイドでは、ロゴ、カラーパレット、タイポグラフィー、画像のガイドラインなどを規定します。
スタイルガイドは昔も今もデザインのかなめです。印刷物のスタイルガイドの中には、その歴史が100年前までさかのぼるものもあります。しかし、ウェブ向けのデザインにますます格式が加わる中で、デジタルメディアでもスタイルガイドがしかるべき位置を占めるようになってきました。最高級のユーザーエクスペリエンスを生み出す必要があるウェブサイトや製品では、スタイルガイドは特に有益です。
私自身、ユーザー エクスペリエンス デザイナーとして、Apple、Google、Starbucksのように大きな影響力を持つ企業がデジタル スタイル ガイドで何を定めているのか、常に関心を寄せてきました。
意外にも、デジタル スタイル ガイドの中身を公開している企業はたくさんあります。ただし各社とも、すぐに目に付くような場所には置いていません。そこで私は、デジタル スタイル ガイドを偶然見つけたときには、すぐにブックマークすることにしています。以下、私が見つけたデジタル スタイル ガイドの中から、特に優れたものをご紹介します。
Appleのスタイルガイドが特に興味深いのは、OS全体のデザイン方法について詳しく説明していることです。たとえば、OS X Yosemiteは、前バージョンのMavericksに比べて、ユーザーインタフェースがシンプルになりました。
Appleは、明確な違いを生むこうした微妙な変化に関して、画像を使ってわかりやすく比較したうえで、OSのデザインの各要素について、その背後にどのような理由づけがあるのかを説明しています。OSのデザインを担当した人たちの頭の中を垣間見ることができるスタイルガイドです。
Googleは、「マテリアルデザイン」という新たなデザインスタイルを提唱しています。スキューモーフィズム（グラデーション、テクスチャ、光や影）とフラットデザイン（シンプル、カラフル、幾何学的）のハイブリッドで、両者のメリットを取り入れつつ、デメリットを回避することを目指したデザインです。
Googleは2014年頃からマテリアルデザインを実践しています。このスタイルガイドでは、マテリアルデザインの何たるかや、Googleがマテリアルデザインをどのように利用しているかについて、詳しく説明しています。私がこれまでに出会った中でも、飛び抜けて優れたスタイルガイドの1つです。
私が目にした中では、最もミニマリズム的なスタイルガイドです。しかしそれでいて、有益な情報が満載です。コードにかなりの重きを置いており、開発者が開発者のために作成したスタイルガイドであることがわかります。この中には、ブランド関連の要素がありません。つまり、ウェブサイトのスタイルガイドとコードライブラリーの中間にあたります。
膨大な製品を開発しているAtlassianだけに、スタイルガイドも膨大です。カラーパレットやタイポグラフィーといった基本要素から、表やツールチップなどのコンポーネント、包括的なパターンライブラリーまで、この規模の製品にふさわしい内容を網羅しています。
何より素晴らしいのは、スタイルガイド全体を支える基本理念が、驚くほどシンプルな3行の文でトップページに記されていることです。
このスタイルガイドは、ブランディングと伝達方法を主に取り上げたものです。しかし、最近「プライバシーとオープンウェブ」を打ち出しているMozillaが、それをデザインにどう反映しているかがわかるのは嬉しいことです。また、デザイナーがすべきこととすべきでないことを、緑と赤の顔で表現した部分も、興味深い構成です。
このスタイルガイドが特筆に値するのは、Bufferがアトミックデザインを採用していることです。アトミックデザインとは、ごく簡単に言えば、小さな要素（原子）を組み合わせてもう少し大きな要素（分子）を構築し、さらにそれらを組み合わせて大きな要素（生体）を構築していくというデザインの方法論です。Bufferのスタイルガイドは短く簡潔で、全体が1ページにまとまっています。
ウェブサイトのスタイルガイドで頼りになる例をお探しなら、Yelpがぴったりです。Yelpのスタイルガイドは、タイポグラフィー、レイアウト、フォーム、コンテナー、ナビゲーションなどを網羅し、それを実現するためのコードにも言及しています。
各要素の意義、使用場所、実装方法を丹念に説明しているところが素晴らしいと思います。また、ブランドのガイドラインは、スタイルガイドとは別に用意されています。
英国政府の公共サービスのウェブサイトであるGOV.UKは、優れたユーザーエクスペリエンスの好例として多方面から評価を受けています。シンプルで使いやすいデザインの中に、膨大な情報をうまく収めているからです。
一般に、すっきりまとまった効果的なデザインの第一歩は、強い色、タイポグラフィー、余白の使い方にあります。そういった点に興味をお持ちなら、GOV.UKのスタイルガイドは一見に値します。サイト自体と同じで、極めてシンプルながら、中身が豊富です。
DeviantArtの新しいスタイルガイドが何よりユニークなのは、単なるガイドにとどまらず、これ自体が1つのエクスペリエンスであることです。ストーリーを提示し、画面全体を使った大胆なビジュアルを生かして、見る者の心をDeviantArtブランドの世界にいざないます。
ただし、あくまでブランディングのスタイルガイドですので、図やタイポグラフィーといった要素のみが取り上げられています。
このガイドが説明しているのは、色、アイコン、タイポグラフィー、ロゴという4つの要素だけですが、非常にすっきりまとまっています。以前はコンポーネントのセクションも作ってあったようですが、現在は見られなくなっています（代わりに、ユニークな404ページが表示されます）。基本的な要素を網羅しているこのスタイルガイドは、ご自身でスタイルガイドを作り始めるときの第一歩として、良い見本になるかもしれません。
次はあなたの番です。デジタル スタイル ガイドをうまく活用すれば、社内のデザイナーやエージェンシー、広告パートナー、さらには顧客にまで、自社のブランドのデザイン像を提示できるはずです。
まずは、土台となる基本的な要素（色、タイポグラフィー、ロゴ、画像）から始め、使用上のガイドライン（すべきこと、すべきでないこと）を加えましょう。さらに、もし必要であれば、ウェブコンポーネント（モジュール、テンプレート、サンプルコード）も加えましょう。
他社の例を参考にして、優れたお手本から学んでください。すぐに、一貫性のあるデザインを次々と生み出せるようになるはずです。
編集メモ：この記事は、2015年4月に投稿した内容に加筆・訂正したものです。Austin Knightによる元の記事はこちらからご覧いただけます。