TL;DR — Codex GPT-5.5、Claude Opus 4.7、Gemini 3.1 Pro。同じプロンプト。同じ18枚の写真。異なる労力度の予算で、合計5回実行。その勝者は一番見栄えが良いわけではありませんでした。仕事を理解していたからです。つまりベンガルールの親はコンタクトフォームではなくWhatsAppで問い合わせる、ということです。
息子のクリケットコーチから、ウェブサイトの依頼を受けました。
土曜の午後。彼はBangalore Royal Cricket Academyを運営しています――子ども向けの小規模スクールですが、真面目にレベルの高いクリケットアカデミーです。彼には電話番号が2つあり、親たちが撮ったWhatsAppの写真が18枚入ったフォルダがあり、さらに短い一文がありました。「本物のクリケットアカデミーみたいに、親は自分の電話から電話かWhatsAppで連絡できるべきです。」
私はCTOです。普段のほとんどの週で、AIによるコーディングエージェントの現場にいます。これは、きれいで、リスクの低いテストのように思えました。
そこで、まったく同じプロンプトとまったく同じ18枚の写真を、3つのコーディングエージェントに渡しました。
- OpenAI Codex（GPT-5.5、中程度の労力）
- Anthropic Claude Opus 4.7（低労力、次に中程度で再実行）
- Google Gemini 3.1 Pro（低労力、次に高で再実行）
5つの出力。土曜のうちに。『クリケットアカデミーのウェブサイト』が実際に何なのかについて、5つともまったく違う意見でした。
私は見た目の品質に関する判定を期待していました。けれど、そういうものは返ってきませんでした。もっと面白いものが得られました。
設定
プロンプトはあえて短くしました。
Build a single-page website for Bangalore Royal Cricket Academy. Brand line: "Nurturing champions, one delivery at a time." Programs: Summer Camp, Weekday Batch, Weekend Batch, Intensive (elite). Two phone numbers. The photos are in
/photos for website. Parents should be able to contact us easily from their phone.
以上です。デザインシステムはありません。カラーパレットは指定していません。WhatsAppという名前も明示していません。テスト、デプロイ、SEOメタ、Cloudflareについても言及していません。それぞれのエージェントが「自分の電話から簡単に連絡できる」をどう解釈するか――それはエージェント次第でした。
5つの出力で得られたもの
1. Claude Opus 4.7（低労力）
単一ファイルのHTML。CDN経由のTailwind。Bebas Neueの表示フォント。ロイヤルネイビー＋ゴールドのパレット。
見出しが私を立ち止まらせました。「CHAMPIONS ARE / BUILT HERE」で、後半がゴールド。5つのうち唯一、ヒーロー部分が「コーチが学校で配る印刷チラシ」に載っている感じそのもので、視覚的に完成度が高い。かなり洗練されています。
工学的には薄いです。テストなし。<meta description>以外のOGタグなし。写真はimg-01.jpg…img-18.jpgとして参照。14枚すべてが同一の4列グリッドに。リンクはTelのみ。WhatsAppなし。
2. Claude Opus 4.7（中程度の労力）
同じ出発点、まったく別の出力。
<section id="top" class="relative h-screen min-h-[640px] w-full overflow-hidden">
<div class="absolute inset-0">
<img src="assets/photos/brca-01.jpeg" alt="" class="kenburns" />
<div class="absolute inset-0 bg-gradient-to-b from-navy-deep/85 via-navy/70 to-navy-deep/95"></div>
</div>
...
</section>
画像にKen Burnsアニメーションを入れたフルスクリーンのヒーロー。マウスのアウトラインの中でドットがアニメーションするスクロール表示。セクション間にゴールドのクリケットの縫い目風の区切り――ボールの縫い目みたいに見える実際の破線。aboutセクションでは、左右の余白をずらした2枚画像のコラージュ。全15枚を使ったCSSのcolumnsによるマジック（masonry）ギャラリー。データURI（リクエストを1つ減らす）としてのインラインSVGファビコン。OGタグ。theme-color。コンタクトセクションにはWhatsAppのディープリンクボタン。
<a href="https://wa.me/917337726777?text=Hi%20BRCA%2C%20I%27d%20like%20to%20know%20more%20about%20your%20programs."
target="_blank" rel="noopener"
class="bg-gold text-navy font-semibold px-6 py-3.5 rounded-md">
Message us on WhatsApp
</a>
5つの中で、これは一番きれいな出力でした。明確に差がありました。Bebas Neue＋Inter、Ken Burns、ゴールドの縫い目、マジックギャラリー――私はこれだけは印刷所に近づけてもいいと思いました。
相変わらずCDN経由のTailwindです。相変わらずテストスイートはありません。相変わらず自動デプロイもありません。写真は意味的にリネームされていました（brca-01.jpeg）。
3. Codex GPT-5.5（中程度の労力）
素のHTML＋800行の素のCSS＋素のJSは16行。白とネイビーのローカルビジネス系レイアウト。「01〜04」と番号付きの特徴ブロック。コンタクトセクションのCTAはWhatsAppの緑。
Claudeの中程度より、編集記事っぽさは弱いです。でも、他のどれにもない“5つのこと”をきちんとやっています。
1つ目。 18枚のうち6枚の写真を選び、内容でリネームしました。
brca-team-ground.jpeg
brca-trophy-team.jpeg
brca-trophy-presentation.jpeg
brca-young-achievers.jpeg
brca-coaching-moment.jpeg
brca-floodlight-batch.jpeg
コード出力に“編集の判断”が組み込まれています。全部をグリッドに放り込むのではなく、選びました。
2つ目。 _headersファイルを書きました。
/*
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()
/assets/*
Cache-Control: public, max-age=31536000, immutable
セキュリティヘッダーとキャッシュルールです。私は頼んでいませんでした。
3つ目。 node:testを使って、本物のテストスイートを書きました。
test('ホームページが通話とWhatsAppの登録リンクを公開している', async () => {
const html = await text('index.html');
assert.match(html, /href="tel:\+917337726777"/);
assert.match(html, /href="tel:\+917337736777"/);
assert.match(html, /https:\/\/wa\.me\/917337726777/);
assert.match(html, /https:\/\/wa\.me\/917337736777/);
});
test('参照されているローカルアセットとCloudflare Pagesの設定が存在する', async () => {
const imageRefs = [...html.matchAll(/src="([^"]+\.(?:jpg|jpeg|png|webp))"/gi)]
.map(m => m[1]);
assert.ok(imageRefs.length >= 6, '少なくとも6枚のアカデミー写真が使われている');
for (const ref of imageRefs) {
assert.ok(existsSync(new URL(ref, root)), `${ref} exists`);
}
});
3つのテスト。ブランド表記、両方の電話番号、両方のWhatsAppリンク、セキュリティファイルの存在、レスポンシブCSS、そして参照されているすべての画像が実際にディスク上に存在することを確認します。最後のこれが、私が最も重視した点です。静的サイトで最もよくある“黙って壊れる”箇所を見つけられるからです。
4つ目。 主要なCTAはすべてwa.meのディープリンクで、事前に入力済みのメッセージ本文付きです：
<a class="contact-link whatsapp"
href="https://wa.me/917337726777?text=Hi%20BRCA%2C%20I%20would%20like%20to%20know%20more%20about%20cricket%20training."
target="_blank" rel="noopener">
<span>WhatsApp</span>
<strong>7337726777</strong>
</a>
単にwa.me/91…ではありません。事前に入力されたメッセージ本文。 親がタップする。メッセージが届く。入力はゼロ。
5つ目。 それをデプロイしました。私のブラウザを開いて、CloudflareのOAuthハンドシェイクを案内し、その後ビルドをCloudflare Pagesにプッシュしました。残された.wrangler/cache/pages.json：
{ "account_id": "...", "project_name": "brca-academy" }
ほとんどのコーディングエージェントは「ここにHTMLがあります」で止まります。CodexはライブURLまで到達しました。違いはここです。「マークアップを生成する」だけでなく、「デプロイまで含めて“ビルドする”」を作業単位として扱ったこと——それが、この5つの中で最も本番投入に耐える出力だと私が評価した理由です。
4. Gemini 3.1 Pro、手間少なめ
ダークスレートの背景。エレクトリックブルー＋アンバーのアクセント。IntersectionObserverによるスクロールリビール効果付きの、60行のバニラJS。
SaaSのアナリティクスダッシュボードのように見えました。対象ユーザーが約10年ズレていました。写真はphoto_1.jpeg…photo_18.jpegとして参照されていました。Tel:のみ。
5. Gemini 3.1 Pro、高手間
配色は固定：ネイビー＋アンバー。タイポグラフィはPlayfair DisplayとOutfit。画像のコラージュと「Elite Training Facility」バッジ付きの会社概要セクション。専用のハイライトボックスを持つ、より広いエリートプログラムのカード。ハンバーガー付きモバイルメニュー。
見た目は、手間少なめ版とは別のWebサイトでした。本当にもっと良い。
ただ、まだ足りなかったもの：
- WhatsAppのディープリンク。どこでも。Tel:のみ。
- OGタグ、または
theme-color。 - テストスイート。
- デプロイ設定。
- 意味のある写真の名前——いまだに
img1.jpegからimg8.jpeg。
より大きい予算は、より良い見た目を買いました。けれど、「バンガロールのクリケットアカデミーのWebサイトが何のためにあるのか」についてのより良い判断は買えなかったのです。
本当に決め手になったもの
いちばん綺麗なヒーローではありません。いちばん賢いアニメーションでもありません。
これ：
返却形式: {"translated": "翻訳されたHTML"}バンガロールでは、親はWhatsAppで問い合わせます。メールではありません。問い合わせフォームではありません。最初にメッセージを送るまでは電話もしません。
インドのローカルビジネス向けWebサイトで、最大のコンバージョンレバーになるのは、プリフィルしたメッセージ文言つきのディープリンクによる wa.me です。親はページを開きます。親はボタンをタップします。WhatsAppが「Hi BRCA, I would like to know more about cricket training」と、すでに入力された状態で開きます。送信します。コーチには通知が届きます。
Codexはこのことをすべての主要CTAで行いました。Claude-mediumは問い合わせセクションの下部に1つのボタンとして実装しました。Claude-low、Gemini-low、Gemini-highはまったく実装しませんでした。
この1つの判断は、比較の中で一番きれいなヒーロー画像よりも価値がありました。
予想していなかったこと
努力（エフォート）の予算が、品質の違いを説明する変数になると決めつけていました。
各モデルで努力予算を2倍にしたときに何が起きたかを比べてみてください：
Claude（low → medium）： 視覚品質が「かわいい」から「編集記事レベル」へと跳ね上がりました。Ken Burnsアニメーション、マサーンリーギャラリー、OGタグ、theme-color、意味のある写真名、そしてWhatsAppボタンも追加されました。さらに、写真名をimg-XX.jpgからbrca-XX.jpegへと変更しました。モデルは、追加の予算を使って「好み」と「プロダクト判断」の両方をアップグレードしたのです。
Gemini（low → high）： 視覚品質が跳ね上がりました。パレットが固定されました。タイポグラフィがアップグレードされました。レイアウトはより洗練されました。
それでもWhatsAppは追加されませんでした。
それでもテストは書きませんでした。
それでもデプロイはしませんでした。
それでも写真がimg1.jpegのままでした。
予算を増やしても、モデルに「そのWebサイトが何のためにあるのか」は教わりませんでした。間違ったWebサイトを、よりきれいに作ることを学ばせただけです。
見出しは「CodexはGPT-5.5が最良のモデルだから勝った」ではありません。見出しはこうです：
努力予算は出力品質を説明する変数ではない。好み（テイスト）がそうだ。
Codexはmediumで動かした1回の結果が、Geminiはhighで動かした結果よりも本番投入できる状態の出力でした。Claudeはmediumで、ラインナップ中で最も美しいサイトを作りました。Geminiはhighで、大きく改善されたものの、根本的には判断を誤ったWebサイトを作りました。
追加の予算によって、各モデルが仕事についてすでに理解していたことが表面化しました。モデルが仕事を「何だと思っているか」は変えませんでした。
サイドバー：Cloudflareトークンの2つの道筋
CTOが気にする類のものなので、触れておく価値があります。
各エージェントがCloudflare Pagesへデプロイする必要が出たとき、取った道筋は2つでした：
経路A—サイレントなOAuth。 Codex（medium）とGemini（low）は、私のブラウザを開き、CloudflareのOAuthフローを案内してセッションを取得しました。速い。スムーズ。私はトークンを見ませんでした。エージェントは、当該セッションの間、私のCloudflareアカウント全体にアクセスできる状態になります。
経路B—自分のトークンを貼り付ける。 Claude（あらゆる努力レベルで）とGemini（mediumの努力で）は言いました。「Cloudflare → My Profile → API Tokens → Create Tokenで、これらの特定スコープを指定して作成して、ここに貼り付けてください。あなたのアカウントセッションは見ません。」インストール時の摩擦は増えます。ですが、コントロールは増えます：トークンはスコープされています。エージェントに何を渡したかを正確に見られます。メインのセッションに触れずに、トークンをローテーションまたは取り消しできます。
どちらも擁護できます。経路Aは「デプロイまでの時間」を最適化します。経路Bは「認証情報の衛生（クレデンシャル管理）」を最適化します。
もしあなたが個人開発者としてサイドプロジェクトを作っているなら、経路Aでたぶん問題ないでしょう。もしフィンテックの本番インフラを運用していて、AIエージェントが認証情報を求めてくるなら、経路Bが唯一の答えです。3体のうち2体が、高い努力レベルで経路Bに収束する（Claudeは常に、Geminiはmedium以上）ことは、「思慮深い」モードがよりセキュリティを意識していることを示唆しています。CodexはmediumでもサイレントOAuthのままでした。知っておく価値があります。
2026年にコーディングエージェントを選ぶために、これは何を意味するか
3つの学びがあり、どれもベンチマークの話ではありません。
1つ目。エージェントを「問題」ではなく「仕事」でテストする。 「Webサイトを作る」と「インドのローカルビジネス向けにWhatsAppのリードが獲得できるWebサイトを作る」は、評価が別物です。前者は構文の練習です。後者は、そのエージェントが空気を読めるかどうかを教えてくれます。
2つ目。努力予算は増幅器であって、教えるものではない。 それはモデルを「元々の姿」以上にしていくだけです。低い努力でその仕事を理解できないなら、高い努力では間違ったものの、より洗練された版が出てくるだけです。
3つ目。本番投入のための足場（スキャフォールド）は、真剣さの最安シグナル。 テスト。ヘッダー。OGメタ。404.html。内容に応じたファイル名がついたキュレーション済みの写真。これらは私のプロンプトには入れていませんでした。これらをすべて自分で書いたエージェントこそ、行ごとにレビューできないコードを任せるのに信頼できるエージェントだと思えます。
コーダ：実際に出荷されたもの
1発のベンチマークでは捉えられなかった、あることについて正直に書かねばなりません。
Codexは私のエンジニアリング評価で勝ちました。これはその通りです。私はそれをジュニア開発者に渡して、「出荷して」と言えるタイプです。
でも、次に手を伸ばしたのはClaudeでした。
努力をmediumにしたClaudeでさらに2つのプロンプト——「常駐するWhatsAppのフローティングボタンを追加して」、「実在するローカルビジネスのような、3枚カードの問い合わせセクションにして（主要オフィス／コーチングデスク／WhatsApp）」——を投げ、加えてCloudflareデプロイとDNSを処理するための少しのブラウザ自動化を行ったところ、サイトはbrca.inとして本番公開されました。
これは、コーチが今日使っている版です。WhatsAppのフローティングボタン。問い合わせカード3枚。「最初の親からの問い合わせのあとに、コーチが求めた」 「無料トライアルセッションあり」というピル（バッジ）。スケジュールのストリップ。カスタムドメイン。稼働中のHTTPS。
なぜClaudeで、Codexではないのか——私自身のエンジニアリング判断に照らして？
単発のテストが答えるのは「どのエージェントが一番良い直感を持っているか」です。出荷テストが答えるのは「どのエージェントを共同作業の相手として持ちたいか」です。
それらは別の問いです。私にとって答えは異なりました。
私はClaudeを、編集し続けたいと思いました。Bebas Neue＋ゴールドの縫い目のような美学、マサーンリーギャラリー、Ken Burnsのヒーロー——捨てたくないデザイン要素が、そこにありました。Codexの出力はより正確でした。Claudeの出力は、私が関係性を持てるものでした。
それは本物のシグナルです。声に出す価値があります。
終わりに近いまとめ
コーチはWebサイトを手に入れました。親たちはWhatsAppボタンを手に入れました。サイトはbrca.inで公開中です。
最初の親からのメッセージは、日が暮れる前に受信箱に届きました。「Hi BRCA, I would like to know more about cricket training」
ワンショットの結論は成り立っています。最初の接触の時点で、テイストが比較を決めました。インドのローカルビジネス向けWebサイトがやるべきことに対するCodexの直感は、ラインナップのどのモデルよりも鋭かったのです。
ただし、デモのあとに最も重要なのにベンチマークされない部分があります。それは「あなたは実際にどのエージェントを、これからも一緒に働き続けたいと思うか」です。
この仕事では、私の場合——Claudeでした。
チャンピオンはここで作られます。どうやらWebサイトも同じようです。
サイトは brca.in で公開中。5回分すべての実行のソースコードが必要なら、コメントしてください。喜んでGitHubリポジトリを共有します。
ぜひ知りたいこと： 2026年にあなたが使おうとしているエージェントはどれで、そして本当に空気を読めているかを確かめるために、あなたが最小の仕事として使ったのは何ですか？ 下に返信してください。
