※この記事は、2025年7月に開催されたイベントでの発表内容をレポートしたものです。
登壇者はこの方
古川陽介
株式会社ニジボックス
デベロップメント室室長
JSConf.jp 開催主催者
2019年よりニジボックスに参画、株式会社リクルートではグループマネージャ、Japan Node.js Association では代表理事を務める。 JSConf.jp 開催主催者。
古川：私の発表では、「デザインシステムが必須の時代に」というテーマでお話しします。
いきなりですが、私はそもそもデザインシステムがそこまで好きではありませんでした。
その理由は、デザインシステムの謳い文句にあります。
デザインシステムの謳い文句
- デザインシステムとは、デザインの一貫性を確保し、効率的なデザインプロセスを促進するために、ガイドラインやアセットなどを連携させた仕組みです
- デザイナーやエンジニア、ディレクターといった異なる職種、プロジェクトのメンバー同士で相互認識を持つことができます
- 一貫性のあるデザインを素早く提供できるようになることでより本質的な問題解決に時間を使うことができるようになります
（つくって、みなおす、デザインシステム from NijiBOX から引用）
上記について、原理としては理解できます。
しかし、一方で、「それに対して支払っている対価が大きくない？」
「要は費用対効果が測りにくくない？」
と思っていました。
デザインシステムの微妙だと思っていたところ
- 運用コストがかかる
- 柔軟性がない
- カタログにあるコンポーネントが少し足りない時にカタログ側に機能を足さないといけないが、カタログを運用しているチームとプロダクト開発しているチームが違ったりして面倒
- 特殊な要件で、結局使えなかったりして、再実装してしまう
- 時代遅れになるリスク
- デザインのトレンドは変わることがあるが、追従するのが面倒である
また、作ったデザインシステムをその後きちんと運用しないと形骸化したデザインシステムになります。形骸化してしまったデザインシステムは百害あって一利なしだと思っています。そして形骸化したデザインシステムを今までたくさん見てきました。
そのような理由から、デザインシステムがあまり好きではありませんでした。
しかし、今は大分見方が変わりました。
現在の評価は「デザインシステムは必須の時代」だと思っています。
なぜ、考えが180度変わったのか話したいと思います。
運用コスト軽減
運用コストはかなり軽減したと思っています。
そもそも、デザインシステムの運用コストは以下の通りです。
- コンポーネントカタログを管理する負担
- ドキュメントの更新負担
- デザインの更新負担
- 使ってもらうための啓蒙活動
しかし、今ではツールの進化で、上記のコストは大分下がっていると感じます。
また、以下のような方法論も確立しているため、運用コストを軽減しています。
- Storybookがカタログ化を提供
- Visual Regression Testing でコンポーネント自身の差分が確認できる
- それらをCIに入れてコミットのタイミングで回す
ちなみに、上記のような方法論ですら、もう古い印象があり、最近はAIツールだと思います。AIツールの進化で、ルーチンワークはもはや作業工数として極小化されてきています。そのため、
- 見た目のテストをするコスト
- ライブラリの更新コスト
- これらのコストはもはや「そういう作業の指示をAIにするコスト」というだけで極限に小さくなっています
ルーチンワークはもはや作業工数として極小化されてきています。
そのため、
- 見た目のテストをするコスト
- ライブラリの更新コスト
- これらのコストはもはや「そういう作業の指示をAIにするコスト」というだけで極限に小さくなっています。
さらに作成するコストも小さくなっていると思います。
- 新しいコンポーネントが欲しくなったら、そう指示すればいい
- 小さなコンポーネントの修正であれば、ほとんど即座に作れてしまう
- 既存にデザインシステムがあるならデザインガイドラインがあるはずでそのガイドラインに合わせた追加も可能になる
事例
GitHub Design System Chiefの方曰く「AIでデザインシステムの新しいレイアウトやコンポーネントの一貫性のあるデザインが作れるようになっていて、作業が効率化されている」と言っており、すでにAIでデザインシステムが作られるようになっています。
Airbnb「AIをデザインプロセスの一環として導入している。その際にデザインシステムのコンポーネントを機械学習させた上でAl駆動でプロトタイプ制作を行っている」
- これらはコンポーネントカタログの運用コストだけじゃなく、ドキュメントの運用コスト、デザインの運用コストも下がるのに繋がっています。
- 最後に残っているのは「啓蒙活動のためのコスト」
- デザインシステムの品質が良くなれば啓蒙活動そのものが不要になると思っています。
AIツールとの親和性
- デザインシステムのように、デザインに関わるリソース（デザインツールの出力結果やドキュメント、コンポーネントカタログ）が明文化されていることでそれがAIにとってのコンテキストの一つになる。
- Figmaなどのデザインツール、Notionなどのドキュメントツール、Storybookなどのコンポーネントカタログの内容をMCPを使って入力プロンプトにヒントとして加えることができる。
- AIへの出力の品質を向上させることができるので、啓蒙活動がなくてもMCPを経由してAIが勝手に学んでくれる。必要なのはMCPでAIエージェントがデザインシステムのリソースにアクセスする方法だけあれば良い。
事例紹介
（Ubieの事例：Devin と MCP x Design Systemでコードが民主化された）
今後のデザインシステム
- 導入・運用のコストがAIによって下がる。
- 導入した際にAIへのヒントとしての効果が上がる。
- 費用対効果は確実に上がっている。
- もはや「ない」ことがリスクになり得る。CI/CDのツールや自動テスト、型システムなどと同様に導入しないことがリスクになっていくと思います。
- 一方でAIは万能ではありません。指示されたことはできるが、指示されていないことはやらない。
- デザインシステムの構築に対してアドホックにコンポーネントやページやドキュメントなどを指示して作ってもらった結果、チグハグなデザインを作っているのであれば意味がない。
- デザインシステムそのものの主体はあくまでプロダクトを開発する組織なので、AIになんでもやってもらうのではなく、自分たちの意思を持ってAIをツールとして使うのが正しい姿勢だと思います。
私の発表は以上です。
▼▼ ぜひ他登壇者の発表レポートもご覧ください
