Figma MakeなどAIプロトタイピングツール7選を比較【2026年】

3画面のオンボーディングを試作するなら、プロトタイプ専用の制作環境を求める場合はMagic Patterns、Figmaにあるデザインを出発点にする場合はFigma Make、次の担当者がGitHub上のコードを引き継ぐ場合はv0が候補です。プロジェクトに合うAIプロトタイピングツールとは、手元の情報や素材を生かしながら、観察したいタスクを参加者が実際に操作できる形にするツールです。

料金とドキュメントの確認日：2026年10月23日。 本記事では、各社が公開する制作手順を比較し、同じ条件で試せるオンボーディングの仕様を示します。レビュー時にはログイン後の生成機能を利用できなかったため、完成までの実測時間、生成したテスト成果物、実際に必要だった修正回数はありません。以下のおすすめは用途との適合性に基づくもので、実機検証による速度ランキングではありません。

Figma MakeなどAIプロトタイピングツールの比較表

まず、すでに持っている素材を確認します。承認済みのFigmaフレームを持つデザイナー、文章だけを用意した起業家、既存のコンポーネントパッケージを持つエンジニアでは、出発点が異なります。

下表の最低料金は、無料利用が出発点になる場合を除き、1人で有料プランを使い始める際のものです。金額はすべて米ドルです。Figmaの掲載料金は年払いが条件で、それ以外の有料プランは月払いの料金です。 無料プランは利用量に制限のある継続利用枠であり、期間限定の体験版ではありません。GoogleはStitchの費用について、独立した料金ページではなく製品のFAQで説明しています。

何を基準に比較したのか

役に立つプロトタイプは、開発工数を投じる前に学びを得られるものです。そこで、持ち込める素材、必要なインタラクション、既存のデザインルールを取り込む方法、次の担当者に渡せる成果物という4つの基準で候補を選びました。

デザインシステムとは、ボタン、入力欄、色、余白、振る舞いなど、プロダクトを支える再利用可能なコンポーネントとルールの集合です。スクリーンショットの見た目を再現することと、そのコンポーネントを実際に使うことは別です。状態を保持するプロトタイプは、参加者が画面を移動しても、選んだ目的などの操作結果を覚えています。

7つの候補を、各社の公開ドキュメントと料金情報に基づいて評価しました。公開されている入口にもアクセスしましたが、生成テストには至りませんでした。Magic Patternsとv0ではログイン画面まで、LovableとClaudeではブラウザーの検証画面まで進みました。Stitchでは利用できるエディターが読み込まれず、Figma MakeとBoltの公開入力画面からも、認証済みのワークスペースや生成物は得られませんでした。これはレビュー環境の制約であり、各製品がプロトタイプを生成できないことを示すものではありません。

したがって、予定していた共通条件での生成テストについて、どのような成果物が得られ、何を直す必要があったかは、7ツールすべてで未計測です。以下の推奨に、架空の初回生成品質、所要時間、ユーザビリティの評価結果は含めていません。共通プロンプトと修正時の確認点を示し、未実施の検証内容を明確にするとともに、同じ条件で再現できるようにしています。

AIプロトタイピングツールとアプリビルダーはどう違うのか

ここで作るのは、利用者が試せる体験です。アカウントの作成、顧客レコードの保存、メール送信を行わずに、送信が成功した状態を再現しても構いません。次に何をすればよいかが伝わるかを確かめるには、それで十分な場合が多くあります。

本番用アプリには、それ以外の役割も必要です。生成したソフトウェアで事業を動かすことが次の目標なら、別記事のAIアプリビルダー比較とバイブコーディングツールガイドを参照してください。今回バックエンドを加える理由になるのは、調査で明らかにしたいことを検証するために不可欠な場合だけです。

たとえば、オンボーディングで目的を選ぶ操作が理解されるかを確かめるには、選択肢と画面遷移が動けば十分です。一方、招待が同僚に届くかを確かめるには、別のプロトタイプと仕様が必要になります。技術的に見栄えのする機能で本来の判断が置き換わらないよう、これらの検証は分けてください。

AIでプロトタイプを作るための共通オンボーディング仕様

どの候補にも同じ初期プロンプトを渡し、同じ受け入れ基準を使います。そうしないと、詳細な状態モデルを渡したツールと、見栄えのよいオンボーディング画面だけを頼んだツールを比較することになります。

以下は、この比較のために用意した仕様です。Northstarは架空の製品です。寸法は指定するデザイン上の条件であり、生成結果を測定した値ではありません。

Northstarという架空のチーム計画ツール向けに、クリックして操作できる3画面のオンボーディングプロトタイプを作成してください。画面1：ようこそ。氏名と仕事用メールアドレスを必須入力とし、「次へ」を配置します。画面2：「プロジェクトを計画する」「チームで連携する」「試してみる」から目的を選びます。必ず1つだけ選択する仕様にし、「戻る」と「次へ」を配置します。画面3：入力した氏名、メールアドレス、選択した目的を確認し、「戻る」「完了」「最初からやり直す」を配置します。「完了」を押すと画面3の中に完了メッセージを表示し、新しい画面は追加しません。「戻る」で移動しても入力値を保持します。メールアドレスの形式が不正な場合や必須項目が未入力の場合は、該当箇所にエラーを表示します。「最初からやり直す」で全項目を消去します。モックデータとローカルの状態管理だけを使い、認証サービス、データベース、メール送信、決済、外部APIは使いません。背景は白、文字は濃色、主要ボタンはインディゴとし、余白は8px刻み、角丸は12pxにします。入力欄には明確なラベルを付け、キーボードフォーカスを見えるようにし、デスクトップとモバイルに対応するレスポンシブレイアウトにしてください。画面や機能を追加しないでください。

