シリコンバレーの企業が導入しているデザインガイドラインとは？13事例を紹介！

Webデザイナーやエンジニアであれば、“デザインガイドライン”という言葉を聞いたことがあるはず。

「デザイントーンを統一するためのもの？」
「大きい企業にありそう」

など、なんとなくイメージはあるものの、使ったことのない人が多数かもしれません。

今回はその重要性を解くとともに、著名な13社のデザインガイドラインを和訳し、ご紹介します。

デザインガイドラインとは？

デザインガイドラインとは、サービスや企業のデザインに関わる関係者に向けてコンセプトや価値基準を定めたもの。色使いやサイズ比などまで詳しく定めている場合もあります。

製品が社会に出たときに、消費者にとってどのような存在であるかについての共通認識をチームに醸成したり、悩ましい選択をするときに議論を手助けしたり、重要な役割を果たします。

みなさんも良く知っているAppleの製品は、一目見ただけで「Appleの製品だ」と認識できますよね。それはデザインガイドラインが守られている証拠です。

インターフェイスだけではなく、ユーザビリティやユーザーエクスペリエンスの質を担保するのもデザインガイドラインの役目。例えば提供する製品が別々のプラットフォーム（異なる操作システム、スクリーン等）上で使われたときも、体験できる内容が同じであるよう統一すべきです。

日本でもデザインガイドラインを定める企業は増えてきましたが、その多くには「明確さ」「シンプルさ」「ユーザビリティ」といった言葉が挙がっています。しかし、これらの内容はプロであれば当たり前に実践すること。他のものとの差別化を成し遂げられるでしょうか。

良いデザインガイドラインの3か条

1. シンプルである

読んだ人が混乱するような複雑な表現はやめましょう。しかし、「人間らしさを表現しよう」だとか、「もっとコミュニケーションを取ろう」といったような曖昧すぎる表現を使っては、提示する価値はあまりないと思います。

2. 現実世界において例がある

デザイナーが想像しやすいように、実用例を提供しましょう。

3. デザインにおける方向性を示している

デザインガイドラインは、大きさや色使いだけを指定するだけのものではありません。ブランドの価値や進んでいく方向をメインに記述するべきです。

デザインプロセスにもガイドラインを作ろう

Googleは、「合理的にデザインをするためのプロセス」についてのガイドラインも有しています。

大企業の社員がみな、機能性とデザイン性を兼ね備えた製品を作れるようにするためには、ノウハウや根本的な考え方を共有しなければなりません。

このガイドラインがあると、チーム全体が同じ判断基準を持ち、新しく入ってきたメンバーにも短期間で理解してもらえます。

デザインガイドラインの事例

さまざまな企業のガイドラインから、素晴らしいと思ったものを集めてみました。（英文を翻訳・意訳）

Airbnb

つながっている

サービスが展開しているすべてのパートが、全体の一部であり、システムに貢献します。隔離された機能や、本体から離れたものは存在しません。

ユニバーサルである

Airbnbは広いグローバルコミュニティで使用されています。視覚的な表現は常にわかりやすく、使いやすいものでなくてはなりません。

アイコニックである

デザイン性、機能性の両面においてアイコニックである。私たちの仕事は、大胆に、明確に語られるものでなくてはなりません。

おしゃべり上手である

モーションの活用によってプロダクトを生き生きとさせ、ユーザーがわかりやすい形でコミュニケーションをします。

『共通の友達』である

インターネットの不確実性を最小限にとどめることで、オフラインでの体験は意味深いものになります。製品を通じてユーザー同士を繋げ、ユーザーが探していることを積極的に取り入れ、新しい体験を生み出せるよう挑戦を続けます。

ステージを準備し、自己紹介を手助けし、そのあとはそっと消えます。Airbnbのサービス自体が、利用者同士の共通の友人です。

第一印象をデザインする

Airbnbは、ユーザーに対して最低限の情報は求めるが、全面的な情報開示は求めません。情報をどれくらい伝えるかは、ユーザーに一任します。

信頼は次につながる

