AIツールでアイデアからプロダクトへ至る4つの新しい方法

プロダクトチームは、AI時代における新しい働き方へと急速に適応しています。彼らは早い段階でプロトタイプを作成し、デザインの前にコードで検証し、これまでにない規模で探索を行い、ハンドオフの過程で失われていたデザインシステムのコンテキストを保持したままリリースしています。私たちは、FloQast、Merkle、Affirm、Accorのプロダクトビルダーに話を聞き、これが実際の現場でどのように起きているのかを探りました。

あなたのチームに合ったワークフローを見つける方法、そしてスピードと意図をどのようにバランスさせるかについて。

1. コードで制約をテストする

複雑な制約の中でアイデアを検証すること、たとえばあるアクションが次のステップをトリガーするマルチステップフローや、背後のデータによって挙動が変わるインターフェースのようなものは、かつては多くの開発リソースを必要としていました。しかし現在では、AIコーディングツールによって、プロダクトチームのより多くのメンバーが、方向性を決定する前に、こうしたインタラクションを素早く構築・検証できるようになっています。これにより、新しいワークフローが生まれました。プロダクトビルダーは、コードで動作するプロトタイプを作成した後、Codex to Figmaを使ってそれをFigmaのキャンバスに移し、全体像を確認しながら共同でブラッシュアップすることができます。そこからさらにコード側で作業を続ける必要がある場合は、MCPを通じてデザインコンテキストを保持したまま再びコード環境へ戻すことができます。

FloQastがコードで複雑なワークフローをテストした方法

FloQastは、経理チームが現実の複雑さに対応できるよう支援するソフトウェアを提供しています。ほかのタスクが完了するまで先に進められないタスクや、決済サービスと銀行口座など異なる場所にある記録を一致させる必要がある業務、さらに、ほかのすべてのレビューが完了するまで保留となるサインオフなどを扱います。

課題

最近、チームは標準的なワークフローの1つを再考する必要がありました。それは、ユーザーが単一の差異を見つけるために複数のページを行き来しなければならないものでした。たとえば、会計士が口座の問題を見つけた場合、問題を確認するために1つのページに移動し、調査するために別のページに移動し、解決のために最初のページに戻ってくる必要があるかもしれません。チームは、すべてのタスクを1ページに統合し、ユーザーが画面を離れることなくタスクを確認し、ブロックされているものを追跡し、すべてに対処できるようにしたいと考えました。

初期のプロトタイプには可能性が見えていましたが、そのページには互いに関連するステップが数多くあり、それぞれが実際のデータやロジックに依存していたため、モックアップだけではチームは十分に評価できませんでした。

アンロック

FloQastのUXマネージャーであるBenjamin Ellisは、AIコーディングツールを使い、実際の顧客のワークフローをもとにしたリアルなデータとシミュレートされたバックエンドを備えた動作するプロトタイプを構築しました。コードを基盤としたプロトタイプにより、チームは、あるステップを完了すると次のステップが開始される実際のシナリオを操作しながら、ページ全体が実際にうまく機能するかどうかを確認できました。彼らはすぐに、見た目には正しく見えるものの実際には破綻してしまうフローを見つけました。それは、実際のデータやロジックを扱って初めて明らかになるような問題です。

影響

Benjaminのチームとデザイナーが方向性を決定する頃には、すでにそれをコード上で実際のシナリオに対して検証し、デザインファイルだけでは見えてこなかったようなインタラクションの問題を発見していました。その結果、後になってからの想定外が減り、構築しているものに対する確信が高まりました。

次のような場合に試してください:

• モックアップでは評価できない条件(ユーザー権限や、あるアクションが次のステップに影響するようなマルチステップフローなど)によってUIの挙動が変わる場合
• 小さな修正が必要で、デザインに戻してやり取りするよりもコード上で直接変更した方が早い場合
• デザイナーと開発者が複雑な体験のスコープを一緒に定義する必要があり、動くものがあることでその会話がしやすくなる場合

2. キャンバス上でAIと探索する

チームはこれまでもキャンバス上で探索を行ってきましたが、AIによってその探索の幅は大きく変わりました。FigmaのAIエージェントを使うことで、デザイナーはファイルを離れることなく、レイアウトのバリエーション生成、リアルなコンテンツの作成、作業のギャップの指摘などを行うことができ、しかもそれらはすべてデザインシステムに基づいています。チームがある方向性を前に進める準備ができたら、Figma Makeを使ってそれをインタラクティブなプロトタイプに変換し、さらにMCPを用いてデザインコンテキストをコードへ引き継ぎ、プロダクションへとつなげることができます。

