一貫した体験のために、デザイン言語を確立する手順 | アドビ UX 道場 #UXDojo

デザインはコミュニケーションの一形態です。ユーザーインターフェイスは、ユーザーに語りかけるために、何十もの独立した要素を組み合わせて使用します。色、タイポグラフィー、シェイプ、パターンなど、画面に表示されるスタイルはすべて、ユーザーの理解の仕方に直接の影響があります。

こうしたデザインによるコミュニケーションを体系化するためのツールがデザイン言語です。デザイン言語は、デザイナーが、視覚的に調和して一体感のあるデザインを制作し、個性的で一貫性のあるルック & フィールを製品に与えるために役立ちます。

この記事では、デザイン言語の概念、作成するべき理由、そして適切な作成方法を説明します。

デザイン言語とは何か

デザイン言語とは、デジタル製品の全体的なデザインを表現するために使われる言語です。例えば、ワイヤーフレームからビジュアルデザインへの橋渡しとして利用されます。

デザイン言語の直接的な機能は、目に見えるサインをユーザーが知覚し理解するのを助けることですが、製品を操作するユーザーの体験全般にも影響します。

デザイン言語はデザインシステムと同じものなのでしょうか？答えは「いいえ」です。きちんと定義されたデザインシステムは、実装の詳細（ツールや技術）、デザイン言語、カルチャー（価値観、原則、プラクティス）から構成されています。

つまり、デザイン言語は、デザインシステムに欠かせない構成要素です。一貫した UI をつくるためにコンポーネントとスタイルを組み合わせる方法をチームに示すだけでなく、そもそも、なぜそのコンポーネントとスタイルを使う必要があるのかも伝えます。

そのためデザイン言語の作成に取り組むチームは、製品やブランドの全体像を理解することが必要です。言い換えると、ユーザーに伝えたいメッセージと、ブランドをどう理解してもらいたいかを理解していなければなりません。

デザイン言語の要素

一般的に通用するデザイン言語の厳密な定義はありませんが、多くのデザイン言語には、以下のような共通の要素が存在しています。

• UIコンポーネントとパターン集: ユーザーインターフェイスを構築するために使用できる、再利用可能な基本要素
• スタイルガイド: デザインの視覚的な特性（色、フォント、ホワイトスペースなど）に関する情報と、それらをデザインに適用する方法についての指示
• セマンティクスの記述: デザイン要素（色、形、フォントなど）の背後にある意味や意図、あるいは、スタイルやコンポーネントの命名規則の定義などの理解を助ける文章

デザイン言語を持つ利点

一貫性

ユーザーは、一貫性のあるデザインに接すると、断片的なデザインよりも、より快適な体験を得られます。小規模なチームやプロジェクトでは、一貫性のあるコンテンツやインターフェイスの作成が大きな問題にはならないかもしれませんが、規模が増大するにつれて、その実現は加速度的に困難になります。この問題に対処して、プロジェクトの全体的な進行と規模の拡大を支援するために、製品チームはデザイン言語を導入できます。

ブランドアイデンティティと信頼性

ブランドは、顧客の企業あるいは製品に対する期待や認識に関わります。デザイン言語は、デザイナーが効果的なブランディングを行う上で最も強力な道具のひとつになります。というのは、デザイン言語にはデザインを信頼できるものにする効果があり、信頼は差別化につながるからです。独特なビジュアルデザインは、個性となって記憶に残ります。Google Doodles は、ブランドの信頼性と認知度を高めたデザインの好例です。

効率とコスト

デザイン言語を準備しておくことで、デザイナーは、品質を落とすことなくデザインを迅速に繰り返し修正できるようになります。適切に定義された再利用可能なコンポーネントを使用し、明確なルールに従ってデザインにスタイルを適用できるためです。

デザイン言語を構築する際の 5 つのルール

たいていの素晴らしいものがそうであるように、優れたデザイン言語が偶然に生まれることはまずありません。それは、おそらく長くて徹底した作業の成果でしょう。

以下は、ビジュアル言語の作成プロセスをより効率的にするために役立つ 5 つのルールです。

1. UI 監査の実施

デザイン要素の重複は断片化を招き、断片化が起きると一貫性が失われます。予め重複を把握できるようにしておけば、ある要素をゼロから作り、しばらくしてその要素がすでに存在していることに気づくという状況を避けられます。これが、デザイン言語の作成を UI 監査から始める理由です。

UI 監査では、どのような色、フォント、シェイプが現在使われているかを明確にします。その手順は比較的シンプルです。画面を構成する個々のコンポーネントのスクリーンショットを撮り、カテゴリーごとに整理します。この作業の最後では、一連のコンポーネントが適切に分類されて、デザインの一貫性の欠如が明らかになるはずです。

ステークホルダーからブランドガイドラインを入手することも価値のある行為です。そのブランドの一般的なルック＆フィールを理解するのに役立つでしょう。