この仕様では、見た目と動作を分けています。クリックできる画像でも手順は示せますが、参加者が自分の氏名を入力し、目的を変更し、確認画面で変更後の値を見られることまでは証明できません。

参加者をテストに招く前に、次の受け入れ基準を確認してください。

• 画面遷移：「次へ」で意図した画面に進み、「戻る」で戻っても有効な入力値が失われないこと。
• 入力検証： 必須項目の未入力や不正なメールアドレスに対し、その場で理解できるエラーが表示されること。
• 選択： 目的は必ず1つだけ選択でき、どれを選んだかが見た目で分かること。
• 確認： 固定のサンプル文ではなく、参加者自身の入力内容が表示されること。
• 完了：「完了」で確認画面内に完了メッセージが表示され、「最初からやり直す」で前の参加者のデータが消えること。
• 入力操作： ラベルが常に見え、キーボードフォーカスを追え、想定する表示サイズでレイアウトが機能すること。

比較すべき変化は、見栄えのよい下書きから、これらの基準を満たすフローへの変化です。今回は生成された下書きを取得できていないため、以下は問題が生じた場合の修正指示例であり、製品で確認した不具合の報告ではありません。

「戻る」で氏名が消えるなら、「画面を移動しても、オンボーディングの全入力値を共有のローカル状態に保持してください」と修正を指示します。確認画面にサンプルの目的が表示されるなら、現在の選択値を表示するよう求めます。「完了」でダッシュボードが追加されるなら、その画面を削除し、元の画面内に完了メッセージを表示させます。問題のある最小限の動作だけを変え、影響するタスクをもう一度試してください。

デザインシステムの評価は別の工程にします。まず、追加資料のない同一の仕様で比較します。その後、対応する各ツールに同じ承認済みの参考資料とコンポーネントを渡し、変換や上位プランへの変更が必要だったかを記録します。片方には完全なコンポーネントパッケージを、もう片方にはスクリーンショットだけを渡しても、どちらがシステムを忠実に使えるかは判断できません。

用途別に選ぶAIプロトタイピングツール

1. Magic Patterns：プロトタイプ専用の制作環境から始めたい場合

Magic Patternsは、要件やスクリーンショットから操作可能なプロダクトのプロトタイプを作るAIデザイン環境です。直近の目的がプロダクトの検討やユーザー調査で、とくに本番アプリの開発まで決めずに複数案を探りたいときは、最初の候補になります。ドキュメントでは、その制作手順と、再利用可能なデザインシステムや開発への引き継ぎが結び付けられています。これは最初に試す理由にはなりますが、今回の仕様を最速で完成させた証拠ではありません。Magic Patternsの概要。

向いている人： 対象を絞った機能デモを準備するプロダクトマネージャーやデザイナー。
特徴： 再利用可能なコンポーネントとルールを扱うデザイン環境に、コードとFigmaへの引き継ぎ手段が用意されています。
料金： Starterは月払いで1シートあたり月額$20からです。公式料金ページ。
無料での利用： 制限付きのFreeプランがあります。ただし、利用枠内で完成したプロトタイプを必ず得られるわけではありません。

共通仕様で試すには。 個別に生成した画面を後からつなぎ合わせるのではなく、Northstarのフロー全体から始めます。とくに確認すべきなのは確認画面で、前のフォームと選択画面で入力した内容が反映されている必要があります。目的を選ぶ画面の見た目を整えるだけでは、要件の一部しか満たしません。

既存プロダクトの試作では、見た目の再現度を評価する前にデザインシステムの情報を渡します。Magic Patternsは、システムをゼロから作る方法に加え、GitHub、npmパッケージ、Figma、Webサイトを起点にする方法を説明しています。システムにはコンポーネント、色、タイポグラフィ、ルールが含まれます。主要ボタンがインディゴになったかだけでなく、こうした要素も確認できます。デザインシステムのドキュメント。

レビュー担当者には、プロトタイプで使われている入力欄とボタンのコンポーネントを特定してもらいます。承認済みのUI部品に似せただけなら、見た目の再現として記録します。実際に再利用可能なコンポーネントを使っているなら、それは別に記録してください。受け取るエンジニアが、既存プロダクトと同じ無効状態、エラー状態、フォーカス状態を必要とする場合、この違いが重要になります。

プランごとの対応範囲を確認してください。 料金ページでは、GitHub、MCP、FigmaなどへのエクスポートをStarterに含めていますが、カスタムデザインシステムのインポートはEnterpriseに記載しています。MCP（Model Context Protocol）は、AIコーディングツールが情報を取得したり、別のツールの機能を使ったりするための仕組みです。一般的な機能紹介だけを見て、すべてのカスタムインポート方法が最も安いプランに含まれると判断しないでください。

