AI時代の開発生産性を支えるデザインシステムを構築

世の中がChatGPTなどの生成AIでにぎわうなか、開発サイドではAIを実装に取り入れ始めていました。今後、AIによってエンジニアの開発スピードが上がると、「デザイン待ち」が起きるのではないかという話が上司からあり、デザインへのAI活用を調査するなかで繰り返し出てきたキーワードが「デザインシステム」だったんです。改めて足元を見ると、コンポーネントの使い方が人によってバラバラ。そもそもFigmaのデザインデータと実装に差異があって、どちらを「正」とすべきか、日々悩むシーンが多かったんです。

同じKANNAのなかでも、機能ごとに微妙にデザインのズレがあって、「どっちが正しいものですか？」というやり取りが発生していました。デザインの正解がないゆえのコミュニケーションコストです。ボタンの大きさや色、余白まで微妙に違うと、コード側も個別最適化されて余計なコンポーネントが増えていく。プロダクトが成長するほど複雑化するので、開発のスピードを落とさない形で統一・整理できないかと考えていました。

AIに何かを作らせるにはルールがないと使い物にならず、そのルールを突き詰めていくと、デザインシステムに行き着きました。

たとえば Figma Variables を使わないと、カラーコードがハードコードされてしまう。またそれとは別に、デザイン側でパーツごとにコンポーネント化ができていないと、コード側でAIが「車輪の再発明」のように重複したコンポーネントを生成してしまうことがある。デザイン側でトークン化・コンポーネント化されていることが、生成AIに適切に仕事をさせる前提だと考えました。

最初は外部に相談できるものだと思っておらず、デザインシステムの基礎であるデザイントークンだけをチーム内で進めようとしていました。ただ、当時のCTOから「デザインシステムはプロダクトの土台で必須である。かつ、作るなら一気に作るべきだ」という話があり、外部の力を借りる方針になりました。

社内にデザインシステムを作った経験者がおらず、ゼロから自分たちだけで作るのは「これが本当にベストプラクティスなのか」という不安がある。ナレッジを持つパートナーと組めば、王道かつ現実的なものを作れるというのが大きな理由です。

アイスリーデザインさんにお願いした決め手は、メールのやり取り一つを取っても、向き合ってくれている感じがあったこと。細かいスケジューリングまで提案資料からイメージできましたし、こちらの意向に沿ったリカバリープランもすぐ出てきて、信頼できると感じました。

エンジニアから見ると、一番バランスが取れていました。デザインは強くてもエンジニアが在籍していない会社だと、技術面のサポートが受けられない。アイスリーデザインさんはデザイナーもエンジニアもいて、両面で支援していただける。そこが大きかったです。

デザインと技術の両面を評価いただけたことは、私たちとしても非常にうれしく思っています。プロジェクトでは、デザイナーとエンジニアが参加するQ&Aの場を設け、デザインシステムとしての考え方だけでなく、実装時に生じる疑問や技術的な実現性についても、一つひとつ確認しながら進めました。デザインと実装を分けて考えるのではなく、双方の視点をつなぎ、アルダグラムの皆さまが納得感を持って判断できるよう支援することを大切にしていました。

作業は大変でしたが、「この順番でこれをやればいい」という計画があるので不安はあまりありませんでした。

全部やっていただくと中身が分からないまま使うことになるし、逆にゼロから自分たちだけで進めると迷いも無駄も多い。そのちょうど真ん中で、布石を置いてもらい、議論に集中できました。

腹落ちした状態で成果物にたどり着けましたし、自分たちで作ったことで「自分ごと」になり、運用への移行もスムーズでした。最終的なメリットは大きかったと思っています。

アイスリーデザインとしてもこのやり方は初めてで、どこまでお伝えすべきか迷いはありました。お渡ししたのはデザインシステムそのものではなく、「作る枠組み」。いわば「ここを埋めていけば基本的なことは決められる」という要件定義書のテンプレートです。
やろうと思うと膨大になってしまうので、「まずはこのあたりから」というベースを示し、中身の議論はすべて皆さんにやっていただきました。考えるべきところが明確なので、今何をすればよいのか分からない、という状態は避けられたのではないかと思っています。

いざ見ていくと、実装されているデザインごとの「揺れ」がすごく多くて、並べて一つの答えを出すのが大変でした。デザイナー間でも状況に応じた用途の認識が意外と違っていて、話し始めると時間がどんどん消えていく。

コンポーネント自体の話と使い方の話が混在しがちだったのを、「使い方はデザインガイドラインで定義しよう」とアイスリーデザインの今野さんが都度切り分けてくださってからは、頭の整理ができるようになりました。

マイルストーンはもちろん、「デザインシステムとしてはこうあるべき」という客観的な意見を定例ミーティングのたびにいただけたのは、すごく安心感がありました。