Airbnbに対する信頼が広がれば、Airbnbはユーザーをもっと信頼します。ゲストがホストに対して情報を伝えれば伝えるほど、ホストはゲストを信頼し、もっとサーブしようとします。

Facebook

ユニバーサルである

我々の使命は、世界をもっとオープンにすることです。世界のすべての国、すべての人々が対象です。我々のデザインはすべての人々、すべての文化、言語、デバイス、すべての人生のステージにフィットするようなものでなくてはなりません。

そのため、私たちは9割の人々のことを考えながら製品をデザインし、マイノリティの人に対してのみ必要な機能は切り捨てています。

人間らしくある

ユーザーは、友達と交流したり、友達ではない近い関係の人と知り合うために、Facebookを使います。大切な人たちをひとつの場所に集め、いつでもコミュニケーションできるようにすることが、我々の製品にとって一番の約束です。

そのため、我々自身が発する声やスタイルは常に背面に存在し、ユーザーである人々の声や人々の顔、人々の表現が前面にあるようデザインしています。

クリーンである

Facebookのビジュアルは、クリーンで控えめです。ユーザーが自由に描くことができる、空白のキャンバスを用意しています。ミニマルで明るいスペースは、何かに参加することや、素直で透明性のあるコミュニケーションを促します。

クリーンであることは、ビジュアルを作る上では簡単なことではありません。余白やタイプスケール、色をうまく用いて、使用する要素をできる限り少なくしています。

一貫性がある

一貫したパターンを用いることで、ユーザーの時間を有効活用できます。ユーザビリティは、似ているものは似ている方法で表現すると、ユーザビリティは格段に上がります。

ユーザーをガイドする際に一貫した言葉をつかうことで、信頼も得られやすくなります。できる限り要素は減らし、できる限りリユースし、リデザインはしません。

便利である

Facebookは、エンターテイメント性よりは実用性を重視しています。普段の生活で繰り返し使われ、効率的に価値を提供できるものです。

そのため、主要なインタラクションは簡潔にデザインし、不必要なクリックや無駄なスペースが発生しないようにします。

早い

ユーザーの時間を無駄に奪ってはいけません。体験は迅速に提供できる方が、より効率的で、人々に受け入れられやすくなると感じています。

サイトのパフォーマンスについて、ユーザーがいちいち気にならないよう、できる限り早く動くように制作します。

透明性を保つ

ユーザーは、自分自身のアイデンティティ、写真、思想や会話を表すことに関して、我々に信頼をおいてくれています。我々も信頼をお返しするために、最大限正直で透明性のある組織であります。

何かが起こった時、我々はいつも矢面にたち、その理由に対してクリアな説明ができるようにします。

Apple

品位のある美しさ

審美的な整合性は、アプリケーションの外観と動作が、その機能とどれだけうまく統合されているかを表しています。たとえば、人間のタスクを手助けするアプリは、控えめなグラフィック、標準的なコントロール、想定通りの動作をすることで、ユーザーを集中して仕事をするよう促します。

一方で、ゲームのようなユーザーを没入させるようなアプリは、魅力的な装いによってユーザーを楽しませ、冒険へと誘うのです。

一貫性

一貫性のあるアプリケーションは、親しみのある基準やパラダイムによって構成されます。

システムが提供したインターフェース要素や、よく知られているアイコン、標準的なテキストスタイル、統一された用語等で構成します。ユーザーが想定する通りに動き、機能してくれるものでなくてはなりません。

直接的な操作

スクリーン上のダイレクト・マニピュレーション（コンテンツを実物同様のように操作すること）はわかりやすく、ユーザーに魅力的だと感じられます。

スクリーンを回したり、スクリーン上のコンテンツに対してジェスチャーをするなどの体験を通じて、起こしたアクションに対する結果を、即座に確認することができるからです。

フィードバック

フィードバックは、アクションが起きたことを認め、人々が情報提供された結果を表示します。iOSに内蔵されたアプリは、ユーザーのアクションすべてに対して、認知しやすいフィードバックを送信します。

インタラクティブな要素は、タップした時にすぐハイライトされ、プログレス表示は時間のかかっているオペレションの状態を表し、アニメーションや音は、アクションに対する結果をよりクリアに認識できるよう手助けしています。

