CASE STUDY

活用事例

有名企業を参考に学ぶ!デザインガイドライン公開事例10選

企業ブランドや商品づくり、それらを広めるマーケティングにおいて、デザインガイドラインをご自身の会社にも取り入れていこうと検討されている方が増えてきています。きっとこの記事をご覧になられている方も、そういった考えをお持ちのことでしょう。

よく耳にするもののなかなか分かりにくいデザインガイドラインについて、基本的な内容を解説します。併せて世界の有名企業にて公開されている事例もご紹介し、ポイントを整理していきますので、ぜひ自社での採用に向けた参考にしてみてください。

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

デザインガイドラインとは、企業などの組織における様々なデザインに関するルールを整理したもの(ドキュメント)を表します。ブランドや商品づくり、マーケティング戦略、Webページからアプリのデザインなど自社プロダクトの多岐に渡って採用されています。代表的なものとしては以下のような決まりやルールを内包する組織の共通言語であり、デザインガイドラインそれ自体がひとつのプロダクトであると捉えることもできるでしょう。

  • マーケティング戦略ガイドライン
  • ブランディングレギュレーション
  • スタイルガイド・コーディングルール

昨今では「UI」や「UX」などの分野で用いられることが増えてきています。

デザインガイドラインはなぜ必要か

デザインガイドラインは、情報伝達が煩雑になりやすい部分に関して情報のガイドライン(マニュアル)を作成し共有することで、プロダクトの品質担保やサービスの安定化、さらには時間やリソースなどのコスト効率を向上させることを可能にします。

現場で意思疎通や情報共有が上手く行われず、プロダクトなどのでき上がりがイメージと違ったり、見栄えや使い勝手が悪くなってしまったり、無駄にコミュニケーションコストが発生してしまったりするような経験をお持ちではないでしょうか。こういった課題を解決するものがデザインガイドラインなのです。

デザインガイドラインを作成するメリット

デザインガイドラインを作成するメリットについて触れておきましょう。以下の3点が代表的なメリットとして挙げられます。

  • メリット①:制作物の品質担保と工程の効率化
  • メリット②:コンセプトやメッセージ性の共通認識化
  • メリット③:ルール継承の簡便化

メリット①:制作物の品質担保と工程の効率化

ブランド設計や商品づくり、マーケティング戦略、Webページ・アプリのデザインなど制作物(発信物)全般においてデザインガイドラインは役立ちます。企業でのデザインや設計はその多くが複数人が関わる作業です。そのため各々がデザインや設計に関する基本的なルールを理解することで制作物に統一感が生まれ、品質を担保することができます。

また、デザインガイドラインを参照することでルールを理解できるため、無駄なコミュニケーションを省くことができ、各人及びチーム全体の効率化にも繋がります。

メリット②:コンセプトやメッセージ性の共通認識化

各プロダクトやブランドには企業ごと特有の目指す形やコンセプト、伝えたいメッセージといった、いわゆる「こだわり」に近いものが内包されています。そのため、デザインを行う上では、この「こだわり」に関して共通認識を持っておかなければ、最終的な出来上がりが大きくずれてしまう可能性があります。制作物の目指すゴールを言語化して共通認識を持つことで、制作過程で認識の齟齬が生じるリスクを避けることができます。

メリット③:ルール継承の簡便化

企業では人員の配置変更や入退社によって人の入れ替わりが日々発生するものです。そのため業務の引継ぎや研修などが必要となりますが、ここにコミュニケーションコストの大きな負荷や、伝達ミス・漏れなどのリスクが存在しています。社員を一定規模以上有する企業であれば、これらの課題が後々のビジネストラブルに発展するケースも少なくありません。

制作物のデザインルールに関してなども、人員の動きに対して柔軟に対応できるようにしておく必要があります。デザインガイドラインがあれば、人の入れ替わりがあってもそれ一つを参照すれば業務を開始できるため、ルールなどの継承が非常に効率的になります。

デザインガイドラインのデメリット

優れた機能を持つデザインガイドラインにもデメリットが存在します。それは「絶対的なものではない」という点です。デザインガイドライン作成時には厳格に決めすぎないことや、ガイドラインにとらわれすぎないように注意すべきでしょう。

企業は時代や状況に合わせて変わっていくものです。そのためデザインガイドラインもその時々で変容させていく必要があるということを前提に作成しておく必要があります。「更新しやすさ」という点もデザインガイドラインにおいては重要な観点です。

デザインガイドライン公開事例10選

デザインガイドラインの有名な事例として、公開されているものを10種ご紹介します。リンクも載せていますのでぜひガイドライン作りの参考にしてみてください。

Google:Material Design 

デザインガイドラインの事例として一番有名といっても過言ではないGoogleのMaterial Designは、GmailやAndroid OSなど多岐に渡るGoogle製品のデザイン基礎となっています。

Material Design

Apple:Human Interface Guidelines

日本では広く普及しているiPhoneを提供しているAppleによるデザインガイドラインです。アプリなどのデザインに関しては特に参考になります。

Human Interface Guidelines

Microsoft:Fluent Design System

どちらかといえば後発ですが、Windows OSで有名なMicrosoftもデザインガイドラインを作成しています。随時更新されており、今後の充実が期待されています。

Fluent Design System

その他7つの公開事例

Firefox:Photon

Adobe:Spectrum

IBM:Carbon Design System

salesforce:Lightning Design System

AUDI:User Interface / UI Introduction

Uber:Design Guidelines

クックパッド:Citrus

デザインガイドライン作成に役立つ「Spirally」

様々な公開事例と併せて、最後にデザインガイドライン作成に非常に役立つ仕組みをご紹介します。それが、これからガイドライン作成を行う企業向けのプラットフォーム「Spirally(スパイラリー)」です。

「Spirally」の5つの特徴

「Spirally」の特徴は以下の5点です。これらによりデザインガイドラインを作成・導入する負担を軽減し、理想的な運用を可能にします。

  1. テンプレートが利用可能
  2. 便利な自動生成コンテンツ
  3. バージョン管理対応
  4. コンテンツ公開範囲を設定可能
  5. 直感的に使いやすいUI

テンプレートが利用可能

質問に答えるだけでテンプレートをもとに作成できます。

便利な自動生成コンテンツ

ロゴ登録することでブランドカラーも自動生成されるなど、サクサクとコンテンツが作成されます。

バージョン管理対応

すべての改訂履歴にすぐにアクセスできる仕様です。

コンテンツ公開範囲を設定可能

一般公開や限定公開などを公開範囲を設定できます。

直感的に使いやすいUI

誰でも使いやすいUIで、オンラインガイドラインも分かりやすく最適化されています。

「Spirally」の編集方法

「Spirally」を実際に利用する際のイメージとして、プロジェクトごとの編集方法を簡単にご紹介します。

プロジェクト編集画面では以下の機能が使用可能で、簡単にデザインシステム作成を行える仕様です。

  • 見出しの挿入
  • 文章の挿入
  • 画像・ファイルのアップロード
  • 引用の挿入
  • カラー設定(画像からの自動生成)
  • テキストリンクの挿入
  • ブロックリンクの挿入
  • テーブルの編集

まとめ

デザインガイドラインには正解はなく、その内容や形式は企業や時代ごとに変わるものです。今回ご紹介した概念や公開事例を参考にしつつも、それにとらわれすぎず、自社にとって最大限メリットを生み出せる最適なものを作成することが大切です。

そういった各企業にとって理想的なデザインガイドライン作成をサポートするため、「Spirally」は誕生しました。興味を持たれた方は、まずはお気軽にお問い合わせください。

>>お問い合わせはこちら