4つの要素で考える、プロダクトデザインのためのデザインシステム構築とは
これまでさまざまな組織のデザインシステム構築や運用を支援してきたグッドパッチ。本連載ではデザインシステムにフォーカスし、その概要や歴史、導入から運用、構築にいたるまで網羅的にお届けします。第5回は「デザインシステムの構築フェーズ」についてです。
※本記事はウェブマガジン「CreatorZine」に2024年3月15日に掲載された記事を再掲載したものです。
こんにちは。グッドパッチのUIデザイナーの乗田です。前回の記事では、グッドパッチがデザインシステム構築を支援する際の準備フェーズで行う4つの作業について紹介しました。第5回では、「デザインシステムの構築フェーズ」をテーマにお届けします。
目次
はじめに
本連載では、デザインシステムは単なるデザインのコンポーネント集ではなく「組織の課題を解決するためのツール群である」ということをお伝えしてきました。
今回はこの考えに基づき、組織課題が特に発生しやすく、構築することで価値が生まれやすいであろうプロダクトデザイン領域に焦点を当て「デザインシステムの構築」について紹介します。
プロダクト開発の核となる「プロダクトデザイン」を行う際の指針となる次の4要素について、構築の方法やポイントを解説していきます。
- デザイン原則
- スタイルガイド
- コンポーネント
- コンテンツガイドライン
これらの要素を適切に構築し組み合わせることで、組織はプロダクト開発のプロセスをさらに効率化し、より一貫性のある体験を実現することが可能です。最終的には、これらの取り組みが組織の課題解決や価値へと結びつくのです。
価値を最大化するためには、必要な要素から着手し、組織の具体的なニーズに応じてデザインシステムを育てていくことが重要です。そのため、今回はプロダクトデザインのための4つの要素を構築する手法を紹介しますが、必ずしもすべての要素で順番どおりに構築していく必要はありません。組織にとって価値がある部分から、少しずつ取り組んでいくことを意識しましょう。
1.デザイン原則
プロダクトやサービス開発の現場において、デザイン原則はメンバーが意思決定をする際の基本的な指針として機能します。デザインの前提となる方針や、デザインへの取り組み方そのものが組織内で統一されるため、コミュニケーションコストを削減できます。
グッドパッチがデザイン原則を構築する場合は「ブランドデザイン、プロダクトデザイン、コミュニケーションデザインを包括したデザイン原則」と「プロダクトデザインのためのデザイン原則」の2種類を用意します。
「包括的なデザイン原則」は、デザイン成果物の方針だけではなく、デザインへの取り組み方も指針として含まれます。それに対し「プロダクトデザインのためのデザイン原則」には、ユーザビリティとアクセシビリティの原則がそれぞれ含まれ、ユーザーにとっての使いやすさとアクセスしやすさをどのように確保するかを明文化することが目的です。
始めはプロダクトデザインのための原則を用意し、デザインシステムで扱うデザインの対象領域が拡張されたタイミングで、包括的な原則を構築することが望ましいでしょう。
デザイン原則が必要な理由
デザイン原則が必要な理由を一言で言うと、「一貫性」に集約できます。組織がデザイン原則を構築することで、チームは迅速かつ一貫した意思決定を下せるようになるため、作業効率を最大化できます。また、ユーザビリティとアクセシビリティの指針が明文化されることで、ユーザーにも一貫した使いやすさと情報の受け取りやすさを提供できるのです。
デザイン原則の構築方法
デザイン原則は組織のビジョン、ミッション、バリュー（VMV）からブレイクダウンされている必要があります。これは第4回の記事でお伝えしたように、デザインシステムの根底には組織文化が存在しているためです。
デザイン原則は「組織がどのようにデザインに向き合うべきか」を言葉にしたものですが、その前提には、組織が顧客や業務にどのように向き合うかという指針があります。
デザイン原則は組織のVMVと同様に、「組織の文化」とも言える存在です。そのため構築の際にはデザイナーはもちろん、エンジニアやプロダクトマネージャーなど、デザインに取り組むステークホルダーの合意の下、策定することをオススメします。
次の内容は、グッドパッチがデザイン原則構築時に行うグループワークでよく実施するプログラムです。
- デザイン原則の必要性や活用方法を言語化し、デザイン原則を策定する上での完了条件を定義する
- デザインに取り組む上で、今現在の時点で大切にしている観点とこれから大切にしたい観点を発散する
- 発散した観点をラベリングとグルーピングで整理し、組織の核となる要素を抽出する
- ピックアップした要素を軸にしたデザイン原則のコピーと文章のセットを用意する
- メンバーから策定したデザイン原則のレビューを貰い、ブラッシュアップする
- 完成したデザイン原則を公開する
発散するフェーズにてデザイン原則の必要性が見いだせなかったり、活用イメージを構築できなかったりするケースでは、無理にデザインシステムを作る必要はありません。その場合は別の課題にフォーカスしたり、組織のVMVをデザイン原則として活用したりすると良いでしょう。
また、完成したデザイン原則はデザインチームだけでなく、全メンバーがアクセスできる場所に配置して共有することも重要です。デザイン原則が当初描いていた必要性や活用イメージに則したものになっているかを定期的にトラッキングし、必要に応じて文章のアップデートも行いましょう。
2.スタイルガイド（デザイントークン）
スタイルガイドは、ブランドやプロダクトの視覚的な一貫性を確保するためのガイドラインです。色、タイポグラフィ、影、ボーダーといったプロダクトのスタイルを構成する基本的な要素とそのルールが含まれます。また、プロダクトのUIデザインや実装時にスタイルガイドを効率的に反映したり、アップデートしたりするための仕組み「デザイントークン」もデザインシステムに内包できると理想的です。
スタイルガイドが必要な理由
前述のように、スタイルガイドによってプロダクトやサービスの視覚的な一貫性が向上するため、ユーザーの学習コスト削減やブランドイメージの定着、信頼の獲得などにつながります。また、ガイドラインはチームメンバー間のコミュニケーションをスムーズにする役割があるほか、デザイントークンを活用することで、デザインと開発の時間を大幅に削減できます。
スタイルガイドの構築方法
スタイルガイドを構築する上で大切なことは、デザイン原則に基づいた設計です。
例えば、プロダクトのアクセシビリティを大切にする旨をデザイン原則で定義した場合は、スタイルガイドでもアクセシブルな配色やタイポグラフィを構築することが望ましいです。プロダクトで適切にさまざまなブランドを表現することを指針とする場合は、スタイルガイドでも多様な表現を再現できるよう構築する必要があります。
スタイルガイドの管理には、スペーシング、カラー、タイポグラフィ、オブジェクトスタイル、アニメーションなどのインタフェースを構築・維持するために必要なすべての値を、ラベル（トークン）で表す仕組み「デザイントークン」を活用することも検討しましょう。
それによって、インタフェースのトーン&マナーに一貫性がもたらされ、堅牢性を担保できるようになるほか、スタイルのアップデートも容易かつ安全に行えるため柔軟性が高まります。
今回は、スタイルガイドの中でも「カラー」と「タイポグラフィ」に焦点を当て、構築のポイントを紹介します。
カラー
柔軟に変更に対応するためにも、カラートークンは色名に基づいて配色を管理する層「Primitive Token」と、インタフェースの文脈や用法の下、配色を管理する層「Semantics Token」の2つを用意すると良いでしょう。
Primitive Token
Primitive Tokenは、RedやBlueなどの基本的なカラーパレットを管理します。ブランドカラーを起点に色相を変化させながら、さまざまなカラーを構築しましょう。
アクセシビリティを確保するための対応も、このレイヤーで行います。少なくともキーカラーはWCAG 2.2の達成基準1.4.3に沿って最低限のコントラスト比を満たすように設計します。
Semantics Token
Semantics Tokenは、Primitive Tokenで定めたカラーを継承する形式で定義します。トークンの名前は色の役割、用法、文脈に基づいて命名します。
例えばエラーを表すカラートークンを作成する場合は、Primitive Tokenに含まれるRedを継承したカラーセットを用意し、名前は「Error」と命名します。「Success」「Warning」のようなステータスに基づく色や、「Primary」「Secondary」のような、ヒエラルキーを基準にした色についても同様に、このプロセスでトークンを設計します。
タイポグラフィ
カラートークンと同様に、タイポグラフィトークンもPrimitive TokenとSemantics Tokenの2つで定義します。
Primitive Token
Primitive Tokenでは、タイポグラフィを構成する基本要素「フォントファミリー」「フォントサイズ」「フォントウエイト」「レタースペーシング」「行間」の定義と管理を行います。この層ではそれぞれの要素を定義する際に、アクセシビリティの確保も合わせて実施することをオススメします。
次のトークンは、Primitive Tokenに含まれるフォントファミリー用のものです。
テキストフォントには BIZ UD フォントを採用しており、トークンには等幅フォントと可変幅フォントの2種類のファミリーを用意しています。アイコンフォントにはMaterial Symbols Roundedを採用しています。
Semantics Token
Semantics Tokenでは、Primitive Tokenで定義した値を組み合わせ、インタフェースで実際に使用するタイポグラフィを定義します。
次のトークンは、グッドパッチでよく定義するSemantics Tokenの一部を抜粋したものです。使用したいフォントサイズ、フォントウエイト、フォントファミリーに合わせてタイポグラフィを選択できるよう構成しています。
3.コンポーネント
コンポーネントは、インタフェースの中で何度も出現する要素を再利用可能なパーツとして定義したものです。ボタン、インプットフィールド、ダイアログ、カードなどが含まれており、それぞれが固有の役割を持っています。
コンポーネントが必要な理由
コンポーネントを再利用することで、アプリケーション全体で一貫したビジュアルとインタラクションを構築できます。それにより、ユーザーは異なる機能やセクション間で一貫した体験を得られるため、プロダクトの使いやすさや学習のしやすさが向上し、その結果ユーザーの満足度が高まります。
また、コンポーネントには高い拡張性と柔軟性が備わっているため、コンポーネントを適切に繰り返して活用することで、プロダクト開発チームはデザインと開発の時間を大幅に削減できます。
コンポーネントの構築方法
コンポーネントには、柔軟性と汎用性が備わっている必要があります。ボタンはさまざまなサイズや色を再現できるなど、多様なコンテキストやスクリーンサイズの環境下でも再利用できるよう設計しましょう。
ボタンコンポーネントの構成図
コンポーネントが取り得る状態（ホバー、アクティブ、非活性など）を定義し、それぞれのスタイルと振る舞いを設計することも重要です。また、デザインツール上とフロントエンド上の各コンポーネントの要素の名前やプロパティの名前は、そろえることが理想です。
異なる環境でも命名が一致することで、同じ言葉を使ってコミュニケーションが取れるようになるため、エンジニアとデザイナー間のコミュニケーションコストが抑えられるでしょう。
3回ルール
コンポーネント構築によりプロダクト開発の効率が上がりますが、その一方、デザインを行う中で生まれたパーツをやみくもにコンポーネント化すれば良いわけではありません。
コンポーネント構築にもコストはかかるため、少ないコストをどこに配分すべきかはしっかり考えましょう。また、デザインが未成熟でブレが発生しやすいフェーズでコンポーネント化を行うことも得策ではありません。そのようなフェーズで構築したコンポーネントは、アップデートによって活用の機会を失ったり、汎用性が欠如しているが故に一部の箇所でしか使用できないものになったりするケースが往々にして存在します。
コンポーネント化を実行する適切な目安は、似ている要素が「3回」登場したタイミングと言われることが多いです。そのため、同じようなスタイルや振る舞いのパーツが3回登場した際に、それらのパーツから共通点を見いだして汎用的なコンポーネントへ昇華させると良いでしょう。
迷いを減らすためのガイドラインドキュメント
デザインシステムの中でも特に活用される要素が「コンポーネント」です。メンバーが使用するときに迷いが生じやすい要素でもあるため、デザインツールやフロントエンド向けにライブラリを構築した際は、あわせてガイドラインドキュメントも用意しましょう。
コンポーネントの用法に関するガイドラインを充実させることで、デザインシステムを活用するときの迷いや、それを解消するためのコミュニケーションを最小限にとどめることが可能です。
4.コンテンツガイドライン
コンテンツガイドラインは、プロダクト内で使用するテキスト表現に関する基準を定めたものです。メッセージの伝達、ブランドアイデンティティの強化、そして一貫性のあるユーザー体験の提供を目的に、ボイス&トーン、ライティングガイドライン、用語集などを含んでいます。
なぜコンテンツガイドラインが必要か
コンテンツガイドラインは、ブランドの一貫性を保ち、ユーザーにクリアで理解しやすいメッセージを伝え、すべてのユーザーが情報へアクセスできるようにするために存在します。正確で一貫性のあるテキスト表現はユーザーからの信頼を醸成し、ブランドへの愛着を育みます。
また、コンテンツガイドラインは、組織内のあらゆるメンバーが、同じ基準とトーンでコンテンツを設計するための共通フレームワークとして機能します。適切に活用することで、メッセージ内容を設計する際の意思決定をスムーズにする効果があります。
コンテンツガイドラインの構築方法
1. 目的と範囲の定義
- 始めに、コンテンツガイドラインを作成する目的を明らかにします。どのような問題を解決し、どんな価値を提供するのかを明確にします。
- ガイドラインの適用範囲を定義します。プロダクトやウェブサイト、ブログ、SNS、マーケティング資料など、どのコンテンツに適用するのかを明記します。
2. ライティングガイドラインの構築
- 文体、文法、句読点の使用、大文字と小文字の使用など、文章のスタイルとフォーマットに関するルールを策定します。
- 読みやすさを向上させるための文章の長さ、見出しやラベルの一貫したルール、住所や生年月日などの記法も定義できるとより好ましいです。
3. 用語集の作成
- ブランド固有の用語、プロダクト名、専門用語などを含む用語集を作成します。
- 各用語の正確な定義、適切な使用例、避けるべき誤用、類語などに関する情報をそろえます。
4. ガイドラインの文書化と共有
- 作成したガイドラインを読みやすいように管理し、アクセスしやすい場所にまとめます。オンライン上のドキュメントツールに配置し、誰でも閲覧できる状態にするのが理想的です。
- デザイナー、エンジニア、プロダクトマネージャー、コンテンツを作成するライターなど、組織内の全関係者にガイドラインを共有します。
5. 定期的なレビューとアップデート
- コンテンツガイドラインはプロダクトや市場・業界の変化、ユーザーからのフィードバックに応じて定期的にアップデートします。
- 新しい用語の追加、表記方法のアップデートなどへ柔軟に対応できるようにします。
まとめ
今回は、デザインシステムにおけるプロダクトデザインに必要な要素の構築方法を紹介しました。
プロダクトデザインは、プロダクト開発の核となる要素です。紹介した要素を適切に構築して組み合わせることで、組織はプロダクト開発のプロセスをさらに効率化し、より一貫性のある体験の提供が実現できます。必要な要素から着手し、組織の具体的なニーズに応じてデザインシステムを育てながら課題を解決していきましょう。
次回は、デザインシステムをブランド領域やコミュニケーション領域へ展開する方法など、「デザインシステムの拡張」をテーマにお届けします。お楽しみに。
連載「みんなで育てるデザインシステム」記事一覧
第1回：良いデザインシステムとは？その基本と構造をグッドパッチが解説
第2回：組織にデザインシステムが必要な理由とは──その効果や価値を徹底解説
第3回：デザインシステムのはじめかた──事前に理解しておきたいポイントや構築のための5つのサイクルとは
第4回：グッドパッチが実際に行っているステップ別に解説 デザインシステム構築前の準備フェーズですべきこと
第5回：4つの要素で考える、プロダクトデザインのためのデザインシステム構築とは（本記事）
第6回：適用範囲を広げ、より良いものにするために デザインシステムを“拡張”するポイント
第7回：生成AIで変わる「デザインシステム」の未来
