デザイン言語 とは？その重要性を徹底解説

視覚コミュニケーションは例外なく複雑であり、多様で、無限で、絶え間ないものです。そしてデザイン言語は、デザイナーがエンドユーザーとコミュニケーションをとるために必要な、明快さ、一貫性、まとまりをもたらす原則と制約を確立するものです。

このデザイン言語の開発には、複数の部門やステークホルダーからのフィードバックや協力が必要で、時間がかかる作業です。

その結果、企業は収束的で一貫性のある体験を生み出し、支出を大幅に削減し、簡単に追従できる高いデザイン基準を設定することができるようになります。

UXPin Merge の信頼できる唯一の情報源（Single source of truth）により、デザイン言語をコンポーネント ライブラリに内蔵することができます。詳細およびこの革新的なテクノロジーへのアクセスリクエストについては、Merge ページをぜひご覧ください。

デジタル製品のデザインにおけるデザイン言語とは

デジタル製品のデザイン言語とは、デザイナーがユーザーとのコミュニケーションに用いる視覚的・対話的な要素のことであり、プラットフォーム、製品、UI（ユーザーインターフェース）、機能など、あらゆる場面で一貫性のあるUX（ユーザーエクスペリエンス）を実現できるようにします。

デザイン言語は通常、企業のブランド価値とアイデンティティに関連し、人々はそのデザインとコンテンツを通してブランドを認識することができるようになります。

デザイン言語は、以下のように製品のさまざまな面をカバーするものです：

• 色
• フォント
• アイコン
• 音
• スペースおよびレイアウト
• コピー
• グラフィックデザインおよびイラストレーション
• データ可視化
• ステート

デザイン言語とデザインシステム

デザイン言語は通常、デザインシステムやスタイルガイドの中に存在し、製品チームにガイドラインや使い方、指示などを提供します。２０１７年の記事で、UXPin の創設者であるマーシン・トレダー氏は、「デザインシステムは言語である」と以下のように主張しました：

「デザインシステムとは、刻々と変化する言語の現状を記述し、その正しい使い方を規定し、その言語を使うすべての人にその拡張を促す動的な辞書である。」 – マーシン・トレダー氏

デザインシステムの構築を目指すのであれば、まずビジュアル言語を確定することが、UI コンポーネントやパターンライブラリの開発の指針となります。

デザイン言語を持つことが重要な理由

デザイン言語とは、組織の視覚的アイデンティティを導く一連のルールと原則であり、デザインに連続性を持たせるためのものです。

きちんと確定されたデザイン言語は、以下のような多くの利点をもたらします：

• 誰がプロジェクトに参加しても、デザインチームが一貫した成果物を確実に提供できるようにする
• 新しいチームメンバーに指示やガイドラインを提供し、オンボーディングと引継ぎを効率化する
• 強いブランドアイデンティティと信頼の構築に役立つブランドの一貫性を構築する
• ユーザーに親しみやすく、一貫した UX を提供することで、デジタル製品をより直感的に操作できるようになる
• 製品チームによるデザイン上の判断が少なくなり、効率と生産性が向上するため、スケーラビリティの基盤を提供する

デザイン言語に込められているもの

デザイン言語には、視覚的・概念的な標準の集合体が必要であり、その基準は、以下のように３つの柱に分けることができます：

• UI コンポーネントとパターン集
• スタイルガイド
• セマンティクスのドキュメント化

  これらは色、タイポグラフィー、アイコン、インタラクション、アニメーション、リソース、フォルダシステム、命名規則、プロダクトのグリッドシステムなどを確定します。  

さらに、デザイン言語は、ブランドの声のトーンや価値観を深く理解するものでないといけません。

統一された視覚的デザイン言語

デザイン言語には、『内的』および『外的』な２視点があります。

• 内的：各チームが、基準点と座標のセットを使って同じルールと方法論に確実に従うようにし、それによってデザインプロセスが効率化され、混乱がなくなる。
• 外的：複数のプラットフォームや製品において、親しみやすく、直感的な UX を提供する。

  この２つの視点を融合させることで、企業は、より効率的なデザインプロセスの構築、印象的なブランドアイデンティティの構築、ユーザビリティの向上などを実現できます。

