近年、プロダクト開発の現場で「デザインシステム」という言葉を耳にする機会がぐっと増えました。デザインシステムは単なるUIコンポーネント集ではなく、ブランドの一貫性を守り、デザイナー・エンジニア・PMの共通言語をつくり、開発スピードを上げるための「仕組み」です。
海外ではAppleのHuman Interface GuidelinesやGoogleのMaterial Designが有名ですが、実は日本国内でも、業界やプロダクトの特性を活かした魅力的なデザインシステムが数多く公開されています。
この記事では、国内で特に有名な10のデザインシステムをピックアップし、どの会社が・どんな目的で・どんな特徴を持ってつくっているのかをまとめてご紹介します。自社のデザインシステムを検討中の方や、UI/UXの引き出しを増やしたい方の参考になれば嬉しいです。
1. SmartHR Design System（SmartHR）
クラウド人事労務ソフト「SmartHR」を提供する株式会社SmartHRのデザインシステムです。「だれでも・効率よく・迷わずにSmartHRらしい表現をする」ことを目的に公開されています。
最大の特徴は、理念の共有に力を入れている点。デザイン原則や運営理念、「デザインシステムをつくる目的」など、組織として大切にしたい考え方が随所に明文化されています。ロゴ・カラー定義・推奨フォントだけでなく、営業資料のテンプレートまで揃っており、新しいメンバーのオンボーディングマテリアルとしても価値を発揮します。立ち上げの記録は書籍『ちいさくはじめるデザインシステム』にもまとめられており、デザインシステム導入を考える企業のお手本として頻繁に名前が挙がります。
2. デジタル庁デザインシステム（デジタル庁）
URL: https://design.digital.go.jp/
日本政府のデジタル庁が公開している、行政サービス向けのデザインシステムです。Figmaファイルが誰でも無料でダウンロードでき、国内の政府系デザインシステムとして最も知られた事例の一つです。
デジタル庁のミッション「誰一人取り残されない、人に優しいデジタル化を。」を実現するため、アクセシビリティを最優先事項に据えているのが特徴。各コンポーネントには必ず図説と、正しい使い方／間違った使い方の例、その理由まで丁寧に書かれており、デザインシステム自体の使いやすさが緻密に設計されています。行政サイトに限らず、アクセシビリティを担保したサービスをつくりたい民間プロダクトの参考にもなります。
3. Spindle（サイバーエージェント / Ameba）
URL: https://spindle.ameba.design/
サイバーエージェントが運営するブログサービス「Ameba」のデザインシステムです。2023年度のグッドデザイン賞を受賞し、「いけてるデザインシステムといえばこれ」と語られることも多い代表的な事例です。
特徴は、構成と言葉遣いの分かりやすさ。「ブランド」「スタイル」「コンポーネント」といった抽象的な言葉に対して、Spindle上での定義を最初に揃えており、読み手の前提を統一する設計になっています。Ameba内で行われた効果計測では、Spindleを使うと約3倍速く開発できたという結果も報告されており、デザインシステムの定量効果を示した好例としても知られています。
4. PayPay App Style Guide（PayPay）
URL: https://app-style-guide.paypay.ne.jp/app-styleguide
決済アプリ「PayPay」のデザイン指針として公開されているスタイルガイドです。モバイルアプリのデザインシステムをつくる際のお手本としてよく参照されます。
「Design Philosophy（設計思想）」「Global Rule（全体ルール）」「Component（コンポーネント）」という3層構造になっており、上位の概念が下位ルールのコンセプトになるという階層関係が非常に明確です。全コンポーネントで見出しレベルが揃い、豊富な具体例とともに用法・用量が示されているため、読みやすさとクオリティの高さが両立しています。
5. freee vibes / freee brand site（freee）
URL: https://vibes.freee.co.jp/ ・ https://brand.freee.co.jp/
クラウド会計などを提供するfreee社のデザインシステムです。デザインシステム本体である「vibes」はアクセシビリティへの積極的な取り組みで知られており、加えて姉妹サイト「freee brand site」がブランド全体の指針を担っています。
特徴は、プロダクト内のUIだけでなく、プロダクト外のあらゆる接点まで一貫性を担保しようとしていること。ブランドサイト内の「Guidebooks」には、ロゴなどのCIに加え、イラスト、イベント、展示会、空間、LPなど多様なアウトプットを”freeeらしく”するためのポイントがまとめられているとされ、外部パートナーとの協業時にもブランドを守る仕組みが整っています。
6. IKYU Design Guideline（一休）
URL: https://www.ikyu.co.jp/design_guideline
高級ホテル・旅館予約サイト「一休.com」、「一休.comレストラン」、「一休.comスパ」など一休が運営するWebサービス全体を横断するデザインガイドラインです。
シンプルな構成ながら、サイト制作者が最低限知っておきたい情報がきちんと網羅されている実用的な作りが特徴。とくに一休のサービスにおいて重要となる「施設写真などの画像素材」については、撮り方や使い方のDo/Don’tが具体例とともに明記されています。UIスタイルや文言ルールも簡潔にまとまっており、「上品で一貫した一休らしさ」を支える仕組みになっています。小規模でも目的にフィットしたデザインシステムを構築したい組織の参考になります。
7. Mercari Design System（メルカリ）
URL（公式ブログ）: https://engineering.mercari.com/blog/tag/design-system/
フリマアプリ「メルカリ」のデザインシステムです。コンポーネント仕様の一般公開ページではなく、メルカリエンジニアリングブログやMercari Design Blog（note）を通じて設計思想や運用ノウハウが継続的に発信されています。
導入の目的は、急成長によって生じた「つぎはぎだらけで一貫性のない見た目や動作」を解消し、ユーザーの認知・学習コストを下げること。Web・iOS・Androidそれぞれの実装スタックに合わせてコンポーネントを整備しており、近年フルリニューアルされた新しいデザインシステムでは、「Semantic（意味的に分類する）」を軸にしたコンポーネント設計が採用されています。見た目が似ているからまとめるのではなく、挙動や意味で分割するという思想は、長期運用が前提の大規模プロダクトにとって示唆に富みます。
8. Francfranc Design System Guidelines（Francfranc）
URL: https://francfranc.io/design-system-guidelines/
インテリア・雑貨ブランド「Francfranc」のコミュニケーションデザイン全般を統括するガイドラインです。一般的なデジタルプロダクト向けのデザインシステムとは異なり、紙のカタログ、Web、店舗のPOPやサイネージなど、媒体を選ばずに展開できる点が大きな特徴です。
ロゴは「Identity」、画像は「Image」、テキスト要素は「Title」「Summary」「Details」「Specification」など、デザインを構成する最小単位を「Design Elements」として定義。それらを組み合わせて「Image Impact」「Catalog」「Line-up」などのデザインフォーマットを作る、というモジュラーな設計思想です。物理／デジタルの両方で展開する小売・実店舗ビジネスの参考になります。
9. D-EXPERIENCE DESIGN SYSTEM（デンソー）
URL: https://ux.system.denso.info/
自動車部品メーカーのデンソーが、モビリティ事業で提供すべきUXの指針と規範を明文化したデザインシステムです。コンセプトムービーを含むリッチなサイト構成になっており、外部発信やコーポレートブランディングの側面も強く感じられます。
特徴は、UIではなく”UX”そのものを軸にしたデザインシステムであること。理想的なUXを実現するための「PRINCIPLE」が、6つの指針と18の具体的な規範という形で構造化されています。車体ハードウェアからソフトウェア、センシング、デバイス連携、走行体験を取り巻く環境まで関係領域が広いモビリティ事業において、関係者全員が同じ方向を向くための「旗印」として機能している事例です。
10. Sparkle Design（Goodpatch）
URL: https://sparkle-design.goodpatch.com/sparkle-design
日本を代表するデザインファーム、株式会社グッドパッチが2025年6月から無償公開しているデザインシステムです。創業以来1,600件超のプロジェクトで培われた実践知を「デザイン資産」として集約することを目的としており、自社プロダクトだけでなく、他社・他チームでも使えるよう外部公開されている点が他の事例と大きく異なります。
コンセプトは「デザインシステムのためのデザインシステム」。色、タイポグラフィ、UIコンポーネントなどソフトウェア開発に必要なUIデザインの開発基盤を、すぐ使える形でまるごと提供しています。Figma Library、テーマ変更プラグイン、React Components、ガイドライン集、過去プロジェクトを参考にしたShowcaseまで揃っており、グッドパッチ社内検証では作業時間を約54%削減できたと報告されています。「デザインシステムは守るべきルールではなく、良いデフォルト」「速く良いモノをつくるためのジャンプ台」という思想が込められており、これからデザインシステムを立ち上げたい組織にとって、貴重な出発点になり得る事例です。
まとめ：デザインシステムは「組織と目的にフィットしているか」が肝心
10事例を並べてみると、デザインシステムには決まったフォーマットや唯一の正解がないことが見えてきます。
- 行政サービスのデジタル庁は、誰もが使えるようにアクセシビリティを最優先
- 写真が命の一休は、画像素材のガイドラインに強い
- 実店舗を持つFrancfrancは、紙もデジタルも横断できるモジュール設計
- 巨大プロダクトのメルカリは、意味で分けるセマンティック設計に振り切る
- デザイン会社のGoodpatchは、自社の実践知を外部にも展開し、業界全体に還元
それぞれが、自社の組織形態・ビジネス・ユーザーとの接点に合わせて、最適な形を選び取っているのが分かります。
自社でデザインシステムをつくる際は、コンポーネントから手をつける前に、まず「誰が、何のために使うものなのか」を言語化するところから始めると、ぶれない指針になるはずです。
この記事で紹介したURLは、すべて一般公開されている公式サイトです。気になったものは実際にアクセスしてみてください。
