Claude Code / Codex CLI / Gemini CLI の最上位モデルで同じ仕様書から企業 LP を5分で作ってみた

はじめに

同じ仕様書を3つの AI コーディングエージェントに投げたところ、追加指示なしに、すべてが5分前後でコーポレート LP を完走しました。本稿では、その結果報告を中心にまとめています。
※最後に使用したプロンプトを掲載しています！

とりあえず、3つの LP を並べて見る

同じ仕様書から出た3つの LPのうち料金セクション (上から順にClaude code、Codex CLI、Gemini CLI)を並べてみると、どれも企業 LP として問題なく通用するレベル に仕上がっていることが確認できます。配色・タイポグラフィ・装飾密度は異なるものの、情報構造の完成度に大きな差はありません。

試したこと

試したのは、架空の AI 受託開発スタジオ「Sample AI Studio（仮）」のコーポレート LP 制作です。サービス領域4カテゴリ計16項目、ユースケース例6件、技術スタック、料金、FAQ など全9セクションを含む、実務で発生するレベルの情報量を持たせた仕様書を用意しました。

架空顧客名・架空実績の創作は禁止とし、新規立ち上げの受託会社として「技術力・対応範囲・プロセスの透明性で信頼性を示す」ことを明示しています。

この仕様書を、3つの主要な AI コーディングエージェントに、同一内容で1回だけ投げます。新規セッション、追加指示なし、初回生成物で評価する方針です。

使用ツールとモデル

いずれも各社の最上位モデルを固定して実行しました。モデル選択のバイアスを避けるため、Gemini CLI は Auto ルーティングではなく Manual で明示指定しています。

仕様書

3ツールに投げた仕様書は、以下の構成で約120行です。全文は記事末尾の付録に掲載します。

• 事業概要（会社の仮名、ターゲット、市場）
• サービス領域 4カテゴリ × 計16項目
• 強み 4点
• 対応技術・技術スタック（LLM、フレームワーク、データ基盤、インフラ、フロントエンド、機械学習）
• 価格の考え方（応相談、参考レンジ）
• 必須セクション 9個（順序指定）
• 禁止事項（架空顧客名・架空実績を禁止、信頼性は技術力で示す）
• 技術制約（単一 index.html、TailwindCSS CDN、レスポンシブ必須、JavaScript 最小限）
• トーン指定（過度な「AI 押し」を避ける、伴走感）

注目すべきは 禁止事項 の設定です。LP には通常、お客様の声や導入事例のセクションが含まれますが、新規立ち上げの受託会社を前提としたため、これらの創作を明示的に禁止しました。3ツールがこの指示にどう従うかも観察ポイントの一つとなります。

結果：全ツール5分前後で完走

3ツールすべて、仕様書を1回投げただけで index.html と README.md が生成され、そのまま動作しました。ブラウザで開いて崩れているセクションもなく、Console Error も確認されていません。

1年前に同種の比較を行っていれば、「とりあえず動くがセクション数が足りない」「レスポンシブが崩れる」「禁止事項を守らず捏造する」といった差分が観察されたはずです。今回はそれらが一切発生しませんでした。企業 LP レベルの制作タスクは、AI コーディングエージェントの常用品質レンジに入ってきたのではないかと感じました。これを前提として、以下、各生成物を見ていきます。

生成物：Claude Code（Opus 4.7）

タグラインは「AIを、現場の道具に。」。

配色はウォームクリーム（#F7F3EA）× インクブラック（#0E1014）× コーラル（#FF5A3C）です。テック系 LP で典型的な冷色系グラデーションではなく、紙のような温度感のある色選びとなっています。

見出しに Noto Serif JP、本文に Inter と Noto Sans JP、技術タグに JetBrains Mono と、3種のフォントを役割別に使い分けています。

ヒーローセクションでは SVG による軌道・ノード・コーラル円盤のコンポジションを構築しており、写真素材に頼らない独自表現となっています。

ユースケース例6件（製造／EC／医療／法律／不動産／研究）は、それぞれ「想定課題 × 対応方法 × 活用技術」の形式で整理されています。架空実績の表現を完全に回避しつつ、具体的な技術タグを並べることで信頼性を担保している点が特徴です。

