これまでさまざまな組織のデザインシステム構築や運用を支援してきたグッドパッチ。本連載ではデザインシステムにフォーカスし、その概要や歴史、導入から運用、構築にいたるまで網羅的にお届けします。第6回は「デザインシステムの拡張」についてです。

※本記事はウェブマガジン「CreatorZine」に2024年5月22日に掲載された記事を再掲載したものです。

---

こんにちは。グッドパッチのUIデザイナーの乗田です。前回の記事では、プロダクトデザインを実施する際に必要なデザインシステムの要素の構築方法について紹介しました。第6回では、「デザインシステムの拡張」をテーマに、プロダクトデザイン以外の領域や組織のメンバーにデザインシステムを広げる手法についてお届けします。

はじめに

デザインシステムの基本的な要素を構築したあと、デザインシステムをさらにより良いものにするためには「拡張フェーズ」が不可欠です。デザイン原則、スタイルガイド、コンポーネント、コンテンツガイドラインなどの基本的な要素を超え、その適用範囲をブランド領域やコミュニケーション領域へと広げることで、デザインシステムの恩恵を組織全体が享受できるようになります。

またそれだけでなく、顧客とのタッチポイントの最適化によってサービスとユーザー間のコミュニケーションがより良いものになったり、ブランドアイデンティティが強化されたりといった効果もあります。

これらを最大化させるために必要なデザインシステムを拡張する方法やポイントを「ブランド領域への拡張」「コミュニケーション領域への拡張」「組織への普及と拡大」の3つのテーマに沿って解説します。

1. ブランド領域への拡張

「ブランド」は企業／プロダクトの存在価値やユニークさを社内外に伝達する際に機能するものです。ブランドガイドラインは、後述するコミュニケーションデザインやプロダクトデザインの根幹となる要素。言語表現（ブランドアイデンティティ）と非言語表現（ビジュアルアイデンティティ）を組み合わせてアイデンティティを確立し、マーケットにおける企業・プロダクトのポジションを明らかにする役割を果たします。

ブランドガイドラインを活用することで、プロダクトデザインの一貫性が維持されるだけでなく、顧客とのコミュニケーションがブランド指針を体現したより良いものになるなどの理由から、デザインシステムにブランドガイドラインが包括されることは大きな価値があります。

ブランドアイデンティティ

ブランドアイデンティティには、パーソナリティやパーパス、トーンオブボイスなど、ブランドの個性や価値観を確立するための言語表現が含まれます。ブランドの哲学や社会における役割、存在意義を市場に対して説明することで認知や信頼を獲得する機能を持ちます。

ブランドパーソナリティ

ブランドパーソナリティは、ブランドの性格や人格、ユーザーとの接しかたを言葉で定義したもの。「ブランドが顧客とどのようにコミュニケーションを取るか」という指針を明確にするために必要な要素です。デザインシステムに組み込むことで、ブランドのあり方やユーザーへの姿勢が各タッチポイントで一貫したものになるため、結果として顧客の信頼を深め、ブランド認知を高める効果が期待できます。

トーンオブボイス

トーンオブボイスはブランドが伝えるメッセージのスタイルや、情報に付随する感情を定義したものです。デザインシステムに組み込むことで、すべてのコミュニケーションで一貫した文章表現を維持し、前述したブランドパーソナリティをより際立たせることができます。トーンオブボイスは、顧客との関係構築を助け、信頼と共感を促進することで、結果的にユーザーのエンゲージメントやロイヤリティを高める効果があります。

ビジュアルアイデンティティ

ビジュアルアイデンティティにはロゴ、カラースキーム、タイポグラフィ、キャラクターなど、ブランドの印象を確立するための非言語表現が含まれます。短い時間でブランドを即時に伝達したり、直接的な印象を構築する役割を担います。

ロゴ

ロゴのガイドラインは、サービス／コーポレートロゴの使用方法やサイズ、色、配置を規定したものです。デザインシステムに含まれることですべてのタッチポイントでの視認性が規定どおりに保たれます。結果として、マーケットでのサービスや会社に対する認知度、影響力が高まります。

キャラクター

キャラクターガイドラインは、ブランドが使用するキャラクターのデザイン、性格、行動パターンなどを定義しています。これをデザインシステムに組み込み、一貫したキャラクターを表現することで顧客との感情的な結びつきを深められます。その結果、親しみやすさと記憶の定着度合いが増し、ブランドロイヤリティが高まります。

ブランドガイドラインを活用することで、プロダクトデザインとコミュニケーションデザインにおけるブランドの視覚表現の一貫性が維持されるほか、ブランドらしさや振る舞い、口調などに関するイメージの乖離も防ぐことができます。

このように、デザインシステムはブランディングにおいて非常に効果的なアセットとなり得ます。正しく設計されたデザインシステムは、ブランドアイデンティティの明確化、一貫性の保持、そしてブランド価値の向上に大きく寄与し、結果として顧客の満足度や良い体験を支える基盤となるのです。

2. コミュニケーション領域への拡張

コミュニケーションデザイン領域のデザイン成果物はさまざまです。プレゼンテーションのスライド資料や名刺、ブログのアイキャッチ、LPなどで使用するモックやスクリーンキャプチャ……。それだけでなく、ユーザーをはじめとするステークホルダーとのコミュニケーションに必要な媒体をデザインする際のガイドライン／アセットも含まれます。

適切に設計されたコミュニケーションのためのガイドラインは、ブランドに対する認知を構築したり、プロダクトの魅力や説得力を向上させたりすることに寄与します。

デザインシステムを活用してユーザーとのコミュニケーションを強化することは、ブランドの認知向上やメッセージングの一貫性を保つうえで非常に重要です。

名刺

