
デザイン×コードとAI─デザイナーの役割はどこまで広がるのか?
プロダクト開発、デザイン×コードを取り巻く環境は、ここ数年…いや、この半年でも劇的に変化しています。
月並みかもしれませんが、これは単なる一技術トレンドではなく、エンジニアはもちろん、プロダクトデザイナーという職業の本質や可能性を根本から問い直す変革だと考えています。アイデアを形にする手段が増えることで、私たちの創造性はどこまで広がるのでしょうか。
今回はつい最近(2025年2月25日)に登場した新モデル、「Claude Sonnet 3.7」に感動したので、やや性急ですが一部断片的に考えていた思考をつなぎ、プロダクトデザイナーとして、現状のAIとプログラミングへの所感を伝える記事となります。
AIプログラミングツールの現在地
現在、デザイナーをはじめとした、エンジニア以外も活用できるAIプログラミング支援ツールは加速度的に進化しています。GitHub Copilotの登場から始まったこの流れは、今やCursor、Windsurf、ClineのようなAIエージェントを最大に活用したエディタ(拡張機能)へと発展し、コードの理解や生成をサポートしています。

また、次世代のデザイナー向け、ノーコードエディタとしてOnlookなども登場し、発展途上ですが、コードのわからないデザイナーでも直感的に実装できる環境※なども次々に登場しています。
※冷静な意見も添えておくと、このアプローチは度々現れて消えることが多いので、Onlookが今後うまく行くかの解像度はまだ高くありません。

