《Figmaと運用 Vol.4》準備に時間をかけないための基盤。グッドパッチ「Sparkle Design」が生まれるまで

グッドパッチは2025年6月、同社が開発したデザインシステム「Sparkle Design」をFigma Communityに公開しました。どのソフトウェア開発にも用いることができる「デザインシステムのデザインシステム」がコンセプトです。立ち上げの経緯や、開発を支えたFigmaの活用方法、さらに価値を高めるための運用について聞きました。（「Web Desigining 2025年8月号」より抜粋）

プロフィール

課題と目的｜普遍的な仕様の共通基盤で非効率な作業をなくしたい

Webサイトやアプリケーションは、プロダクトそれぞれに異なるUIデザインを持ちますが、プラットフォームの技術仕様は共通です。

例えばボタンの「デフォルト」「ホバー」「フォーカス」などの状態や振る舞いです。グッドパッチでは従来、各デザイナーがUIデザインの基盤となるこれらの仕様を整備するところから仕事を始めていました。そのため、クリエイティブな作業に入るまでに1〜2週間かかることもあったのです。

この非効率性を解消しようと、デザインシステムの立ち上げを提案したのが、現在Sparkle Designのクオリティマネージャーを務める乗田拳斗さんでした。

「ボタンやフォームといったUIデザインの基本的な要素を共通基盤化し、仕様の整備を省力化するためのデザインシステムをつくりたいと考えました。それ自体がブランドを持たないことを重視した、“デザインシステムのデザインシステム”という位置付けです」（乗田さん）

そのうえで、各要素に高いカスタマイズ性を持たせ、あらゆるプロダクトに対応できるデザインシステムを目指したのです。グッドパッチには、それを実現するだけのナレッジの蓄積がありました。

「私たちはこれまで何百回もフォームを作成してきました。その経験から、ベストなフォームをつくる知見はあるのですが、毎回ベストを実現するにはそれなりに調べてつくる手間が必要です。しかし、チーム全体の知見をコンポーネントに集約すれば、ベストなフォームを効率的に作成できます」（Sparkle Designプロダクトオーナー 矢吹ナスカさん）

個人の経験値ならTipsとして共有するしか方法がありませんが、それらを集約し仕組み化することでナレッジへと昇華させることが可能です。Sparkle Designのチームマネジメントを担当する甲斐田愛華さんは、その意義を次のように語ります。

「プロジェクトごとの準備や整理に費やしていた時間を、共通のデザインシステムによって効率化すれば、誰でも一定の『当たり前品質』を担保しながら、さらに良いものにするための『魅力品質』を高めることに集中できます」

こうして2023年初頭、デザインシステム「Sparkle Design」の開発が開始されました。

プラットフォームとして選択されたのはFigmaでした。同社ではFigmaの使用がルール化されていたわけではありませんが、すでにデファクトスタンダードになっていたことに加え、デザイナーとエンジニアの連携に適していることも選択の理由となりました。また、納品形態やその後の運用性という観点でも強みがありました。

開発・構築のプロセス｜ベストプラクティスを集め、2年間の実践運用を経てリリース

Sparkle Designは、過去のWebアプリケーション開発の実績からデザインシステムの基本になる要素（スタイルガイドやコンポーネント等）を集め、体系化することから始まりました。

ある程度進んだ段階で甲斐田さんや矢吹さんが参加し、プロジェクトチームが立ち上がると、初期バージョンについて社内のデザイナーにアンケートを取ったり、実際に使用してもらいながらフィードバックを集めるなどして、各要素の追加・改善を進めていきました。この間に、新しい案件で開発されたコンポーネントが追加されることもありました。

特定のプロダクトに特化した要素は他の案件で使いにくいため、選ばれたのは汎用的かつ成果が出ているもの、定量的・定性的な評価のあるものが中心です。社内のベストプラクティスが、“何にでもなれる”形に姿を変えて集約されていったのです。

開始から半年後には実際の開発案件で使われ始め、実践的なフィードバックが得られるようになりました。それらはSparkle DesignのFigmaファイルを元に作成したブランチにコメントで書き込まれ、タスク化されたものをJiraで管理・消化していきます。これを軸に1週間のスプリントで開発が続きました。この体制自体もアップデートしながら、現在も毎週何かしらアウトプットが行われています。

当初、コンセプトの実現を難しくしていたのは、要素の特徴を決めるルールセットを一括管理する術がなかったことです。乗田さんは「Figmaのバリアブル機能搭載によって、それが大きく前進しました」と振り返ります。最近は社内の有志メンバーがデザインのブラッシュアップやレビューに参加するケースが増えてきました。ブランチを切って作業し、チームメンバーがレビューしてマージする、というサイクルが生まれています。

こうした取り組みを2年ほど続け、Sparkle Designは当初設定したロードマップの最終段階に到達。顧客案件への導入・運用実績も十分な量に達したことから、このほどベータ版の公開へと至ったのです。

運用や更新｜コミュニケーションを重視し、愛されるデザイン資産に

Sparkle Designは、すでにグッドパッチ社内で多数の成果を出しています。200以上の画面を1カ月で構築したり、提案のごく初期にプロトタイプを提供するなど、速く、美しいデザインを可能にしました。顧客側にもクオリティの担保や開発期間短縮といった利点があります。また、納品時に改めてデザインシステムを構築する必要がない点も、UIデザイナーの作業効率化に貢献しています。

デザインシステムは使われてこそ価値を発揮します。「みんなが使える状況をつくることも私たちチームの役割」（甲斐田さん）という考えから、Figmaを使い慣れていない人でも簡単な操作でコンポーネントをカスタマイズできるプラグインが開発されました。これにより、UXデザイナーが簡易なプロトタイプをつくったり、ワークショップの間口を広げるといった場面でも活用事例が増えています。

また、Sparkle DesignのSlackチャンネルでは質問に答えるだけでなく「毎朝困り事がないか質問を投げかけるボットを設定し、作業中は常時ハドルで対応」（矢吹さん）するなど、社内の声に常に耳を傾けています。Sparkle DesignのドキュメントはNotionで作成し、ガイドや毎週のアップデートなど、情報提供も充実させています。

Figmaは、これまでにない新しいコラボレーション環境を提供するツールですが、Figmaだけでは足りない部分もあります。グッドパッチはこうした包括的なコミュニケーションを充実させ、Figmaをプラットフォームにした開発を効果的に機能させてきたといえます。

「私たちは、“ハートを揺さぶるデザインで世界を前進させる”というビジョンのもと、世界によりよいプロダクトを増やすことを目指しています。そのための武器となるのがSparkle Designです。今後さらに価値を発揮できるよう、多くの人を巻き込みながら“愛される”デザインシステムになってほしいと考えています」（甲斐田さん）

COLUMN｜1周でも多く検証するためのAI活用

グッドパッチのプロダクト開発は、検証サイクルを1周でも多く回すことを重視しています。しかし、リソースには限界があります。そこで研究しているのが、AIにSparkle Designを使ったUIデザインを生成させ、デザイナーがブラッシュアップする活用法です。グッドパッチの品質基準に適う出力を目指し、Sparkle DesignのガイドラインをAIフレンドリーに編集したり、デザイナーが作成したUIデザインを学習させるといった試みが続いています。


過去のプロジェクトを参考に作成されたSparkle Designの「Showcase」は、AIの学習材料としての役割も

取材・文：原明日香（アルテバレーノ）
※本記事は「Web Desigining 2025年8月号」より抜粋しています。