2. ボキャブラリーの作成

話し言葉に単語とその意味があるように、デザイン言語にも、視覚的な単位とその意味があります。デザイン言語をつくり始めるときには、最初に語彙を定義する辞書を作成します。この辞書は、再利用可能な視覚的要素を明確に定義したものでなければなりません。また、パターンライブラリ（分類とグループ化ができ、再利用可能な構成要素）とスタイルガイドも含めるべきです。

デザイン要素に明確な目的と意味を割り当てるのは困難な行為ですが、コミュニケーションを通して各要素の意味を評価することが可能です。デザイナーのネイト・ボールドウィンが提案した以下の文章構造は、デザイン要素の意味を特定し、定義し、伝えるために役立ちます。

【パターン／ライブラリ】で使われている【デザイン要素】は、【目的と意味】を伝えるのに役立つ。

視覚的な単位を評価するときは、いつでもこのテクニックを使えます。例えば、登録フォームのエラーメッセージの色を選択しようとしているなら、「【登録フォームのエラーメッセージ】に使われている【印象的な赤】は、【ユーザーにメッセージの重要性】を伝えるのに役立っている」という文章になるかもしれません。

3. デザインの指針となる原則の確立

良いデザインをどのように定義すればよいでしょうか？公開できる状態になったことを判断する根拠は何でしょう？デザインの品質を評価する局面で、デザイナーはしばしば各自の基準に頼ります。しかし、チーム規模が拡大すると、このようなやり方はデザインプロセスを混乱させる原因になる可能性があります。というのは、それぞれのデザイナーが持つ価値観は固有で主観的なものだからです。

そこで助けになるのがデザイン原則です。デザイン原則には、プロジェクトに取り組むデザイナーが従わなければならない、基本的なガイドラインを定義します。またこれは、意思決定の議論を簡素化するための資料としても活用できます。(この件については、マジェラ・ムーンの記事「Creating Etsy’s Design Principles」をご覧ください）

デザイン原則への取り組みは、デザインを通じて個性や目的をどのように伝えるかを考える絶好の機会です。例えば、ブログプラットフォームとして有名な Medium のデザイン原則のひとつは、「Direction Over Choice（選択より方向性）」です。Medium チームは次のように説明しています。「この原則は、Medium の記事入力画面をデザインしているときに、しばしば参照されました。私たちは意図的に、レイアウト、文字、色などの選択肢と引き換えに、ガイダンスと方向性を確保しました。人々には、選択肢に気を取られることなく、書くことに集中してほしかったからです」

4. ルールを確立し、遵守する

話し言葉に他の人との会話を可能にするルールがあるように、デザイン言語にもルールがあります。製品チームからユーザーへのコミュニケーションのためのルールです。

このルールの存在は、デザイナーへの制約を意味します。「制約」という言葉には否定的な含みがあり、クリエイティビティを制限するように聞こえるかもしれませんが、実際には、ルールのおかげでデザイナーがより効率的に作業できます。また、明確なルールを確立すれば、メンバーが悪いユーザー体験をつくることを防止する効果があります。

デザイン言語に定義できるルールには 2 つの種類があります。

• 厳密なルール: これは厳密に適用されるべき詳細なルールです。
  例 「この 16 進数の赤は、エラーメッセージのためだけに使用します。UI の他の部分での使用は強く禁止されています」
• 緩やかなルール：推奨されるルールですが、より良いブランド感やページの機能のためにデザイナーは無視することができます。
  例「可能な限り、UI の機能的な要素にはブランドカラーを使用します」

ひとたび製品チームがデザイン言語のルールを策定し合意したら、それに忠実であることが肝要です。デザイン言語を構築した後に起こる最大の失敗は、ガイドラインに従わないメンバーのために一貫性がなくなることです。マネージャーは、デザイナー達がルールを基準にデザインを検証する機会を確保するため、デザインレビューを導入するべきです。

5. 言語を生き物のように考える

話し言葉は時間とともに変化します。文化から影響を受けて変容するからです。この点に関しては、デザイン言語も全く同じです。新しいトレンドが日々登場し、Google や Apple のような影響力の大きな企業が、自社製品を新鮮に見せるためデザインガイドラインを頻繁に更新しています。

ビジュアル言語は、完全に固定されたルールではなくて、製品とともに成長するエコシステムであるべきです。そして、このエコシステムは、変化に容易に対応できる必要があります。デザイン言語のシステムを監督する立場の人は、現在のトレンドに精通するよう努め、最も価値のある変化を言語に導入するよう心がけましょう。

おわりに

美しくて使いやすいデザイン言語をつくるには時間がかかります。おそらく、最初の試みから確固としたデザイン言語を手にすることはできないでしょう。ですが、それは全く問題ありません。時間を費やして言語のしっかりとした基礎を築き、チームと共に成長し成熟させることこそが重要なのです。

この記事は How to Develop a Design Language（著者: Nick Babich）の抄訳です