問題が出た場合の修正点： 取り込んだ参考資料に見た目は近くても、フォームのエラー表示が違う場合は、承認済みの入力コンポーネントとエラー用バリアントを指定します。画面遷移とデータは維持したまま、そこだけを置き換えるよう指示してください。「もっとブランドらしく」と頼むよりも具体的です。

引き継ぎまで考えた判断： 案の検討が中心で、複数の出力先を確保したいならMagic Patternsが候補になります。エクスポートしたものを開発の出発点とする前に、次の担当者に開いてもらい、使われているコンポーネントとオンボーディングの状態モデルを確認してください。共有用プレビューと再利用可能なコードは、引き継ぎの異なる役割を担います。

Magic Patternsで同じ条件を再現する手順：

1. 1

   プロンプトを送る前に範囲を決める

   追加資料なしの比較ではNorthstarの仕様をそのまま使います。仕様のコピーを受け入れ基準と一緒に保存し、本番用サービスとの連携は加えません。

2. 2

   システムの再現度は別工程で確かめる

   デザインシステムを検証する工程では、ダッシュボードからDesign Systemsを開き、対象のシステムを作成または選択します。アカウントで利用できる、ドキュメントに記載された方法で、承認済みのコンポーネント、色、ルールを追加します。

3. 3

   仕上げる前に動作を確かめる

   氏名とメールアドレスを入力し、目的を選び、前の画面に戻ってから確認画面の内容を調べます。問題を記録してから、それぞれに絞った修正を依頼します。

4. 4

   次の担当者と実際の引き継ぎ先を確認する

   想定するレビュー担当者として共有プレビューを開きます。その後、必要なFigmaまたはコードへの引き継ぎ方法を使い、次の担当者が作業を続けられるかを確認します。

2. Figma Make：既存のデザインをFigmaで管理している場合

Figma Makeは、アイデアや既存のデザインを、プロンプトから操作可能な体験に変えるFigmaのツールです。デザイナーが承認済みのフレームを持ち、その素材を軸にプロトタイプを検討したいチームにとって、自然な第一候補になります。Makeでは、既存のデザインやコンポーネントをコンテキストとして渡し、プレビューを共有し、専用URLで公開できます。Figma Makeの概要。

向いている人： 承認済みのUI素材をFigmaに持つデザイナーやプロダクトマネージャー。
特徴： Make kitsで、コードパッケージ、ライブラリのスタイル、文章化した利用ルールをまとめられます。
料金： ProfessionalのFullシートは年払いで月額$16からです。公式料金ページ。
無料での利用： Starterで制限付きの利用が可能です。Make kitsには有料プランのFullシートが必要です。

共通仕様で試すには。 最初の生成には同じ文章を使います。別工程で再現度を確認する際に、承認済みのオンボーディング用フレームを添付し、Add contextから対象のMake kitを選びます。フレームで伝えられるのは、UIがどう見えるべきかです。参加者が選択を変えた後や、不正なメールアドレスを入力した後の動作は、引き続き仕様で説明する必要があります。

Make kitは、npmのコードモジュール、公開済みライブラリの変数とスタイル、それらの使い方を示すガイドラインをまとめたものです。npmパッケージとは、実際の入力欄やボタンのコンポーネントなどを配布できる形にまとめたコードです。これにより、システムを検証する際に「意図した部品と状態が使われているか」という具体的な確認ができます。Make kitのドキュメント。

完全な再現を約束する前に確認すべき制約も、Figmaは明記しています。抽出されるライブラリのスタイルは、一部の変数と生のCSS値を使うもので、元の変数式をすべて保持するわけではありません。CSSは外観を決めるスタイル用のコードです。そのため、通常状態のボタンが一致していても、テーマや条件によって変わるすべての状態が引き継がれた証拠にはなりません。

Northstarでは、目的の選択状態、「次へ」の動作、メールアドレスのエラー、キーボードフォーカスを確認します。一見忠実なデザインでも、こうした細部がプロダクトのルールと異なる場合があります。不足している状態の指示をkitのガイドラインに追加し、色だけでなく動作も伝わるようにしてください。

問題が出た場合の修正点： フォームの配置は正しいのにエラーメッセージのスタイルが独自のものになっているなら、kitの入力欄のルールを示し、その状態だけを変更します。エラーを理解して修正できるかが調査の焦点なら、ページ全体のデザイン変更を頼む必要はありません。

引き継ぎまで考えた判断： Figma Makeは、デザインレビューを中心に進める制作手順に適しています。製品ページには、コードで動き、画面上で編集できる成果物や、Figmaのキャンバスへのコンテンツのコピーが説明されています。開発側に何を渡すかを決め、その実物を一緒に開いてください。同じページではローカルのコードベースでの作業を「近日公開」としているため、その予定を、現時点で使える制作環境を購入する根拠にはできません。Figma Makeの製品ページ。

より広い制作手順はFigma Makeのレビューで扱っています。今回の用途に絞るなら、チームがすでに管理しているデザイン情報を使い、それに照らしてプロトタイプを確認できることが選ぶ理由になります。

