顧客の反応がないまま、画面だけが増えているなら
新しいプロダクトのアイデアが浮かぶと、ロゴを整え、画面をつなぎ、CMSまで構築したくなります。しかし本当に知りたいことが「顧客はこの提案を見て相談を申し込むだろうか」であれば、完成度の高いプロダクトモックアップは答えをくれません。
デザインツールは機能ではなく、今必要な証拠に合わせて選ぶべきです。 提案を理解するかの確認には文章や静的な画面で十分であり、主要タスクを実行できるかを見るにはクリック可能なプロトタイプが必要です。公開市場で申込行動を確認する段階になって初めて、ランディングページとフォームが必要になります。問いが広いほど低忠実度のプロトタイプから始めるというGoogleの案内とも同じ方向です。
この順序を守れば、Figma、Framer、Webflowのどれが最も優れているかを悩む代わりに、次の意思決定に必要な最小の成果物を選べます。
使うツールより先に、証拠の段階を決めましょう
画面の精巧さと証拠の強さは別物です。Figmaで決済フローを最後までクリックしたという事実はユーザビリティを示しますが、実際の購入意向を証明するものではありません。逆に、ランディングページで相談を申し込んだなら行動意向は観察できますが、プロダクトを問題なく使えるかはまだ分かりません。
| 今答えるべき質問 | 最小の形式 | 観察する証拠 | 拡張する条件 |
|---|---|---|---|
| 提案を理解しているか？ | 文章、紙のスケッチ、静的な画面 | 問題と提案を自分の言葉で説明する | 具体的なタスク経路を試す必要があるとき |
| 主要タスクを実行できるか？ | Figmaのクリックプロトタイプ | 説明なしでのタスク完了、離脱地点、誤った期待 | 公開市場で行動意向を確認するとき |
| 提案を見て行動するか？ | Framerのランディングページとフォーム | 有効な申込み、相談予約、パイロット依頼 | 同じ構造のコンテンツを繰り返し公開する必要があるとき |
| コンテンツ構造が反復需要を生むか？ | Webflow CMSサイト | コンテンツ種別ごとの流入と後続行動 | カスタム機能や統合の不足が運用を妨げるとき |
Strategyzerも、アイデア全体を一度に証明しようとせず、最も重要な仮説を定めたうえで、その仮説に合う小さな実験から証拠を集めるよう提案しています。 そのためツールを開く前に、「誰が、どんな状況で、どんな行動をするのか」を一文で書く必要があります。
合格基準は結果を見る前に書いておきましょう。 「反応が良ければ進める」ではなく、「定めた経路で募集したターゲット20人のうち4人が有効な相談を予約したら、価格を公開した次の実験に進む」のように、対象、分母、行動、次の意思決定を一緒に書きます。この数値は普遍的な合格ラインではなく、チームが事前に定める基準例です。
Figma・Framer・Webflowが必要になるタイミングは異なります
Figmaは、ひとつの主要フローを試すときに適しています。 公式ドキュメントによると、編集権限のあるファイルでは複数のフローと開始地点を作成し、特定のフローへのリンクを共有できます。 プロダクト全体を描くのではなく、「登録→最初の結果を確認」のように失敗コストが高い経路を一つだけつなげましょう。参加者が説明なしでタスクを終えられるか、どこで別の結果を期待するかを観察します。
Framerは、公開URLで申込行動を受け取るときに便利です。 エディタでPublishを押すとframer.appアドレスが生成され、Formsを使って登録・問い合わせ・予約情報を受け取り、結果をメール、Google Sheets、またはWebhookに送れます。 ただし、フォーム送信をすぐに需要として数えてはいけません。募集対象が合っているか、重複やスパムではないか、送信後に実際の会話が続いたかまで確認する必要があります。
最初の実験では複雑な分析設定から始めず、メールまたはGoogle Sheetsに届いた有効なフォーム送信数を直接記録してください。FramerのFunnelsではページビュー、リンククリック、フォーム送信を段階として構成できますが、現在はProまたはEnterpriseサイト向けの有料Convertアドオンです。
GA4接続は、最初の実験が終わってから必要な場合にだけ追加しましょう。 FramerのSite SettingsにGA4測定IDを入れる直接接続は、基本的な訪問計測のための経路です。 フォーム送信も個別イベントとして送るには、フォームに固有のTracking IDを設定し、Framerが発生させるframer:formsubmitイベントとtrackingIdを外部分析ツールへ渡す追加実装が必要です。 GTMのインストール文書ではコンテナとGoogle tagの設定、page_viewの確認手順を扱いますが、これだけでFramerフォームの送信イベントがGA4へ自動送信されるわけではありません。 直接GA4接続とGTMのGoogle tagを同じ測定IDに併用せず、どちらか一つの方法を選んでください。カスタムイベント連携を実装しないなら、メールやシートに届いた送信数を直接数えるほうが正確で簡単です。
カスタムフォームイベントを実装した場合は、Tag AssistantとDebugViewで意図したイベント名が一度だけ収集されていることを確認してから、GA4でキーイベントとして指定できます。キーイベントの指定には必要なプロパティ権限が必要であり、指定したからといってイベント自体が新たに収集されるわけではありません。
Webflow CMSは、反復コンテンツが実際の要件になってから選びます。 WebflowのCollectionは再利用するコンテンツを保存し、同じ種類の項目に共通のスキーマとページテンプレートを適用する構造です。 事例研究や地域別ページを継続して公開する必要があれば意味がありますが、提案の一文すら検証されていない単一のランディングページに必須の段階ではありません。
AI UI生成ツールも同じ基準で考えられます。素早く作った画面は会話を始めるための下書きにすぎず、顧客需要や技術的な実現可能性を証明するものではありません。価格受容性を問う実験なら、派手なダッシュボードより実際の提供範囲、価格、申込ボタンのほうが重要です。
今作るもの：一つの行動だけを確かめる最小実験
必要なものは、検証する顧客層と募集経路、最もリスクの高い仮説一つ、結果を記録する文書、そして選んだツールのアカウントと編集可能な新規ファイルまたはサイトです。Figmaを選ぶなら編集権限のある新しいデザインファイルを、Framerを選ぶなら新しいサイトとフォーム結果を受け取るメールまたはGoogle Sheetsを準備しましょう。実際の顧客の機密情報ではなく、合成テストデータを使います。
- 仮説を一文に絞ります。 たとえば、「従業員10人以下のECショップ運営者は毎週返品理由の整理に苦労しており、自動分析デモを見るために業務用メールアドレスと相談可能な時間を残す」と書きます。今回は画面の理解ではなく、相談申込行動だけを確認します。
- 行動と合格基準を先に決めます。 募集経路、ターゲット人数、有効な申込みの条件、基準を超えた場合に進める次の実験を記録してください。称賛やページビューは申込行動の代わりにはなりません。
- 証拠に合う形式を一つ選びます。 メッセージ理解が目的なら文章や静的画面、タスク実行ならFigma、公開申込みならFramerの1ページを選びます。CMSは反復コンテンツ運用が実際のボトルネックになってから検討してください。
- Figmaなら、編集可能な新しいデザインファイルから始めます。 ファイルの編集権限を確認し、必要なフレームだけを作成してから、Prototypeタブでホットスポットを目的フレームにつなげます。開始地点を定め、そのフローのリンクをコピーして参加者に共有し、別途説明せずに目標画面まで進めるかを確認します。
- Framerなら、新しいサイトに再現可能な申込フォームを作ります。 InsertメニューのFormsからフォームを配置し、フィールドは「業務用メール」と「相談可能な時間」の二つに絞ります。送信先をメール、Google Sheets、Webhookのいずれかに定めてからPublishを押し、framer.app URLを作成します。
- まず合成値で送信経路を試します。 公開URLで業務用メールに「test@example.com」、相談可能な時間に「火曜日午後2時」を入力して送信します。指定したメール・シート・Webhookで二つの値が同じように確認できれば、計測経路の準備は完了です。この送信は顧客の申込数から除外し、その後に実際の募集対象へURLを渡します。
- 観察値を意思決定文として残します。 募集対象と分母、実際の行動数、事前基準、離脱と反論、結論、次の仮説を記録します。基準未達なら、画面を増やす前に顧客層、問題、提案、行動喚起のどの仮説が揺らいだかを切り分けます。
ツールを大きくしてよいサインは、機能の増加ではなく新しい質問です。 フローを理解するかが分かったら公開申込みへ、申込みが繰り返されたら価格や有料パイロットへ進みましょう。反復コンテンツの運用負担が確認できたときにCMSを追加すればよいのです。
さらに深く知りたいなら
AI Prototyping: Test Before You Build — まず質問を定め、その質問に合わせてプロトタイプの忠実度と技術投資を選ぶ方法を説明しています。 design.google
Create and manage prototype flows — Figmaファイルの編集権限を確認し、開始地点と共有リンクを構成する現在の手順を確認できます。 help.figma.com
Adding a contact form — Framerネイティブフォームを追加し、メール、Google Sheets、Webhookで結果を受け取る方法を確認できます。 framer.com
How to track links and forms in Framer — 外部分析ツールでフォーム送信を追跡する際に必要なTracking IDとframer:formsubmitイベントの範囲を確認できます。 framer.com
