---

---

プロダクト開発の質とスピードを支える「デザインシステム」。 

本記事では、これからデザインシステムの構築を始める方はもちろん、運用の形骸化に悩む方に向けて、ニジボックスの支援事例をもとに成功のポイントを解説します。

現場のデザイナーがプロジェクトを支援する中で実感した、構築成功の「＋αのコツ」についても併せてご紹介しますので、ぜひ参考にしてみてください。

デザインシステムとは？

成功ポイントの前に、まずはデザインシステムの定義を改めて整理します。

デザインシステムとは、デザインの原則やコンポーネント、それらを活用するための運用ルールを一つにまとめた「仕組み」のことです。単なるパーツ集ではなく、一貫したUXを素早く届けるための土台になります。

なお、基本的な構成要素やメリットについては、以下の記事で詳しく解説しています。併せてご覧ください。

ニジボックスのデザインシステム支援事例

最初に、本記事で解説する知見のベースとなった、プロジェクトの概要をご紹介します。

株式会社エアークローゼット：ファッションレンタルサービス『airCloset』のデザインシステム刷新支援

本プロジェクトでは、既存のデザインシステムの見直しをお手伝いさせていただきました。

株式会社エアークローゼット様は、『airCloset』の成長に伴い、運用環境や開発体制が変化する中で、過去に策定したガイドラインと実装コードの整合性に課題を感じていらっしゃいました。私たちは「リリース数の最大化」という事業KPIを支えるべく、「エンジニアと共通言語で対話できる実効性の高いデザインシステム」への転換を目指しました。

この刷新は、UIの一貫性を高めただけでなく、新規施策のスピードの向上やメンバーのオンボーディングコスト低減など、事業成長を支える土台づくりに貢献しています。

プロジェクトの詳しい内容やお客様からいただいた声は、以下の実績紹介ページにも掲載しています。併せてご覧ください。

関連ページ：株式会社エアークローゼット｜実績｜ニジボックス

【事例から学ぶ】デザインシステム構築を成功に導く4つのポイント

ここからは、実際のプロジェクトを通じて見えた、デザインシステムの構築を成功させる具体的なポイントを解説します。解説するポイントは以下4点です。

• 現状資産の可視化により、再構築の土台を明確にする
• 改善方針の設計と合意形成で、運用の実効性を確保する
• AI活用の実証検証により、将来の運用効率化を検討する
• マスターデータの再整備と運用基盤への反映で、開発を加速させる

以下、順番に解説をしていきます。

①現状資産の可視化により、再構築の土台を明確にする

デザインシステムの刷新にあたり、まず既存のFigmaデータと実装コードを横断的に調査し、「実際に活用されている要素」と「活用が限定的な要素」を定量的に整理しました。

■ なぜ、この工程が重要なのか

既存のデザインデータや実装コードは、時間の経過とともに「使われているもの」と「残っているだけのもの」が混在してきており、現状を把握せず着手すると、実態と乖離した「理想だけのシステム」になり、形骸化の恐れがあるからです。

もし、この可視化を行わずに進めてしまうと、使用頻度の低い要素に工数を割いてしまうなど、肝心な部分がおろそかになるだけでなく、関係者間での合意形成も難しくなる恐れがあります。

これらを回避すべく、現場の実態に即して優先順位を定義したことで、根拠のある再設計ができました。

②改善方針の設計と合意形成で、運用の実効性を確保する

調査フェーズで可視化した課題をもとに、デザインシステムのあるべき構造を再定義しました。

具体的には、コンポーネントの粒度、ファイル構成、トークン設計、命名ルールなどを横断的に整理しています。ここで注意すべきは、単なるルール変更ではなく「なぜその構造にするのか」「実装とどう接続するのか」といった観点を共有することで、デザイナーとエンジニアの双方が納得できる形で合意形成を行った点です。

■ なぜ、この工程が重要なのか

デザインシステムは、エンジニアも日常的に参照・実装する共有基盤です。ルールの意図が不明確だとお互いの解釈にブレが生じ、独自ルールで実装してしまうケースが増える懸念があります。双方が納得した設計指針を明文化することで、属人化を排した「共通言語」として機能します。

背景を理解しないままにルールだけが先行してしまうと、徐々にルールを逸脱した実装が増えてゆくことになり、最終的にルール導入前と同じく混沌とした状態に戻ってしまいかねません。あらかじめ設計の意図を深く共有しておくことは、こうした形骸化を防ぐだけでなく、新たに参画するメンバーの学習コストを下げながら、チーム全体にスムーズにルールを浸透させてゆく後押しをすることにもつながります。

③AI活用の実証検証により、将来の運用効率化を検討する

本プロジェクトでは将来の運用効率化も見据え、主軸となるデザインシステム構築と並行して、AI活用による制作プロセスの自動化に向けたPoC（概念実証）を実施しました。

Figma MakeやMCP（Model Context Protocol）サーバーの活用可能性を検証し、デザインデータと実装コードの連携フローを検証。現時点での実現可能性と技術的制約を明らかにすることで、今後の導入に向けた具体的な検討材料を提供しました。

■ なぜ、この工程が重要なのか

デザインシステムの運用には、継続的に作業への負荷がかかります。ですので、構築段階から「将来どこが自動化できそうか」見据えながら進めることで、より拡張性の高い設計を実現できます。

