こんにちは、グッドパッチのUIデザイナーのナスカです。

2025年6月に公開したデザインシステム「Sparkle Design」ですが、Figmaコミュニティでの活用数（複製数）が2カ月で約3600人。たくさんの人に試していただけてとてもうれしいです。

とはいえ「Sparkle Designを導入したいけど、どこから始めればいいの？」「うちのチームでどう適用すべきかわからない」という声もいただきます。そこで、この記事ではそういった方に向けて、導入前に立ち返るべき視点や、よくある課題別の進め方をまとめました。

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

デザインシステムは「いつ」導入すべきなのか？

そもそも、全ての開発においてデザインシステムが必要ということはありません。どういう場面で導入すべきなのでしょうか。以下に例をまとめました。

  • プロダクト開発が進む中で、UIの一貫性が失われてきた
  • 実装されたコードのメンテがつらく、改修コストがかさんでいる
  • 新メンバーが参加するたびに「どのスタイルが正なのか」混乱が起きている
  • デザイナーとエンジニアの認識ズレが減らない

要するに、プロダクトやチーム運営の中で「一貫性の欠如」や「属人化による非効率」が目立ってきたときが、デザインシステムの導入の検討タイミングです。

しかし「デザインシステムを入れよう！」と決めても、また次の悩みが出てきます。それはデザインシステムで何を作り、どこまで適用するのかということ。「うちのチームは、どこから始めればいいの？」と分からなくなるケースは少なくありません。

導入の進め方を決める上で大事なのは、次の2軸でチームの状況を把握することです。

  1. どんな課題があって、その影響はどれくらい大きいか？
  2. 導入や改善にどれくらいの時間と人をかけられるか？

例えば、以下のような要素のバランスを見ながら、現実的かつインパクトのある導入方法を検討していきます。

  • 一貫性の欠如や品質のばらつきによってユーザー体験が損なわれ、結果として売り上げや継続率に悪影響を与えている　→ 高インパクト
  • メンバーが兼務で忙しく、まとまった工数が出せない　→ 低リソース

3つの導入パターンと、その選び方

では、実際にどのような形でデザインシステムを導入するのでしょうか。以下は、グッドパッチ社内でSparkle Designを実際に導入したチームで見られた「よくある導入パターン」です。導入のコストが高い順に紹介していきます。

①UIからゼロベースで再設計（フルリニューアル型）

特徴：
 UI設計と並行してデザインシステム環境を整える。Sparkle Designの場合、Figma環境は揃っているため実装基盤の構築に時間がかかる。

 おすすめケース：

  • 開発：既存コードが老朽化・複雑化しており、抜本的な刷新が必要
  • UI：ビジュアルや情報設計の負債が大きく、ゼロから設計し直したい
  • タイミング：新規プロジェクト開始や全面リニューアルのタイミング
  • リソース：専任のデザイナー・エンジニアを数カ月単位で確保可能

作業・リソース感：
 Figma調整は数週間程度、実装基盤構築は数カ月規模。全体では3〜6カ月を目安に環境構築をする。

②既存デザインシステムを生かしつつ取り入れる（ハイブリッド型）

特徴：
すでに利用しているデザインシステムがあり、その環境に、Sparkle Designの良い要素（特にアクセシビリティ）を取り込みながら段階的に改善。

おすすめケース：

  • 開発：既存ライブラリを捨てるのは非現実的だが、改善余地はある
  • UI：画面構造は維持しつつ、コンポーネント単位で改善したい
  • タイミング：プロダクトを止めずに継続開発している状況
  • リソース：兼務メンバー中心で数日〜数週間単位の小さな工数なら出せる

作業・リソース感：
Sparkle Designを見ながら「このコンポーネントは改善できそう」と気づいたタイミングで修正を行う。継続的に進める形になるため、専任リソースは不要。改善サイクルに組み込めば数日単位の小工数で進行可能。

③新規画面だけをSparkle Designで設計・実装する（スモールスタート型）

特徴：
既存のUIはすでに存在しているが、デザインシステムは未整備な状態。いきなり全面導入は難しいため、新規画面や機能からSparkle Designを適用する。検証を繰り返しながら徐々に範囲を広げ、最終的には全体導入を目指す。

おすすめケース：

  • 開発：既存コードは維持しつつ、新規画面でデザインシステムの導入を試したい
  • UI：既存UIはそのままに、新規画面から負債を溜めずに作りたい
  • タイミング：新機能追加や部分的な改修を行うタイミング
  • リソース：小規模チームで短期間の検証に取り組み、徐々に拡張可能

作業・リソース感：
新規画面ならすぐに導入可能。PoCやプロトタイプ段階から試しやすく、成功体験を積み重ねながら全体導入につなげていける。

デザインシステムの作り方については、こちらの記事も参考になると思います。ぜひご覧ください。

デザインシステムとは？作り方を5ステップで解説！事例や導入メリットも＜Figma公開中＞
デザインシステムとは、デザイン原則やUIコンポーネントなどで構成された「良いデザインを実現するための包括的な仕組み」です …

Sparkle Designなら、すぐにデザインを始められてカスタマイズも簡単

Sparkle Designは、デザインを作る上で必要な基盤や、Figma上で満たせるアクセシビリティ基準を担保したコンポーネントがそろっています。

そのため、環境基盤をゼロから作るプロセスを省いて、すぐに“デザインすること”に集中できます。特にこんな方におすすめです。

  • これから新規サービスのデザインを作る方
  • デザインシステムを導入せずに進めて負債が溜まり、そろそろ整備したいと考えている方
  • チームが拡大しはじめて、ルールの必要性を感じている方
  • 少ない人数で効率的にデザインを進めたい方

Sparkle Designはあくまでプレーンな状態のデザインシステムです。 そのため、導入後はサービスに合わせたトーンに整えたり、機能の特性にあわせてコンポーネントを拡張したりと、少しずつ育てていくことが前提になります。

一例ですが、トーンを変えるには「Sparkle Design Theme Settings」というFigma Pluginを使うのがオススメです。Primary Color、フォント、角丸などをサービスに合わせてカスタマイズができます。

プライマリーカラー・フォント・角丸などがカスタマイズできる

完全にブランド仕様になるわけではありませんが、「そのサービスらしい雰囲気」をまとった状態でプロトタイプを素早く作成できます。

サービスの雰囲気に合わせた素早くプロトタイプできる

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

デザインシステムは「育てる」もの

デザインシステムは、導入して終わりではなく「育てる」ものです。

だからこそ、導入の入り口で「完璧を目指さないこと」がとても大切です。自分たちの課題の大きさと、使えるリソースを冷静に見つめた上で、できるところから少しずつ始める。Sparkle Designも、そんな小さな一歩からスタートしました。

次回の記事では、私たちが実際にどのようにSparkle Designをスクラムで運用・改善を回しているか、その具体的な方法をご紹介します。Sparkle Designの運用に興味がある方は、そちらの記事も合わせてどうぞ！

Sparkle Designを詳しく知りたい方はこちらから

Share on

Nazca
2021年にUIデザイナーとしてGoodpatchに入社。 かわいいデザインとチワワが好きです。