メタファー

バーチャル上のオブジェクトやアクションが、人にとって親しみやすいメタファーであると、わかりやすいと感じてもらえます。

iOSでは、人はスクリーンに物理的に触れ操作するので、メタファーはとてもうまくワークします。たとえば、コンテンツのドラッグ、スワイプ、スイッチを切り替え、つまみのスクロール、雑誌のページをめくるなど。

ユーザーコントロール

意思決定をするのはアプリではなく人間であるべきです。良いアプリは、ユーザーに可能な選択肢を提供することと、したくない行動を避けることの絶妙なバランスを保ちます。

人が「コントロールできている」と感じられるアプリは、親しみがあり、予測可能なインタラクションで構成され、破壊的な行動をする際は事前に確認することができ、進行中の操作を簡単に取り消すことができるようなものです。

Google Material Design

マテリアルデザインでニュアンスを伝える

紙やペンからインスピレーションを受けることで、創造性が広がります。親しみやすい触覚的な特徴をつけることで、瞬時にアフォーダンスが伝わります。

光、表面、動きの基礎は、オブジェクトがどのように動き、インタラクションし、他のものとどのような関係で空間において存在するかを伝達するために、鍵となります。

目立ち、視覚的であり、計画的である

印刷物におけるデザインの基礎的な要素である、タイポグラフィ、グリッド、スペース、距離感、配色は、視覚的に人を楽しませること以外にも、たくさんの役割があります。物事のヒエラルキーを作り、意味を与え、焦点を定めます。

慎重に考えられたカラーリング、端から端まで広げられたイメージ、大きなタイポグラフィー、計画的な余白、大胆で露骨なインターフェースは、ユーザーを体験に没頭させます。

ユーザーのアクションに重きをおくことで、機能性を瞬時に明らかにし、ユーザーをガイドしていくのです。

意味を伝えるモーション

インターフェイス上にモーションがあると、ユーザーを目標へと導きやすいです。動作の初動をこちら側が提供しましょう。

Microsoft

シンプルさを保つ

我々は、シンプルな要素からすべての動作や機能を立ち上げます。デザインは、人に直感的に知覚され、感じられるものです。シンプルであれば、人々に飽きられない製品を作れます。

パーソナルであること

次に、私たちがチャレンジすることは、ひとりひとりの個人と感情的なつながりを築くことです。我々のデザインは、人々が生き、考え、行動するためにあるものです。

まるでひとりの人間のために作られたような体験を、提供しなくてはなりません。

ユニバーサルに考える

私たちは、ユーザーが人間らしくいられるものをデザインします。これは、何かを作るときの姿勢というよりは、人がもっと良い人生を送れる世界を作ろうという根本的な考え方です。だからこそ我々は、包括的なテクノロジーを提供しているのです。

喜びをもたらす

実際の人間によって作られる体験がどんなものかを知りましょう。これによって、時代の感覚にあった体験を提供することができるのです。

Medium

選択肢よりも方向性を示す

この考え方は、『Medium editor』をデザインする際によく言及しているものです。我々は、ユーザーがレイアウトや書体を変更しようとしたときに、必ず提案をします。

なぜならば、ユーザーには執筆に集中して欲しいから。選択肢によって邪魔されてほしくはないのです。

一貫性よりも適切さを重んじる

この考え方は、一見矛盾しているようにも見えますが、デバイスについて考えてみると納得してもらえると思います。

もし、それぞれのOSやデバイス等の状況にふさわしくないと思ったら、我々は全体の一貫性に目をつぶることもあります。

完成させるよりも進化させていく

Mediumにおけるコンテンツは、脆弱ではなく、使いやすく改善され、進化され続けるものでなくてはなりません。

Firefox Design Values

ユーザーを守っている

Firefoxは、ユーザーの安全、プライバシー、オンラインにおけるクオリティ・オブ・ライフを守ります。ユーザーの時間、データ、興味を持つことを大切にしていくため、さまざまな取り組みをしています。