総行数は 1,170 行と3ツール中最長でした。CSS カスタマイズ、SVG 描画、技術タグのマーキー演出など、装飾密度が高い仕上がりになっています。

生成物：Codex CLI（GPT-5.4）

タグラインは「業務に根づくAIを、構想から運用まで。」。

配色は淡いグレー基調（#f6f8fb）に、teal（#0f766e）、lime（#84cc16）、coral（#f97316）、grape（#7c3aed）をアクセントとして配置しています。Tailwind のカラートークンを直接活用した、実装効率重視の構成です。

フォントは Noto Sans JP のみの単一構成となっています。和文単独で統一することで、視覚的ノイズを排除しています。

ヒーローセクションでは Unsplash からの写真素材を使用し、Discovery・Build・Operate・Enable の4フェーズをダッシュボード風に並べています。

ユースケース例6件は「想定課題」「対応方法・活用技術」のラベルを明示的に区切って提示されており、仕様書の指示を文字通り踏襲している点が印象的です。

生成過程では、実装後に tidy コマンドで HTML 検証を自発的に実行し、失敗（tidy が HTML5 未対応）すると Ruby スクリプトを自作して独自検証を行っていました。フォームのプレースホルダに入っていた「山田 太郎」を grep で検出し、禁止事項に触れる可能性があるとして「お名前を入力」に自主修正するなど、検証と自主修正のプロセスが多重に実行されている点が他ツールと異なります。

総行数は 590 行と3ツール中最短で、必要十分な要素で構成されていました。

生成物：Gemini CLI（Gemini 3 Pro）

タグラインは「業務に直結するAIを、適材適所の技術で。」。

配色は深いブルー（brand 系）× スレート（濃灰色）の2色基調です。日本のビジネス向け B2B SaaS で頻出する、信頼性重視の配色となっています。

フォーム周りの設計が3ツール中もっとも日本的で、「会社名・組織名」「お名前（必須）」「メールアドレス（必須）」「ご相談内容」と、日本の B2B 問い合わせフォームの定型を踏襲しています。

生成過程では WriteTodos を使って3件のタスクを先に切り、その後に実装へ入っていました。タスク分解による手順可視化が特徴となっています。

総行数は 688 行と3ツール中間で、適度な装飾と情報密度のバランスが取られていました。

この検証で見えたこと

今回の検証で確認されたのは、以下の3点です。

1. 企業 LP レベルの制作タスクは、AI コーディングエージェントの常用可能レンジに入りました。
3ツールすべてが一発完動しました。かつて不可避だった「修正プロンプトの往復」「セクション抜け」「要件忘れ」などの問題が、少なくとも今回の仕様書では一切発生しませんでした。

2. 禁止事項の遵守も安定しています。
架空顧客名や架空実績の捏造を禁じたところ、3ツールとも従いました。Codex CLI に至っては、プレースホルダに入っていた「山田 太郎」まで自主的に一般表現へ修正しています。仕様書の制約を機械的に踏襲する水準は、業務利用に耐えるレベルに達しています。

3. ツール選定の論点は「優劣」から「好み・相性」に移行しつつあります。
行数、配色、タグライン、装飾密度には確かに差があります。しかし、いずれも「良い・悪い」ではなく「好みの問題」の範疇に入るものでした。業務の性格・チームの文化・既存の開発環境との相性で選ぶ段階に来ていると言えます。

最後に

AI コーディングエージェントを業務に組み込むハードルは、想像よりずっと下がっています。1本 LP を作らせるだけなら、3社のツールいずれを選んでもほぼ失敗しません。

本稿はあくまで LP 1本という限定的な題材での検証であり、別種のタスク（大規模コードベースでのリファクタリング、複雑な業務ロジック実装、既存システムとの統合など）では違った結果が出ると想定されます。これについては機会を改めて検証したいと思います。

付録：使用した仕様書全文

# タスク
AI駆動の受託開発・運用支援スタジオ「Sample AI Studio（仮）」の
コーポレート兼サービスLPを作成してください。