プロジェクトが進むにつれて時間が足りなくなっていった時に、合間に「分科会」を提案して開いてもらえたのがありがたかったですね。
スケジュールが遅れたときは「いま、結構遅れていますよ」と鋭く指摘しつつ、リカバリープランをすぐ出してくださる。それから、こちらの質問に対してめちゃくちゃ調べてくださる。回答がいつもボリューミーでした（笑）。

今回のプロジェクトでは、私自身は手を動かして成果物を出す立場ではないので、デザイナーとして知識の面で貢献したくて。コンポーネントやFigmaの使い方について、「このパターンならこういうメリットがあります」と、自分の経験も交えてなるべく細かくお伝えするよう心がけていました。

ワークショップ形式でやったのですが、デザイナー・エンジニアだけでなく、PdMやプロダクトオーナー、エンジニアマネージャーなど、KANNA全体を把握する役割の人たちにも入ってもらい、まず目線合わせができたのが良かったです。
そのうえで、普段思っていたことが整理されて重要なポイントに集約された、という感覚でした。これまで「思っていたこと」を見える化し、これからのKANNAを考えていく代表メンバーとすり合わせられた。デザイナーの中だけでなく、プロジェクト全体で意思疎通ができたのが良かったと思います。

私がデザインチームのリソースを見ているのですが、当初は「デザインシステムに関する業務は全体の稼働の20％で進めよう」という企画でした。実際にやってみると、スケジュールからどんどん遅れていく。途中からデザインシステム以外の業務をセーブして、一気に進めました。分量を減らすより、「一気に投入できる状態」をつくることが必要だったなと。

コンポーネントの作り込みに想定以上に時間がかかりましたね。しかも作ったら完成、ではなく、「節目」でしかない。実際の開発で使ってみないと直すべき箇所が分からない、継続的に更新していくものなんだと分かりました。

デザインシステムは組織に根付かないと形骸化してしまいます。多くの企業様での取り組みを見てきましたが、実際の現場で使いやすいよう絶えずアップデートしていくこと、そして社内へ浸透させるための働きかけを積極的に行うことがとても重要だと考えています。

使い始めるのは来月からなので、大きな変化が表れるのはこれから、というのが正直なところですが…これまでは「本当にこれでいいのかな」と思いながらコンポーネントを作っていたのが、土台ができて、自信を持って迷いなく画面を組んでいける。その「迷っていた時間」をAI生成の検証や効率化に使えそうで、楽しみです。例えば、使う色の候補が絞られたので、かなり選びやすくなりました。

お恥ずかしい話ですが、類似のコンポーネントが乱立しており、生成AIでコーディングが加速するほどこの状態がさらに悪化するという危機感がありました。今回のプロジェクトで整理の土台ができつつあり、これを軸に共通化を進めていけば、生産性をさらに上げていけるフェーズに入れると考えています。

まさにいま検証しているのが、AIエージェントを使ってFigma Variablesを半自動でコードに落とし込む仕組みです。Variablesのエクスポート機能で出力したJSONはAIも読み取りやすく、デザインの差分をすぐコードに反映できる仕組みが整いつつあります。こうした定義がないと、毎回ゼロから「コンポーネントを使うべきか、新規に作るべきか」の判断材料をAIに渡さないといけない。デザインシステムは、デザイナーと開発だけでなく、開発とAIエージェントとのコミュニケーションも円滑にしてくれるものだと感じています。

まずはKANNAのWebを中心に、ちゃんと運用できる形を今後3か月で作りたい。その後、アプリ側をどうしていくかも検討したいです。チームとしては、デザインシステムをもとにAIを使ってたたき台となる初期のモックアップを生成し、それがユーザーにとっての使いやすさや、ブランドに合っているかを私たちが評価する、という状態を目指したいと思っています。

コーディングが速くなった一方で、ボトルネックが企画やデザインの段階に移ってきています。いまは開発側が先にプロトタイプを作り、デザイナーとすり合わせながら進める並行プロセスをトライアル中です。そこで、今回作ったデザインガイドラインを「KANNAらしいデザインとは何か」を示すコンテキストとしてAIに読み込ませることで、クオリティの高いデザインを作れるのではないかと考えています。今回のデザインシステムを軸に、開発のやり方そのものを模索していくことになりそうです。

いまはベースを作っていただいた段階なので、今後もコンポーネントを増やしたり、改善したりする作業が続いていくと思います。そして、やはりAIがキーワードになってくるはずです。Figmaなどのデザインツールを使用せずに、生成AIツールを使用して、コードベースでデザインをするようになっている流れも出てくると思われるので、そこに合わせてデザインシステム自体をアップデートしていけば、業界的にも新しい取り組みになるかもしれません。

今回作ったデザインシステムの本格的な運用が始まった後、どのように開発の現場が変わっていくのか楽しみです。
ブランドとしての一貫性を保ったまま、開発の効率をいかに上げられるか、という点に期待しています。
デザインシステムを土台として、AIと人間が適切な役割分担をすることで、KANNAを世界中のユーザーに選ばれるプロダクトに育てていきたいですね。