製品やサービスを提供するとき、デザインの一貫性を保つことは非常に重要です。
統一感のあるデザインは、ユーザーに安心感や使い心地の良さを与えるだけでなく、ブランドイメージの向上につながります。

そこで必要とされるのが、デザインシステムです。

これからデザインシステムを導入したいと考えている方にとって役立つ内容になっているので、ぜひ参考にしてください。

デザインシステムとは

デザインシステムとは、企業などが優れたデザインを生み出すための情報すべてを構造化・体系化したものです。企業だけでなく、国の省庁であるデジタル庁もデザインシステムの構築に取り組んでいて、次のように定義しています。

企業や組織がデザインシステムを取り入れることで、快適な体験を一貫してユーザーに提供できます。

また、企業・組織内の部署を超えて「自分たちがユーザーに向けて提供すべき、優れたデザイン、あるべき姿、目指すべき水準とは？」というポイントが明確になるため、業務効率化を図ることができるでしょう。

デザインシステムを構成する3つの要素

デザインシステムは、以下の3つの要素で構成されています。

● デザイン原則
● スタイルガイド
● コンポーネントライブラリ

これらの要素はそれぞれ独立しているのではなく、互いに影響を与え合います。

具体的には、コンポーネントライブラリはスタイルガイドに基づいて作られ、スタイルガイドはデザイン原則から生まれます。また逆に、スタイルガイドやコンポーネントライブラリが、デザイン原則に変化を与えることもあります。

以下では、3つの要素の概要をご紹介します。

デザイン原則

デザイン原則とは、デザインを決定する際の基準になる考え方をまとめたものです。
例えば、以下の2つが当てはまります。

つまりデザイン原則は、企業理念やブランドの方針を反映したものだといえます。

デザイン原則が存在することで、Webサイトやアプリをこれからデザインしようという際に、デザインに携わる人が着目すべきポイントや優先事項を確認できます。

これから組織としてデザインシステムを新規で用意する場合には、まずデザイン原則を定義して、ドキュメント化するところから始めましょう。

スタイルガイド

スタイルガイドは、以下のようなスタイルに関するガイドラインを指します。

上記のポイントの中から「UIルール」の例を見てみましょう。以下のようなUIルールを定めておくことで、デザインに携わる人は、ユーザーが目的を達成しやすいデザインを迷わず作成できます。

・ 1つの画面内に2つのボタンを配置するときの配列方法（並列にするか、縦並びにするかなど）

細かいポイントですが、ボタンの配列方法に統一感がないと、ユーザーを混乱させてしまう恐れがあります。

このような具体的なルール策定は、前述した「デザイン原則」に基づいて作成することが大切です。

コンポーネントライブラリ

コンポーネントライブラリとは、以下のようなUIパーツを実装するためのコードをまとめたライブラリのことです。

エンジニアがコードを参照することで、一貫性のあるコーディングがスムーズに実現します。

使い方

デザインシステムの3つの要素を見ると、普段の業務では以下のユースケースが考えられます。

デザインシステムは一貫性が重要です。
例えばエンジニアが「コンポーネントライブラリの内容が不足しているので、新規で追加しておこう」などと独断で進めてしまっては、デザインシステムの一貫性が失われ、うまく機能しない事態も懸念されます。

したがって新たにコンポーネントを作成する場合には、デザイン原則や、あらかじめ組織内で決められた作成フローに基づいて進めることが大切です。

デザインシステムを作成するメリット

企業・組織がデザインシステムを作成するメリットを、具体的に見てみましょう。

一貫したUI/UXを提供できる

デザインシステムの導入によって、一貫したUI/UXを提供できるようになります。

UIは、ユーザーと製品・サービスとの間に存在するあらゆる接点を指します。対するUXとは、ひとつひとつの接点を通してユーザーが得る体験のことです。

UIが一貫していれば、単に「見た目が整って美しい」だけでなく、ユーザーはあらゆる接点で迷いなく操作でき、その結果として優れたユーザー体験（UX）を感じられます。

単一のWebサイトにおいて、一貫したUI/UXを提供することはもちろん大切です。
加えて、企業が複数のサービスを提供している場合は、「どれを利用しても使い勝手が良く、常に快適な体験を得られる」とユーザーが感じられると、継続して利用したくなります。
例えば、Appleが提供するiPhoneやiPad、MacBookはUIに一貫性があるため、どれか一つの製品の使い方を覚えれば、ほかにも簡単に応用できます。

この例のように、デザインシステムの導入によって一貫したブランド体験を実現でき、ユーザーは自然とそのブランドに対して愛着を持つようになるのです。

デザイン開発の効率化を図れる

デザインシステムが存在することで、業務効率化・生産性向上につながる点もメリットです。

例えば、デザイナーはスタイルガイドを見れば、色やタイポグラフィなど、デザインの作成ルールをすぐに把握できます。

ここで、Webサイトやアプリのアイコンを作成する場面を例に考えてみましょう。

アイコンは、ブランドを構成する要素の中でも、比較的デザインの自由度が高く、デザイナーによってアウトプットに差が出やすい要素です。しかしデザインシステムがあらかじめ構築されていれば、デザイナーの属人的スキルに左右されません。

