「キャンペーン用のLPがほしいが、制作会社に頼むと時間も費用もかかる」「自分で作りたいがデザインもコードも書けない」——LP（ランディングページ）は、AIエージェント活用の効果がもっとも分かりやすく出る制作物のひとつです。
この記事では、AIエージェントでLPを企画→設計→デザイン→実装→公開まで一気通貫で作るワークフローを解説します。内容は当スクールの法人研修・オンラインコースの教材（LP/HP制作モジュール）をベースにしています。
この記事でわかること
- LP（ランディングページ）とは何か、AIで作る意味
- AI LP制作の全体ワークフロー（5ステップ）
- 訴求の整理 — ヒアリング・ペルソナ・コピーをAIと作る
- ワイヤーフレームによる情報設計
- デザイン作成とHTML/Tailwind CSSへの変換
- Vercelで世界に公開する手順
- 段階的なスキルアップの進め方と注意点
LPとは — AIで作る意味
LP（ランディングページ）とは、商品販売や申込み獲得など特定の目的のために作る1枚の専用Webページです。訪問者に特定のアクション（購入・問い合わせ・登録）を促すことに特化しています。
AIで作る意味は明確で、デザイナーやエンジニアに依頼しなくても、思い立ったその日に公開まで到達できることです。教材では制作時間を従来の10分の1に短縮することを目標にしています。LPは「とりあえず出して、反応を見て改善する」のが鉄則なので、数時間で作って公開できるスピードはそのまま施策の試行回数に直結します。
全体ワークフロー — 5ステップ
AIによるLP制作は、次の5ステップで進めます。
| ステップ | やること | 成果物 |
|---|---|---|
| 1. 訴求の整理 | ヒアリング・ペルソナ定義・コピー生成 | 訴求ブリーフ |
| 2. ワイヤーフレーム | セクション構成と要素配置の設計 | ASCII/ビジュアルWF |
| 3. デザイン | デザインツールでプロ品質のビジュアル作成 | デザインファイル |
| 4. 実装 | HTML/Tailwind CSS/JSへの変換 | 動くLP |
| 5. デプロイ | Vercelでプレビュー→本番公開 | 公開URL |
ポイントは、コーディングを最後まで遅らせることです。先に訴求と構成を言葉と図で固め、人間がレビューしてからコードに進むため、手戻りが激減します。
ステップ1: 訴求の整理 — いきなり作らせない
LP制作で最初に固めるべきは「誰に・何を・どう訴えるか」です。AIエージェントには、いきなり「LPを作って」と頼むのではなく、まず構造化ヒアリングをさせます。
- AIに「サービス名・ターゲット層（年齢/職種）・解決する課題・競合との差別化ポイント」を質問形式でヒアリングさせる
- 回答をもとにペルソナ定義書とベネフィット一覧を作成させる
- ヘッドライン（ヒーローコピー）を複数案（例: 3案）生成させ、人間が選ぶ
「AIが質問し、人間が答える」という逆向きの対話にすることで、要件の曖昧さが解消され、コピーの精度が大きく上がります。コピー量産や言い回しの磨き込みは AIマーケティング自動化ガイド のコピーライティング手法も参考になります。
ステップ2: ワイヤーフレーム — 情報設計を先に固める
次に、ページのセクション構成を設計します。LPの定番構成は次の流れです。
- ヒーロー（キャッチコピー＋CTA）
- 課題提起
- 解決策
- 特徴3つ
- 導入事例（社会的証明）
- CTA（行動喚起）
- FAQ
この構成を、まずASCIIワイヤーフレーム（テキストのボックス記法）でAIに出力させます。テキストなので修正・共有が速く、構成レビューに最適です。必要に応じて図解生成ツールでグレーボックスのビジュアルWFに起こすと、非デザイナーのチーム内でも合意形成がしやすくなります。
ステップ3〜4: デザインとHTML/Tailwind実装
構成が固まったら、デザインツールでビジュアルを作ります。教材ではAIエージェントから操作できるキャンバス型デザインツールPencil（MCP経由で接続）を使い、ブランドカラー・ヒーロー画像・CTAボタンを含むデザインファイルをAIに生成させ、スクリーンショットで確認しながら調整します。Figmaのような操作感で、デザインからHTML/Tailwind CSSへの自動変換に対応しているのが特徴です。
実装ステップでは、デザインをHTML + Tailwind CSS + JSに変換します。
- レスポンシブ対応（モバイル/タブレット/デスクトップ）
- スクロールアニメーション、CTAボタンのホバーエフェクト
- FAQアコーディオンなどのインタラクション
教材の構成ではTailwind CSSはCDN版を使うため、npm installなどの環境構築は不要です。ブラウザで開いて表示確認できるシンプルな構成から始められます。
ステップ5: Vercelデプロイ — 世界に公開する
Vercelとは、フロントエンド向けのホスティング／デプロイ基盤です。LPの公開先として教材で採用している理由は3つあります。
- プレビューURL — 変更内容をブラウザですぐ共有できる
- CDN配信 — 静的コンテンツを高速配信できる
- Git連携 — 自動デプロイにも対応している
公開手順はターミナルから数コマンドです。
- Vercel CLIをインストールする（例:
npm i -g vercel。Node.js 18+が前提） vercel loginで初回認証する- プロジェクトのフォルダで
vercelを実行 → プレビューURLが発行される - 内容を確認して問題なければ
vercel --prodで本番公開 - 必要に応じてカスタムドメインを設定する
Vercelは無料プランで始められ、クレジットカード登録も不要です。「プレビューで確認→本番反映」という2段階を踏むことで、公開事故も防げます。
段階的なスキルアップ — 3ステージで進める
教材では、いきなりフルワークフローではなく3段階で習熟する構成を取っています。
| ステージ | 内容 | 使う技術 |
|---|---|---|
| Stage 1: テキストベースLP | ヒアリング→ASCII WF→HTML/CSS直接生成 | HTML/CSSのみ |
| Stage 2: HP制作 | 複数ページ構成・ナビゲーション・レスポンシブ | マルチセクション構成 |
| Stage 3: デザイン+デプロイ | プロ品質デザイン→コード変換→公開 | Pencil + Vercel |
まずStage 1で「AIとの対話でページが形になる」体験を作り、デザイン品質と公開フローを段階的に追加していくのが挫折しない進め方です。
注意点
- デザインファイルの扱い — 教材で使うPencilの .pen ファイルは暗号化されており、テキストエディタでは開けません。専用ツール経由で操作します
- ヒアリングを省略しない — 訴求が曖昧なままAIに丸投げすると、それらしいが刺さらないLPになります。指示の質を上げる基本は プロンプトエンジニアリング実践入門 を参照してください
- 公開後の改善が本番 — LPは公開してからの反応測定と改善が本体です。作って終わりにしない運用を設計しましょう
よくある質問
Q. デザインやコーディングの経験がなくてもLPを作れますか？ A. 作れます。訴求整理・ワイヤーフレーム・デザイン・HTML/Tailwind実装・公開までの各工程をAIエージェントが担い、人間は「何を訴求したいか」への回答と各工程のレビューに集中します。必要なのはコーディング力ではなく、自社サービスの強みを言葉で答えられることです。
Q. どのくらいの時間でLPを公開できますか？ A. 教材のフルワークフロー（訴求整理→WF→デザイン→実装→デプロイ）は合計約120分の構成です。シンプルなテキストベースLPであればさらに短時間で形になります。従来の外注で数週間かかっていた工程を1日以内に圧縮できるのがAI制作の利点です。
Q. 公開（ホスティング）に費用はかかりますか？ A. Vercelの無料プランで始められ、登録にクレジットカードも不要です。プレビューURLでの確認、本番公開、CDN配信まで無料枠で利用できます。独自ドメインを使う場合はドメイン取得費用が別途必要です。
Q. AIに最初に何を伝えればよいですか？ A. 逆に「AIに質問させる」のがコツです。サービス名・ターゲット層・解決する課題・競合との差別化ポイントをAIからヒアリングさせ、回答をもとにペルソナ定義とヒーローコピー案を作らせます。最初に訴求ブリーフを固めることで、後工程の品質が安定します。
Q. 作ったLPの集客はどうすればよいですか？ A. LP公開はスタート地点で、SNS投稿・SEO・メール配信などの集客施策とセットで運用します。X投稿の自動生成・SEO監査・メールのドリップキャンペーンといったマーケティング自動化の方法は、関連記事のAIマーケティング自動化ガイドで解説しています。
関連記事
- AIマーケティング自動化ガイド（X投稿・SEO監査・コピー・メール配信）
- プロンプトエンジニアリングとは？AIエージェント時代の実践入門
- GitHub ActionsでAIエージェントを定期実行する方法
- 生成AIとは？法人の業務自動化とAIエージェント活用の基礎
- 法人向けAIエージェント研修（ハンズオン）
最終確認日: 2026-06-10