• ユーザーがコントロールできること
• プライバシー保護がデフォルトであること
• 驚くようなことがないこと
• 実行しやすいアドバイスをすること

ユーザーもFirefoxを作る一員である

Firefoxは、製品を押し付けるだけではなく、ユーザーの声も反映させます。

• コアユーザーではない人たちの声を反映する
• スマートなデフォルト画面からスタートする
• カスタマイズ機能はわかりやすく、暗黙的に使えるものである
• ユーザーになってもらうのではなく、コアユーザーになってもらうことを目指す

競合とうまく調和する

Firefoxは、ひとつのサービスやプロバイダーにユーザーを固執させようとはしません。自社の製品をおすすめしながらも、ユーザーの選択を尊重しサポートするからこそ、ユーザーはベストな経験をすることができるのです。

• ユーザーによるコントロールと選択
• ユーザーが自ら選んだサービスを使用する
• Web上以外における選択肢も提案する

精巧に作られている

Firefoxは、細かいところまでこだわります。簡単で使いやすい製品は、技術と詳細への配慮によってのみ作られるのです。

• ビジュアルデザインのガイドラインも参考にする
• プラットフォームにおける外観と操作における感じ方の一貫性がある
• 実感してもらえるようなクオリティの高さを重んじる

パワーとシンプルさにおけるバランス

Firefoxは、清潔で、分かりやすいデザインになっています。しかし、シンプルであることが終着点ではありません。一番大切なのは、ユーザーに寄り添っていることです。

• 80/20/2の法則をデフォルトとし、ミニマルな表面と他の昨日に簡単にアクセスできるようにする
• ただ削ぎ落とすだけでは、ユーザーに寄り添うことはできない

Webの役割を果たすこと

Webの世界は巨大で、すべてを網羅することはできません。Firefoxは、Webを使うユーザーの目的や行動にあわせ、それを助けるツールを提供していくことで、Webを使う目的を果たしてもらうようにしています。

• 実際のユーザーのタスクや文脈に焦点を当てる
• 実際のタスクが、ブラウザやその他のツールを巻き込んでいく
• 仕事やWebにすぐにアクセスできるようにする
• 専門用語を使わない

高いユーザーパフォーマンス

良いブラウザにとって、スピードは最も重要なもののひとつです。しかしそれはスピードだけでなく、その前提に高い技術パフォーマンスがあってこそ、直感的に反応が良いと感じてもらえます。

• パフォーマンを上げることが目的であり、反応性ばかり考えていてはいけません
• ユーザーはパフォーマンスの良さに喜びを感じます

Salesforce

明瞭性

曖昧さを取り除きます。見やすく、わかりやすく、自信を持って行動できるようなサービスを提供します。

効率性

ワークフローを簡素化し、最適化します。ユーザーの仕事をもっとよく、賢く、早くするために必要なニーズを、賢く予測していきます。

一貫性

同じ問題には同じソリューションを提供することによって、親しみやすさを築き、直感的に使える機能を増やしていきます。

美しさ

十分な配慮と、洗練された技術を通じて、人々の時間や注目を効率的に使ってもらえるようなサービスを築きます。

IBM UX

気づき、試し、購入する

ユーザーに、プロダクトの使い方を教えてはいけません。自らプロダクトを試してもらうところからはじめます。試すことから購入までのプロセスをシームレスに進行します。

• 気づき　−　ユーザーが自ら製品の必要性に気づくことが理想的です。
• 試す　−　プロダクトを試用するときは、初めて買う車を試乗するときのように、ワクワクとした気持ちを感じてもららいます。
• 購入する　−　ソフトウエアベースのプロダクトやデジタルサービスを購入する際は、コーヒーを買うときのようにシンプルでわかりやすくなければなりません。これから実施する手順や詳細が、常に明確でなくてはなりません。購入を完了したときは、ユーザーが喜びを感じられるようにします。

プロダクトを導入する

プロダクトを通じてどんなことができるか、ユーザーに紹介します。最初の体験の印象は、最後までの印象を決めるので重要です。

