このところ、AirbnbやUberなどの海外サービスの主要デザインチームを中心にデザイン言語と呼ばれるものを策定する動きが広まっています。

もちろん、これまでもデザインにおけるガイドラインの策定は行われていましたが、デザイン言語はガイドラインとは少し違った意味合いで作られてます。

そこで今回は、国内メーカーもこぞって採用するデザイン言語について紹介します。デザイン言語の作り方がわかるように、具体的な事例も合わせて紹介します。

デザイン言語とは？

ds.jpg
イメージ画像 / Unsplash

デザイン言語(Design Language、Design System Languageとも)は、チーム内で共有されるデザイン概念を言語化したものです。2016年頃からデザイン業界を中心に話題となっている考え方で、多くの企業のデザインチームが内外に向けて策定するケースが多いようです。

デザイン言語は、狭義ではデザイン原則やパターンなどに「名前」をつけて、誰もが同じ方向性を向いてデザインできるようにした*「用語集」や「リファレンス」のようなものです。しかし、広義ではより広く「世界観」*を表すものとされています。

同じ方向性を向いたデザインは、スターバックスがわかりやすい例として挙げられます。スターバックスに行けば、日本でも、台湾でも、イギリスでも、ハワイに行っても、各国の雰囲気を感じながらも、近所のスターバックスととても似た雰囲気を感じ取り、親近感が湧くはずです。

国内メーカーも採用！注目のデザイン言語の一例

dd.jpg
イメージ画像 / Unsplash

デザイン言語がどのようなものなのかを理解するのは、実例を見た方が早いかもしれません。ここでは、主要な4社のデザイン言語を紹介します。

1. Airbnb Design System

ab.png

Airbnbは、Airbnb Design System(以下ADS)というデザイン言語を策定して、快適なユーザー体験(UX)を作り出すことに成功しています。

Airbnbによれば、ADSは次の4つの基本原則があります。

・Unified (統一的)：それぞれの部分が全体の一部であり、システムがスケールした時に積極的に寄与するようデザインする。孤立したパーツがあってはならない。
・Universal (普遍的)：Airbnbは幅広いグローバルコミュニティで使用されるので、どこでも歓迎されて利用可能なものにする。
・Iconic (象徴的)：デザインと機能性の両立をする。この点に関しては大胆かつ明晰的に議論する。
・Conversational (対話的)：動きを取り入れることで製品に命を吹き込み、ユーザーがより理解できるような対話を生む。

こうした原則のもと、色に名前をつけたり、スペースの大きさまで決めています。こうした指針があれば、製品をローンチしながらも改良を重ねていく*「デザインイテレーション」*の手法はより早まります。

参考：
効率的にデザインするなら押さえておきたい「デザインイテレーション」の基本

2. IBM Design Language

ibm.png

IBM Design Languageは、データビジュアライゼーション製品などに強みをもつIBMが、自社製品のデザインの監修を行うために作ったデザイン言語です。

デザイン言語の紹介ページを閲覧していただければわかるように、タイポグラフィからボタンのデザインまで細部に渡るまで説明尽くされています。フォントはHelvetica Neue、ラベル付きアイコンは82px、といった具合です。

ただし、IBM Design Languageは、他のデザイン言語とは違って、Information Architecture(情報構造)に関する記述は群を抜いて優れているので必見です。どのようにすれば情報を正しく整理できるのか、その概要が掴めるでしょう。

3. Microsoft Design

ms.png

Microsoft Designは、Microsoftが公開しているデザインガイドラインです。

一時期はApple製品に比べて「ダサい」「センスがない」と卑下されていたこともあったMicrosoftですが、数年前にOfficeのデザインも刷新され、HoloLensやSurfaceなどのハイデザインな人気デバイスも次々に市場に投入されています。

中でも注目なのが、フラット・マテリアルデザインに続き、3次元のデザインを定義したFluent Design Systemです。

参考：
フラット、マテリアルの次？Microsoftが提唱する「Fluent Design System」とは？｜ferret フェレット

4. NISSAN Design Language

ns.gif
※このWebページは現在公開されていません

NISSAN Design Languageは、日産自動車(以下、日産)が考案したデザイン言語です。

様々な自動車がある中で、車のエンブレムを確認する以外に*「それが日産の車だ」*と判断するのは一般の人には難しいかもしれません。そこで日産は、どのクルマからも同じようにブランドメッセージが伝わるように、デザインランゲージを策定しました。

車種ごとにデザインを変えながらも、「Vモーショングリル」「ブーメランシグネチャー」など、共通するデザインに名前を付け、「日産らしさ」を社内外に啓蒙しています。

また、ここに紹介する以外にも、様々な企業がデザイン言語を策定しています(一部、デザイン言語ではなくデザインガイドラインを並べていますが、参考までに掲載します)。

・WeWork：Plasma Design System
・Buzzfeed：Solid
・BBC：Global Experience Language
・Google：Google Design
・Salesforce：Lightning Design System
・Shopify：Polaris
・Apple：iOS Human Interface Guidelines
・Zendeck：Garden
・Uber：Uber Design Guidelines
・面白法人カヤック：カヤック デザインガイドライン