ヒアリング回答からFigma LPワイヤーフレーム自動生成

営業・リード獲得Free

説明

FORMLOVAに集まったウェブサイト制作ヒアリングの回答データを取得し、Figma MCPのPlugin APIを使ってLPのワイヤーフレームを自動構築するMCP横断ワークフローです。キャッチコピー、CTA文言、実績数字、料金プラン、FAQ等のコンテンツをそのままワイヤーフレームに配置。カラー、レイアウト構成、雰囲気の選択もデザインに反映されます。デザイナーへの引き継ぎ資料として、またクライアントへの初回提案資料としてそのまま使えるFigmaファイルが生成されます。「ウェブサイト制作ヒアリングシート自動生成」レシピと組み合わせて使うと効果的です。

4ステップ

  1. 1

    FORMLOVA 回答データ取得

    ヒアリングシートの最新回答を取得

  2. 2

    Figma ファイル作成

    回答の会社名でFigmaデザインファイルを新規作成

    Figma
  3. 3

    ワイヤーフレーム構築

    回答データからLPの全セクションをPlugin APIで構築

    Figma
  4. 4

    反映チェックリスト出力

    各ヒアリング項目がどのセクションに反映されたかを一覧表示

    Figma

セットアップ手順

セットアップ手順

このワークフローには外部サービスとの連携が含まれます。以下の手順に従ってセットアップしてください。

  1. 1

    FORMLOVA 回答データ取得

    ヒアリングシートの最新回答を取得

    連携サービス: FORMLOVA
  2. 2

    Figma ファイル作成

    回答の会社名でFigmaデザインファイルを新規作成

    連携サービス: Figma
  3. 3

    ワイヤーフレーム構築

    回答データからLPの全セクションをPlugin APIで構築

    連携サービス: Figma
  4. 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

同じカテゴリのワークフロー