• ユーザーは、何か新しいものに触れると、すぐに何かを感じとります。それが、我々が予測していたことであれば、製品を通じてユーザーの行動をひとつ改善することができた証拠です。
• 製品を仕事の場で使ってもらい、ユーザーに早く価値を実感してもらうようにします。ときには、ユーザーが知らなかった機能を見せてあげ、彼らを魅了することも大切です。小さなことを過小評価してはいけません。少しの時間が節約できたり、厄介なことがなくなっただけでも、喜びを感じるものです。
• ユーザーに対して製品の価値が提供されたとき、導入のプロセスは完了します。

日々利用する

プロダクトに触れるときには、いつでも価値を感じてもらわなくてはいけません。

毎日使うとしても、1年に一回使うとしても、使用するときには便利だと感じてもらい、いつでも使えると共にいつでも使用をやめることができるようにします。

プロダクトの利便性は即座に感じられなくてはなりません。システム自体からコンセプトが伝えることで、ユーザーは何を期待すべきか、どのように必要なアクションをこなしていくかを理解しやすくなります。

• ユーザーが目標に達する方法を理解できるよう、コンテンツに沿って支援します。
• 自分のニーズに合わせて製品をパーソナライズできるようにします。
• 間違えてもすぐに修正ができるようにします。
• アクションやツールをすぐに使えるようにしておき、ユーザーを支援します。
• ユーザーがタスクをこなしたら、完了した！よかった！と感じられるような感覚を作ります。

管理・更新する

製品の管理と更新は、普段プロダクトを使用している中で、ユーザーが認識できるようにします。

• 管理　ー　管理が簡単なプロダクトは、使いやすく感じられます。プロダクトがどのように動くかを心配しなくて済めば、ユーザーは快適に感じます。
• 更新　ー　アップグレードのプロセスの中で、ユーザーの行動に干渉するのは最小限にします。変更が加わると、ユーザーは何が加わり何が取り除かれたのか気になってしまいます。ユーザーには、アップグレードが行われることを伝え、今後の利用にどう影響するかを説明できるしましょう。

サポートする

ユーザーが困った際に、解決できる方法をきちんと提示します。

いわゆる「サポート」の体験は、ここで挙げている５つの体験すべてに存在しています。サポートは事前に対策すべきものであり、あらゆる場面でユーザーに手を差し伸べなければなりません。

• プロダクトを導入するプロセスの中で
• 日々利用している中で
• コマンドラインのインターフェースとして

ユーザーがサポートを探しているときに、必要なものが簡単に見つかるようにしましょう。

ユーザーが製品を使用している中で、何がどのように動くかを理解し、タスクをこなすために必要なスキルを獲得できるよう、よく配慮してコンテンツを準備しましょう。エラーが起きるのを待つのではなく、タスクを進めるどの段階においても、できる限り間違いを避けられるようにします。

プロダクトやサービスが壊れたり、使えなくなったりしたら、いつ、どのように回復させることができるのかを伝えましょう。ユーザーにとって一番ベストな通知の仕方をしましょう。通知をするだけでなく、きちんと読まれ、気づいてもらうことが大切です。

サポートは、ユーザーに「十分に知らされてる」と感じてもらうことが大切です。サポートによって、ユーザーは製品を使うエキスパートへと進化します。説明する際は、ユーザーにとってわかりやすい言葉を使いましょう。

そして、ユーザーからフィードバックをもらう機会を持ち、製品の使い方について何を学んだかをヒアリングをすることで、サポートの体験を向上するヒントが得られます。

BBC GEL

ユニバーサルである

我々のメッセージはクリアであり、シンプルで、便利で、直感的なインターフェースによって人々に届けられます。我々のサービスは、本質的にオープンであり、誰にでもアクセスできるものです。

説得力がある

我々の発する声は、重大で権威的なものから、エンターテイメント性がありウィットが効いたものまで、広範囲に渡ります。ときにはオーセンティックで適切な表現をすべきであり、ときには人間らしく、温かみのある表現をすべきです。

正統派である

アイコニックなデザイン、巧みな参照報道の歴史を認識しています。

開拓者であ

我々は、驚きと喜びにおけるデザインイノベーションの開拓者です。予期せぬことを行うたびに、オーディエンスを魅了します。