3. v0：コードリポジトリを次の担当者に渡したい場合

v0はVercelのAIアプリ開発環境で、デザインの取り込み方やGitHubを使う手順が公開されています。エンジニアが内容を確認して開発を続ける初期実装としてプロトタイプを作るなら、今回の候補の中で最も適しています。GitHub連携ではコードをリポジトリに保存し、ブランチとプルリクエストで作業するため、引き継ぎ先が明確です。v0のGitHubドキュメント。

向いている人： プロトタイプのコードを引き継ぐエンジニアと協働する起業家やデザイナー。
特徴： 複数のFigmaフレームの参照、再利用できるデザインシステムの設定、リポジトリでの引き継ぎに対応しています。
料金： Plusは1ユーザーあたり月額$30からです。公式料金ページ。
無料での利用： 1日あたりのメッセージ数に上限があるFreeプランを利用できます。

共通仕様で試すには。 範囲を限定し、ローカルの状態管理だけで動くオンボーディングを依頼します。データをローカルに保持すれば、データベースを設定せずに、セッション中の値をブラウザーで記憶できます。氏名、メールアドレス、目的をどこに保存し、「戻る」「完了」「最初からやり直す」でそれぞれどう変化するかを、エンジニアが追える状態にしてください。

再現度を確かめる工程では、v0の現行Figma連携で複数のフレームを読み込み、レイアウト、テキスト、トークン、素材を使ってフローを作れます。この連携にはv0の有料プランが必要です。スクリーンショットは見た目を伝えられますが、デザインファイルを接続すると、構造や周辺情報も渡せます。v0のFigmaドキュメント。

現在のシステム用の仕組みはDesign Systems 2.0です。v0が使うべき実際のコンポーネント、プロパティ、トークン、設定を説明する、再利用可能なスキルを保存します。ソースリポジトリ、インストールできるパッケージ、そのパッケージをすでに使っているアプリ、Figmaの参照資料、ドキュメントを渡せます。v0はシステムを保存する前に、レビュー用のスターターを作成します。Design Systems 2.0のドキュメント。

このスターターのレビューは丁寧に行ってください。コンポーネントパッケージのUI部品を正しく表示するには、テーマプロバイダー、フォント、グローバルスタイルが必要な場合があります。サンプルアプリがあれば、それらの組み合わせ方が分かります。スターターに問題があるままオンボーディング全体を追加しても、原因の切り分けが難しくなるだけで、ツールが不向きだと証明したことにはなりません。

問題が出た場合の修正点： 目的の選択肢に代替のUI部品が使われているなら、承認済みのコンポーネントと許可されたバリアントを指定します。「戻る」で値が消えるなら、状態モデルは別に修正します。こうすることで、システムの再現度の問題と画面遷移の問題を混同せずに済みます。

引き継ぎまで考えた判断： v0の強みは、開発を続ける方法が明示されていることです。エンジニアにプロトタイプのブランチをレビューしてもらい、仮のデータを説明し、残す価値のある部分を特定します。リポジトリはその確認を可能にしますが、生成コードがすでに本番の品質基準を満たすという保証にはなりません。

次の工程にエンジニアが関わらないチームでは、リポジトリに渡せることが直近のユーザーテストにあまり役立たない場合もあります。その場合は、レビューと操作に必要な条件を優先してください。引き継ぎを含む幅広い選択肢は、デザインからコードを作るv0の代替ツール比較で扱っています。

4. Lovable：入力値を保持するフォームの動作を検証したい場合

Lovableは会話型のWebアプリビルダーで、デザインシステムとコード同期の手順が公開されています。入力を受け付け、選択を記憶し、その人の内容を確認画面に表示するなど、小さなアプリとして動くプロトタイプが必要な場合に候補になります。アプリを作れる製品でも、試作で省くべき役割は指示しなければなりません。仕様の範囲を絞ってください。

向いている人： 実際に動くWebの操作フローをシミュレーションしたい起業家やプロダクトマネージャー。
特徴： 有料プランでReactのデザインシステムを使え、設定とルールへの準拠を確認する手順が明示されています。
料金： ワークスペース向けの基本的な有料プランであるProは月額$25からです。公式料金ページ。
無料での利用： ビルド用クレジットに制限のあるFreeプランがあります。

共通仕様で試すには。 Northstarの氏名とメールアドレスの入力、目的の単一選択、それらの値に連動する確認画面を依頼します。参加者が「試してみる」から「プロジェクトを計画する」に変更したら、確認画面にも変更が反映される必要があります。検証したいのはこの動作であり、この問いに対してデータベースを接続しても検証の質は上がりません。

Lovableの現行デザインシステムは有料プランで利用でき、WebのUIを再利用可能な部品として扱うReactコンポーネントにネイティブ対応しています。デザインシステムは専用のプロジェクト内に置きます。接続すると、コンポーネントとルールが必要な依存関係とともにプロトタイプのプロジェクトへコピーされます。ドキュメントには、設定の検証や、色の直接指定、独自コンポーネントといった逸脱を確認する仕組みが説明されています。ここで紹介しているのは公開された仕組みであり、本レビューで完全な準拠を確認できたという意味ではありません。Lovableのデザインシステムのドキュメント。

