サイト制作で最も手戻りが起きやすいのは、初回ヒアリングです。ここで聞き漏らすと、デザインラフの段階で「思っていたのと違う」が発生します。クラウドワークス含めると200件以上のサイト制作を受注してきた経験から、これは確信しています。現在はFORMLOVAの開発に注力していますが、この記事で紹介するワークフローは、その実務経験を土台にしています。
聞くべきことは毎回ほぼ同じなのに、口頭で聞いたり、チャットでバラバラに確認したり、議事録をまとめたり。毎回同じ労力がかかります。聞くべきことが決まっているなら、フォームにしてしまえばいい。そしてMCP連携を使えば、ヒアリングの回答からFigmaのワイヤーフレームまで自動生成できます。ここさえ押さえておくと、解像度の高いサイト制作が可能です。
なぜヒアリングをフォームにするのか
口頭ヒアリングには3つの問題があります。
情報が散らばる。 Zoomで聞いた内容、Slackで追加確認した内容、メールで送られたロゴデータ。1箇所にまとめる作業が毎回発生します。
聞き漏らしが起きる。 話が脱線して肝心な質問を飛ばすと、あとから追加で確認することになります。特に「避けてほしいデザイン」や「ファーストビューの構成」は抜けやすい項目です。
議事録の手間がかかる。 1時間のヒアリング + 30分の議事録作成。合計1時間半が毎回消えます。
フォームにすると、これらが一気に解決します。回答は構造化された状態で届くので散らばらず、項目が並んでいるので抜け漏れも起きず、議事録を作る必要もありません。そしてクライアント側にも考える時間ができるので、回答の質が上がります。
ヒアリングシートの設計 -- 5ステップ28項目
ヒアリングシートは5ステップのマルチページフォームとして設計しています。28項目あります。
なぜ5ステップか
1つのページに28項目を並べると、クライアントは開いた瞬間に閉じます。5ステップに分けることで、1ページあたり5〜7問。心理的な負担が大幅に下がります。
ステップの順序にも意図があります。
| ステップ | 内容 | 意図 |
|---|---|---|
| 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ワイヤーフレームを自動生成する
ヒアリングシートをフォーム化しただけでも十分便利ですが、ここからが本題です。MCP連携を使えば、ヒアリングの回答データからFigmaのワイヤーフレームまで自動生成できます。
MCPオーケストレーションの仕組み
FORMLOVAとFigmaの両方がMCPサーバーとして動作しています。Claude DesktopやCursorなどのMCPクライアントに両方を接続すると、LLMがオーケストレーターとして2つのサービスを横断して処理を実行します。
流れはこうなります。
- FORMLOVAからヒアリングシートの最新回答を取得する
- 回答データを解釈して、Figmaに新しいデザインファイルを作成する
- Figma Plugin APIでセクションごとにワイヤーフレームを構築する
- 完成したFigmaファイルのURLを返す
やることは、プロンプトを貼り付けて実行するだけです。
所要時間
| 作業 | 時間 |
|---|---|
| ヒアリングシートの生成（レシピ1） | 約2分 |
| テスト回答の入力 | 約1分 |
| Figmaワイヤーフレーム生成（レシピ2） | 約3分 |
| 合計 | 約7分 |
従来のフローでは、ヒアリング1時間 + 議事録30分 + ワイヤーフレーム作成3〜4時間で、最低でも半日はかかります。もちろん、自動生成されたワイヤーフレームがそのまま最終成果物になるわけではありません。デザイナーが手を入れる前提の「叩き台」です。ただ、叩き台の精度が高ければ高いほど、その後の作業が速くなります。
生成された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枚、中央をダーク背景 + バッジで強調 |
| 追加要望 | セキュリティバッジ | 最終CTAにISMS等3種を配置 |
28項目中14項目が直接反映されます。残りの項目（ターゲット情報、事業内容など）は、セクションのコピーやFAQの質問生成に間接的に使われます。
FigmaとCanvaの使い分け
同じヒアリングデータを使って、Canva MCPでもデザイン生成を検証しています。結論として、用途が異なります。
Figmaは構造的に正確なワイヤーフレームを出力します。1440px幅、Auto Layout、セクションごとにフレームが分かれている。デザイナーがそのまま作業を引き継いで、色やタイポグラフィを調整し、画像を差し替えれば実制作に入れます。
Canvaはテンプレートベースなので見栄えはしますが、LPのワイヤーフレームとしてはそこから実制作に引き継ぐ構造になっていません。プレゼン資料や提案書に貼るイメージとしては使えます。実制作に引き継ぐなら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の両方のMCPサーバーに接続済みであることが前提です。
以下の手順で、FORMLOVAのヒアリングシート回答をもとにFigmaでLPワイヤーフレームを自動生成してください。
## Step 1: 回答データの取得
FORMLOVAから最新の回答を取得してください。
- フォームID: [ここにフォームIDを入力]
## Step 2: Figmaファイル作成
取得した回答の「会社名またはサービス名」を使って、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 | 導入事例 | 「導入企業の声」+ 3枚のテスティモニアルカード。引用符 + アバタープレースホルダー + 会社情報 |
| flow | ご利用の流れ | 4ステップのフロー。番号付きカード + 矢印で接続 |
| faq | FAQ | 「よくある質問」+ 5項目のQ&A。事業内容から適切な質問を生成 |
| team | チーム紹介 | 会社概要 + チームメンバープレースホルダー |
| blog | ブログ | 記事カードグリッド（2x3） |
| cta_bottom | 最終CTA | ダーク背景 + 見出し + CTAボタン + 信頼バッジ（ISMS等） |
| 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にレシピとして公開しています。プロンプトをコピーしてそのまま使えます。
まとめ
ヒアリングのフォーム化は、地味ですが効果が大きい改善です。情報の散らばりがなくなり、聞き漏らしがなくなり、議事録の手間がなくなる。クライアント側にも考える時間ができるので、回答の質が上がります。
重要なのは、自動生成の品質はヒアリングシートの設計に依存するということです。何を聞くか、どんな選択肢を出すか、どの順序で聞くか。28項目の設計が、そのままワイヤーフレームの精度に直結します。
Workflow Placeに公開しているレシピは、そのまま使っても、自分の業種や案件に合わせてカスタマイズしても構いません。ヒアリングの質が上がれば、デザインの質も上がります。
