【Figma公開中】デザインシステムとは？作り方を5ステップで解説！事例や導入メリットも

デザインシステムとは、デザイン原則やUIコンポーネントなどで構成された「良いデザインを実現するための包括的な仕組み」です。デザインシステムを構築することで組織内での共通理解が深まり、一貫性のあるデザインや開発を実現できるようになります。

プロダクトの開発効率向上にも有効なデザインシステムですが、「現在のプロジェクトにデザインシステムが必要か分からない」「デザインシステムの導入方法が分からない」と悩んでいる企業も多いのではないでしょうか。

デザインシステムを導入する際は、デザイン言語の構築やツールボックスの構築など、適切なステップで進めることが大切です。社内に知見を持った人材がいない場合は、デザインファームへの依頼も検討してみましょう。

本記事では、2011年の創業以来デザインファームのパイオニアとして多くの企業にデザイン支援をしてきたグッドパッチが、デザインシステムを構築するステップや導入メリットを解説します。ビジネスデザインを推進する上で参考になる、おすすめの事例も紹介するので、ぜひ最後までご覧ください。

〈おすすめのデザインシステム事例3選〉

監修：乗田 拳斗（株式会社グッドパッチ　UIデザイナー）
連載記事「みんなで育てるデザインシステム」（CreatorZine）執筆者

【関連記事】ビジネスデザインとは？重要性やプロセス、成功事例をわかりやすく解説

もう一歩踏み込んだ情報が欲しい方は
こちらもチェック

グッドパッチに寄せられたデザインシステムのよくある質問に、本記事を執筆したUIデザイナーの乗田がわかりやすくお答えした人気セミナー動画です。

動画の内容

• ・デザインシステムについて
• ・デザインシステム無料相談会で実際にあった質問
• ・ 質疑応答

このような方におすすめです

• ・デザインシステムの重要性はなんとなく聞いているが、一般的な知識がない
• ・デザインシステムを何から始めたらいいかわからない
• ・ デザインシステムについて他社がどのような悩みを持っているか知りたい

【無料動画公開中】
デザインシステムが組織にもたらす効果

デザインシステムとは

大前提として、デザインシステムには明確な定義がありません。デザインシステム分野で著名なNathan Curtis氏の言説をもとに、各々で解釈した内容をデザインシステムと定義することが多く、グッドパッチでは以下のように定義しています。

「ソフトウェアやグラフィックなどのデザイン原則やデザインガイドライン、UIコンポーネントなどのツールボックスによって構成される、良いデザインを実現するための包括的な仕組み」

一般的に「『デザインシステム』とはUI部品集である」と考えられることが多いですが、それだけでは言及する範囲が狭すぎるともいえます。

ただし、冒頭にも述べたようにデザインシステムに明確な定義はないため、組織によって「UIコンポーネント集」「デザインガイドライン」「ソフトウェアのUIを効率良く設計するための部品の集まり」などと言われることもあります。

組織内でデザインシステムに対する共通理解を深めていないと、チーム内のメンバー間でデザインシステムに対する解釈が異なることでチームのコミュニケーションコストが増えたり、目指す方向性にバラつきが生じた結果、チームの生産力が低下したり、結果的にユーザーにとって使いにくいプロダクトやサービスになるリスクがあります。

一方でしっかりとしたデザインシステムを構築すれば、チーム内におけるデザインの共通理解を深められ、組織が一貫した指針でデザインできるようになります。

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

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

1. デザイン言語
2. ツールボックス
3. 組織（体制）

それぞれ詳しく見ていきましょう。

1. デザイン言語

デザイン言語とは、そのデザインの共通理解に必要な語彙や考え方などを表し、関わる人々の共通理解を深めるためのもの、いわゆる「共通言語になり得るもの」です。デザイン言語の具体例としては、以下のようなものが挙げられます。

• デザインガイドライン

　　　例：Human Interface Guidelines、Material Designなど

• 概念定義表：デザインの中に現れる概念の名前をまとめたもの
• プロダクト・サービスの設計思想（設計コンセプト）：デザインで重視すべきものを言葉で簡潔に表したもの

　　　例：「プライバシーを尊重する」「アクセシビリティを確保する」など

• 象徴するイメージ・ブランド

　　　例：一貫したタイポグラフィ、言葉表現（Appleっぽい言い回し、タグライン）グラ