最近登場しているツールの共通点として、AIエージェントによって、「コードを書く」という作業を、「コードで実現したいことを説明する」という対話的なプロセスに変えつつあります。
私たちは、プログラミング言語そのものよりも、ドキュメントとコンテキストを的確に与え、実現したい世界や体験、インタラクションを的確に伝えて実現する力を手に入れつつあります。
デザイナーのスキルセットの再定義
「AI駆動による開発」手法の進化が進む中で、デザイナーに求められるスキルセットも変わりつつある、と考えています。
従来の視覚的なUIデザインスキルに加え、「AIに対して適切な指示を出す能力」が重要になってきています。
これは単なる「プロンプトエンジニアリング」というテクニカルスキルではなく、デザイン意図を正確に言語化し、AIとの協働プロセスをデザインする能力と言えるでしょう。
他方、コードの細部を理解する必要性は引き続き重要ですが、おおまかなプロセスを設計する上では減少する一方で、技術的な概念や可能性の範囲を把握する重要性は高まっています。「何ができるか」を知ることで、デザインの可能性は大きく広がります。
プロトタイピングの新時代
AIプログラミングツールの最も直接的な恩恵は、プロトタイピングプロセスの変革でしょう。従来のデザインツールでモックアップを作成し、それをエンジニアに渡して実装を待つという流れから、デザイナー自身がAIの力を借りて機能するプロトタイプを作成できるようになりつつあります。
例として、ユーザーテスト用に精度の高いインタラクティブプロトタイプを急ぎで用意する場合、AIエディタに「このFigmaデザインをReactコンポーネントに変換し、ここにインタラクションを加えたい」と指示するだけで、実用的なプロトタイプがすぐに生成できる時代です。
これによりデザイン検証サイクルが短縮され、より多くの仮説をスピーディーに検証できるようになります。
私のX上でも、AIツールによるプロトタイピングのサンプルを上げていますが、以前のモデルよりも高精度なプロトタイプが、簡単に作れるようになっています。
Claude 3.7 Sonnet(Cursor)、shotでPhotoShopのような画像エディタを作ってとプロンプト渡して、数分処理させたら基本的な処理をばっちり対応させたアプリケーションを作ってきた🖼️
— こぎそ (@kgsi) February 26, 2025
3.5以前だと一発でここまで上げてこなかったので、触れ込み通りエージェントに最適化された感じがする、すごい pic.twitter.com/b37xvA31TV
昨年からboltやv0など、生成AIを駆使してUIを迅速に構築できるサービスも登場していました。これは画面設計のフローを抜本的に変革するエポックメイキングな出来事でしたが、今回新たに発表されたAIエージェント向けに特化したモデル「Claude sonnet 3.7」などの出現によって、いっそう進化した未来が見え始めています。
極端な事例ですが、今後Figmaなどのデザインツールさえ介さずに画面デザインを完結させる可能性もあります。実際、以下の投稿ではFigmaをフルスタックな生成ツールである「Replit」に置き換えた事例が話題になっています。
I talked to the CEO of a moderately big tech co who said they'd replaced Figma with Replit. This surprised me because I don't even think of them as being in the same business. But he said Replit is so good at generating apps that they just to straight to prototype now.
— Paul Graham (@paulg) January 18, 2025
こうしたAIの普及に伴い、デザイナーとしての価値は、ユーザー体験の質や検証のスピード面でますます評価されるようになるでしょう。実装スピードが加速すれば、ユーザーに触れてもらう機会も飛躍的に増え、アイデアの検証や改善のサイクルが高速化することが期待されます。一方で、ハイスピードな環境に追従するための負荷が高まるのも事実です。
高速道路の制限速度が80kmからいきなり160kmになるように、開発スピードが格段に上がる分、取り残されないように全力で学び、追従する必要があります。そして、そのためには生成AIを効率よく使いこなすスキルが欠かせません。
チームダイナミクスの変容
AIプログラミングは、デザイナーとエンジニアの役割境界にもおそらく大きな変化をもたらしますが、これは「デザイナーがエンジニアを不要にする」という単純な図式ではありません。
デザイナーがプロトタイプを自ら実装できるようになることで、エンジニアとの会話はより高次のレベル、アーキテクチャの選択やパフォーマンス最適化、拡張性など—に移行します。理想的には「これは技術的に可能か」という基本的な議論から解放され、「これをどうすればより良く実装できるか」という建設的な対話が増える世界も想像できます。
また、AIという「第三の視点」が加わることで、デザイナーとエンジニアの共通言語も豊かになります。AIが生成したコードを共に検討することで、互いの専門性をリスペクトしながらも、より深い理解を築けるようになるかもしれません。
デザイナーの新たな可能性
デザイナーの役割、社会からの期待値は、今よりさらに、単なる「見た目を整える人」から「体験全体を設計する人」へとさらに拡張していくでしょう。
デザイナーとして求められるのは、AIを活用して自分のビジョンを実現する能力、そして複雑化するツール環境の中で最適な選択をする判断力も重要視されます。
Cursor、Windsurf、Replitなどはじめとした設計ツールへの理解、FireflyやFigjamなど、視覚的演出やコミュニケーションとして使うAIにも言及したり、プロダクトやプロジェクトの性質に合わせて使い分けられるようになることも重要になります。
実例として、少しジャンルは異なりますが、Fireflyを駆使したウェブサイト案の出力などの取り組みも続々と始まっています。
AIが担える部分が増えることで、デザイナーはより人間中心の課題、文化的コンテキストの理解や倫理的配慮、感情的共鳴などにも、視点をフォーカスする必要があります。
おわりに
やや感情的に書き殴っている点もありますが、それだけ自分は昨今の進化に感動し、それと同時にこのスピードについていけるのか、少しの危機感も持っています。
大切なのは、AIを「魔法の杖」捉えるのではなく、「共同制作者」として捉え、積極的に触れることです。
AIの技術的特性を理解し、AIの提案を鵜呑みにするのではなく、常に批判的思考を持ち、人間としての判断を大切にする姿勢が求められます。
技術が進化する中でも変わらない価値—ユーザーへの深い理解や共感、美的感覚、倫理的判断—を磨き続けることも重要です。AIツールは私たちの能力を拡張してくれますが、それらを意味のある方向に導くのは、依然として私たち人間の役割のはずです。
プロダクトデザイナーとしての本質を見失わないバランス感覚を持ち続けることがより求められます。
ぜひこの波をうまく乗りこなしつつ、新しい時代に備えましょう。
AIとデザインについてもっと知りたい方
デザイナーによるAIの活用方法について、課題感や、デザインチームとしてどう取り組めばいいか、悩んでいる方はお気軽にXのDMまでご相談ください。実際の導入、開発事例なども交えて壁打ちも可能です。
また、個人として、継続的なサポートをご希望の方は、MENTAでのデザイナー向けメンタープランをご検討ください。壁打ちしながら使い方をレクチャーしたり相談やレビューなども可能です。