また、構築段階からAI連携を視野に入れた検証を実施し、現実的な導入可否を整理しておくことで、将来AI活用を検討する際に発生しうる手戻りを未然に防ぎながら、運用の効率化を支える土台を築いておくことができます。

④マスターデータの再整備と運用基盤への反映で、開発を加速させる

設計したデザインシステム（Ver.2）は、実際のマスターデータへ反映させ、既存画面にもコンポーネントやトークンを段階的に適用し、運用可能な状態へと移行しました。

併せて、Figmaのブランチ機能を活用し、「設計 → レビュー → マスターマージ → 開発連携」という一連の運用フローも再設計。現場で継続的に活用されるための基盤を構築しました。

■ なぜ、この工程が重要なのか

よい設計をしても、実際のマスターデータに反映されなければ、ドキュメント上の理想で終わってしまいます。

デザインシステムを既存画面へ段階的に適用しながら、運用フローの整備を行うことで、日常の開発サイクルにスムーズに組み込んでゆくことができます。

上記の手順を実践すれば、新旧データが混在して現場に混乱を招き、更新の属人化や形骸化を引き起こしてしまう事態を未然に防げます。

特定のメンバーに依存せず、誰もがメンテナンスできる環境を整えることが、開発スピードを持続的に加速させるポイントといえます。

ニジボックスのデザイナーが語る、構築成功＋αのコツ

デザインシステムは構築するだけではなく、その後の運用も大切です。これまで数多くの現場に伴走してきた弊社のデザイナーが感じた「＋αのコツ」をご紹介します。

形骸化を防ぐには「完璧に作り込まない」

デザインシステムは「完成させるもの」ではなく、「育てていくもの」という前提でスタートすることが成功への近道です。

最初から100％の網羅性を目指すと構築期間が長期化し、リリース時にはすでにプロダクトの運用現場での実態と隔たりが生じる恐れがあります。

まずはコアとなる要素に絞って整備し、運用しながら段階的に拡充していくサイクルを回すことで、現場の実態とのズレを防ぐことができます。構築と並行して「どう更新し続けるか」の運用設計まで含めて議論しておくことが、形骸化を回避する重要なポイントです。

また、このような実運用に即した考え方は、弊社デザイナーが知見をまとめた書籍でも詳しく解説しています。

気になった方は、ぜひご覧ください。
『つくって、みなおす、デザインシステム』
株式会社ニジボックス 著
技術評論社 商品ページ

チームでの「対話と浸透」を重視する

デザインシステムの構築で最も工数がかかるのは、実はツール上の作業ではなく関係者との認識合わせです。「なぜこの構造にするのか」「実装側からはどう見えるのか」についてデザイナーとエンジニアが相互に理解するプロセスこそが、システムの実効性を左右します。

仮に、対話をすることなく一方的にルールを渡してしまうと、独自の実装や認識の齟齬を招く原因になりかねません。「一緒に作っている」という当事者意識をチーム全体で醸成することこそが、デザインシステムを形骸化させず現場に浸透させるカギとなります。

組織内で「開発を巻き込む体制」を整える

外部パートナーとして数多くのプロジェクトに伴走させていただく中で実感しているのが、クライアントの組織内における「開発を巻き込む体制」の重要性です。

綿密なデザインシステムの設計を行っても、組織に「受け取り、判断し、社内に浸透させる」体制が整っていないと、納品後に形骸化してしまう懸念があります。実際に、意思決定を担うプロジェクトオーナーの方や、現場を牽引するテックリード、リードデザイナーの方が初期から深く関わってくださるプロジェクトでは、相互の観点からの認識のすり合わせがスムーズに進み、設計から実運用に浸透するまでのスピードも格段に速くなる傾向にあります。

デザインシステム構築を検討する際には、「どのツールを使うか」「誰に発注するか」という手段の前に、まずは社内でオーナーシップを持つ体制を整えることが大切です。特にデザインとエンジニアリングの橋渡しができるキーパーソンの存在は、プロジェクトの進行スピードに直結する重要なポイントといえます。

まとめ

本稿では、デザインシステムを形骸化させず、現場で機能させ続けるための成功ポイントを解説してきました。

デザインシステムの構築は、単に形を作るだけでなく、組織に合わせたプロセスと体制を築くことが成功のカギとなります。今回ご紹介した要点を改めて振り返ります。

■事例から学ぶ4ポイント

①現状資産の可視化により、再構築の土台を明確にする
②改善方針の設計と合意形成で、運用の実効性を確保する
③AI活用の実証検証により、将来の運用効率化を検討する
④マスターデータの再整備と運用基盤への反映で、開発を加速させる

さらに、「＋αのコツ」として、「完璧に作り込まないこと」「対話と浸透を重視すること」「開発を巻き込む体制を整えること」の重要性も見えてきました。

とはいえ、組織の状況や悩みは各社さまざまです。これらを全て組織内だけで進めるのは難しいと感じることもあるかもしれません。

ニジボックスでは、デザインシステムの構築から運用伴走まで、課題に寄り添った柔軟な支援を行っています。まずは一度、お気軽にお問い合わせください。

また、今回のデザインシステムのご支援事例以外にも、リクルートグループ各社をはじめ、多数の支援実績がございます。事例をまとめた資料もぜひ併せてご活用ください。