　　　フィックスタイル（色、シェイプ）アニメーション、動き（〜っぽい動き）

簡単にいうと「このデザインは、こういうものだよね」と会話できる共通のイメージを構成するものだと考えておきましょう。

デザイン言語を醸成するには、まずデザイナーまたは関係者がデザイン対象となる概念を正しく理解し、共通認識を持つための語彙を決めなければいけません。具体的には、同じ概念（コンセプト）や言葉、避けるべき言葉や考え方などを明確化し、共通認識にする必要があります。

同時に、デザインパターンを定義することも大切です。デザインとその構成要素をパターンとして捉えることでシステム化しやすくなり、関係者間で共通認識を深めるのにも役立ちます。

なおデザイン言語の普及には、設計思想を含むデザインガイドラインの作成が有効です。

2. ツールボックス

ツールボックスとは、デザイン言語に基づき設計された道具、そしてプロダクトを成り立たせるための共通部品を集めたものです。主に以下のものが含まれます。

• コンポーネントライブラリ（再利用可能なボタンなどのUIパーツを集めたもの）
• 設計ツール（例：Figmaなど）
• 部品の命名規則
• 概念オブジェクト（プロダクトの中に現れる概念やメタファの呼び名）の呼び方

システム化する際は、まずFigmaなどの運用しやすいツールを使用すると良いでしょう。ツールボックスの構築にはデザイン言語が不可欠なので、デザイン言語が示すコンセプトや語彙に基づいて作れば、部品などの命名ルールや概念オブジェクトの呼び方などを統一しやすくなります。

3. 組織（体制）

組織とはデザイン言語やツールボックスを効果的に活用し、デザイン対象となるプロダクトを作成・運用するための体制のことです。

具体的には、会社組織や開発チーム（デザインチーム）などが挙げられ、さまざまな人が含まれます。

デザインシステムを効果的に機能させるためには、組織の存在が欠かせません。また、組織の状態や課題が変わるにつれて、ツールボックスやデザイン言語も定期的な更新が必要です。更新を怠ると不具合を起こしたり陳腐化したりしてしまいます。つまり、日々の改善と推進力を与えるには組織の役割が重要なのです。

また、デザインシステムには、デザイナーだけでなくプロダクトやサービスの開発に携わる全員が関与する必要があります。組織のメンバーが同じ言葉（デザイン言語）で会話し、同じ理解（コンセプト）でデザイン過程と対象となる製品やサービスを捉えることが大切です。

このため、組織全体でデザインに関する知識や理解を深めること（＝組織全体のリテラシーを高めること）が求められます。

効率良くデザインシステムを運用するには、デザイン言語の普及と相互理解を促進し、デザインの方針策定や計画など運用を後押しする専門担当者を置くことが効果的です。

デザインシステムを構築する3つのメリット

デザインシステムを構築すれば、組織内の共通理解を深め、一貫性のあるデザインができるようになります。ここでは、デザインシステムを構築する3つのメリットを見ていきましょう。

1. チームメンバーのコミュニケーションが円滑になる

デザインシステムを構築すれば、チームメンバーのコミュニケーションを円滑に進めることが可能です。

プロジェクトには、デザイナー・PdM・エンジニアなどさまざまな職種の人が関わります。共通のデザイン言語がないとメンバー間の認識に相違が生まれ、プロダクト開発の遅れや矛盾が生じるケースもあるでしょう。

そのような場合にデザインシステムがあれば、全員が共通認識を持ってプロジェクトに取り組むことができます。明確なガイドラインやコンポーネントライブラリによって、コミュニケーションのギャップを埋められるのがメリットです。

2. 開発の速度が上がりコストダウンにつながる

デザインシステムの構築によってデザインの原則を決めておけば、開発速度の向上も期待できます。例えばコンポーネントを再利用して開発すれば、時間と費用を縮小しながらプロダクト開発に取り組めるでしょう。

市場やニーズが目まぐるしく変化する現代では、プロダクトの開発サイクルを素早く回すことが大切です。デザインシステムを導入すれば、メンバー間の伝達工数や保守運用の工数などを削減できるので、結果的に素早い開発が可能になりコストダウンが見込めるでしょう。

3. プロダクトの品質が向上する

デザインシステムの構築は、デザインの一貫性維持に役立ちます。対象のデザインシステムの範囲内で安定したUXを担保できるため、一貫性のあるユーザー体験の提供が可能になり、最終的なプロダクトの品質向上につながるでしょう。

