最終更新日: 2026-10-15
サイト制作のヒアリングは、目的・対象読者・伝えたい内容・使える素材をフォームで揃え、回答を構成案へ変換すると進めやすくなります。Figmaでの編集可能なワイヤーフレーム作成は、接続するAIクライアントに書き込み可能なFigmaツールと権限がある場合の後工程です。MCPに接続するだけで、すべての環境で新規ファイル作成までできるわけではありません。
まずFORMLOVAの無料プランでテキスト中心の短いヒアリングを作り、回答から何を確認すべきかを試してください。本文の長いテンプレートにはファイルアップロードが含まれるため、そのまま使う場合はStandard以上が必要です。
なぜヒアリングをフォームにするのか
口頭ヒアリングには3つの問題があります。
情報が散らばる。 Zoomで聞いた内容、Slackで追加確認した内容、メールで送られたロゴデータ。1箇所にまとめる作業が毎回発生します。
聞き漏らしが起きる。 話が脱線して肝心な質問を飛ばすと、あとから追加で確認することになります。特に「避けてほしいデザイン」や「ファーストビューの構成」は抜けやすい項目です。
議事録の手間がかかる。 1時間のヒアリング + 30分の議事録作成。合計1時間半が毎回消えます。
フォームにすると、これらの課題を減らしやすくなります。回答は構造化された状態で届くため情報を1箇所にまとめやすく、項目を順に確認できるので聞き漏らしを抑えられます。必要に応じて回答を議事録の土台にもできます。クライアント側も考える時間を取りやすくなり、回答の質を高めやすくなります。
最初は、テキストだけのヒアリングから試す
以下は試すための依頼文の例です。この記事で実行した結果ではありません。既存の公開フォームを変更する前に、検証用の下書きで確かめます。
Webサイト制作のヒアリングフォームを非公開で作ってください。サービス概要、対象読者、サイトの目的、主なCTA、掲載できる事実・実績、参考URL、公開希望時期をテキストで聞きます。ファイル項目は使わず、必須は目的と対象読者と概要に絞ってください。各回答がLPのどの構成判断に使われるか対応表を出してください。まだ公開もFigma作成もしません。
出力されたら、次を確認してください。
- 質問が「作るために必要な判断」につながり、単なる素材収集になっていないか。
- スマホで長文を無理に入力させず、任意・後日確認の余地があるか。
- 実績・料金・認証・顧客の声が未確認のとき、事実として生成せず未確定にできるか。
構成案につながるヒアリングを無料で作る
Freeでテキスト項目とプレビューを試せます。ファイルアップロードはStandard以上、Figmaの書き込み機能・権限・利用条件は別途必要です。
無料登録・メール確認後、対応するAIチャットにFORMLOVAを接続し、上の依頼文を貼り付けます。保存された下書きを確認してから公開を判断してください。
ヒアリングシートの設計 -- 5ステップ28項目
ヒアリングシートは5ステップのマルチページフォームとして設計しています。28項目あります。
なぜ5ステップか
このテンプレートは段階に分けて質問を整理する設計例です。項目が多ければ負担にもなるので、初回で必要な質問と後日の確認事項を分け、スマホで実際に入力して長さを確認します。分割だけで離脱率が改善するという測定結果ではありません。
ステップの順序にも意図があります。
| ステップ | 内容 | 意図 |
|---|---|---|
| Step 1 | ビジネスについて | まず相手のことを理解する。サイトの土台になる情報 |
| Step 2 | ターゲットとゴール | 誰に向けたサイトで、見た人にどうなってほしいか。デザインの方向性がここで決まる |
| Step 3 | 掲載コンテンツ | キャッチコピー、CTA文言、実績数字。具体的なテキストがあるほどワイヤーフレームの精度が上がる |
| Step 4 | デザインの方向性 | 雰囲気、カラー、フォント、ファーストビュー構成、NG要素。ここが一番大事 |
| Step 5 | 素材とご要望 | ロゴ、写真、参考スクショ、追加要望。最後に持っている素材を出してもらう |
ビジネス理解から始めて、ターゲット、コンテンツ、デザイン、素材の順に進みます。この順序は、デザイナーが頭の中で整理する順序とほぼ同じです。
特に重要な質問
100件の経験から、特に重要だと感じた質問が3つあります。
「これだけは避けてほしいデザイン」（Step 4）。 好みを聞くよりも、NGを聞くほうが具体的な回答が返ってきます。「安っぽいストックイラストはNG」「ごちゃごちゃしたのは嫌」。これがあるだけで、デザインの方向性がかなり絞れます。
「ファーストビューの構成」（Step 4）。 大きな写真 + テキストオーバーレイ、左テキスト + 右画像（スプリット）、イラスト + テキスト、テキスト中心、動画背景。この5択を提示すると、クライアントは自分のイメージに最も近いものを選べます。口頭で聞くと「いい感じに」と言われがちな質問が、選択肢にするだけで具体化します。
「参考にしたいサイトやデザイン」（Step 4）。 テキストで自由に書いてもらいます。URL、サービス名、「Apple みたいな感じ」でも構いません。参考があるとないとでは、初稿の精度がまったく違います。
ドロップダウンにした理由
業種、雰囲気、フォント方向性、ファーストビュー構成、CVのアクションなどは、テキスト入力ではなくドロップダウンにしています。選択肢を提示したほうがクライアントの回答品質が上がるからです。
「業種は？」と自由入力で聞くと「IT関連」「テクノロジー」「SaaS」など表記がバラバラになります。ドロップダウンで「IT / SaaS」と統一しておけば、あとからデータを使い回すときにも困りません。
MCP連携でFigmaワイヤーフレームを自動生成する
フォームの回答を整理した後、対応するFigma書き込みツールが利用できる環境ではワイヤーフレーム作成へ進めます。ツールが読み取り専用の場合は、まずセクション案と項目対応表を成果物にしてください。
MCPオーケストレーションの仕組み
対応AIクライアントにFORMLOVAと必要なFigma連携を接続します。実際に提供される作成・編集ツール、対象ファイルの権限、アカウント条件を確認します。以下のPlugin APIを使う例は、対応する実行環境がある場合の手順です。
流れはこうなります。
- FORMLOVAからヒアリングシートの最新回答を取得する
- 回答データを解釈して、Figmaに新しいデザインファイルを作成する
- Figma Plugin APIでセクションごとにワイヤーフレームを構築する
- 完成したFigmaファイルのURLを返す
やることは、対応するツールと権限を確認して依頼し、保存されたファイルと項目対応を確かめます。未確定の内容は質問に戻します。
元記事に記載された検証時間
| 作業 | 時間 |
|---|---|
| ヒアリングシートの生成（レシピ1） | 約2分 |
| テスト回答の入力 | 約1分 |
| Figmaワイヤーフレーム生成（レシピ2） | 約3分 |
| 合計 | 約7分 |
所要時間は案件や準備状況によって異なります。上の記録を一般的な工数短縮の保証には使えません。もちろん、自動生成されたワイヤーフレームがそのまま最終成果物になるわけではありません。デザイナーが手を入れる前提の「叩き台」です。ただ、叩き台の精度が高ければ高いほど、その後の作業が速くなります。
当時の検証で作ったFigmaファイル
以下は既存記事の検証記録です。今回の改稿では再実行しておらず、表の所要時間は利用環境や入力で変わります。テスト用サービスの仮配置であり、顧客実績・認証を証明するものではありません。
テストケースとして「Because AI」（AI経理自動化SaaS）というサービスのヒアリングを入力し、ワイヤーフレームを生成しました。
ヒアリング項目がワイヤーフレームのどこに反映されるか
ヒアリングシートの回答が、ワイヤーフレームのどの要素に反映されるかの対応表です。
| カテゴリ | ヒアリング項目 | ワイヤーフレームへの反映 |
|---|---|---|
| コンテンツ | キャッチコピー | Heroセクションの見出しにそのまま配置 |
| コンテンツ | サブコピー | Hero下部に配置 |
| コンテンツ | CTA文言 | Navigation、Hero、最終CTAの3箇所に配置 |
| コンテンツ | 実績数字（5つ） | Numbersセクションで大きく表示 |
| コンテンツ | FAQ | 事業内容から5項目を自動生成 |
| デザイン | メインカラー #2563EB | CTA、アクセント、ラベルに使用 |
| デザイン | サブカラー #10B981 | 機能カード、チェックマークに使用 |
| デザイン | ファーストビュー「スプリット」 | 左テキスト + 右モックアップのレイアウト |
| デザイン | 雰囲気「モダン・先進的」 | ダークセクション多め、広い余白 |
| 構造 | 10セクション選択 | 選択した10セクション全てを生成 |
| NG | 「ストックイラスト不使用」 | グレープレースホルダーのみ |
| 追加要望 | 料金3段階（Standard強調） | Pricingカード3枚、中央をダーク背景 + バッジで強調 |
| 追加要望 | セキュリティバッジ | 当時の検証用の仮配置。実際の認証を主張しない |
28項目中14項目が直接反映されます。残りの項目（ターゲット情報、事業内容など）は、セクションのコピーやFAQの質問生成に間接的に使われます。
FigmaとCanvaの使い分け
元記事では同じヒアリング情報を使ったFigma/Canvaでの検証を紹介していました。これは当時の接続と出力の比較であり、各製品で可能なことを一律に決めるものではありません。
実制作へ渡す場合は編集可能なフレーム、レイヤー、配置、文字を確認します。提案のイメージとして使う場合は情報の正確さと見やすさを確認します。Figma/Canvaという名称だけでなく、接続先で利用できる書き込み機能と、引き継ぐ相手が必要とする成果物で選んでください。
使い方 -- デザイナーにも、個人開発者にも
このワークフローは2つの使い方ができます。
デザイナー向け: クライアントにフォームURLを送るだけ
ヒアリングシートのフォームURLをクライアントに送るだけで、構造化された回答が返ってきます。口頭ヒアリングのスケジュール調整も不要です。
項目はカスタマイズ可能です。業種ごとに聞くべきことが違うなら、フォームを複製して項目を調整すればいい。FORMLOVAのチャットで「このフォームを複製して、飲食店向けにアレンジして」と伝えれば、下書きが出ます。
個人開発者向け: セルフヒアリングとして使う
自分のサービスサイトを作るとき、いきなりFigmaを開いて手が止まった経験はないでしょうか。何をどこに置くか、キャッチコピーは何か、CTAの文言は何か。考えることが多すぎて、画面が真っ白のまま時間が過ぎます。
このヒアリングシートに自分で答えてみてください。28項目に答えていくと、「何を作るべきか」を整理しやすくなります。そして回答が終わったら、そのままFigmaワイヤーフレームを自動生成できます。
プロンプトの使い方
このワークフローに必要なプロンプトは2つあります。どちらもFORMLOVAのWorkflow Placeに公開しているので、ワンクリックでコピーできます。
レシピ1: ヒアリングシート自動生成
5ステップ28項目のフォーム定義を含むプロンプトです。フィールド名、型、選択肢、ページ番号まで全て指定しているので、保存された項目・型・選択肢・ページを確認して使います。
ウェブサイト制作用のヒアリングシートをFORMLOVAで作成してください。
以下の5ステップ構成で、マルチページフォームとして作ってください。
## フォーム設定
- タイトル: ウェブサイト制作ヒアリングシート
- 説明: サイト制作に必要な情報をお聞きします。ご記入いただいた内容をもとにデザインラフを作成しますので、できるだけ具体的にご回答ください。所要時間は約10分です。
- 言語: 日本語
- デザイン: 背景色 #FAFAF8、プライマリ #1A1A1A、アクセント #2563EB、フォント Noto Sans JP、角丸 6、余白 28
## Step 1: ビジネスについて（ページ 0）
- [statement] 「Step 1: ビジネスについて」説明: まずはあなたのビジネスのことを教えてください。サイトの土台となる情報です。
- [text/必須] 会社名またはサービス名
- [textarea/必須] 事業内容を一言で教えてください — 説明: 初めて会った人に30秒で説明するとしたら、どう伝えますか？
- [dropdown/必須] 業種 — 選択肢: IT / SaaS, コンサルティング / 士業, 小売 / EC, 飲食 / フード, 教育 / スクール, 医療 / ヘルスケア, クリエイティブ / デザイン, 不動産 / 建設, 製造 / メーカー, NPO / 社会貢献, その他
- [textarea/必須] 競合と比べたときの、一番の強み・違いは何ですか？ — 説明: お客様があなたを選ぶ理由を教えてください。
## Step 2: ターゲットとゴール（ページ 1）
- [statement] 「Step 2: ターゲットとゴール」説明: 誰に向けたサイトで、見た人にどうなってほしいかを教えてください。ここが明確だと、デザインの方向性がブレません。
- [textarea/必須] メインのターゲットユーザーを教えてください — 説明: 年齢層、職業、役職、抱えている課題や悩みなど、具体的に書くほどデザインに反映できます。
- [dropdown/必須] サイトを見た人に最終的にしてほしいアクションは？ — 説明: 一番重要なコンバージョンを1つ選んでください。選択肢: お問い合わせ / 相談予約, 商品購入 / 申し込み, 資料ダウンロード / ホワイトペーパー, 会員登録 / 無料トライアル, 来店 / 来場, 電話
- [textarea/必須] そのアクションを起こす「決め手」は何だと思いますか？ — 説明: お客様が「ここにしよう」と決断する最大の理由を教えてください。これをサイトで最も目立たせます。
## Step 3: 掲載コンテンツ（ページ 2）
- [statement] 「Step 3: 掲載コンテンツ」説明: サイトに載せたい内容を教えてください。コピーや数字が具体的であるほど、完成度の高いデザインラフが出ます。
- [textarea/必須] キャッチコピー（ファーストビューの一言） — 説明: まだ決まっていなければ「伝えたいニュアンス」だけでも大丈夫です。
- [textarea] サブコピー（キャッチコピーを補足する2〜3行）
- [text/必須] CTAボタンの文言 — placeholder: 例: 無料で試してみる / まずは相談する
- [textarea] 掲載したい実績・数字 — 説明: 信頼感を生む具体的な数字があれば教えてください。
- [multi_select/必須] サイトに含めたいセクション — 選択肢: ヒーロー（キャッチコピー + CTA）, 課題提起（ターゲットの悩み）, 解決策（サービスの特徴）, 機能紹介 / 3つの強み, 実績・数字, 料金プラン, 導入事例 / お客様の声, ご利用の流れ, よくある質問, チーム紹介 / 会社概要, ブログ / お知らせ, 最終CTA（ページ下部の行動喚起）, お問い合わせフォーム
## Step 4: デザインの方向性（ページ 3）
- [statement] 「Step 4: デザインの方向性」説明: ここが一番大事です。ビジュアルの好みを教えてください。「こういう感じ」という画像があると精度が格段に上がります。
- [dropdown/必須] サイト全体の雰囲気 — 選択肢: モダン・先進的（テック企業、スタートアップ）, 温かみ・親しみやすい（教育、福祉、地域密着）, 高級感・洗練（ブランド、ハイエンドサービス）, ミニマル・クリーン（余白重視、写真主役）, 大胆・ダイナミック（スポーツ、エンタメ）, 信頼感・堅実（金融、法律、医療）
- [text/必須] メインカラー — 説明: ブランドカラーがあればカラーコードを、なければ「青系」のように方向性だけでOK
- [text] サブカラー（あれば）
- [dropdown/必須] フォントの方向性 — 選択肢: ゴシック体（モダン、テック感）, 明朝・セリフ体（格調、高級感）, 丸ゴシック（親しみやすさ）, 幾何学的サンセリフ（洗練、ミニマル）, おまかせ
- [dropdown/必須] ファーストビューの構成 — 選択肢: 大きな写真 + テキストオーバーレイ, 左テキスト + 右画像（スプリット）, イラスト + テキスト, テキスト中心（写真なし）, 動画背景
- [textarea] 参考にしたいサイトやデザイン
- [textarea] これだけは避けてほしいデザイン
## Step 5: 素材とご要望（ページ 4）
- [statement] 「Step 5: 素材とご要望」説明: 最後に、お手元の素材と追加のご要望を教えてください。ロゴや写真があると、デザインラフの完成度が大きく上がります。
- [file] ロゴ画像 — 説明: PNG / SVG / PDF いずれかでお送りください。まだない場合はスキップしてください。
- [file] サイトに使いたい写真素材
- [file] 参考デザインのスクリーンショット
- [textarea] その他のご要望
作成後、プレビューURLを表示してください。
レシピ2: ヒアリング回答 → Figma LPワイヤーフレーム生成
レシピ1で作成したヒアリングシートに回答が集まったら、以下のプロンプトを貼り付けて実行します。フォームIDは自分のものに差し替えてください。FORMLOVAと、作成・編集可能なFigmaツールに接続済みで、対象ファイルの権限があることが前提です。未対応なら構成案までに留めます。
以下の手順で、FORMLOVAのヒアリングシート回答をもとにFigmaでLPワイヤーフレームを自動生成してください。
## Step 1: 回答データの取得
FORMLOVAから最新の回答を取得してください。
- フォームID: [ここにフォームIDを入力]
## Step 2: Figmaファイル作成
利用できる作成・編集ツールと権限を確認してください。新規作成できる場合のみ、回答の「会社名またはサービス名」を使って作成してください。未対応なら編集可能な既存ファイルを指定するか、構成案として返してください。
- ファイル名: [会社名] - LP Wireframe
## Step 3: ワイヤーフレーム構築
回答データを以下のルールで解釈し、Figma Plugin API（use_figma）でワイヤーフレームを構築してください。
### 基本設計ルール
- 幅: 1440px（デスクトップ）
- フレーム: 縦方向Auto Layout、セクションごとにFILL幅
- カラー: 回答の「メインカラー」「サブカラー」をアクセントに使用。ベースはグレースケール（ワイヤーフレームなので）
- フォント: Inter（Regular / Medium / Semi Bold / Bold / Light）
- 画像: グレーのプレースホルダー（角丸8px、ラベル付き）
- 余白: セクション間0px（内部padding 80px上下、120px左右）
- 影: cards に DROP_SHADOW（a: 0.04, y: 2, radius: 16）
### セクション構築ルール
回答の「サイトに含めたいセクション」で選択されたものだけを、以下の対応表に従って構築する。選択されていないセクションはスキップする。
| 選択肢 | セクション名 | 構築内容 |
|--------|-------------|---------|
| hero | Navigation + Hero | ナビバー（ロゴ + メニュー + CTAボタン）+ ファーストビュー。「ファーストビューの構成」回答に従いレイアウト。キャッチコピー、サブコピー、CTAボタン文言は回答そのまま使用 |
| problem | 課題提起 | 「こんなお悩みありませんか？」+ 3枚のカード。ターゲットユーザーの回答から課題を3つ抽出してカード化 |
| solution | 解決策 | 「[サービス名]なら、すべて解決します」+ 3ステップのフロー図。事業内容と強みの回答から構成 |
| features | 機能紹介 | 「3つの強み」+ 3枚のカード。強みの回答から3つ抽出。メインカラーとサブカラーでアクセント |
| numbers | 実績・数字 | ダーク背景。実績数字の回答をパースして大きな数字で横並び表示 |
| pricing | 料金プラン | 3段階のプランカード。その他の要望に料金情報があれば反映。中央のプランを強調（ダーク背景 + バッジ） |
| cases | 導入事例 | 承認済みの事例と引用だけを配置。未提供なら「事例素材未提供」の枠に留め、顧客の声や会社情報を捏造しない |
| flow | ご利用の流れ | 4ステップのフロー。番号付きカード + 矢印で接続 |
| faq | FAQ | 「よくある質問」+ 5項目のQ&A。事業内容から適切な質問を生成 |
| team | チーム紹介 | 会社概要 + チームメンバープレースホルダー |
| blog | ブログ | 記事カードグリッド（2x3） |
| cta_bottom | 最終CTA | 見出し + CTAボタン。認証・バッジは保有と使用許可を確認できたものだけ。未確認なら置かない |
| contact | お問い合わせ | フォーム（名前 / メール / 内容）+ 送信ボタン |
### 「雰囲気」の解釈
| 回答値 | 余白 | カード角丸 | コントラスト |
|--------|------|-----------|------------|
| modern_tech | 広め | 12px | 高（ダークセクション多め） |
| warm_friendly | 普通 | 16px | 低（柔らかい色） |
| luxury_refined | 広め | 4px | 高（シャープ） |
| minimal_clean | 最大 | 8px | 中 |
| bold_dynamic | 狭め | 12px | 最高 |
| trustworthy | 普通 | 8px | 中（青・紺系） |
### 「ファーストビューの構成」の解釈
| 回答値 | レイアウト |
|--------|----------|
| photo_hero | 全幅ダーク背景 + 中央テキスト + プレースホルダー画像 |
| split | 左テキスト（60%）+ 右プレースホルダー（40%）、HORIZONTAL |
| illustration | 左テキスト + 右イラストプレースホルダー |
| text_centered | 中央揃えテキストのみ、広い余白 |
| video_bg | ダーク背景 + 中央テキスト + 「動画背景」ラベル |
### NGデザインの反映
「これだけは避けてほしいデザイン」の回答内容を確認し、該当する要素を使わない。例:
- 「ごちゃごちゃ」→ 余白を多めに
- 「安っぽいイラスト」→ イラストプレースホルダーを使わない
### 最後にフッター
すべてのセクションの後に必ずフッターを追加:
- ダーク背景
- 左: 会社名 + 住所（その他の要望から抽出 or プレースホルダー）
- 中央: サービスリンク
- 右: 会社情報リンク
- 最下部: コピーライト
## Step 4: 完了報告
生成したFigmaファイルのURLを表示し、ヒアリングシートの各項目がワイヤーフレームのどのセクションに反映されたかのチェックリストを出してください。
このワークフローはFORMLOVAのWorkflow Placeにレシピとして公開しています。プロンプトをコピーしてそのまま使えます。
まとめ
まずヒアリングの各質問が、LPのどの構成判断に使われるかを対応させます。上の短いテキスト版ならFreeで下書き・プレビューを試せます。長いテンプレートのファイル項目はStandard以上です。
実回答が集まった後は、確認済みの事実と不明点を分けて構成案を作ります。Figmaに書き込めるツール・権限がある場合にだけ編集可能な叩き台へ進み、回答との対応表、未提供の素材、架空の実績が混ざっていないかをデザイナーが確認してください。
外部メディアでも読めます
- Zenn: Figma Plugin APIでLPワイヤーフレームをコードから構築する
- note: 100件のサイト制作で学んだ「ヒアリングで一番大事な質問」
- Qiita: Figma Plugin APIでLPワイヤーフレームを自動生成する実践ガイド
関連する記事
- ヒアリングシートテンプレート｜Web制作・商談・採用の質問例
- FORMLOVAでフォームを作る方法まとめ
- スクショを送ってフォームのデザインを合わせる方法
- Workflow Placeからレシピを見つけて、チャットで設定する方法
- FORMLOVAと主要フォームサービスの違い
- フォームをワンショットで下書きする方法
あわせて確認する資料・関連記事
執筆・確認情報
この記事はFORMLOVAの自社ブログ記事です。筆者はFORMLOVAの開発者です。公開時点の公式情報を確認して執筆しています。料金、機能、上限値などの条件は変更される可能性があるため、最新情報は各サービスの公式ページで確認してください。個人情報、採用、法務、医療、金融に関わるフォーム運用は、各社の規程や専門家の確認に合わせてください。
