「AIコーディングツールを使ってデザイナーが直接プロトタイプを動かし、デザインから要件定義まで完結させる働き方が主流になる」という主張が最近デザイナーの中でも話題になっており、私も非常に強く共感しています。
今回はAI時代におけるデザイナーとエンジニアの新しい共創の形について考えてみたいと思います。
Figmaの限界と「翻訳コスト」のジレンマ
Figmaは間違いなく素晴らしいデザインツールですが、「Figma上でどれだけ緻密に作り込んでも、最終的な実装に反映されなければ意味がない」という悔しい現実に直面することは少なくありません。
デザインツールから実際のコードへの「翻訳」には、必ず情報の欠落が生じます。
Figmaに細かくコメントを残しても、様々な制約からエンジニアが実装しきれないことがあります。
こうした擦り合わせにはデザイナーとエンジニア双方の強い信頼関係と時間が必要不可欠であり、それらが不足しているとデザインの意図が一気に破綻してしまうケースもあります。
また、私のチーム以外の環境を見渡しても、技術スタックがバラバラであるがゆえにUIコンポーネントのデザインライブラリ統一が難しく、「Figma上のデザイン」と「実際のコード」がどんどん乖離していくという課題をよく耳にします。
新しいデザインをFigmaで作っても実装とズレていて、どこを正とすれば良いかわからない。実装されたものを見てからFigmaに戻って修正し、またエンジニアが実装し直すという反復作業は、エンジニアにとっても大きな負担になっています。
「インブラウザデザイン」とAIツールの親和性
私自身、以前からFigmaには過度な期待をせず、最初からコードを書いて「動く成果物（プロトタイプ）」を作り、ブラウザ上でデザインを検討するインブラウザデザインのアプローチを実践してきました。
現在、私はClaude CodeやCursorといったAIツールを活用してして日常的・個人開発でも活用しています。
これらのツールでMCP（Model Context Protocol）を活用したり、ルールやスキルを調整しながら自分の思い描くアウトプットに近づけていくプロセスは非常に楽しく、私のアプローチに完璧にフィットしています。
静止画ではなく、実際のインタラクションを伴う「動くもの」でプロトタイプを作る方が、やはり昔から良いアプローチだったのだと、AIツールの進化によって改めて実感しています。
デザイナーが「リポジトリ」に飛び込む時代
誰もがAIを使って動くプロトタイプを作れる時代、デザイナーの役割はどう変わるのでしょうか。
コードベースのプロトタイピングが主流になりつつある今、最低品質を担保するためにも、デザイナー自身が「コードがある場所（リポジトリ）」に直接参加することが極めて自然な流れだと考えています。
これは「デザイナーもゴリゴリ本番のコードを書かなければいけない」という意味ではありません。
実際にコードを書かなくても、以下のような行動をとるだけでプロジェクトの生産性は劇的に向上します。
- リポジトリの中に直接ドキュメントを作成する
- これまでFigma等で作っていた「仕様策定の成果物」をリポジトリ内に格納する
こうした情報がリポジトリ内に存在することで、エンジニアがAIツールを活用して実装しやすくなるだけでなく、PdMやUXデザイナが改善案を考える際の強力な土台にもなります。
おわりに
デザイナーの思考の場所や初期の作業場所はFigmaかもしれませんが、「最終的な成果物や情報源」はリポジトリの中に集約していくこのような流れが今後の主流になると思えています。
Figmaという分離された環境に留まるのではなく、自らリポジトリの中に飛び込んでいく。
これからのAI時代において、デザイナーとエンジニアが境界線を越えて共にモノづくりをするための、これが一つの理想的な形なのだと考えており、こういった変化をプロダクトのチームからも求められている機会は増えるのではないか、そんな気がしています。