既存プロダクトのチームには、重要な区別があります。既存のnpmパッケージをラップしてデザインシステムとして使う方法はEnterprise限定です。 最も安い有料プランに「デザインシステムを含む」とあっても、現在の本番ライブラリを取り込むあらゆる方法が含まれるわけではありません。

更新の責任者も明確にする必要があります。接続済みプロジェクトでデザインシステムの更新を受け入れると、そのシステムに属するローカルファイルは置き換えられます。ボタンの動作を恒久的に変える必要があるなら、次の更新で上書きされる編集に頼らず、システム側で変更してください。

問題が出た場合の修正点： フォームは動いても、選択中の目的が独自デザインのカードになっているなら、承認済みの選択用コンポーネントを指定します。システム更新でローカルのスタイル修正が消えたなら、修正を元のシステムに反映します。プロダクトのロジックと共有コンポーネントの保守は、異なる種類の手戻りとして記録してください。

引き継ぎまで考えた判断： Lovableは、双方向同期を含むGitHubへのコードのエクスポートと同期を説明しています。受け取るエンジニアには、どの動作がシミュレーションで、どのコンポーネントファイルがシステム由来かを短く添えて、そのプロジェクトを確認してもらいます。LovableのGitHubドキュメント。

テキストだけの簡単なデモなら、システムの追加設定が不要な場合もあります。整備されたライブラリを持つ既存プロダクトなら必要です。スクリーンショットと似ているだけで保守可能な実装だと判断せず、元のプロダクトとプロトタイプの関係に応じて方法を選んでください。

5. Google Stitch：画面をつなぎながらデザインの方向性を探りたい場合

Google Stitchは、プロンプト、スケッチ、スクリーンショットからUIデザインを作るGoogle LabsのAIデザインキャンバスです。Googleは、操作用のホットスポットで関連する画面をつなぐ方法と、Figmaやコードへのエクスポートを説明しています。最初に確かめたいことが画面の順序、情報、見た目の方向性である場合に候補になります。ただし、クリックして進める形式で出力できることは、Northstarの仕様にあるフォームの状態管理をすべて実装できている証明にはなりません。Stitchの公式製品FAQ。

向いている用途： 初期のユーザージャーニーで、画面の方向性と順序を検討すること。
特徴： ホットスポットで複数画面をつなぐプロトタイプと、DESIGN.mdで持ち運べるデザインルール。
料金： Googleは公式の費用FAQで、Stitchは現時点では無料と説明しています。
無料での利用： 1日あたりのクレジットによる制限があり、無制限に試せるという意味ではありません。

共通仕様で試すには。 同じオンボーディング仕様を、全体を省略せずに渡します。そのうえで、画面がつながることと、入力が機能することを分けて確認してください。ホットスポットがあれば、参加者を「ようこそ」から目的選択画面へ移動させられます。状態を保持するフローでは、それに加え、入力した氏名を確認画面に渡し、「戻る」で保持し、「最初からやり直す」で消去する必要があります。

この違いを踏まえてテストを設計してください。目的の選択肢が理解できるかを調べるなら、画面をつないだプロトタイプで十分かもしれません。間違ったメールアドレスを修正して完了できるかを調べるなら、フォームとデータが動く必要があります。見た目の導線をたどれるだけで、後者も合格にしないでください。

一貫性を保つ方法として、GoogleはDESIGN.mdを説明しています。プロジェクト間でインポート、エクスポートできる、持ち運び可能なデザインルールのファイルです。見た目の選択に込めた意図を伝えるため、次の生成にスクリーンショット単体より多くの情報を渡せます。システムの指針として役立ちますが、ルールを記したファイルがあるだけでは、組織の既存コンポーネントパッケージを出力側が取り込んでいる証拠にはなりません。GoogleによるDESIGN.mdの発表。

問題が出た場合の修正点： 目的選択画面の余白や文字の扱いが「ようこそ」画面と違うなら、共通のデザインルールを渡して統一を求めます。確認画面に入力値を表示できないなら、コードを引き継いでその動作を完成させるか、プロトタイプで確かめられる範囲にテストを絞ってください。固定の確認内容を、参加者の入力を反映する動作として提示しないでください。

引き継ぎまで考えた判断： Googleの製品ページは、HTML/CSS、Tailwind対応、Figmaへのエクスポート、MCP接続とともに、静的HTMLのエクスポートを明記しています。静的な出力は開発の出発点になりますが、受け取るエンジニアは、どのインタラクションと状態遷移が出力された成果物に実装されているかを確認する必要があります。外観を再現するコードと動作を再現するコードでは、受け入れ基準が異なります。

Stitchは、未観測の速度や再現度に点数を付けなくても、画面案を検討する候補になります。次に決めたいことが画面そのものなら、その対象範囲は適切です。アプリの動作が判断を左右するなら、テストの前にその動作を確かめてください。

6. Claude Design：会話の流れからプロトタイプを作りたい場合