Merkleが深掘りする前に広く検討した方法

MerkleのUXアソシエイトクリエイティブディレクターであるEaston Thomasは、通信業界のクライアントが自社ウェブサイト上で製品をどのように整理・表示するかを見直していました。これは情報アーキテクチャの課題であり、適切な答えにたどり着く前に、さまざまなアプローチを幅広く検討する必要があるものでした。

課題

その作業には広範な探索が求められました。Eastonは、方向性に確信を持てるようになる前に、多くの異なるレイアウトやコンテンツのアプローチを試す必要がありました。しかし、既存サイトにはコンテンツが限られていたため、実際の製品がページに入ったときにそれらが成立するかどうかを簡単に評価することができませんでした。

アンロック

Eastonはまずキャンバス上で、異なるアプローチを探るために7つのラフなレイアウト案を設計しました。その後、FigmaのAIエージェントに対して、そのうちの1つのレイアウトから10個のバリエーションを生成するよう依頼し、さらに10個、というように繰り返し、最終的に約50案を生成しました。その時点でエージェントが生成できる組み合わせは出尽くしており、Eastonはそこから最も優れたアイデアを抽出し、デザインを継続していきました。

方向性が定まった後も、彼はFigmaのエージェントを使ってディテールの調整を続けました。彼はそれを次のように活用しました:

• ステークホルダーにとって抽象的に感じられないよう、現実的なプレースホルダーコピーを生成する
• アノテーションカードに、開発者向けの仕様注釈を直接書き出す
• 完成した成果物をレビューし、見落としていた可能性のあるギャップ(スクリーンリーダーのアクセシビリティに関する観点など)を指摘する

その後、Figma Makeに移り、実際のインタラクションを備えた検索ページのプロトタイプを作成しました。フィルターメニューなどの各状態をすべて生成し、ページが実際にどのように動作するかを確認できるようにしました。そして、それらの画面をキャンバスに戻し、開発者へのハンドオフに使用しました。

影響

本番作業としては数日かかっていたはずのものが、数時間に圧縮されました。しかし本当の価値は、FigmaのAIエージェントによって可能になった探索の深さにありました。7つのレイアウトのうち1つを選んでそれが正しいことを期待するのではなく、Eastonは意思決定をする前に、50通りのバリエーションすべてを使い切ることができました。その結果、作業が開発者に渡る頃には、これまでよりも多くの探索を重ね、通常であれば見落としていたかもしれないギャップも発見できており、より高い確信を持って方向性を決めることができました。

次のような場合に試してください:

• 新しい機能領域を構築しており、コミットする前に多くの方向性を探索する必要がある場合
• 複雑なフローにおいて、複数の状態やエッジケースを迅速に生成・検証する必要がある場合
• 開発者に引き継ぐ前に、デザインシステムに基づいて詳細なインタラクションを仕様化したい場合

3. プロトタイプから始める

Figma Makeのようなツールを使うことで、チームは誰も要件を書いていない段階でも、数時間で動作するプロトタイプを構築できるようになります。仕様書から始めてステークホルダーにビジョンを想像してもらうのではなく、まず実際に動くものを作り、それによって次に何を作るべきかを形作っていきます。そこから、そのプロトタイプをキャンバス上でさらにブラッシュアップしたり、プレゼンテーションに移してステークホルダーのレビューを受けたり、MCP経由でコードへとつなげたりすることができます。

AccorがFigma Makeを活用し、新しいビジョンへの確信をどう築いたか

Accorは、数十のホテルブランドを展開するグローバルなホスピタリティグループです。最近では、同社のデザインチームが、AIによってラグジュアリーブランドのひとつにおけるウェブ体験をどのように向上できるかを探っていました。

課題

課題は、そのAI体験が実際にどのような形であるべきかを明確にすることでした。単純にサイト上にチャットボットを配置するといった一般的なアプローチでは、ブランドのアイデンティティを反映できず、ゲスト層の期待にも応えられませんでした。AccorのリードブランドデザイナーであるJustine Graveは、そのブランドを特徴づける感情的なトーンや個性を表現できるものを作る必要がありました。

キーの瞬間

