WebディレクターがAIエージェントで競合調査〜LP構成検討を効率化した話

こんにちは、ENECHANGE Value Deliveryチームの馬場です。

昨日の岩本さんの記事「AIエージェント『ブログほめ太郎』におけるStrands Agentsの活用」を読みました。ブログをbotが褒めてくれるのは執筆のモチベーションも上がりますし嬉しいですね。プログラミングレスで実装されていることにも驚きました。

今回は、新規で自社プロダクトのLP（ランディングページ）を作成するにあたり、Webディレクターの私が実際にAIエージェントを活用して、競合調査から構成検討まで、どのように効率化を実現したかをお話しします。

🚀 実際の活用フロー

Step1: 自社プロダクト情報の整理（Geminiを活用）

なぜGeminiを選択したかというと、社内の資料はGoogle Driveに集約されており、GeminiではGoogleドライブから読み込ませたい資料を直接指定できるためです。ファイルをダウンロードし、読み込ませる手間が不要なので、その点でとても便利です。

Google Drive上の自社プロダクトの関連資料を参照して、機能や特徴を以下のカテゴリに分類して整理してください：
- 基本機能
- 技術仕様
- 対象ユーザー
- 料金体系
- サポート体制
- 差別化ポイント

手動だと半日以上かかる作業が、わずか30分程度で完了しました。

Step2: 競合分析の実施（Cursorを活用）

次に、整理された自社情報をベースに競合分析を行いました。

なぜCursorを選択したかというと、Web上の情報収集や複数の競合サイトの分析に加えてさらにCSV形式等での構造化された出力が得意だからです。また、手順1で整理した自社情報をコンテキストとして活用しながら、比較分析を進められる点も魅力的でした。

以下のカテゴリについて、競合他社A、B、Cがどのような対応をしているか調査し、
自社プロダクトとの比較表をCSV形式で作成してください：
[カテゴリリスト]

この指示により、競合比較表が自動生成され、どの領域で自社が優位性を持っているかが一目瞭然となりました。また、CSV形式で出力することで、後ほどGoogleスプレッドシートに容易にインポートでき、チーム内で共有して検討を進めることができました。

Step3: LP構成の検討（Cursorを活用）

競合調査の結果を踏まえ、効果的なLP構成を検討しました。同じツールを使うことで、既存のコンテキストを引き継げるのが便利でした。

以下の参考サイトの構成を分析し、自社プロダクトの特徴を活かした
最適なLP構成を提案してください：
[参考サイトURL一覧]

考慮すべき要素：
- ターゲットユーザーの行動パターン
- 技術的な説明の分かりやすさ
- 導入までのフローの明確さ

Cursorは各参考サイトの構成を詳細に分析し、最適化されたLP構成案を複数提案してくれました。

Step4: Notionでの構成文書化（Cursor + Notion MCPを活用）

構成案が固まったところで、Notionでラフを作成しました。Webディレクター・営業・デザイナーなど横断的なチームメンバーに共有してレビューをもらうのに最適だったからです。

余談ですが、ワイヤーフレームは通常Figmaで作成することが多いと思います。しかし今回は、Figmaだと型ができ過ぎてデザイナーが制約を感じるのではないかと考え、あえてNotionで作成しました。構成はしっかり示しつつ、デザインの自由度は保ちたかったためです。

CursorのNotion MCPを使って、Markdownで作成された構成案をそのままNotion上に出力できました。

📊 AI活用の成果と正直な感想

LP制作会社に依頼すると1ヶ月程度かかるような工程が、AIエージェントを活用することで1週間未満で完了できました！

ただし実際の作業時間の内訳を見ると、AIを動かしていたのは2〜3人日程度で、残りの4日程度はAIのアウトプットの軌道修正やブラッシュアップに費やしました。つまり、AIだけでは完結できなかったというのが正直なところです。

効率化できた部分

情報収集・整理: 大満足の結果。網羅性と質は問題なし
構造化された出力: 全体の流れや論理構成がしっかりしていた
競合調査・構成検討: 従来の手作業に比べて大幅な時間短縮を実現

人間の調整が必要だった部分

情報の取捨選択: 膨大な情報の中から「本当に必要な情報」を選ぶ判断は人間が必要でした。
キャッチコピーなどのライティング: 最も苦労したポイントです。LP制作に精通したチームメンバーから「インパクトが弱い」「伝わりづらい」というフィードバックがあり、「もっと簡潔に」「この特徴を前面に出して」といった方向性をAIに伝えながら、何度も「壁打ち」をして改善していきました。
細かいライティングの仕上げ: 構成段階では大枠の作成はAIに任せられましたが、細かい仕上がりのイメージが自分の中にあったため、最終的な調整は自分で直接作業した方が早かったです。AIとのやり取りで時間をかけるより、人間が感情に響く表現に調整する方が効率的でした。

💡 WebディレクターのためのAI活用Tips

ポイント1: 指示の出し方を使い分ける

AIエージェントへの指示は、目的に応じて具体性を調整することが重要です。

🔍 曖昧な指示の例：
「〇〇を提供しているサービスについて調査してください」

📋 具体的な指示の例：
「以下の観点で競合A、B、Cを調査し、比較表形式で出力してください：
- 料金体系
- 機能比較
- 対象市場
- 技術仕様」

曖昧な指示が有効な場面：

初期の情報収集段階
新しい視点や切り口を見つけたい時
想定外のアイデアを求める時

具体的な指示が有効な場面：

明確な成果物が必要な時
フォーマットが決まっている時
効率的に作業を進めたい時

今回のプロジェクトでは具体的な指示が多かったですが、時々「〇〇の市場はどうなってる？」のようなざっくりとした質問をすると、先入観なしの新しい情報が得られて面白いです！例えば「自社のプロダクトをAIが競合としてどう分析するか？」など、思いもよらない視点を教えてくれることもありました。目的に応じた使い分けがカギです。