# 事業概要
- 会社名（仮）: Sample AI Studio
- 事業内容: AIを活用した受託開発・運用支援
- ターゲット: AIを業務に取り込みたい中小企業、スタートアップ、
  個人事業主、新規事業 / PoC 担当者
- 市場: 日本、日本語

# サービス領域（以下4カテゴリすべて掲載）

## データ分析・意思決定支援
- データ分析レポート作成
- 予測モデル構築
- ダッシュボード開発
- データ基盤整備

## AIエージェント・アプリ開発
- カスタム AI エージェント構築
- 社内向け RAG システム
- 業務特化 LLM アプリ
- チャットボット・カスタマーサポート自動応答

## 業務自動化・運用代行
- SNS 自動化運用代行（X / Instagram / LinkedIn）
- 業務ワークフロー自動化
- 定型業務 RPA
- レポート自動生成

## 業界特化ソリューション
- 製造業の図面管理・類似検索
- 小売・EC 需要予測
- 医療・法務文書の分類
- 研究者向け論文調査支援

# 強み
- AI ファーストな実装パートナー
- 内製化まで視野に入れた伴走支援
- 複数ドメイン・多業種に対応できる技術選定力
- GPT / Claude / Gemini / ローカル LLM を適材適所で組み合わせる実装力

# 対応技術・技術スタック
- LLM: GPT 系 / Claude 系 / Gemini 系 / ローカル LLM（Llama、Qwen 等）
- フレームワーク: LangChain / LlamaIndex / 各社エージェント SDK
- データ基盤: BigQuery / Snowflake / PostgreSQL / DuckDB
- インフラ: GCP / AWS / Azure / オンプレミス対応
- フロントエンド: React / Next.js / Streamlit
- 機械学習: PyTorch / scikit-learn / XGBoost / 主要 MLOps ツール

# 価格の考え方（応相談・参考レンジを提示）
- PoC・小規模プロジェクト: ¥200,000〜
- 中規模開発: ¥800,000〜¥3,000,000
- 大規模・長期運用: ¥3,000,000〜
- 月次保守・運用: ¥100,000〜/月
- 初回 60 分相談: 無料

# 必須セクション（この順序で）
1. Hero（キャッチコピー / サブコピー / 主要 CTA / ビジュアル）
2. サービス領域 4 カテゴリの一覧（各カテゴリ配下に所属サービス）
3. 選ばれる理由・強み（3〜4 つ）
4. 対応ユースケース例（業種の異なる 6 件。各ケースで「想定課題」と「対応方法・活用技術」を記載。実績ではなく「こんな課題に対応できます」という見せ方）
5. 対応技術・技術スタック（カテゴリ別に整理して提示）
6. 料金の考え方（参考レンジ＋「まずは無料相談」CTA）
7. プロジェクト進行フロー（4〜5 ステップ）
8. FAQ（5 問）
9. お問い合わせ CTA

# あなたに決めてほしいこと
- タグライン（キャッチコピー）
- ブランドの世界観・トーン・配色方針
- 各サービス項目のキャッチーな一言説明
- ヒーロービジュアルの表現方法
- 対応ユースケース 6 件の業種・想定課題・対応方法
- 技術スタックの見せ方（整理方法、強調ポイント）

# 禁止事項
- 架空の顧客名・人物名・証言・体験談は一切掲載しないこと
- 実在する企業・人物の名称を使用しないこと
- 架空の「実績」として過去の具体的な導入事例を創作しないこと
- 新規立ち上げの受託会社として、信頼性は技術力・対応範囲・プロセスの透明性で示すこと

# 技術制約
- 単一の `index.html` ファイルで完結
- TailwindCSS は CDN 経由
- レスポンシブ必須（モバイル / タブレット / デスクトップ）
- JavaScript はインラインで最小限
- 画像は Unsplash ソース URL または SVG プレースホルダー
- Google Fonts 使用 OK

# トーン・品質要件
- すべて日本語
- 「AI！AI！」の押し付けを避け、技術への誠実さと実装力で訴求
- 小回りの利くパートナー感、伴走感
- Lighthouse Accessibility 90+ を意識

# 成果物
1. 完成した `index.html`
2. `README.md`（タグラインとブランドトーンの設計意図を 3〜5 行で）