また、デザインシステムによってプロダクトの品質のベースラインが向上されると、ベースライン向上に必要だった時間を削減できます。削減した時間をよりクリエイティブな作業に割けるようになるので、本質的な課題に向き合える状態になるのもメリットです。

デザインシステムで気をつけるべきこと

メリットの多いデザインシステムですが、注意したいポイントもあります。それは「明確な目的を持って導入する」ということです。

明確な目的を持って導入する

デザインシステムは、良いデザインを実現するための包括的な仕組みです。あくまでも「手段」なので、システム構築自体が目標にならないよう注意しましょう。

デザインシステムを構築する際は「デザインシステムを通じて何を実現したいのか」を明確にしておくことが大切です。「開発にかかる工数を削減する」「時間の使い方を変える」「ユーザー満足度を上げる」など、現状の課題から目的を決めると良いでしょう。

必ずしも遵守すべきルールではありませんが、押さえておけばデザインシステムの導入がスムーズになるでしょう。

デザインシステムの作り方：5ステップ

デザインシステムを適切に構築するためには、以下の5ステップに沿って進めるのがおすすめです。

1. 「デザインシステムとは」の共有
2. 現状把握・課題の洗い出し
3. デザイン言語の構築
4. ツールボックスの構築
5. 組織への浸透

基本的な構築サイクルをお伝えするので「デザインシステムの作り方が分からない」「何から始めれば良い？」と悩んでいる企業の方はぜひ参考にしてください。

ステップ1：「デザインシステムとは」の共有

まずは、メンバー間で「デザインシステムとは何か」を考えていきましょう。目線をそろえておくことで、デザイン言語の決定や組織への浸透をスムーズに進めやすくなります。

デザインシステムの概念を共有したら、デザインシステムを構築する目的・目標や具体的な取り組み方などを決めていきます。

ステップ2：現状把握・課題の洗い出し

デザインシステムを構築する目的や目標を決めたら、設定した目的・目標と現状のギャップを埋めていきます。現状を把握し、目的達成のために必要な課題を洗い出すことが大切です。

このときの課題とは、デザイナーが持つ課題だけではありません。組織メンバーが抱えている課題はもちろん、経営やマーケティングなど部署を横断した会社全体の課題にも着目すると良いでしょう。

解決したい課題を見つけたら、同時に「課題を持つメンバーの属性を把握しておく」ことが大切です。対象を明確にしておけば、その属性に合ったライブラリやフォーマットを提供しやすくなるので、デザインシステムの価値がより大きなものになります。

ステップ3：デザイン言語の構築

構築準備を終えたら、次にデザインの共通理解に欠かせないデザイン言語を決めます。デザイン言語は以降のステップでも重要な要素となるので、メンバー間でしっかり議論した上で決定することが大切です。

なお、デザインガイドラインもデザイン言語のひとつです。カラーや図形、タイポグラフィ、余白などデザインのルールも同時に決めていきましょう。

ガイドラインに含めるべき要素は多様ですが、必ずしもすべてにルールを定める必要はありません。プロダクトの規模や課題などを考慮し、必要なルールを定めてください。決定したデザイン言語をガイドラインに落とし込めば、それがメンバー間での共通言語となります。

ステップ4：ツールボックスの構築

デザイン言語を基に、ツールボックスの構築を進めましょう。前述したようにソフトウェアのUIであれば、運用しやすいFigmaなどのツールを使って構造化するのがおすすめです。

ツールボックスの構築では、ボタンやナビゲーションなどの必要なUIパーツをまとめ、コンポーネントライブラリを作成します。見た目を作り込むだけでなくプラットフォームの制約やコードライブラリの仕様に則ることも重要です。

ステップ5：組織への浸透

最後に、ステップ3・4で完成したデザイン言語やツールボックスを運用できる体制に整えます。デザインシステムは、プロダクトに携わるすべてのメンバーが関与しなければ意味がありません。

デザイナーだけがデザインシステムを理解していてもうまく機能しないので、エンジニアやPdMなど非デザイナーを含め、組織全体に浸透させることが大切です。

全員が共通認識を深めた上で運用すれば、プロダクトの品質向上や効率化などのメリットを最大限に享受できるでしょう。

おすすめのデザインシステム事例6選

近年では、さまざまな企業や組織がデザインシステムを導入しています。ここからは、おすすめのデザインシステムの事例を紹介します。