Claude Designは、Claudeの会話、Artifacts、Claude Codeの中で使えるAnthropicのビジュアル制作機能です。参考資料を取り込み、キャンバス上で編集し、コーディングの工程に引き継げます。すでにあるプロダクトの議論や文章化した要件から、そのままプロトタイプを作りたい場合に有用な候補です。Claude Designの製品ページ。

向いている人： 文章での議論を目に見える成果物にしたいプロダクトマネージャーや起業家。
特徴： Claudeの作業の流れの中で、会話による改善、キャンバス上の編集、コードへの引き継ぎができます。
料金： Claude Designは**$0のFreeプラン**に含まれます。公式料金ページ。
無料での利用： プラン全体で共用する利用枠を消費します。

共通仕様で試すには。 見た目の調整を頼む前に、Northstarの仕様をすべて渡します。会話の中で、アカウント作成のシミュレーションと実際のアカウント作成を明確に区別してください。参加者は、稼働中の認証サービスやメール配信を使わずにタスクを完了できる必要があります。

Anthropicは、スクリーンショットやコードベースの情報を添付する方法、デザインシステムの利用、成果物のエクスポートや共有を説明しています。システムの検証では、アカウントがその設定に対応している範囲で、ほかのツールと同じ承認済みコンポーネントとルールを渡します。Design機能が無料でも、組織単位のすべてのシステム利用手順やコード機能まで、同じ利用条件だと解釈しないでください。

レビューでは、見た目だけでなく遷移にも注目します。目的を変えると確認内容も変わるでしょうか。レビュー担当者がキャンバス上のテキストを直接編集しても、同じタスクを表し、仕様に合った内容になっているでしょうか。モデルのもっともらしい説明を検証済みの結果と取り違えないよう、受け入れ基準はチャットの外で管理してください。

問題が出た場合の修正点： 確認画面にサンプル値が入っているなら、参加者の現在のローカル状態を表示するよう指定します。編集で画面数が変わったなら、評価する前に元のフローに戻します。これらは推奨する確認項目であり、今回Claudeの生成物で観測した問題ではありません。

引き継ぎまで考えた判断： AnthropicはHTMLのエクスポートとClaude Codeへの引き継ぎを挙げています。受け取るエンジニアが実際に使う環境で、最後の確認をしてください。次の担当者がFigmaでそのまま扱える成果物を必要とするなら、HTMLのエクスポートで要件を満たすと思い込まず、別に評価します。この選択についてはClaude Designとv0の比較で詳しく扱っています。

現在、Designでの作業は、専用の週次利用枠ではなく、ほかのClaudeでの作業と同じ利用枠を消費します。そのため、長時間の修正作業は、同じアカウントのほかのタスクと利用枠を取り合う可能性があります。Anthropicの入門ガイド。利用条件全般については、Claude Designの無料利用を参照してください。

7. Bolt：既存のコードを検証に使いたい場合

Boltは、プロンプト、既存のGitHubプロジェクト、Figmaフレームを出発点にできるAIアプリ開発環境です。プロトタイプがチームの既存コードと密接に結び付いている場合や、エンジニアがすぐに確認して拡張する場合に、今回の比較の候補になります。独立したオンボーディング案を試すなら、これらの機能は選択肢に加える理由にはなりますが、不要なアプリ基盤を追加する理由にはなりません。Boltの概要。

向いている用途： 既存のコードプロジェクトに結び付くプロトタイプや、すぐにエンジニアのレビューを受ける試作。
特徴： リポジトリを引き継いで作業でき、Figmaのインポート方法を明確に選び分けられます。
料金： Proは月払いで月額$25からです。公式料金ページ。
無料での利用： 日次と月次のトークン制限があるFreeプランを利用できます。

共通仕様で試すには。 生成する対象を、ローカルで動くオンボーディングのシミュレーションに限定します。別工程で再現度を検証する際に既存プロジェクトから始めるなら、再利用するコンポーネントと、変更してはいけない範囲を明確にしてください。確認すべきなのは、生成したソフトウェアの量ではなく、参加者が行うタスクです。

BoltのFigmaドキュメントには、とくに役立つ区別があります。インポート対象はFigmaプロジェクト全体ではなく、単一のフレームです。デザインシステムを使う場合は、CodeではなくScreenshotを選ぶよう案内しています。Code方式はそのシステムを認識しないためです。インポート方法を意識して選ぶべき具体的な理由になります。BoltのFigmaインポートのドキュメント。

Northstarのフローでは、フレームを1つ取り込んでも、全画面に必要な操作ルールまでは補えません。完全な仕様と必要な遷移を追加します。参考資料は見た目の出発点を示し、指示はプロトタイプが何をすべきかを定めます。

料金ページでも、個人での試作と、専用のシステムを使う制作手順を分けています。比較表では、プライベートnpmレジストリとDesign System Knowledgeを、FreeやProではなくTeamsに掲載しています。したがって、これらのチーム向け機能が含まれると思って個人用Proを契約するべきではありません。

問題が出た場合の修正点： システムを設定済みなのに、Figmaを基に生成した結果が別のコンポーネントを使っているなら、プロンプトを書き直す前に、ドキュメントどおりScreenshot方式を使ったかを確認します。正しいコンポーネントがあるのに画面遷移が違うなら、状態遷移は別に修正します。入力の取り込み方と動作の仕様は、異なる問題を解決するものです。

