デザインシステムとは？
デザインシステムとは、ブランドと顧客のタッチポイントにおけるデザイン表現をルールやコンポーネントとして再利用 可能な形で体系化したドキュメントで、一貫性を持ったブランド表現を提供するために用いられます。
デザインシステムには、デザイン原則、スタイルガイド、デザインコンポーネントなどが含まれ、包括的にブランドのデザイン表現を定義したものとなります。
また、デザインシステムは組織のデザイン文化そのものを示すものでもあります。プロダクトに関わるすべてのメンバーが、デザインシステムを共通言語として理解し、活用することで、コミュニケーションの円滑化やコラボレーションの促進にもつながるのです。つまり、デザインシステムは一貫性と効率性を高めるだけでなく、組織全体のデザインへの取り組み方を変革する力を持っているともいうことができます。
デザインシステムの３つの構成要素
デザインシステムは、主に以下の3つの構成要素から成り立っています。
デザイン原則：デザインシステムの基盤となる考え方や方針
スタイルガイド：色やタイポグラフィなどの具体的なデザインルール
コンポーネントライブラリ：再利用可能なUIパーツの集合体
それぞれの構成要素について詳しく見ていきましょう。
デザイン原則
デザイン原則とは、デザインシステムの中核をなすコンセプトで、プロダクトやブランドのデザインにおける意思決定の指針となるものです。シンプルさ、一貫性、ユーザー中心といった普遍的な原則から、個々のプロダクトやブランドに固有の原則までさまざまなレベルで定義されます。
デザイン原則は、デザイナーやエンジニアがデザインに関する決定を下す際の拠り所となるだけでなく、プロダクトの目的や価値観を反映するものでもあります。したがって、デザイン原則を策定する際には、組織のビジョンやミッションといったコーポレートアイデンティティとの整合性を図ることが重要です。新しい機能や要件が追加される際にも、デザイン原則に立ち返ることで、一貫性のある意思決定が可能になります。
スタイルガイド
スタイルガイドは、デザインシステムにおける具体的なデザインルールを定めたドキュメントです。デザイン原則に基づき、色・タイポグラフィ・レイアウト・アイコンなど、ブランド表現のあらゆる側面について詳細な指針を記載するものです。
スタイルガイドは、デザインの一貫性を維持するために重要で、デザイナーがデザインを制作する際の共通言語としての役割を果たします。また、スタイルガイドはブランド表現を視覚化したものでもあるため、組織内外のステークホルダーとのコミュニケーションを円滑にする効果もあります。
コンポーネントライブラリ
コンポーネントライブラリとは、再利用可能なUIパーツを集めたものです。ボタン・フォーム・カード・ナビゲーションなど、プロダクトを構成する基本的なUI要素がコンポーネントとしてまとめられます。
コンポーネントは、エンジニアがコードレベルで実装できるような情報として提供します。これにより、デザイナーとエンジニアが同じUIパーツを共有し、一貫したUXを提供できるようになります。新しい機能や画面を作成する際に、既存のコンポーネントを組み合わせるだけで、短時間でデザインシステムに準拠したUIを構築できるようにもなります。また、コンポーネントライブラリを使った実装には、デザインシステムが実装レベルで一貫性を担保することを助ける役割もあります。
デザインシステムを公開している企業や組織の事例
「具体的なデザインシステムを見てみたい」といったニーズにお応えするため、国内・海外の企業や組織の中でデザインシステムを公開している事例をまとめてご紹介します。なお、デザイナーが実際にデザインシステムを構築する際の参考にしやすいよう、Figmaコミュニティファイルを公開している組織を多く紹介しています。
デジタル庁 | 多くのデザイナーが参考にしているデザインシステム
https://www.digital.go.jp/policies/servicedesign/designsystem/
デジタル庁のデザインシステムは、日本のデジタル庁が運用するデザインシステムです。政府のWebサイトやアプリのデザインを統一し、ユーザーにとって使いやすいものにすることを目的として、オープンな運用を目指しています。
サイト内では以下の情報が提供されています。
スタイル
コンポーネント
テンプレート
イラストレーション・アイコン素材
これらの情報は効率的なデザイン検討を実現し、大規模サービスでの素早い改善サイクルを可能にします。また、使い方から丁寧に解説されているため、初めてデザイン制作をする方も目を 通しておくべき貴重なデザインシステムと言えるでしょう。デザインシステムのFigmaファイルも提供されています。
SmartHR（SmartHR Design System） | 書籍を通して制作背景も学べる
https://smarthr.design/
SmartHR Design Systemは、「だれでも・効率よく・迷わず。」をコンセプトに作成された、SmartHRらしい表現ができるようにするためのデザインシステムです。このシステムは、すべての人によりよい体験を提供することを目的とし、SmartHRに関わる人なら誰でも利用・参加が可能です。
基本原則には、SmartHRのデザインの根底にある4つのパーソナリティ（誠実・ポジティブ・わかりやすい・親しみやすい）といった価値観があり、基本要素としてロゴ・色・イラストレーションが含まれます。また、アクセシビリティに重点を置き、誰でもSmartHRが使えるような、ガイドラインやチェックツールも閲覧可能です。
さらに、スケーラブルで一貫性のあるプロダクト設計のためのガイドラインとオープンソース「SmartHR UI」の利用方法も紹介されています。コミュニケーションの一貫性を保つためのアイテムとガイドラインも提供し、マーケティングやセールス、カスタマーサクセスなどさまざまな場面で利用されています。Figmaにて、UIコンポーネントライブラリが提供されています。
Cookpad（Apron） | 料理を魅力的に見せる工夫がたくさん！
https://www.figma.com/community/file/847372282968994272/apron
Figmaで公開されているCookpadのデザインシステム「Apron」は、Cookpadに関連するデザイン制作を支援するために開発されました。料理の写真を魅力的に見せるための工夫が多く取り入れられており、Cookpadらしいデザインシステムとなっています。Figma Communityで公開されており、Cookpadのチームはこのデザインシステムを通じて、イラスト、アイコン、カラーなどを共有しています。
Google（Material Design） | 誰もが使えるオープンなデザインシステム
https://m3.material.io/
Material DesignはGoogleが開発したオープンソースのデザインシステムで、美しく使いやすい製品の迅速な開発を支援します。最新バージョンであるMaterial 3では、デザインと製品構築のためのガイドライン、コンポーネント、ツールを提供し、ユーザーインターフェース設計のベストプラクティスをサポートします。
このシステムはデザイナーと開発者間のコラボレーションを促進し、チームが迅速に美しい製品を構築できるようにすることを目的としています。Material Designには、Figmaデザインキット、Jetpack ComposeによるAndroidアプリの構築サポート、新しいコンポーネントやモーションシステムのアップデート、カラーシステムや動的カラーの利用を容易にするMaterial Theme Builderなどが含まれています。
IBM（Carbon Design System） | オリジナルの書体も含めオープンソースのデザインシステム
https://carbondesignsystem.com/
Carbon Design SystemはIBMのオープンソースデザインシステムで、製品やデジタル体験のために設計されているものです。IBM Design Languageを基盤とし、実用的なコード・設計ツールとリソース・ヒューマンインターフェースのガイドライン・活発なコントリビューターコミュニティで構成されています。
このデザインシステムには、Webサイトやインターフェースを構築するための再利用可能なコンポーネントのコレクションを提供するコンポーネントライブラリが含まれています。FigmaキットやSketchキット、さまざまなフレームワーク（React・Angular・Vanilla・Vue・Svelte・Web Components）用のCarbonコンポーネントが提供されてい るため、開発者はこれらのリソースを使用して、効率的な製品設計・開発が可能となるのです。
Shopify（Polaris） | 参考事例が貴重な管理画面のデザインシステム
https://polaris.shopify.com/
PolarisはShopifyの管理画面におけるマーチャント体験を形作るためのデザインシステムです。このシステムには、高品質な管理体験を作り出すための根本的なデザインガイダンス（Foundations）、管理インターフェースを構築するためにコードを通じてパッケージ化された再利用可能な要素とスタイル（Components）が含まれています。また、色・間隔・タイポグラフィなどのデザイン判断を表すコード名（Tokens）や、400以上のアイコン（Icons）も提供されています。
さらに、コードエディタであるVSCode用のPolarisをインストールすることで、お気に入りのコードエディタ内でPolarisトークンの自動補完機能を利用できるようになります。Figmaコミュニティファイルも提供しています。
Adobe（Spectrum） | 2023年12月には最新版のリリースを発表
https://spectrum.adobe.com/
Adobe Spectrumは、製品チームがより効率的に作業できるようにするコンポーネントとツールを提供するAdobeのデザインシステムです。Adobe XDプラグイン・UIキット・フォント・アイコンなどのリソースなどもダウンロードできます。また、Spectrum CSS、React Spectrum、Spectrum Web Componentsなど、詳細な使用ガイドラインとパートナーシップを組むオープンソースの実装を利用することで、デザインシステムの制作に役立てられます。
Adobeは2023年12月に「Spectrum 2」のリリースを発表しました。このアップデートでは、アクセシビリティなども含めたデザイン要素を包括的に改善したことで、新たなツールも続々と登場している現代のデザイン環境に適応した、より強力なデザインシステムとなりました。
Audi | オンライン・オフライン通して一貫したブランド表現の事例
https://www.audi.com/ci/en/renewed-brand.html
デザインシステムを公開する企業にはソフトウェア企業が多い印象ですが、ドイツの高級車メーカーAudiもデザインシステムも公開しています。Audiのコンポーネントライブラリには、ブランドアイデンティテ ィ、グローバルコンポーネント、リージョナルコンポーネントなどが含まれています。また、Audiのブランドガイドラインでは、Audiのブランド表現がUIのみならず、オフラインでのプロモーションや空間デザインなど多岐にわたる分野で一貫性を持って定義されている様子をみることができます。
イギリス政府 | 政府系デザインシステムとして海外でも参考にされている
https://design-system.service.gov.uk/
イギリス政府のデザインシステムは、GOV.UKのスタイル、コンポーネント、パターンを使用して政府サービスを一貫性のあるものにするためのシステムです。他のサービスチームの研究と経験から学び、すでに行われている作業を繰り返さないように設計されています。
このシステムは、レイアウト・タイポグラフィ・色・画像の適用ガイドを含むスタイルやフォーム、ナビゲーションやパネル、テーブルなどの再利用可能でアクセシブルなコンポーネント、共通タスクの完了を支援するパターンを提供しています。
デザインシステムを導入する5つのメリット
デザインシステムを導入することで、以下の５つのメリットが得られます。
一貫性のあるブランドメッセージの発信
品質の向上
コスト削減
工期短縮
コミュニケーションの円滑化
一貫性のあるブランドメッセージの発信
デザインシステムには、ブランド表現のルールを継承したデザイン原則やスタイルガイドが定義されており、これらに沿ったコンポーネントを使用することで常に一貫性のあるブランド表現を行うことができます。一貫性を持ったブランド表現は、顧客の認知やブランドとしての信頼性を高めてくれます。
デザインに一貫性を持たせることで品質が向上する
デザインシステムを導入することで、プロダクト全体のデザインに一貫性を持たせられます。デザインの一貫性は、品質の向上にも寄与します。デザインシステムに基づいて制作されたUIは、テストや品質管理がしやすく、バグの混入を防ぎやすくなります。
また、統一されたビジュアル デザインとインタラクションにより、ユーザーは直感的に操作でき、ストレスのない体験を得られるようになります。
開発の効率化によりコスト削減につながる
デザインシステムをもちいることで開発工数を大幅に削減できます。デザインデータとコードをコンポーネントレベルで同期することで、コミュニケーションロスの発生を抑えられるようになり、手戻りが減ります。結果として開発コストの削減につながり生産性の向上にもつながるのです。
また、コンポーネントライブラリを一元管理しておくと、コンポーネントのデザインにアップデートがあった際にも、その変更が各プロダクトの実装に伝播するため、アップデートに関わるコストを削減することができます。
リリースまでの時間が短縮できる
デザインシステムでUIコンポーネントを再利用できるようになることで、デザインとコーディングの工程を大幅に短縮できるため、リリースまでのリードタイムを短縮する効果もあります。個々のコンポーネントのデザインと実装ではなく、仮説の検証に集中してPDCAサイクルを回しやすくなります。
チーム内外のコミュニケーションの円滑化
デザインシステムは、チーム内外のコミュニケーションを円滑にする役割も果たします。デザインシステムをチームで共有することで、デザインについての認識を統一でき、意思疎通がスムーズになります。
さらに、社外のステークホルダーやパートナーとのコミュニケーションも円滑になります。デザインシステムをドキュメント化して共有することで、クライアントやパートナーとのデザインについての合意形成がスピーディーになるのです。
デザインシステムの作り方
デザインシステムを構築する際の一般的な流れをご紹介します。
デザイン原則を定義
スタイルガイドを設定
コンポーネントライブラリを構築
パターンを形成
ドキュメンテーションとガイドラインを整備
ツールとプロセスを統合
チームへの周知と普及を図る
1. デザイン原則を定義する
デザインシステムの構築は、デザイン原則を定義することから始まります。プロジェクトのビジョンや目標を達成するために、一貫性のあるデザイン原則を設定する必要があるのです。この原則には、ブランドのパーソナリティやトーン&マナーも含めて明文化することで、ブラン ドがユーザーにどのように認識されるべきかを示し、デザインの方向性を定めます。
また、デザイン原則はプロダクトの特性やターゲットユーザーを考慮して作成する必要があります。ユーザー中心のデザイン、シンプルさの追求など、プロダクトに合った原則を定義しましょう。
2. スタイルガイドを設定する
スタイルガイドでは、デザインシステムの基盤となるビジュアルルールを定義します。一貫性のあるデザインを実現するため、カラーパレットやタイポグラフィ、間隔やシャドウなどの基本的なスタイル要素を標準化します。
また、再利用可能で拡張性のあるデザイントークンを作成することも重要です。これにより、デザインの変更を柔軟におこなえるようになり、メンテナンス性が向上します。
なお、スタイルガイドはデザイナーだけでなく、エンジニアにとっても重要な指針となります。アクセシビリティにも配慮するため、WCAGにおけるWAI-ARIAに準拠したマークアップができるようなガイドラインを示すとよいでしょう。
3. コンポー ネントライブラリを構築する
コンポーネントライブラリは、デザインシステムの中核をなす部分です。ボタン・フォーム・カード・ナビゲーションなど、UIの構成要素となる共通のパーツを設計し、再利用可能な形で提供します。
また、コンポーネントは見た目だけでなく、振る舞いやステートも定義しておく必要があります。どのような状態があり得るか、どのようなインタラクションが起こり得るかを明確にしておく必要があるのです。
4. パターンを形成する
パターンは、コンポーネントを組み合わせたより大きな単位のUIの類型です。検索やログインフローなど、プロダクトに頻出するUIのテンプレートを作成しておくことで、デザインと開発の効率化が図れます。
また、レイアウトグリッドやレスポンシブルールなども、パターンの一部として確立しておくことが大切です。どのような画面サイズでどのようなレイアウトを使うか、ブレイクポイントをどこに置くかなどのルールを定めておけば、一貫性のあるレスポンシブデザインを実現できます。
5. ドキュメンテーションとガイドラインを整備する
デザインシステムを運用していくためには、利用するためのドキュメントが不可欠です。デザインシステムの使い方、ルール、ベストプラクティスをまとめたガイドラインを用意しましょう。ドキュメントには、デザイン面でのルールだけでなく、コード規約やコンポーネントの使用例なども含めることが重要です。
また、ドキュメントはデザインシステムの理解を促進し、チーム内での共通認識を醸成する役割も果たします。誰もがいつでもアクセスできる場所に置き、定期的にアップデートしていきましょう。
6. ツールとプロセスを統合する
デザインシステムを効率的に運用するには、適切なツールとプロセスが欠かせません。デザインからコードまでのワークフローを円滑にするため、Figma・Sketch・Adobe XDなどのデザインツールとコードの運用ルールを定義すると良いでしょう。
また、バージョン管理やメンテナンスのプロセスも確立することが重要です。デザインシステムはリビングドキュメントであり、常に進化し続ける必要があります。変更履歴を追跡し、安全に更新を行う仕組みを作りましょう。
どんなに緻密なデザインシステムをデザインツール上で定義しても、それらが再利用可能な形で実装されなければ意味がありません。デザインシステムを定義する際には、デザイナーだけではなくエンジニアも巻き込んで取り組むことが重要なポイントとなります。
7. チームへの周知と普及を図る
デザインシステムが真に効果を発揮するのは、チーム全体で活用されるようになってからです。デザインシステムの利点と使い方を、チーム内で啓蒙していく必要があります。ワークショップやハンズオントレーニングを通じて、デザイナーとエンジニアがデザインシステムに習熟できるよう支援しましょう。実際のプロジェクトでの活用を促し、ベストプラクティスを共有することも重要です。
さらに、デザインシステムを定期的にアップデートし、フィードバックを収集して改善していくことも忘れてはいけません。チーム全体でデザインシステムを育てていく文化を作ることで、プロダクト開発の効率化と品質向上を実現できるでしょう。
デザインシステムの制作に便利なツール
ここでは、デザインシステムを制作するために便利なツールを6つご紹介します。
Figma
https://www.figma.com/ja/
『Figma』はコラボレーションに特化したインターフェースデザインツールであり、リアルタイムでの共同作業を実現します。デザイン・プロトタイピング・開発・フィードバック収集を一つのプラットフォームでおこなえ るため、デザインシステムの制作に適しています。
共有ライブラリの再利用可能なアセットを活用することで、作業時間の短縮と一貫性の確保が可能です。また、コンポーネントや変数の標準化により、デザイン考案にかける時間を増やし、定常業務の時間が減らせます。
UXPin
https://www.uxpin.com/jp
『UXPin』は、コードベースのデザインを実現する技術「Merge」を備えたデザインツールです。製品開発プロセスを加速させるために、UIデザイナーからUIエンジニアまでが同じ視点で作業できるようになります。GitやStorybookとの統合により、最終製品のようなプロトタイプも構築できます。また、エンジニアが使用するのと同じUIコードコンポーネントをドラッグ&ドロップのみでデザイン・構築できるため、コーディングのスキルも不要です。
さらに、インタラクティブなUIコンポーネントとドキュメンテーションを持ち、チーム間で共有することで企業全体の一貫性が保てます。
Supernova
https://www.supernova.io/
『Supernova』は、デザインとエンジニアリングのデータを一つのデザインシステムツールに統合し、製品開発の加速とスケールアップを支援するツールです。このプラットフォームは企業のニーズに適応し、柔軟性、接続されたエコシ ステム、時間とリソースの節約を設計の基本原則としています。
Figmaライブラリとの連携により、定期的なファイル同期が可能で、デザインのコピーアンドペーストが不要です。また、自動化されたワークフローを通じてデザインからコードへのパイプラインを実装し、技術スタックにあわせたエラーの削減も実現します。加えて、コンテンツブロックをもちいて、使用ガイドライン、デザイントークン、コンポーネントパターンの文書化をコーディング経験なしで直ちに開始できます。
デザインシステムが学べる本を紹介
最後に、デザインシステムをより深く学ぶための書籍を2冊ご紹介します。基礎的な概念や実践的な構築知識など、ご自身に必要な書籍を見つけていただければと思います。
ちいさくはじめるデザインシステム
『ちいさくはじめるデザインシステム』は、人事・労務領域の業務アプリケーションSaaSを提供している、SmartHR社のデザインシステムの立ち上げから運用までの取り組みを紹介している一冊です。本書では、デザインシステムの構想や構築、運用について、SmartHRの実例を交えながら、一般論も含めて詳しく解説しています。
「何もわからない」状態からでもデザインシステムを始めるためのアプローチを提供しており、実践的な知識が得られます。
Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド
『Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド』は、デザインシステムの基本から実践的な運用方法までを網羅した一冊です。AirbnbやAtlassian、EurostarやSipgate、TEDといった規模の異なる5社の調査から得られた、効果的な構築&運用の方法がまとめられています。
デザインシステムが組織ごとに異なる形をとり得ること、そしてその目的の多様性についても言及しており、読者が自組織に適したデザインシステムを考える際の 参考になります。
まとめ
この記事では、デザインシステムの概要から始まり、その構成要素であるデザイン原則、スタイルガイド、コンポーネントライブラリについて詳しく解説しました。また、デザインシステムを導入することで得られるメリットや実際に構築するステップについても説明しました。
デザインシステムは、一貫性のあるデザインを実現し、開発効率を向上させるための強力なツールです。ぜひこの知識を活かし て、自社のプロダクト開発にデザインシステムを取り入れてみてください。
