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

グッドパッチが発表したデザインシステム「Sparkle Design」は、“速く、良いデザイン”を誰もが構築できるようにするための、グッドパッチの実践知を集約したデザイン資産です。

Sparkle Designは、テーマ、コンポーネント、原則などソフトウェア開発に必要なUIデザインの環境基盤が、すぐに実際の業務で使える形でまとめられた「デザインシステムのためのデザインシステム」です。

今回は、その設計思想と構成を紹介する公式ページと合わせて、Figma LibraryとFigma PluginをFigma Communityに公開しました。

なぜSparkle Designを開発したのか

新規プロジェクトが始まるとき、グッドパッチのUIデザイナーがまず行うのは「制作」ではなく、そのための「準備」でした。

色やタイポグラフィのテーマ設計やコンポーネント設計……最初の数週間は、環境整備に多くの時間を費やす場面が少なくありません。

さらに、デザインプロセスが属人化していると、品質のばらつきや引き継ぎコストが発生するだけでなく、環境整備に多くの時間を費やすことで、本来注力すべき「価値あるアウトプットの創出」に充てる時間が圧迫されてしまう──そんな本末転倒な状態も。私たちは、同じ課題に何度も直面してきました。

多くのプロジェクトでは、初期段階でデザインシステムの必要性が認識されているものの、その構築に時間を要したり、整備が後回しになってしまうことも少なくありません。

プロジェクトの終盤では、荒削りな状態を急いで整形する必要が生じたり、設計に専門性が求められたりするがゆえに、誤った仕様や非効率な構造を共通化してしまうリスクもあります。

Sparkle Designは、こうした現場の負担やリスクを軽減し、より価値あるアウトプットに集中できるよう支援するために生まれました。

Sparkle Designの構成と特徴

Sparkle Designは、「ブランドに依存しない、汎用的なデザインの土台」です。非生産的な作業を減らすことで、プロダクトを100回作っては壊し、叩き上げていく──そんなサイクルを支える基盤を目指しています。

• ブランド非依存：どんなプロジェクトにもなじむ、装飾を持たない設計
• 標準品質の担保：柔軟なテーマ（カラーやタイポグラフィ）設計とベストプラクティスなUIコンポーネントの網羅
• 柔軟な拡張性：各プロジェクトでブランド定義を上書きして活用可能

プラットフォームの仕様に基づいて設計されているSparkle Designを使えば、毎回ゼロからUI制作の環境を構築するのではなく、標準品質の土台を活用することで、準備の手間を減らし、非効率な作業を削減できます。

例えば、コンポーネントのプロパティ設計や汎用的なデザインパターンなど、あらゆるプロジェクトで毎回必要となる要素をあらかじめ備えることで、ブランドや要件に応じた拡張をスムーズに行えます。

Sparkle Designは、そうした「毎回繰り返される作業」を代替し、デザイナーが本来向き合いたい創造的な領域に集中できるようサポートすることで「速く、良いモノ」をつくるための、確かなジャンプ台であり続けたいと考えます。

社内活用から外部公開へ

Sparkle Designはこれまで、グッドパッチのさまざまなプロジェクトで利用されてきました。

その運用を通じて実感したのは、メンバーのスキルや経験値に依存せず、誰もが一定の基準からスタートできる再現性の高さと、プロジェクトごとのブランドやドメイン、ソフトウェアの制約、ビジネス要件といった個性を柔軟に反映できるバランスの良さです。

さらに、自社プロダクトとクライアントワークの2軸で事業を展開してきたグッドパッチだからこそ、さまざまなプロジェクトで得られた“良いデザイン”が汎用化され、業務レベルでそのまま使えるナレッジとしてSparkle Designに落とし込まれています。

2025年8月期 第2四半期決算説明資料より引用

今回の外部公開では、まずSparkle Designの思想と構成全体を紹介する公式ページを起点とし、その一部である「Figma Library」と「Figma Plugin」をFigma Communityに公開しました。

今後は、各種ガイドラインなどのコンテンツも公式ページを通じて公開予定です。

Sparkle Designがもたらす価値と設計思想

• 立ち上がりの高速化：環境構築にかかる時間を削減
• 標準品質の保証：誰が使っても一定水準を担保
• ナレッジの可視化と共有：チーム間での共通言語となる
• 教育・引き継ぎの簡略化：オンボーディングも円滑に

これまで「デザインツール上でつくっては壊す」ことが主流だった時代から、素早くリリースしエンドユーザーのニーズに対応していく──昨今は「実環境でのつくっては壊す」を前提とした開発のあり方にシフトしつつあります。

ものづくりのフローが大きく変化していく中で、私たちはデザインと実装の一貫性と品質の担保、そして培ってきた独自のナレッジこそが価値になると私たちは考えています。Sparkle Designは、こうした変化に対応しながら、速く、そして品質の高いものづくりを支える基盤として機能します。

また、Sparkle Designの設計には、現場からのリアルなフィードバックを反映しています。

• トークン設計：ブランドごとのカスタマイズに柔軟な構成
• コンポーネント構造：開発実装しやすい階層構造と命名
• アクセシビリティ考慮：視認性やフォーカス状態にも配慮

今後はさらにアクセシビリティやベストプラクティスなパターン、インタラクションを体系的に取り込み、体験設計〜UIデザイン〜開発を一気通貫で支援するナレッジアセットとして進化を続けます。

今後の進化に乞うご期待、まずは触ってみてください

Sparkle Designは完成品ではありません。

単なるアセットではなく、デザインや開発の共通言語となる存在として、グッドパッチ内にとどまらず、外部のデザイナーや開発者とナレッジを共有・交換しながら、より多様な場面に対応できるデザイン基盤へ育てていきたいと考えています。

将来的には、専門外のロールを持つメンバーであっても、ドメイン知識のない状態からクライアントと協働し、短期間でプロダクトを構築・リリース・改善ができるような未来を見据えています。

AI時代の不確実性の中で、私たちはグッドパッチならではの不変的な価値を再定義し、ものづくりの最前線で価値を提供し続けるために挑戦していきます。

Sparkle DesignのFigma LibraryやFigma Pluginは、Figma Communityからどなたでも自由に複製・活用いただけます。ご興味を持たれた方は、ぜひ試してみてください。

👉 Figma Communityページを見る
👉 構成や思想をもっと知りたい

Sparkle Designが、「もっと速く、もっと良いモノをつくりたい」と願うすべてのデザイナーやチームの力になれたらうれしいです。

Sparkle Designを拡張するチームメンバー