はじめに

「AIにLPを作らせてみたけど、なんか違う…」
そう感じたことはありませんか？

それはAIの能力不足ではなく、「設計プロセス」の欠如が原因かもしれません。本講義では、既存のLP（ランディングページ）を題材に、AI Web Architectと最新のGemini 3モデルを連携させ、驚くほど高品質なWebサイトを一撃で構築するワークフローを実演します。

単にコードを出力させるだけでなく、AIを「優秀なパートナー」として扱い、対話を通じてクオリティを高めていくプロの手法を習得してください。

使用機能と環境

今回の実演で使用する主なツールと機能です。

• Google AI Studio (Gemini 3 / Gemini 2.5 Flash): 最新の推論能力を持つAIモデル。コード生成と対話のメインエンジンとして使用。
• AI Web Architect (Local Tool):
  • Input Folder: 膨大な資料をAIに読み込ませるための入り口。
  • Universal Prompt Generator: LLMに最適化された長文プロンプトを生成する機能。
• VS Code (Visual Studio Code): ソースコードの編集と文字コード変換に使用。

実演ワークフロー解説

Step 1: 素材のデジタル化とコンテキスト共有

まずはAIに「現状」を理解させることがスタートラインです。

1. 既存サイトのソース化: 参考にしたいLPや既存サイトがある場合、ブラウザの「ソースを表示」からHTMLをコピーし、テキストファイル（例: lp.txt）として保存します。
2. 文字コードの罠を回避: 日本語サイトの場合、文字化けを防ぐためにVS Code等で「UTF-8 with BOM」形式で保存し直します。このひと手間がエラーを防ぎます。
3. AI Studioへアップロード: Google AI Studioのチャット欄にファイルをドラッグ＆ドロップ。これでAIは「このLPをベースにするんだな」と文脈を理解します。

Step 2: AIとの「壁打ち」 (Brainstorming)

ここでいきなり「LPを作って」と指示してはいけません。まずは対話です。

• 問いかけ: 「このLPをDX人材向けにリニューアルしたい。まずは対話で案を練りたい。どう思う？」とAIに意見を求めます。
• 構成の洗練: AIから返ってきた構成案に対し、自分の意見（ターゲット層や目的）をぶつけ、すり合わせを行います。
• 要件の保存: 固まった構成案を「最強LP案」としてテキストファイルに保存し、次のステップの入力素材とします。

Step 3: ユニバーサルプロンプトの生成

ここからが『AI Web Architect』の真骨頂です。

1. 資料のインプット: 先ほどの「LPソース」や「最強LP案」をツールのInputフォルダに格納します。
2. 要約とパラメータ設定: ツール上で「要約実行」を行い、商品名、ターゲット層（例：公務員、DX転職希望者）、ジャンルを設定します。
3. プロンプト生成: 「プロンプト作成」ボタンをクリック。AIが最も理解しやすい形式（マークダウンや特殊な指示を含む）で、長大な指示書（ユニバーサルプロンプト）が自動生成されます。

Step 4: Gemini Canvasでの実装とプレビュー

生成されたプロンプトをGoogle AI Studio（またはCanvas機能対応のインターフェース）に入力します。

• 一撃生成: Gemini 3などの高性能モデルであれば、複雑なレイアウトも一回の出力でほぼ完璧にコーディングします。
• プレビュー確認: 生成されたコードをプレビューし、PC表示だけでなくスマホ表示（レスポンシブ）も確認。今回の実演でも、デザイン崩れのないプロレベルのLPが一発で出力されました。

OKIHIRO流：建築家の視点（プロのコツ）

AIを使いこなす上で最も重要な「指示出し」のテクニックを紹介します。

1. 「省略しないで」は魔法の言葉

修正を依頼すると、AIは気を利かせて修正箇所以外のコードを省略（など）することがあります。これを防ぐために、「修正時は他の部分を一切省略せずに、全文を出力して」と毎回伝える癖をつけましょう。これだけで手戻りが劇的に減ります。

2. 局所修正は「ソース＋スクショ」

特定のセクション（例：講師プロフィール）だけを修正したい場合、その部分のスクリーンショットと、該当箇所のソースコードをセットで渡すと確実です。「デザインはこのままで、中身だけ変えて」といった指示も通りやすくなります。

3. AIを育て、履歴を残す

AI Studioでの対話履歴は、プロジェクトの貴重な資産です。もしセッションが切れてもいいように、重要な決定事項や現状のコードはこまめにテキストファイルにバックアップし、「引き継ぎ書」として次のセッションで読ませる運用がおすすめです。

まとめ＆ネクストアクション

AI Web Architectを使えば、コーディング知識が乏しくても、プロ級のLPを構築・運用することが可能です。重要なのは「いきなり作らせない」こと。AIとの対話を重ね、設計図を固めてから実装に移るというフローを徹底してください。

完成したLPは、次にブログやSNS（note, アメブロ）へと展開し、メディアミックス戦略を加速させましょう。記事の量産やリライトも、このツールがあれば容易に実現できます。