名刺のガイドラインは、ロゴの配置、フォントサイズ、カラースキーム、連絡先のレイアウトなどを規定し、一貫性と審美性を確保します。全社員が統一された名刺を使用することで会社の認知が強化されます。その結果、外部との最初の接点とも言える名刺が、ブランドイメージを効果的に伝える重要なツールとして機能します。

スライド資料

スライド資料のガイドラインは、プレゼンテーションのフォーマット、フォントの使用、色彩、レイアウト、図表のスタイルなどを規定します。これをデザインシステムに組み込むことで全社として一貫したプレゼンテーションが実現され、簡潔な印象を与えます。結果として、情報の伝達効果向上、社外でのブランドイメージ強化、社内コミュニケーションの効率化などにつながります。

3. 組織への普及と拡大

デザインシステムを組織内で機能させ価値をもたらすためには、品質の高いコンポーネントやブランドアセットを用意したり、網羅的なガイドラインを作成したりするだけでは不十分です。

組織全体への浸透に取り組み、デザイナーだけではなくエンジニア、PdM、QAエンジニアなど、さまざまな職能のメンバーが活用できるようにすることが重要です。そのために効果的な取り組みが、次の3つです。

1.教育プログラムの提供

デザインシステムの教育プログラムは、さまざまなロールのメンバーにとって必要なコンテンツです。教育のための資料には、次の項目を用意すると良いでしょう。

オンボーディングドキュメント

デザインシステムの基本的な原則や目的、構成要素について理解するための資料です。また、デザインシステムを活用するうえで必要なツールやアセットのキッティングも、このオンボーディングで済ませられることが望ましいです。

ワークフロードキュメント

実際のプロジェクト内でデザインシステムを活用しながら、デザインや実装を行う方法を示すための資料です。良いデザインを効率的に実現するために、ワークフローは欠かせません。

2.コミュニケーションパスの多様化

デザインシステムを普及させるための情報伝達にはさまざまなコミュニケーションパスを提供することが重要です。社内ブログ、チャットツール、定例での共有などを活用しながら、デザインシステムのアップデート内容や使用する際のヒントなどを組織全体に発信します。また、同期コミュニケーションと非同期コミュニケーションを適切に使い分けることも大切です。

同期コミュニケーションは、直接デモンストレーションをしたりFAQセッションをしたりしながら、参加者のデザインシステムへの理解を促す効果があります。一方、非同期コミュニケーションは、直接コミュニケーションを取る機会が少ないメンバーに対して、情報を提供する手段として有効です。メンバーのデザインシステムに対する理解度や活用頻度などに応じて、最適なコミュニケーション方法を選択しましょう。

3.継続的なフィードバックの収集と改善

デザインシステムが組織にとって常に価値のあるものにするためには、組織やプロダクトの成長にともなってデザインシステムをアップデートし続ける必要があります。

継続的なアップデートを推進するためには、フィードバックの収集と改善を基盤とする次のサイクルを回すことが重要です。

フィードバックの収集

デザインシステムを日常的に使用する社内のデザイナー、エンジニア、PdMから、デザインシステムに関するイシューや提案を広く収集します。グッドパッチでデザインシステムの構築や運用を支援する際には、アンケートフォームで定期的にデザインシステムへの評価やフィードバックを収集しています。

また社内のメンバーだけでなく、サービス／プロダクトのユーザーへインタビューなどを実施することも、デザインシステムの課題を探索する上で効果的です。デジタルプロダクトではユーザーのクリック率や離脱率といった定量的な指標を分析することで、どの要素を改善すべきかを客観的に判断することもできます。

フィードバックの評価

収集したフィードバックをレビューし、どの意見をどのようにデザインシステムに反映させるかといったアップデート方針を策定します。このプロセスでは優先順位付けも合わせて行います。

アップデートの実施

アップデート方針に沿ってデザインシステムを更新したり、新たな要素を追加したりします。デザインシステムの目的やデザイン指針も参照しながら、デザインシステムのコンセプトを損なわないよう注意しましょう。

アップデートの共有

デザインシステムのアップデートが完了したら、その更新内容を組織へ広く共有します。また、必要に応じてオンボーディング資料やガイドラインも刷新します。メンバーがスムーズに変更点を理解できるよう促し、効果的に活用できるよう支援しましょう。

このように継続的なフィードバックと改善のサイクルを確立することで、デザインシステムは常に価値のあるアセットとして機能します。また、フィードバックや改善のプロセスにメンバーが参画することは、メンバーのデザインシステムへの関心を強固なものにし、愛着を育むことにもつながります。

まとめ

今回は、デザインシステムを拡張する際の方法やポイントについて紹介しました。

デザインシステムの拡張はその適用範囲を広げるだけではありません。顧客とのタッチポイントの最適化によってサービスとユーザー間のコミュニケーションがより良いものになったり、ブランディング強化といった効果があります。デザインシステムの基本要素を構築後、さらにより良いものにするためにも「拡張フェーズ」に取り組んでみてはいかがでしょうか。

次回はデザインシステムの未来の姿やAIとの連携についてお届けします。お楽しみに。

---

連載「みんなで育てるデザインシステム」記事一覧

第1回：良いデザインシステムとは？その基本と構造をグッドパッチが解説
第2回：組織にデザインシステムが必要な理由とは──その効果や価値を徹底解説
第3回：デザインシステムのはじめかた──事前に理解しておきたいポイントや構築のための5つのサイクルとは
第4回：グッドパッチが実際に行っているステップ別に解説　デザインシステム構築前の準備フェーズですべきこと
第5回：4つの要素で考える、プロダクトデザインのためのデザインシステム構築とは
第6回：適用範囲を広げ、より良いものにするために　デザインシステムを“拡張”するポイント（本記事）
第7回：生成AIで変わる「デザインシステム」の未来