デジタルプロダクト以外のデザインシステムもあるので、活用イメージをつかむ参考にしてください。

【関連記事】【2024年最新動向】日本発の「いけてる」デザインシステム事例10選　より一部抜粋

Sparkle Design（グッドパッチ）

出典：Sparkle Design（グッドパッチ）

“速く、良いデザイン”を誰もが構築できるため、デザインファームとして多くの企業を支援してきたグッドパッチが、その知見を集約したデザインシステム「Sparkle Design」を無償提供しています。

その特徴は、あらゆるプロジェクトで使えるデザイン基盤として設計されていることです。

• どんなプロダクトにもなじむ、「ブランドに依存しない」美しさと使いやすさ
• プラットフォームの技術仕様に基づいた「標準品質」
• ブランドや要件に応じてカスタマイズできる「柔軟な拡張性」

ソフトウェア開発に必要な色、タイポグラフィ、UIコンポーネントといった機能とガイドラインが、すぐに使えるFigma Libraryなどの形で包括されています。

実際にグッドパッチでは、これまで「Sparkle Design」をさまざまなプロジェクトで活用しています。その中で、スキルに依存しない“良いデザイン”の再現性の高さと、プロジェクトの個性を柔軟に反映できるバランスの良さを磨いてきました。

このデザインシステムを導入すると、最短1日でデザイン環境を構築・検証可能、作業時間を約54％削減できる、デザインとエンジニアリングがスムーズに連携できるといったメリットが感じられると思います。

誰もが創造的な領域に集中する開発環境づくりに活用できる、「Sparkle Design」について詳しくは、下記からご覧ください。

【関連記事】誰もがいいデザインを生み出せるデザインシステム──グッドパッチの実践知を集約した「Sparkle Design」を公開

デジタル庁デザインシステム

出典：デジタル庁 デザインシステムβ版

デジタル庁デデザインシステムは、主に行政機関や公共機関での利用を想定して構築されたデザインシステムです。デザイン言語・UIコンポーネント・ガイドラインから構成されており、誰でも無料で利用できるFigmaファイルを配布しています。

デジタル庁のミッションである「誰一人取り残されない、人に優しいデジタル化を。」の実現のため、アクセシビリティを最優先事項に位置付けているのが特徴です。WCAG（Web Content Accessibility Guidelines）などのアクセシビリティガイドラインを土台にしており、デジタル庁デザインシステムを使用すればアクセシビリティが担保された成果物を作りやすくなります。

特定のブランドやサービスを対象としたデザインシステムではないので、行政機関におけるさまざまなサービスや手続きのデジタル化に活用できるのが魅力です。作例やガイドラインが充実しているほか、コンポーネントや画面デザインなどは図表付きで説明されているので初心者でも理解しやすいでしょう。

Spindle（サイバーエージェント）

出典：Spindle公式サイト（Ameba）

Spindleは、サイバーエージェント社によるAmebaのデザインシステムです。2023年度にグッドデザイン賞を受賞しており、デザインシステムの手本としてよく名前が挙がります。

Spindleのデザインシステムは、構成や言葉遣いが簡潔で理解しやすいのが特徴です。始めに概要を述べた後で、徐々に詳細の説明に入っていくのでスムーズに理解できます。

ブランドやスタイルといった単語に対しても明確に定義が決められており、プロダクトに関わる全員が共通理解を深めやすいのもポイントです。「すべきこと」と「しないこと」を判断する指針がまとめられているので、誰でも一定以上の品質を維持したアウトプットを出せるでしょう。

Primer（GitHub）

出典：Primer公式サイト（GitHub）

GitHub謹製のPrimerは、ネイティブアプリケーション用とウェブアプリケーション用のガイドラインがそれぞれ分岐した構成になっているのが特徴です。iOS向けアプリケーションには独自のガイドラインを設けておらず、HIG（Human Interface Guidelines）に準拠して作られています。

アクションバーをはじめ、進捗バー・トークン・トグルスイッチなどコンポーネントの網羅性が高いので、さまざまな表現や機能を高速に実現できます。

他にもWCAG 2.0のレベルAAに準拠していたり、ダークテーマに対応していたりと汎用性が高いのも魅力です。カラーパレットもていねいに設計されているので、カラー選定時にも重宝します。

SmartHR Design System

