LP のワイヤーフレームとプロトタイプの作り方｜AI 活用で1週間に短縮する手順

公開日: 2026年5月26日 · 読了目安 9 分

LP のワイヤーフレームからプロトタイプを作る手順を解説します。決めるべき4要素、AI 生成の活用法、レビューの進め方、1週間で完成させるスケジュール例まで。制作初期の停滞を解消したい方は必読です。

ワイヤーフレームとプロトタイプの違い｜LP 制作に必要なのはどっちか

結論から言うと、LP 制作で最も価値があるのは「読める HTML プロトタイプ」です。ワイヤーフレームだけでは読み心地や CTA の目立ち方が伝わらず、いきなり高忠実度デザインに進むと修正コストが膨らむからです。

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

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

ワイヤーフレーム段階で決めるのは、次の4つだけで十分です。

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

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

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

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

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

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

DesignLayer を使えば、プロトタイプは4ステップで用意できます。

ステップ1：デザインブリーフ（/brief）で、サービス概要・ターゲット・トーン・参考サイト・CTA を入力します。

ステップ2：AI 生成で HTML を取得し、スタジオでプレビューします。

ステップ3：見出し・本文・画像を差し替え、セクションの順序感を確認します。生成後のテキストはスタジオで直接編集できるため、レビュー会議の直前に文言を微調整する運用も可能です。

ステップ4：公開 URL や HTML を Slack や Notion で共有し、コメントを集めます。

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

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

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

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

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

Day 1：ブリーフで目的・ペルソナ・CTA・参考サイトを整理。

Day 2：AI 生成 → スタジオで全体プレビュー。

Day 3〜4：コピー・画像差し替え、モバイル確認。

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

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

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

内容を確認したら、公開 URL を発行するか HTML をエクスポートします。高度なカスタマイズが必要な場合は、エクスポート HTML・差し替え画像リスト・計測要件を開発へ渡せます。

本番では SEO、フォーム連携、Cookie 同意、パフォーマンス最適化を追加します。詳細は「AI 生成サイトを公開するまでの手順」を参照してください。

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

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

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

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

エンジニア：エクスポート HTML を受け取り、コンポーネント化・CMS 連携に集中できます。

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

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