デザイン言語の例

多くのデザイナーがデザイン言語の開発やデザインシステムの構築のモデルとしている組織は、以下の２つです：

• IBM
• Airbnb

IBMのデザイン言語

IBMのデザイン哲学の１つとして、「一目でわかるデザインの作成」があります。ユーザーは、ロゴそのものではなく、そのデザインの特徴によってIBMの製品を識別できるはずです。

ブランド再生とユーザーフィデリティを構築するには、差別化された視覚的アイデンティティが不可欠であり、IBMは、2x Gridのようなグリッドシステムのエンジニアリングによって、それを実現しています。

「グリッドの正確な使用、一貫した形状、角度、半径で、イラストの ”IBMらしさ” を表現する上で重要な特定の美学を確定することができ、熟考された体系的アプローチが明らかになるのです」- IBM。

Airbnbの視覚言語

Airbnb の視覚言語は、同様の結果を達成しつつ、柔軟に拡張することを目的としており、このデザイン言語は、Airbnb の強力なブランドアイデンティティを維持しながら、スピードと成長を優先しています。

「シンプルなことを言うと、まずは作り方を革新しなければ、製品に革新を起こすことはできません。」– Airbnb のデザイン担当副社長、アレックス・シュライファー氏。

Airbnb の言語で、デザイナーとステークホルダー間のコミュニケーションがしやすくなり、プラットフォームやデバイスを超えたプラクティスの標準化が実現します。

デザイン言語の作り方

デザイン言語の開発には大変な労力と時間がかかりますが、その努力に見合うだけの価値があります。始めるのが早いほど労力は軽減され、チームは早くその成果を得ることができるのです。

 

UI 監査から始める

デザイン言語を開発する前に、UI 監査を行うのがベストである場合が多く、監査によって、問題点、矛盾点、理念や価値観に合わないデザイン上の意思決定の特定ができます。

ボキャブラリーの作成

ボキャブラリーは、製品の視覚的要素を含み、明確に確定する必要があり、パターンライブラリーとUIコンポーネントを体系化し、スタイルガイドを付属させることを目的としています。

スタイルガイドでは、各要素の目的や、それらがどのように一貫性と明瞭性を促進するのかについて、以下の例のように方向性を示す必要があります：

”この【ライブラリ】の【デザイン要素】によって、【目的】を表現することができる ”

このような方向性（原則）を簡潔で理解しやすく、実行しやすいものにすることが重要です。例えば、世界中の何千人ものデザイナーに使われているShopify Polarisは、そのデザイン原則を以下のように１００文字以内で表現しています：

• 新鮮なビジュアルスタイル：クリーンでシンプルなスタイルは、親しみやすく、効率的な印象を与えます。

• より速いパフォーマンス：エレガントなコードと軽量なアセットにより、ページの読み込みがより速くなります。

• 将来的な親しみやすさ：柔軟性のあるデザイントークンと新しいインフラストラクチャにより、さまざまな体験のイテレーションが簡単にできます。

• 目的に応じたブランドの存在感：Shopify ブランドを「前面に出すとき」「後ろに下げるとき」を意図的に決めることで、最も重要なところに焦点を当てることができます。
• 経験を通じた親しみやすさ：明確なパターンとガイドラインがあるため、様々な体験をデザインしても、常にShopifyらしさを感じることができます。

Polaris では、この簡略化されたアプローチがドキュメント全体に使用されています。

このように単純化することで、組織は上記のような有意義な制約を設けることができ、デザイナーは意思決定を効率化することができます。例えば、Atlassian はカラーパレットの背後にある論理を以下のように説明しています。

「主要なパレットは、ブランドに大胆さをもたらすニュートラルカラー、白、青で構成されており、製品やマーケティングにおいて、視線を誘導し、重要な部分を強調するために論理的に使用されます。加えて、経験を柔らかくし、自信と楽観主義を与えるために、全体に温かみのある二次的なパレット色が散りばめています。」– Atlassian デザインシステム班

デザイン原則の明確化

