ヒアリング回答からFigma LPワイヤーフレーム自動生成
営業・リード獲得Free
説明
FORMLOVAに集まったウェブサイト制作ヒアリングの回答データを取得し、Figma MCPのPlugin APIを使ってLPのワイヤーフレームを自動構築するMCP横断ワークフローです。キャッチコピー、CTA文言、実績数字、料金プラン、FAQ等のコンテンツをそのままワイヤーフレームに配置。カラー、レイアウト構成、雰囲気の選択もデザインに反映されます。デザイナーへの引き継ぎ資料として、またクライアントへの初回提案資料としてそのまま使えるFigmaファイルが生成されます。「ウェブサイト制作ヒアリングシート自動生成」レシピと組み合わせて使うと効果的です。
4ステップ
- 1
FORMLOVA 回答データ取得
ヒアリングシートの最新回答を取得
- 2
Figma ファイル作成
回答の会社名でFigmaデザインファイルを新規作成
Figma - 3
ワイヤーフレーム構築
回答データからLPの全セクションをPlugin APIで構築
Figma - 4
反映チェックリスト出力
各ヒアリング項目がどのセクションに反映されたかを一覧表示
Figma
セットアップ手順
セットアップ手順
このワークフローには外部サービスとの連携が含まれます。以下の手順に従ってセットアップしてください。
- 1
FORMLOVA 回答データ取得
ヒアリングシートの最新回答を取得
連携サービス: FORMLOVA - 2
Figma ファイル作成
回答の会社名でFigmaデザインファイルを新規作成
連携サービス: Figma - 3
ワイヤーフレーム構築
回答データからLPの全セクションをPlugin APIで構築
連携サービス: Figma - 4
反映チェックリスト出力
各ヒアリング項目がどのセクションに反映されたかを一覧表示
連携サービス: 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。画像はグレーのプレースホルダー(角丸8px、ラベル付き)。
セクション構築: 回答の「サイトに含めたいセクション」で選択されたものだけを構築。
- hero = ナビ + ファーストビュー。キャッチコピー・サブコピー・CTA文言は回答そのまま使用。レイアウトは「ファーストビューの構成」回答に従う(split=左テキスト+右モックアップ、photo_hero=全幅ダーク背景+中央テキスト、text_centered=中央揃えテキストのみ)
- problem = 「こんなお悩みありませんか?」+ ターゲット情報から課題を3つ抽出してカード化
- solution = 「[サービス名]なら、すべて解決します」+ 事業内容と強みから3ステップフロー図
- features = 「3つの強み」+ 強みの回答から3枚カード。メインカラーとサブカラーでアクセント
- numbers = ダーク背景。実績数字の回答をパースして大きな数字で横並び表示
- pricing = 3段階プランカード。中央を強調(ダーク背景+おすすめバッジ)。その他の要望に料金情報があれば反映
- cases = 「導入企業の声」+ 3社のテスティモニアルカード(引用符+アバタープレースホルダー+会社情報)
- flow = 「ご利用の流れ」+ 4ステップの番号付きカード + 矢印で接続
- faq = 「よくある質問」+ 事業内容から適切な5項目のQ&Aを生成
- cta_bottom = ダーク背景 + 行動喚起見出し + CTAボタン + セキュリティバッジ(ISMS等)
- 最後にフッター(会社情報 + サービスリンク + コピーライト)
雰囲気の解釈: modern_tech=ダークセクション多め・広い余白、warm_friendly=柔らかい色・角丸大きめ、luxury_refined=シャープ・角丸小さめ、minimal_clean=最大余白、trustworthy=紺系
NGデザインの反映: 「これだけは避けてほしいデザイン」の回答を確認し、該当要素を使わない。
Step 4: FigmaファイルのURLを表示し、ヒアリング項目ごとの反映チェックリストを出してください。
いいね
- ステップ
- 4ステップ
- 必要なプラン
- Free
- 必要な連携
- FORMLOVAFigma