JustineはFigma Makeを開き、手作業では時間的に実現できなかったプロトタイプを作成しました。それは、ユーザーの入力内容に応じてページ自体が再構成されるウェブページです。例えば「ゴルフ」と検索すると、ページはゴルフコースのある施設、厳選されたアクティビティ、関連する体験を中心に再構成されます。Makeはマイクロインタラクションやトランジションの処理を担い、Figma MCPサーバーはそれらすべてをブランドのデザインシステムと一貫した状態に保っていました。数日以内に、彼女はリーダーシップに「何が可能か」を示せるほど野心的でありながら、「次に何を作るべきか」を具体的に議論できるレベルの動作するプロトタイプを作り上げました。

影響

Justineとそのチームは現在、そのプロトタイプをブランドやマーケティングのステークホルダーに共有し、スライドデッキではなく、実際に反応し議論の軸となる“具体的なもの”を提供しています。

次のような場合に試してください:

• まだ存在していないビジョンについて、ステークホルダーの認識を揃える必要がある場合
• そのアイデアは複雑すぎて、ドキュメントやスライドデッキだけでは十分に伝えられない場合
• デザインやエンジニアリングに時間を投資する前に、そのアイデアに実現性があるかどうかを検証したい場合

4. デザインシステムをさらに強化する

デザインからコードへ移行する際には、実装が汎用的なパターンではなく、実際のデザインシステムから参照されていることが重要です。これは以前は手作業のプロセスであり、開発者が仕様書を参照しながらコンポーネントを一から再構築していました。しかし現在では、MCPを使うことで、実際のコンポーネント、トークン、レイアウト構造をそのままコーディング環境に渡すことができ、AIコーディングツールが最初からリアルなシステムをもとに生成できるようになっています。

Affirmがキャンバスからコードまでデザインコンテキストをどのように維持したか

Affirmは、購入時に顧客が支払いを分割できる決済プランを提供する金融プロダクトを開発しています。チェックアウト体験は、デスクトップ、モバイルウェブ、Android、iOSにまたがって存在しており、それらの体験を一貫させ続けることは継続的な課題となっています。

課題

チームは、顧客が最適な選択肢をより早く見つけられるように、支払いプランにバッジを追加したいと考えていました。たとえば、どのプランが0%金利なのか、あるいはどのプランが最も早く完済されるのかを示すといったものです。しかし、検討すべき組み合わせは非常に多く存在しました。どの顧客にどのバッジを表示するのか、どのチェックアウトで表示するのか、どのデバイスで表示するのかといった点です。すべてのバリエーションは、あらゆる画面においてデザインシステムに準拠している必要があり、さらに単純な変更であっても、アイデアから本番環境に反映されるまでに約6週間かかっていました。

アンロック

PMはFigma Makeでバッジのバリエーションをプロトタイプ化し、通常6週間かかるところを2日でアイデアから動くプロトタイプまで到達させました。デザイナーはキャンバス上で最も有望な方向性をブラッシュアップし、チームがそれをプロダクションへ移行する段階になると、そのデザインアーティファクトをFigma MCPサーバーに読み込み、Cursorと接続しました。MCPはコンポーネント、トークン、レイアウト構造をそのままコーディング環境に渡し、そこでAIエージェントがフロントエンドの実装を生成しました。開発者はそれを出発点として利用し、デザインをゼロから解釈し直すのではなく、すでにデザインが反映された状態からプロダクションコードの構築を進めました。

影響

プロトタイピングだけでも、6週間から数日へと短縮されました。しかしより重要なのは、MCPがプロセス全体を通じてデザインコンテキストを引き継いだことで、開発者がデザインを解釈し直したり、コンポーネントを一から再構築したりする必要がなくなった点です。その結果、リリースされたものは、デザイナーが意図したものと一致するようになりました。

次のような場合に試してください:

• デザインをプロダクションに移行し、その実装をデザインシステムに忠実なものにしたい場合
• 複数の画面やプラットフォームにわたって、同じデザインを一貫して保つ必要がある場合
• デザインシステムチームが変更を展開し、その更新内容が各エンジニアのコーディング環境に自動的に反映され、新しいコードが最初から最新のシステムを反映するようにしたい場合

現在優れたプロダクトをリリースしているチームは、特定のツールや固定された手順に縛られているわけではありません。彼らは、解くべき問いに応じて開始点を選び、作業の進行に合わせて異なるレイヤーや領域を行き来しています。AI時代においてプロダクトを形づくる新しいワークフローについて詳しく見る。