ワイヤーフレームから LP プロトタイプを作る方法｜AI で制作を加速

ワイヤーフレームは、レイアウトと情報の優先順位を決める低忠実度の設計図です。プロトタイプは、実際のコピー・配色・画像に近い状態で、クリックやスクロールの体験を確認できるものです。

LP 制作では、ワイヤーフレームだけでは「読み心地」や「CTA の目立ち方」が伝わりにくく、いきなり高忠実度デザインに進むと修正コストが膨らみます。中間の HTML プロトタイプが、企画・デザイン・開発の共通言語になります。

多くのチームがワイヤーフレームで 2〜3 週間停滞し、デザインカンプで再度大きな修正が入るパターンを繰り返します。HTML プロトタイプを早い段階で共有することで、この往復を 1 ラウンド減らせるケースが多いです。

① セクション順序と各ブロックの役割。② 見出し階層（H1 は 1 つ、H2 でセクション分割）。③ CTA の位置と数（原則 1 種類の主 CTA）。④ 必須コンテンツ（料金、実績、FAQ 等）の有無。

この段階では色やフォントの細部より、情報設計に集中します。Figma の灰ボックスでも、紙のラフでも構いません。重要なのは、関係者が「何がどこにあるか」に合意できることです。

DesignLayer を使う場合、詳細なワイヤーフレームを描く前にブリーフで 4 要素を整理し、AI 生成で HTML たたき台を得る方法も有効です。生成結果自体が、議論のたたき台になります。

構成テンプレートの詳細は「ランディングページの構成テンプレート」を参照し、セクション順のたたき台を先に決めてからワイヤーフレームに落とし込むと効率的です。

停滞ポイント 1：コピーが固まらない。→ ブリーフで Must / Want / Avoid を分け、AI 生成で初期文案を得てから推敲する。

停滞ポイント 2：デザイン方向性の対立。→ 参考サイトを 2〜3 個に絞り、「余白」「トーン」「写真の温度感」など抽象化して共有する。

停滞ポイント 3：スマホ表示の議論が後回し。→ HTML プロトタイプ段階からモバイル幅でレビューし、縦長スクロールの読み心地を確認する。

Step 1：デザインブリーフ（/brief）で、サービス概要・ターゲット・トーン・参考サイト・CTA を入力する。Step 2：AI 生成で HTML を取得し、スタジオ（/docs/studio-basics 参照）でプレビューする。

Step 3：見出し・本文・画像を差し替え、セクションの順序感を確認する。Step 4：エクスポートして Slack や Notion で共有し、コメントを集める。

1 日 1 回の AI 生成制限があるため、ブリーフを十分に詰めてから生成するのが効率的です。「デザインブリーフを書く 5 つのコツ」で入力の質を高められます。

生成後はスタジオでテキストを直接編集できるため、レビュー会議の直前に文言を微調整する運用も可能です。

プロトタイプ段階では、ピクセル単位のデザインより、メッセージの妥当性、セクション順、CTA の明確さ、モバイルでの読みやすさを確認します。

「この見出しで課題が伝わるか」「料金の不安は FAQ で解消できているか」「競合と差別化できているか」をチェックリスト化すると、レビューが散漫になりません。

大きな構成変更が必要な場合は、スタジオで部分修正するより、ブリーフを更新して再生成した方が早いこともあります。再生成すると手直しはリセットされる点に注意してください。

レビュー参加者には、事前にブリーフと CV 目標を共有し、「デザインの好み」ではなく「ビジネス目標達成か」で議論するようファシリテートすると productive です。

合意したプロトタイプは、エクスポート HTML・差し替え画像リスト・未確定事項・計測要件をセットで開発へ渡します。DesignLayer の出力はスターターコード兼仕様書として機能します。

本番では SEO、フォーム連携、Cookie 同意、パフォーマンス最適化を追加します。詳細は「プロトタイプから本番公開までの進め方」を参照してください。

ワイヤーフレームに時間をかけすぎず、早い段階で「読めるプロトタイプ」に到達することが、LP 制作全体のリードタイム短縮につながります。

制作費用の観点では、プロトタイプ段階の短縮が外注費の削減にも直結します。「ランディングページ制作の費用相場と内製化の進め方」も併せてご覧ください。

Day 1：ブリーフで目的・ペルソナ・CTA・参考サイトを整理。Day 2：AI 生成 → スタジオで全体プレビュー。Day 3-4：コピー・画像差し替え、モバイル確認。

Day 5：社内レビュー会。Day 6：フィードバック反映（大変更はブリーフ更新 → 再生成）。Day 7：エクスポート → 開発 or 外注へ引き継ぎ。

このペースは、ブリーフの質とレビューのファシリテーションに依存します。事前に CV 目標と Must 情報を関係者で合意しておくと、1 週間達成は現実的です。

プロトタイプ完成後は、必ずスマホ実機でスクロール体験を確認してください。デスクトップだけのレビューでは、モバイル特有の離脱要因を見逃しがちです。

マーケター：広告 LP のたたき台を複数パターン生成し、CTR テスト用の初期案を素早く用意する。

デザイナー：クライアントへの方向性提示資料として HTML プロトタイプを共有し、デザインカンプ前の合意を取る。

エンジニア：エクスポート HTML をスターターコードとして受け取り、コンポーネント化・CMS 連携に集中する。

経営・プロダクト：社内稟議用に「読める LP 案」を 1 週間以内に用意し、予算承認のスピードを上げる。

いずれの役割でも、プロトタイプは「完璧さ」より「議論の起点」であることをチーム内で共有すると、導入がスムーズです。

具体的な 1 週間の進め方として、月曜にブリーフ整理 → 火曜に AI 生成 → 水〜木にスタジオ編集 → 金曜にレビュー会、というサイクルを回すチームも増えています。