製品のデザイン理念の背景にあるデザイン原則は、デザインの品質と目的を評価するためのリトマス試験紙であり、それによって組織は、プロトタイプがその一般的なガイドラインに沿っているかどうかを評価することができます。

主なポイントとしては、以下のようなものがあります：

• 一貫性
• 明瞭さ
• シンプルさ
• 使いやすさ
• アクセシビリティ

例えば、Airbnb のデザイン原則は、アクセシビリティと機能性を優先しており、「統一的、普遍的、象徴的、会話的」なデザインの実現を目指しています。

また、IBM の原則は、「慎重な検討、独自の統一、専門的な実行、積極的な進歩」が行われるデザインを生み出すことを目的としています。

ルールの設定

組織の価値が何であるかは「原則」が確定し、それをどのように達成するかにおいては、「ルール」がチームを導きます。そのルールは、一貫したワークフローと成果を生み出し、優れたユーザー体験の提供に不可欠です。

ルールの厳しさは、厳格なものもあれば、創造性や柔軟性を発揮してイノベーションを起こすものもあるでしょう。このような違いを最初から認識するのは難しいので、チームメンバーからのフィードバックを促すことが重要です。

成長の促進

デザイン言語とデザインシステムは、製品、市場、技術の変化に適応し、常に進化し続ける有機体であり、デザインシステムチームは、ユーザーの貢献を促しながら、その変化に適応していかないといけません。

「統一されたデザイン言語は、静的なルールや個々のアトムの集合ではなく、進化するエコシステムであるべきです。」Airbnb の主要デザイナー、カーリ・サーリネン氏。

ここでは、柔軟性を保ちながらデザイン言語を更新するための方法を３つご紹介します：

• 市場動向を把握し、ユーザーにとって適切なデザイン言語を確実に維持できるように調整する。
• 製品に関わる人々とデザイン言語が一致するように、ペルソナを常に更新する。
• 戦略的なデザイン機会を探るのに競合状況をモニタリングし、明確な視覚的アイデンティティを構築する。

デザイン言語作成の責任者

デザイナーは組織のデザイン言語を開発する責任がありますが、それは複数の部門やステークホルダーの意見を必要とする共同作業です。この連携により、組織全体における導入と共有が高まります。

以下は、デザイン言語を開発する際に含めたい、主要な部門や専門家です：

• UX/UIデザイナー：言語のビジュアルコンポーネントを担当する。
• アクセシビリティの専門家：確実にアクセシビリティに配慮した言語であるようにする。
• UXライターまたはコンテンツ戦略担当：声のトーンのガイドラインとブランド広報担当のパラメータを担当する。
• 研究者：エンドユーザーのニーズに対する貴重なインサイトを提供する。
• フロントエンドのデベロッパー：効率的なプログラミング構文を書き、ドキュメント化をサポートする役割を担当する。
• ステークホルダー：その言語が確実に組織の目標やアイデンティティに合致しているようにする。

UXPin Mergeによるデザイン言語の統一

UXPin Mergeは、製品のUI ライブラリと UXPin のデザインエディタを同期させるための技術です。Mergeがこのギャップを埋めることで、デザイナーは UX デザインプロセスにおいて、エンジニアが最終製品を開発する際に使用するのと同じコンポーネントを使用できるようになります。

この「信頼できる唯一の情報源（Single source of truth）」は、内蔵されたプロパティ、原則、および制約によって、デザインの摩擦を排除し、デザイナーとデベロッパーの連携を強化します。

デザイナーは、ゼロからデザインするのではなく、このようなコンポーネントをビルディングブロックのように使って、ユーザーテストのためのプロトタイプを作成します。エンジニアにはすでに同じ UI ライブラリがあるため、デザインハンドオフがスムーズ、もしくはハンドオフ自体ほとんど存在しないことから、エラーや負債を最小限に抑えながら、市場投入までの時間を短縮することができます。

UXPin Merge による「信頼できる唯一の情報源（Single source of truth）」で製品開発プロセスを統一しませんか。詳細とアクセスリクエスト方法については、Merge のページをぜひご覧ください。