時代を捕らえている

現在と言う時間を振り返り、過去との関連性を足すことによって、イギリス全体のタイムラインを形作っていきます。

独特である

我々は、今日のデザインのトレンドを反映するのではなく、未来を見ながらデザインをしていきます。個性のないデザインと、美しい無秩序の間にあるバランスをうまく保っていきます。

繋がっている

我々のすべてのサービス、プラットフォームは基本的にはひとつに繋がっている。それぞれのサービスが、あらゆる利用背景のニーズを満たしながら、首尾一貫した体験を構築していきます。オーディエンスをつなぎ、興味や体験をシェアできる場所を作ります。

ローカルでありグローバルである

我々から発するメッセージの中には、全世界の人に向けたものと、それぞれの地域にローカライズしたものが含まれています。

モダンなイギリス人である

我々のサービスは、UKの日常社会に織り成されていきます。モダンなブリティッシュデザインの美しさを受け入れ、国境の外へと伸びていきます。BBCのキャラクターは鮮やかであり、ちょっと癖があるのです。

ベストを尽くす

大事なことを言い忘れていましたが、一番大切にしているのはクオリティです。

Pinterest

コンテンツをもっと良く見せていく

Pinterestのフレームワークは、完全にシームレスで表面からは見えません。ユーザーは気づかないうちに、システムによってガイドされ、何をどうしたいかを考え、達成することができます。

活気がある

カラフルで大胆なPinterestのデザインは、遊び心に溢れた楽しい体験を提供します。しかし、人を呆然とさせてしまうようなものではありません。

タフである

まるで子供のおもちゃのように、機能を試せば試すほど早く使い方を学ぶことができ、沢山のベネフィットを得ることができます。そのプロセスで、操作を間違えたとしても、やり直しが効くようにデザインしています。

Foursquare

ユーザー個人のためのリコメンド

食事をする場所や、買い物をする場所を探す際、同じようなレビューばかり見ることがあります。しかし、店を薦めるにはさまざまな理由があっていいはずです。人の味覚はみんな異なっているのに、すべての人が同じように思う必要があるでしょうか。

継続的なデータ収集と状況に応じた活用

スマートフォンが、我々の味覚や、社会的なつながり、好み等をもっと知っていたら、もっと良い体験を提供することができると思います。ユーザーの状況にあわせて、お店やメニューを教えてあげるべきです。

遊び心のある視覚的な表現

シンプルで楽しく遊び心溢れるビジュアルを採用します。分かりやすいアイコン、コントラストの効いたカラー、スーパーヒーローのエンブレムとマップピンに着想を得たロゴで、ユーザーを楽しい探検へと誘います。

Asana’s Design Principles

ユーザーを仕事に集中させる

ユーザーの仕事を邪魔してはいけません。本当に必要なときだけ、ユーザーに干渉します。

明確にすることでより自信を持つ

アプリの利用を通じて、何がどうして起きているかをチームメンバーの中で明確にする。

チームに信頼を感じることこそが生産性を高める

ユーザーひとりひとりがチームの一員だと感じていることが重要です。

早く、効率的で、無駄のないデザイン

シンプルで頻発する仕事は、明確でスムーズに進行されるべきです。そして、難しい仕事は、効率的で、やりがいを感じられるべきです。しかし、スピードが不正確さを生み出してはいけません。

誰もがつかうことができる、革新的にわかりやすいデザイン

どんなに沢山の機能が搭載されているとしても、Asanaを使っているすべて人が、製品をどのように使えば良いかすぐに感じられなくてはいけません。

一貫性を保ちつつ、必要に応じて進化させていく

ユーザーがAsanaを使ったとき、最新だと感じるよりは親しみがあると感じてもらうようにします。

まとめ

デザインガイドラインの必要性と、その事例を紹介しました。

事例のなかから知っているサービスのデザインを考察してみると、ガイドラインに法ってデザインされていることがわかるはず。

あなたのプロジェクトや会社にも、デザインガイドラインを導入してみてはいかがでしょうか。

（翻訳：Akiko Ogita）