「何を最優先にデザインを作成するべきか？」というポイントが明確化されているため、ルールに従って効率的に作成・アップデートできるようになるでしょう。

また、エンジニアはコンポーネントライブラリからUI実装に必要なコードを参照することで、コーディングの時間短縮につながります。

デザイナーやエンジニアなど、組織内の各チームで生産性が向上すれば、プロダクトローンチまで無駄な労力や時間をかけずに進められるでしょう。

部署間のコミュニケーションがスムーズになる

デザインシステムという共通言語があれば、異なる部署間でのコミュニケーションがスムーズになります。

デザイン開発の場面では、UIデザイナー、UXデザイナー、エンジニア、マーケターなど、全員が同じ方向を見る必要があります。そこでデザインシステムという共通のルールがあれば、建設的に話し合いを進めやすくなる点もメリットです。

デザインシステムを作成する際の注意点

デザインシステムを作成する際の注意点を紹介します。

ユーザー視点を取り入れる

デザインシステムを作成するときは、ユーザー視点を取り入れましょう。

一貫したUI/UXを追求してデザインシステムを開発したとしても、プロダクトのデザインに触れて、実際に利用するのはユーザーです。

ユーザーが求める機能や操作性がUIデザインなどに反映されておらず、「使いにくい」「ボタンがどこにあるかわからない」などと感じさせることは、決してあってはならない事態です。しかし、Webサイトやアプリに触れてみて、ユーザーが実際にどのように感じるかは、ユーザーにしかわかりません。

その実態を明らかにし、課題を抽出するために「UI/UXリサーチ」のプロセスを取り入れましょう。ユーザーが何を求めているかを調査することも、優れたデザインシステムを構築するための一つの方法です。

具体的には、ユーザビリティテストやエキスパートレビューを実施することで、UI改善やUX向上に有効です。

 電通マクロミルインサイトのデザインリサーチのサービス資料は、こちらからご覧ください。

規模に応じて導入するかどうかを決める

デザインシステムは、どの組織・プロジェクトでも必ず構築するべきとは限りません。規模によっては必要がない場合もあります。

例えば小規模なプロジェクトや、複数のプロダクトにまたがってデザインの管理を行わない場合には、デザインシステムは不要かもしれません。

デザインシステムの構築・管理は手間を要するため、プロジェクトやブランドの規模などを見て判断することがポイントです。

アップデートを続ける

デザインシステムは、一度構築して終わりではありません。ユーザーが求める体験を実際に提供できるよう、常にアップデートしていく必要があります。

定期的にデザインシステムを柔軟に見直すために、検証・改善を積み重ねていくことのできる運用体制や、ワークフローが求められます。

デザインシステムの事例

続いて、デザインシステムの事例を3つ紹介します。

デジタル庁

出典：デザインシステム｜デジタル

デジタル庁はデザインシステムのデザインデータを一般公開していて、誰でも閲覧可能です。

このデザインシステムは、各省庁のWebサイトやWebサービスへの適用を前提としていますが、地方自治体でも利用できます。行政サービスの一貫性を担保することで、利用者に信頼されるサービスづくりを目指しています。

SmartHR Design System

出典：SmartHR Design System｜SmartHR

クラウド人事労務ソフト「SmartHR」が提供するデザインシステムは「だれでも・効率よく・迷わずに。」をコンセプトに、サービスに関わるすべての人が利用できる素材や基準をまとめています。

「情報格差を生まないことが、世の中をより良くする」という考えから、社内運用に限定せず、できるだけ情報をオープンにする方針です。

SMBC

出典：インハウスデザインチームが挑んだ「SMBCデザインシステム」の裏｜note

SMBC（三井住友銀行）が構築したデザインシステムは、2021年に「グッドデザイン賞」を受賞しました。

デザインシステムの構築以前は、媒体やプラットフォームごとに異なるデザインガイドラインやルールが適用されていて、デザインに一貫性がなかった点が課題でした。そこで行内で保有している膨大なデザイン要素やブランドアセットを整理し、時間をかけて精査に臨みました。

デザイン原則や、行内で統一して利用できるコンポーネントライブラリを新たに定めるために、議論・精査・ブラッシュアップを繰り返したといいます。社内担当者だけでなく、SMBCのクリエイティブに関わる外部パートナーの力も借りながら成功した事例です。

デザインシステム構築のためのリサーチなら電通マクロミルインサイトへお任せください

デザインシステムを構築する際、「ユーザー視点で求める体験がスムーズに実現するシステム」を目指すことが何よりも重要です。

組織内のデザイナーやエンジニアの視点に偏ることなく、ユーザーの心理・行動を把握するためには、「デザインリサーチ」の実施をおすすめします。

電通マクロミルインサイトでは、次のような特徴を備えたデザインリサーチのサービスを提供しています。

デザインシステム構築に関するお悩みをお持ちの企業様は、ぜひ一度、電通マクロミルインサイトまでご相談ください。 

電通マクロミルインサイトのUXリサーチのサービス資料は、こちらからご覧ください。