見ているだけで楽しく、学びが多いAudiのデザインガイドライン

デザイナー・エンジニア間でルールの認識合わせをしやすくしたり、コンポーネント化することでブランドらしい一貫性あるデザインにする目的で用意されるデザインガイドラインですが、Webの世界で仕事をする私たちは、デザインガイドラインといえば、Googleのマテリアルデザインを思い浮かべる人も多いかと思います。

Audiのデザインガイドラインは、Web系の会社が作るものに加えて、主張する主役が「自動車」という物理的なプロダクトである故に、写真レイアウト、メディアコミュニケーション、コーポレート、サウンドに関する定義など幅広くなっています。

見ているだけで楽しく、学びが多いデザインガイドラインなので、個人的な学習まとめを兼ねて整理したいと思います。

「What does Audi feel like?」から始まるプロローグ

Brand Appearance

「What does Audi feel like?」
アウディのことどう感じますか？

アウディののAppearance（外観）を構築する3原則
・バリエーション（多様性）
・理解しやすさ（誠実さ）
・バランス

アウディが誰であるかを明確に識別するためにこのデザインガイドラインを定義し、常に驚きをインスピレーションを与えるためとプロローグで記しています。

アウディロゴ「Ring」の定義

Basics / Rings

アウディロゴ「Ring」の使い方に関するルールを様々な角度から定義している章。

例えば、Ringの高さが100%だとすると、大文字の場合は70%にしろなど、タイポグラフィに対する比率を細かく定義しており、Ringの大きさを数値指定した時に、フォントサイズを●ptにするといった入力フォームを用意しています。

ロゴとフォントの垂直位置間隔はRing半円分

ロゴとの水平配置と間隔に関する定義

タグライン

Basics / Tagline

The brand name and claim “Vorsprung durch Technik” go together to form the tagline.

ブランド名とタグラインの“Vorsprung durch Technik”が一体となって主張している。

一緒に使うときは「Audi]」がBold。タグラインがNormal。

配置例も美しい

Typography

Basics / Typography

利用フォントは「Audi Type」という独自フォント

見出しは最大125%をオススメするとのこと

インターフェースだけでなく、インタラクション系の定義も

これはまさにAudiらしさを表現するための秘伝のタレといえます。Googleマテリアルデザインや、ディズニーアニメもそうだが、動きにらしさがあり、それが定義されているのはすごいこと。見習いたいです。

Animation（アニメーション）
https://www.audi.com/ci/en/intro/basics/animation.html

イージングに使う3次ベジェ関数のcubic-bezierの数値や、モーションの発信速度、着信速度まで明確に定義。

このページにあるサンプルでは、車が動く・曲がる動画例でもそのアニメーションタイミングが再現されていることを表しています。

Functional Animation（機能的なアニメーション）
https://www.audi.com/ci/en/guides/user-interface/ui-animation/functional-animation.html

ボタンをクリックした時、正常終了したことを表す「Feedback」、要素がどこから来たのか、どこからアクセスされたかが分かる「Position」などを定義。

Transition（遷移）
https://www.audi.com/ci/en/guides/user-interface/ui-animation/transitions.html

表示・非表示、横へのシフト、ダイアログ系のオープン・クローズなどを定義。

コーポレートブランディング

https://www.audi.com/ci/en/guides/corporate-sound1/corporate-sound.html

コーポレートサイトで出てくるような、メニューだったりCSRコンテンツだったりでどんな表現をすべきかを定義している章。

車両のレタリングにも言及

コーポレートサウンドまで定義

インスピレーションを与えることを大切にするAudiならではかもしれませんが、目だけでなく音でもAudiらしさを定義しています。

Corporate Sound

面白いのは、車の音やドアの音まで。
https://www.audi.com/ci/en/guides/corporate-sound1/car-sound.html

最後に

街を歩いていてAudiのショールームを見つけたら、そこで表現されるデザインに注目するようになりました。

表面的なデザインだけでなく、背景となる考え方も言語化されているので、着目すべきポイントやAudiに対する見方自体が変わったように感じます。

デザインガイドライン作成には多くの決定プロセスが必要で、工数もかかりますが、その後の制作しやすさや非属人化、ブランド品質の担保など時間の投資に値する作業といえます。

そして何より作るプロセス自体も楽しく、自社の存在意義や背景を再定義するいい機会にもなると思います。私たちも今ある社内のガイドラインを徐々にブラッシュアップしていければと思います。