出典：SmartHR Design System公式サイト

SmartHRのデザインシステムは、理念の共有に注力しているのが特徴です。「デザイン原則」や「SmartHRのプロダクトデザインが目指すところ」などが明示されており、組織での共通理解を深めるのに役立つと考えられます。

デザインシステムとしてはもちろん、メンバーが増えた際の新人向け導入資料としても大きな価値を発揮するでしょう。

また、ロゴやアイコンといった各基本要素については、禁止事項や具体的な利用シーン、実例などがまとめられており、デザイン時のイメージをつかみやすいのも魅力です。

EXPO 2025 Design System

出典：EXPO 2025 Design System公式サイト

EXPO 2025 Design Systemは、2025年日本国際博覧会での活用を目的としたデザインシステムです。公式ウェブサイトやSNS、市内の装飾、サイン表示、パッケージなど関西万博に関するさまざまなサービス・プロダクトに活用されています。

ガイドラインでは公式ロゴ・キャラクターとの組み合わせやカラー、タイポグラフィなどのルールが細かく決められており、効率的にデザインを進められるでしょう。デジタルプロダクト以外にも適用できるデザインシステムなので、立体物への適用例などもまとめられているのが特徴です。

グッドパッチのデザインシステム支援事例

最後に、グッドパッチにおけるデザインシステムの支援事例を紹介します。デザインガイドライン作成までの道のりや課題などを中心に紹介するので、デザインシステムの導入を検討している企業は、ぜひ参考にしてください。

SBペイメントサービス

出典：株式会社グッドパッチ | Work 「SBペイメントサービス」

SBペイメントサービス社は、ソフトバンクグループの決済・金融事業を担う企業です。グッドパッチでは、決済サービスを利用する顧客の満足度向上を目的に、組織の立ち上げからプロダクト改善の提案、オペレーション改善までを支援しました。

加盟店が使うツールやウェブサイトの改善を目指すにあたり、デザインを進める際の指針となるガイドラインを定義。ユーザー体験を軸に、システム上のタイポグラフィ・ボタン・画像・色など、さまざまな要素のルールを定めました。

その後、定量データ・定性データ・ステークホルダーへのヒアリング・ワークショップで得た知見とデータを組み合わせ、組織内で理想のユーザー体験を言語化することでデザインガイドラインを策定しました。

デザインガイドライン作成までのリサーチ期間をしっかり確保したことで「SBペイメントサービスらしさ」を明確化できたのが、納得感のあるデザインガイドラインにつながったと考えています。

デザインシステムを理解してサービス品質の向上や効率化に活用しよう

本記事では、デザインシステムの概要や構成要素、構築するためのステップ、おすすめの事例などを詳しく解説しました。

デザインシステムとは、デザイン原則やデザインガイドラインなどによって構成される「良いデザインを作るための包括的な仕組み」です。デザインシステムを構築することで、組織内の共通理解を深め、一貫性のあるデザインを実現できるようになります。

デザインシステムを構築するためには「デザイン言語の構築」や「ツールボックスの構築」など適切なステップを踏まなければいけません。正しい知見を有していなければ推進が難しいので、デザインシステムの構築・運用・導入までを得意とするデザインファームに依頼するのもひとつの方法です。

2011年の創業以来デザインファームのパイオニアとして多くの企業にデザイン支援をしてきたグッドパッチでは、プロダクトの開発効率向上を目指すデザインシステム構築サポートを用意しています。組織課題に応じた支援プランをお選びいただけるので、デザインシステムの導入にお困りの企業は、ぜひ一度お問い合わせください。

開発効率を変革する、デザインシステム構築サポート

開発効率の低下、チーム間のコミュニケーションコスト、統一されないデザイン……
グッドパッチがこれまで培ってきたデザインとエンジニアリングのナレッジであなたの組織のデザインシステム構築をサポートします。

サービス資料には、組織特有の問題点を特定する開発効率診断テストもご用意。組織の課題に合わせて支援プランをお選びいただけます。

このような方におすすめです

• 開発効率を向上させたい
• デザインシステムを導入したい
• デザインシステム構築だけ外部のサポートが欲しい
• 製品を素早く市場に出したいが、リリースサイクルが鈍化している
• デザイン・開発の負債を解消したいが、内部リソースに余裕がない
• 社内にデザインシステムの知見を持っているメンバーがいない

デザインシステム構築支援の詳細を見る