引き継ぎまで考えた判断： BoltのGitHub連携では、既存プロジェクトを取り込み、プロジェクトの履歴をBoltの外に残せます。エンジニアが確認できるコードを渡し、別の環境で作業を続ける手段になります。とくに成功状態を意図的に再現しているプロトタイプでは、コードだけでなく仕様と既知の制約も渡すと役立ちます。BoltのGitHubドキュメント。

Boltの料金FAQは、プロジェクトファイルのコンテキストが、トークン消費の主な要因だと説明しています。可能な範囲で、検証に関係のない部分を対象から外してください。トークン枠の大きさだけでは、完成したオンボーディングのプロトタイプをいくつ作れるか、確かな見積もりはできません。

プロダクトマネージャーはどのツールを選ぶべきか

まず基準となる素材で候補を絞り、次に観察したい動作で選びます。 計測もせずに特定の製品があらゆる場面で最速だと言うより、この基準のほうが判断の根拠になります。

プロダクトの要件だけがあるなら、プロトタイプ専用の制作環境としてMagic Patternsから評価してください。承認済みのデザインがFigmaにあるなら、Figma Makeを最初に試し、kitがコンポーネントと状態をどう表現しているかを確認します。エンジニアがリポジトリを引き継ぐなら、v0を第一候補にし、フロー全体を生成する前にスターターをレビューしてください。

小さなアプリのように動くシミュレーションが必要なら、Lovableが候補です。その際、ネイティブなデザインシステム用プロジェクトと、Enterpriseで使えるパッケージのラッパーを区別してください。画面をつなぐことで調査の問いに答えられるなら、Google Stitchが候補になります。ただし、データ入力のテストに使う前には、追加の動作確認が必要です。

必要な情報がすでにClaudeの会話にあり、対応する出力形式が次の担当者の用途に合うなら、Claude Designを選びます。既存のコードプロジェクトが検証の中心なら、Boltが候補です。公開されているFigmaのインポート方式と、システム機能に必要なプランに注意してください。

引き継ぎ要件が変われば、選択も変わります。文言への意見を集めたい起業家と、本番の入力コンポーネントを再利用する必要があるエンジニアでは、必要な成果物が異なります。プランを契約したり、画面を仕上げたりする前に、その引き継ぎ先を合意しておいてください。

次の担当者には、受け入れ基準を満たしたフロー、元の素材またはコンポーネントパッケージ、シミュレーションしている部分の短い記録を渡します。「完了操作はローカルで確認を表示するだけで、アカウントは作成しない」というメモは役立ちます。「すべて動く」では、実装の指針として十分に具体的ではありません。

無料のプロトタイピングツールは、利用枠より検証内容で選ぶ

無料枠でも制作手順の評価は始められますが、特定のプロトタイプを完成させるのに十分な容量があるとは限りません。Magic Patterns、Figma、v0、Lovable、Claude、Boltはいずれも無料で使い始める選択肢を公開しており、GoogleはStitchを現時点では無料としています。各社の料金や費用に関するページは、比較表から参照できます。

制限の単位は製品ごとに異なります。クレジットで行える作業量は同じ製品内でも変わり、他社のクレジットとも比較できません。トークンはモデルが処理するテキストの単位で、完成した画面数ではありません。プロトタイプのコンテキストや修正の依頼内容が消費量を左右します。

文章化した仕様と、終了条件を決めてから始めてください。終了条件は、動作確認に合格したフローを共有できることです。利用プラン、消費した利用枠、残った不具合、レビュー担当者が成果物を開けたかを記録します。契約判断を支えるのはこの記録であり、広告に大きな利用枠が示されているだけでは不十分です。

機密性のあるプロダクトを扱う場合は、参加者に送る前に、実際のプレビューのアクセス設定も確認してください。エディター内でプロジェクトが非公開でも、公開リンクを誰が開けるかは別の問題です。今回の例では架空の参加者情報を使い、本番の顧客システムから独立したプロトタイプにしてください。

避けたい選び方

参加者自身の入力や入力検証が調査に欠かせない場合、Google Stitchで完成済みのフォーム実装が得られると決めつける使い方は避けてください。公開されているホットスポットやエクスポートの機能は有用ですが、実際の成果物で動作を確かめる必要は残ります。

Bolt Proを、パッケージベースのデザインシステムに対応するプランだと思って選ぶことも避けてください。料金表では、専用のシステム知識とプライベートレジストリ対応はTeamsの機能です。また、Lovable Proで既存のnpmライブラリをラップできると思って選ぶことも避けてください。この方法はEnterprise限定とされています。

Magic Patterns Starterですべてのカスタムシステムをインポートできると思い込むことも避けてください。基本プランのエクスポート機能と、Enterpriseのカスタムインポートサービスは別です。Make kitsが必要な制作手順にFigma Starterを選ぶことも適切ではありません。Make kitsには有料のFullシートが必要です。

Anthropicの終了告知を考慮せずに、claude.ai/designの単独版Claude Designを前提とする新しい制作手順を組むことは避けてください。現在の会話内で使うDesignを評価しましょう。また、リポジトリを確認したり、その後の作業に使ったりする人がいないなら、リポジトリへの引き継ぎだけを理由にv0を選ぶことも避けてください。

ここで挙げたのは、要件と公開されている利用方法の不一致です。実施していないテストで、各製品の成績が悪かったと主張しているわけではありません。

プロダクトマネージャー向け：AIで作ったプロトタイプをテストする手順

参加者が、進行役に操作を代わってもらわずに、意図したタスクを試せる状態になれば、テストを始められます。見た目の完成度は理解に影響する限り重要ですが、この基本条件の代わりにはなりません。

1. 1

   操作を案内する前に、目的を伝える

   参加者には、プロジェクトを計画するためにNorthstarを設定し、内容を確認するよう依頼します。操作方法はUIから読み取ってもらってください。すぐに正しい操作を説明せず、どこで迷ったかを記録します。

2. 2

   やり直しのタスクを含める

   完了前に目的を変えたり、入力したメールアドレスを修正したりしてもらいます。戻る方法を見つけ、現在の状態を理解できるかを観察してください。すべての問題をツールの不具合だと判断しないでください。仕様で決めたデザインが原因かもしれません。

3. 3

   デザインの発見とプロトタイプの不具合を分ける

   目的のラベルが分かりにくいなら、それは提案した体験についての発見です。押しても動かないボタンはプロトタイプの不具合です。壊れたシミュレーションを、プロダクトのアイデアが悪い証拠と解釈しないよう、分けて記録します。

4. 4

   リセットし、得られた学びを引き継ぐ

   次のテストの前に「最初からやり直す」を使います。終了後は、改訂した仕様、受け入れ基準を満たした成果物、動作確認項目を開発側に渡します。成功を再現しているだけの部分や、未実装の部分も含めてください。

次に行うのは、手元の素材に合う候補を選び、共通仕様で生成し、出力と修正履歴を残すことです。その記録がそろって初めて、自分のアイデアをテストできる状態に最も早く仕上げるツールを判断できます。

AIプロトタイプについてよくある質問

人気のAIツールを5つ挙げると、何ですか？

本記事は人気ランキングを示す比較ではありません。プロトタイプ向けの候補は、必要な入力、動作、引き継ぎ方法で絞ってください。ここで最初の候補とするMagic Patterns、Figma Make、v0は、それぞれ異なる制作手順に適した選択肢であり、利用実態調査の上位製品という意味ではありません。

プロトタイピングにAIをどう活用できますか？

文章化したタスク、既存のデザイン、見た目の参考資料を渡し、検討に必要な画面とインタラクションを依頼します。テストに使う前に、画面遷移、エラー、データの保持、共有を確認してください。上記のNorthstarの仕様は、これらの要件を明示した例です。

AIでプロトタイプを無料で作れますか？

はい。紹介したツールには無料で使い始める選択肢があり、GoogleもStitchを現時点では無料と説明しています。ただし、利用量の制限や、プランによるシステム機能の制限はあります。無料プランは試作に挑戦する機会であり、特定のフローを利用枠内で完成できる保証ではありません。

プロジェクトを作るには、どのAIツールがおすすめですか？

今回のように範囲を限定したプロトタイプなら、専用の試作環境を求める場合はMagic Patterns、既存のFigmaの情報を使う場合はFigma Make、コードを引き継ぐ場合はv0から評価してください。本番用プロジェクトには、クリックして操作できるデモよりも幅広い評価が必要です。

ChatGPTより優れたAIはありますか？

この用途で「優れている」とは、手元の素材を受け取り、レビュー担当者が必要とする成果物を作れることです。本記事はプロトタイピングに特化した制作方法を比較しており、汎用AIモデル同士の優劣を示すものではありません。

プロジェクト作成に使える無料のAIツールは何ですか？

Magic Patterns、Starterで利用するFigma Make、v0、Lovable、Claude Design、Boltには無料で使い始める選択肢があります。Google Stitchは現時点では無料です。共同プロジェクトを始める前に、表内の公式リンクから適用される制限を確認してください。

完全無料で使えるAIツールはどれですか？

GoogleのStitchのFAQでは、現時点では無料で提供され、日次クレジットで運用されると説明されています。「現時点では無料」は、無制限の利用や、将来も料金が変わらないという約束ではありません。ここで紹介したほかのツールには、有料プランと並んで無料枠があります。

プロジェクト管理には、どの無料AIが適していますか？

プロジェクト管理システムを選ぶことと、そのオンボーディングのプロトタイプを作ることは別です。本記事が評価しているのは後者です。実際の業務でタスクの割り当て、権限、レポートを管理するためのツールを順位付けしているわけではありません。

自分のプロジェクトでAIを使うには、何から始めればよいですか？

ユーザーが行うタスクと、それを検証できる最小限のフローを書き出します。既存のデザイン情報を渡し、プロトタイプを生成し、受け入れ基準を確認してから、参加者の操作を観察してください。実装範囲を広げる前に、得られた知見と引き継ぐ成果物を保存します。

有料の制作環境を選ぶ前に、AI業務ワークフロー監査チェックリストで、プロトタイプの責任者、必要な動作、引き継ぎ内容を明確にしてください。