Carbon、Opus、Astra が同じウェブサイトを制作：デザインが優れているのは？速度が速いのは？コストが低いのは？同一課題による3ラウンド実測の解説

作者注：Agrumea Farm の公式サイトを複製するテストをもとに、デザインの再現度、インタラクション要件への対応、所要時間、API換算コストの3つの観点から Gemini 4 Carbon、Claude Opus 5.5、GPT-6 Astra を比較します。あわせて、シーン別のモデル選び方と、自分で再テストする方法も紹介します。

同じブランドサイトを3つのトップモデルにそれぞれ複製させたら、結果はどれくらい違うのでしょうか。2026年11月11日、独立系レビュアーの Pat Simmons（AI for Mortals）が、あるテスト結果を公開しました。彼は Gemini 4 Carbon、Claude Opus 5.5、GPT-6 Astra に、イタリアの食品ブランド Agrumea Farm の公式サイトを複製させました。作品、スクリーンショット、プロンプト、実行時間、API換算コストもすべて公開されています。

これは「どれも一長一短」で終わる折衷的な分析ではありません。このタスクでは、3つの観点それぞれの勝者がはっきり分かれました。コストが最も低かったのは Carbon、所要時間が最も短かったのは Astra、そしてレビュアーから品質面で高く評価されたのは Opus です。ただし、各モデルの実行は1回きりで、ツール環境もテスト日も異なります。そのため、この結果をすべてのWeb開発シーンのランキングとして一般化することはできません。

この記事で得られること：3つの「モデル＋ツール」ワークフローについて、品質・速度・コストそれぞれの強みがわかります。記事内の方法を使えば、自分のプロジェクトで再検証することもできます。

まずは元のサイトを確認——Carbon・Opus・Astraの同一課題による再現テストの進め方

結果を見る前に、まずテスト条件を押さえておきましょう。このテストの価値は「同じサイト、同じプロンプト、同じ開発目標」で比較している点にあります。ただし比較しているのはワークフロー全体であり、実験室のようにモデル本体だけを切り出して評価しているわけではありません。

Carbon・Opus・Astraのテストにおける3つの重要な前提

1つ目の前提は、これが「再現」であって「自由なデザイン」ではないことです。3つのモデルはいずれも元ブランドのデザイン言語を踏襲する必要があるため、比較のポイントは再現度、ディテール、完成度になります。ゼロからオリジナルのビジュアルを作りたい場合、このテストはあくまで参考程度にとどまります。

2つ目の前提はコストの基準です。本文に出てくる金額はすべて、評価の執筆者がモデルの料金体系と利用ログから算出した API 換算の費用であり、サブスクリプションプランで実際に請求される金額ではありません。月額制のツールで同じタスクを実行した場合、請求の形態はまったく異なります。

3つ目の前提は、この評価には実は4つのモデルが含まれていることです。執筆者は Claude Fable 5.2 も加えており、このモデルが主観評価で1位を獲得しました。したがって、以下で触れる「2位、3位、4位」は4モデルでのランキングを指します。

図の説明：本文で取り上げる3点の作品のファーストビューのスクリーンショットは、いずれも AI for Mortals / Pat Simmons 提供のもので、公開日は 2026-11-11 です。それぞれ Gemini 4 Carbon、Claude Opus 5.5、GPT-6 Astra による再現作品に対応しています。

第1ラウンド：Carbon、Opus、Astra のWebデザイン再現度を比較

まずは見た目から確認しましょう。公開されている最初のビュー（ファーストビュー）のスクリーンショットを見ると、3作品とも元サイトの核となる要素をしっかり押さえています。アイボリー系の背景、宙に浮く食品の缶詰、ワインレッドの弧を描く背景、オレンジ色の周回テキスト、そして上部のブランドロゴ、言語切り替え、メニューボタンです。つまり、どのモデルも的外れなテンプレートページを出してきたわけではなく、差が出たのは比率、レイヤー感、ディテールの部分です。

下の画像は上から順に、opus5.5、astra、carbon の作品です。

Opus がデザイン再現で評価されやすい理由

最初に、2種類の情報を切り分けておきましょう。表の上4行は公開スクリーンショットに対する視覚的な観察で、最後の1行だけが評価を行った筆者の主観的な順位です。筆者は指定された3モデルのうち Opus を最も高く評価し、次が Astra、最後が Carbon でした。

スクリーンショットを見る限り、Opus の強みは「ブランド公式サイトとしての主役と脇役の関係」にあります。食品ブランドの公式サイトでは、ファーストビューの主役は商品です。Opus は缶詰をより大きく配置し、缶詰とワインレッドの曲線をはっきり前後に重ねています。ラベルの文字も読み取りやすく仕上がっています。Carbon のゆったりしたレイアウト自体は間違いではありませんが、缶詰が小さめで一部の文字ディテールも弱く、「再現度」という評価基準では不利になりやすいところです。

Astra の出来は両者の中間に位置します。構図が整っていて視覚の中心も明確で、缶のラベルの装飾性も高めですが、全体としてはやや詰まった印象です。サイトの複製タスクでは、「見栄えが良いか」よりも「元サイトにどれだけ似ているか」が重要になります。3作品とも悪くないのに順位にははっきり差がついた理由も、ここから説明できます。

第二ラウンド：Carbon、Opus、Astra のインタラクション再現をスクリーンショットだけで判断できない理由

Webサイトとデザインカンプの最大の違いは、「動く」ことが求められる点です。元のタスクでは、3D 製品缶のカルーセル、スクロールやドラッグによる操作、ローディングアニメーション、ホバーアニメーション、ページ遷移を再現することが明確に求められていました。これらの機能は静止画のスクリーンショットではほとんど読み取れませんが、ユーザーがサイトを開いたときの体験を直接左右します。

つまり、スクリーンショットからわかるのはレイアウトと見た目のディテールだけで、インタラクションが完全に実装されている証拠にはなりません。3D の缶がなめらかにドラッグできるか、ホバー時の反応が自然か、モバイルでレイアウトが崩れないかを判断するには、公開されている 3 つの作品ページを実際に開いて操作する必要があります。本記事ではスクリーンショットをインタラクションのテスト結果として扱いませんし、原作者が示していないインタラクションの評価点を代わりに付けることもしません。

このラウンドは、Web 開発と静止画の生成の違いも浮き彫りにしました。モデルは見栄えのよいファーストビューを描けても、3D カルーセル、スクロール連動のアニメーション、レスポンシブレイアウトをすべて動作するコードに落とし込むには、読み込み順序やパフォーマンス、画面サイズごとの挙動も扱わなければなりません。評価で「ブラウザでスタイルを読み取り、ビジュアルを検証する」ことが求められているのは、「書き終えた」を「きちんと動く」に変えるためです。

実際のプロジェクトで AI が生成したサイトを確認するときは、次の順序で進めるとよいでしょう。

1. まず 1440×900 と 390×844 の 2 つのサイズでページを開き、レイアウトがはみ出したり重なったりしていないか確認します。
2. ドラッグ、スクロール、ホバー、ページ切り替えを一つずつ試し、アニメーションがカクついたり動かなかったりしないか観察します。
3. ブラウザのコンソールを開き、エラー、リソースの読み込み失敗、無限ループするアニメーションがないか確認します。
4. 最後に元のサイトやデザインカンプと画面ごとに見比べ、ビジュアル上の差異を記録します。

第3ラウンド：Carbon、Opus、Astraのコストと所要時間はどれくらい違う？

このラウンドは、3つのワークフローの違いが最もはっきり表れました。以下のデータはすべて元の評価記事によるもので、コストはAPI換算の費用です。

Carbon・Opus・Astraのコストデータを読み解く

CarbonのAPI換算コストは、Opusの約18%、Astraの約12%です。試行錯誤を重ねながら何度も作り直すタイプの進め方だと、この差は複数ラウンドのタスクで積み上がっていきます。Astraの所要時間は68分で、Opusの半分に届きません。納品スピードが重要な場面に向いています。Opusは所要時間が最長でコストは中間ですが、その分、3つのなかで著者がいちばん満足した成果物に仕上がりました。

表には見落としやすい点があります。3つとも、入力トークンが出力トークンを大きく上回っているのです。表のデータから計算すると、入力と出力の比率はCarbonが約64:1、Opusが約410:1、Astraが約334:1です。これはエージェント型開発の特徴と関係しています。モデルは毎ラウンド、コードやスタイル、ページの状態といったコンテキストを読み直す必要があり、実際に「書き出される」コードはごく一部にすぎません。Opusの入力量は2億近くに達しており、このタスクでコンテキストのやり取りが大量に発生したことがわかります。

もうひとつ注目したいのは、トークン数と費用が比例していないことです。Astraの入力トークンはOpusの3分の1ほどなのに、換算コストはAstraのほうが高くなっています。単価やキャッシュ課金といった要素も大きく効いているわけです。コストを見積もるときは、トークン使用量の少なさだけで判断せず、各モデルの実際の課金ルールに沿って計算する必要があります。本記事では具体的な単価には触れません。最新の数字は各社の公式価格ページでご確認ください。

なぜ Carbon、Opus、Astra で同じプロンプトなのに結果が違うのか

同じプロンプトを使っても三者三様の結果になるのは、モデル自体の違いだけが理由ではありません。今回のテストでは、各モデルを自社の開発ツール上で動かしました。そのため、モデルの能力、ツールの呼び出し方、ブラウザでの自己チェックの仕組み、コンテキスト管理が組み合わさって、最終的な成果物が決まっています。

公式資料を見ると、Web開発能力について三社がアピールしているポイントはそれぞれ異なります。

• Google（Carbon + Antigravity）：フロントエンドのデザイン、ブラウザでの検証、動的エフェクト、複雑な3Dコンテンツ、マルチエージェント開発を強調しています。公式の事例には、2回のプロンプトで Google Merchandise Store をリデザインした例や、Three.js を使った3Dインタラクティブ体験の制作があります。
• OpenAI（Astra + Codex）：Astra の公式紹介では、Webサイト、アプリ、ゲームの開発能力と、生成後にフロントエンドの品質チェックを走らせるワークフローを強調しています。
• Anthropic（Opus + Claude Code）：公式資料には同一課題での比較はありません。ただ、サードパーティの Proofyard/Woofocus が 2026年10月24日に行ったテストでは、Opus 5.5 で家具工房のトップページの初版デザインと修正を完了しており、API料金で計算すると 4.34 ドルでした。このテストは、本記事の Carbon・Astra と直接比較したものではありません。

Carbon、Opus、Astra のランキングデータの見方

単発の実測だけでなく、複数タスクを集計したランキングも参考になります。下表のデータにはすべて取得日を付けています。Elo スコアは各プラットフォームのテスト方法によって変わるため、異なるランキング同士を直接比べることはできません。

どちらのランキングでも Opus がリードしています。これは、今回の再現テストでの筆者の主観的な順位付けとも方向が一致しています。Carbon は WebDev ランキングでは Astra とほぼ並んでいますが、対象範囲の広い DesignArena の総合ランキングでは下位です。つまり「単一ページのWeb開発」と「複雑なエージェント型デザインタスク」は別の能力軸だということです。モデルを選ぶときは、自分のタスクの種類に合わせて判断しましょう。

API で Carbon、Opus、Astra を自分で再テストする方法

他人が一度だけ行ったテストは、あくまで出発点にすぎません。いちばん確実な判断材料は、自分のタスクで実際に試してみた結果です。以下のサンプルでは、OpenAI 互換インターフェースを使って同じプロンプトを複数のモデルに順番に送り、所要時間とトークン使用量を記録します。ただし、これが測定するのはモデルがコードを直接生成する部分だけです。元の評価で行われていた、Antigravity、Claude Code、Codex のような複数ターンのツール呼び出しやブラウザでのセルフチェックは含まれません。

最小限のサンプル

from openai import OpenAI

client = OpenAI(
    api_key="YOUR_API_KEY",
    base_url="https://api.apiyi.com/v1"  # APIYI の OpenAI 互換インターフェース
)

resp = client.chat.completions.create(
    model="your-model-id",  # プラットフォームのモデル一覧に載っている実際の名前を指定してください
    messages=[{"role": "user", "content": "输出一个单文件 HTML 食品品牌官网首屏，米白背景、居中悬浮产品罐头、酒红色弧形背景"}]
)
print(resp.choices[0].message.content[:500])
print(resp.usage)  # 入力・出力のトークン数を確認

import time
from openai import OpenAI

client = OpenAI(
    api_key="YOUR_API_KEY",
    base_url="https://api.apiyi.com/v1"  # 1 つのキーで複数社のモデルを呼び出せます
)

# モデル ID はプラットフォームのモデル一覧に従ってください。価格の単位は「米ドル / 100 万トークン」です。公式の価格ページを見て入力してください
MODELS = {
    "model-a": {"input_price": 0.0, "output_price": 0.0},
    "model-b": {"input_price": 0.0, "output_price": 0.0},
    "model-c": {"input_price": 0.0, "output_price": 0.0},
}

PROMPT = """请复刻一个食品品牌官网首屏，输出单文件 HTML：
1. 米白色背景，中央悬浮产品罐头，酒红色弧形背景，橙色环绕文字；
2. 顶部包含品牌标志、语言切换和菜单按钮；
3. 罐头支持鼠标拖动旋转，悬停时有缩放反馈；
4. 同时适配 1440x900 和 390x844 两种尺寸。
只输出完整代码。"""

def run(model: str, price: dict) -> dict:
    start = time.time()
    resp = client.chat.completions.create(
        model=model,
        messages=[{"role": "user", "content": PROMPT}],
    )
    elapsed = time.time() - start
    usage = resp.usage
    cost = (usage.prompt_tokens * price["input_price"]
            + usage.completion_tokens * price["output_price"]) / 1_000_000
    html = resp.choices[0].message.content
    with open(f"{model}.html", "w", encoding="utf-8") as f:
        f.write(html)
    return {
        "model": model,
        "seconds": round(elapsed, 1),
        "input_tokens": usage.prompt_tokens,
        "output_tokens": usage.completion_tokens,
        "api_equivalent_cost": round(cost, 4),
    }

if __name__ == "__main__":
    for name, price in MODELS.items():
        try:
            print(run(name, price))
        except Exception as e:
            print(name, "调用失败：", e)

スクリプトを実行すると、モデルごとに HTML ファイルが 1 つずつ生成されます。続いて、第 2 ラウンドで挙げた 4 ステップのチェックリストに沿って、ブラウザでレイアウト、インタラクション、コンソールエラーを順に確認します。そのうえで、所要時間と API 換算コストを踏まえて判断してください。1 回ごとのばらつきを抑えるため、各モデルとも最低 3 回は実行することをおすすめします。

🚀 すぐに試すためのヒント：同じ課題で比較するとき、いちばん面倒なのは、各社のキーを別々に申請したり、SDK の違いに合わせたりする作業です。この部分は APIYI（apiyi.com）を使うと手軽に済みます。1 つの API キーで OpenAI、Claude、Gemini などの主要モデルを呼び出せ、インターフェースは OpenAI 互換です。新規ユーザーには無料のテスト枠もあるので、まず小さなサンプルで比較の流れを確認するのに向いています。

Carbon、Opus、Astra のシーン別おすすめと選び方

今回のテスト結果とランキングデータをもとに、開発の目的別に大まかな絞り込みができます。下表の「根拠」列には、できるだけ情報の出典タイプを記載しているので、参考にする際の目安にしてください。

Carbon が向いているシーン

• プロトタイプの探索期：さまざまなページ案をすばやく試したいとき。1回あたりのコストが低ければ、その分何度も回せます。
• 個人プロジェクトや予算が限られたチーム：品質が許容範囲であれば、長期的な呼び出し費用の差は大きくなります。
• メイン開発＋人によるチェック：まず Carbon で初版を作り、仕上げの確認は人や別のモデルに任せる使い方です。

Opus が向いているシーン

• ブランドサイトやマーケティング向けランディングページ：見た目の再現度やディテールへの要求が高く、手戻りのコストが呼び出しコストより高くつく場合です。
• インタラクションが複雑なページ：3D表示、ドラッグ操作、スクロール連動アニメーションが多い場合は、最終的な完成度がより重要になります。

Astra が向いているシーン

• 納期がタイトなとき：短時間で動作する完成ページが必要な場合です。
• フロントエンドのQAプロセスを重視するとき：公式が生成後の品質チェックを強調しているため、検収の工程をワークフローに任せたいケースに向いています。

💡 選び方のヒント：今回のテストは、実際のワークフローを横並びで観察した結果であり、絶対的なランキングではありません。最終的な判断基準は、あなた自身の同じタスクでどれが実際にうまく動き、どれだけの費用と時間がかかったか、という点です。APIYI（apiyi.com）を使って同じプロンプトで小規模に再テストしてから、メインで使うモデルを決めることをおすすめします。

よくある質問 FAQ

Carbon、Opus、Astra の要点 Key Takeaways

• テストの性質：同じ公式サイトの再現タスクを、3つのワークフローでそれぞれ1回ずつ実行しました。実際のシーンを横並びで観察したものです。
• デザインの再現度：筆者の評価が最も高かったのは Opus で、次が Astra、Carbon は最後でした。
• 速度：Astra は68分で最速でした。所要時間は Opus の約半分です。
• コスト：Carbon の等価コストは10.86ドルで、Opus の約18%、Astra の約12%です。
• コスト構造：Agent 開発では入力トークンが中心になります。単価とキャッシュルールも請求額を左右します。
• ランキングの参考値：Opus は Arena WebDev と DesignArena の総合ランキングのどちらでも首位でした。ただし、ランキングごとに評価基準は異なります。
• 始め方：APIYI（apiyi.com）なら、1つのキーで同じお題の小規模な再テストができます。その結果を見てから、メインで使うモデルを決めましょう。

まとめ

Carbon、Opus、Astra で同じウェブサイトを作って比較した結果、結論は大きく3点あります。

1. 品質：今回の再現タスクでは、Opus の作品が評価者である筆者から最も高い評価を得ました。製品本体の見せ方や、要素間の階層関係がより際立っていました。
2. 速度：Astra はわずか68分でタスクを完了しました。納期が厳しいプロジェクトに向いています。
3. コスト：Carbon の API 等価コストは、他の2つよりはるかに低く抑えられています。高頻度のイテレーションや、予算に制約があるケースに適しています。

3つのモデルとも、高品質なウェブ開発をこなせる力を備えています。違いが出るのは、ビジュアルの再現度、インタラクションの実装、所要時間、コストのバランスをどう取るかという点です。「どのモデルが絶対に最強か」を追い求めるよりも、自分の開発目標をはっきりさせ、同じタスクで実際に試してみるほうが近道です。APIYI（apiyi.com）の統一インターフェースを使えば、複数のモデルを同じ条件で再テストできます。実際に動いた成果物とかかった費用を、最終的な選定の判断材料にしてください。

📚 参考資料

1. Gemini 4 Carbon: No-Hype Full Review & Testing：Pat Simmons / AI for Mortals による、同一テーマのWebサイト再現評価（2026-11-11）
2. リンク：aiformortals.co/blog/gemini-4-carbon-review

3. 説明：本記事のテスト設定、所要時間、トークン数、API換算コストのデータの主な出典

4. 3つの再現作品ページ：Carbon、Opus 5.5、Astra の公開作品

5. リンク：aiformortals.co/builds/agrumea-clone-gemini-4-carbon、aiformortals.co/builds/agrumea-clone-opus-5-5、aiformortals.co/builds/agrumea-clone-gpt-6-astra

6. 説明：ブラウザ上でインタラクションの動作を自分で確認できます

7. Agrumea Farm 公式サイト：テスト対象の元サイト

8. リンク：agrumeafarm.it/en

9. 説明：再現度を比較するために使用

10. Arena WebDev リーダーボード：Web開発の対戦投票ランキング

11. リンク：arena.ai/leaderboard/code/webdev

12. 説明：本記事では 2026-11-10 時点のデータを引用

13. DesignArena リーダーボード：総合的なエージェント型デザインランキング

14. リンク：designarena.ai/leaderboard

15. 説明：本記事では 2026-11-11 時点のデータを引用。複数種類のデザインタスクを対象としています

16. Google 公式ブログ：Gemini 4 Carbon 公開のお知らせ

17. リンク：blog.google/innovation-and-ai/models-and-research/gemini-models/gemini-4-carbon-now-available/

18. 説明：フロントエンドデザインとブラウザ検証における Carbon の公式な位置づけ

19. OpenAI 公式紹介：GPT-6 Astra

20. リンク：openai.com/index/gpt-6-astra/

21. 説明：Astra のWeb開発およびフロントエンドQAワークフローの解説

22. Woofocus によるテスト：Claude 各モデルのWebデザイン比較（2026-10-24）

23. リンク：app.woofocus.com/blog/best-claude-model-for-web-design
24. 説明：Opus 5.5 のデザイン・修正タスクに関する補足資料。3モデルを直接比較したものではありません

著者：APIYI 技術チーム
技術交流：APIYI のウェブサイトトップページからお気軽にお問い合わせください。接続に関するより詳しい資料は docs.apiyi.com のドキュメントセンターをご覧ください

関連記事

• 群雄逐鹿：総合能力、プロフェッショナルな成果物、タスクコストから比較する Gemini 4 Carbon、Claude Fable 5.2、GPT-6 Astra:AAの総合指数とMKAの専門タスク評価に基づき、能力、納品品質、所要時間、タスクコストの観点からGemini 4 Carbon、Claude Fable 5.2、GPT-6 Astraを比較し、集計基準と有意性の限界についても説明します。
• Gemini 4 Carbon と Claude Opus 5.5 の比較:主要な複数の違いと3つのシナリオ別の選び方:仕様、価格、思考メカニズム、プロトコル、公式モデルカードのスコアという7つの観点からGemini 4 CarbonとClaude Opus 5.5を比較し、「どのタイプのタスクをどちらに任せるか」というモデル選定の提案を示す。
• Claudeが首位、Geminiのコストは3分の1未満：GDPxの13モデルのコスパ格差を解説:SemiAnalysisが公開したGDPxの初回ランキングを読み解き、Claude Opus 5.5、Gemini 4 Carbon、GPT-6 Astra、Sol、Luna、DeepSeekのスコアと「平均タスクコスト」を比較し、評価コストと公式トークン価格を区別する。
• Fable 5.5 vs GPT-6.2 Astra：どちらが優秀で、どう選ぶ？6つのデモと3つの不公平な点:Fable 5.5とGPT-6.2 Astraはいずれもデモが公開されていますが、同じ課題での比較はなく、本記事では6つのデモの証拠レベル、現行フラッグシップであるFable 5.1とGPT-6 Astraの公式仕様と価格を整理し、再実行可能なモデル選定評価方法を紹介します。
• Claude Fable 5.2とClaude Opus 5.5を比較：どちらを選ぶべき？:Claude Fable 5.2とClaude Opus 5.5を比較すると、標準価格は2倍ですが、すべての項目で勝っているわけではありません。本記事では、仕様、価格、デフォルトの努力レベル、公開時の成績表の4つの観点から、タスク別のモデル選択表を紹介します。
• Gemini 4 Argon vs Claude Opus 5.5：Googleの19項目評価表を徹底分析、4つの観点からどちらが優れているかを見極める:Google公式のGemini 4 Argon評価表に基づき、知識労働、エージェント型プログラミング、長文コンテキスト、マルチモーダルなど19項目のベンチマークでGemini 4 ArgonとClaude Opus 5.5を比較し、Artificial AnalysisとValsによる独立評価、価格、出力上限、利用可能性の違いも踏まえて、用途別の選定を提案します。
• Gemini 4 ArgonとCarbonはそれぞれどのような位置付けですか？:Gemini 4 の Argon と Carbon を、推論への投入量、応答速度、タスクコストの観点から比較し、開発者がタスクの難易度に応じて「十分な」モデルと推論レベルを選べるよう支援します。
• Kimi K3.1 Pro vs Claude Opus 5.5：コーディング能力にはどれほど差があり、価格は何倍違う？:Kimi K3.1 ProとClaude Opus 5.5はプログラミング能力が同等クラスで、入力・出力の単価には2倍の差がある：公式とサードパーティの2つの基準でベンチマークスコアを比較し、5段階の価格を並べ、単一タスクのコスト計算とタスク別の選定表を掲載する。
• claude-sonnet-5-5とclaude-opus-5-5の比較：Opusはより高速、Sonnetは安さだけ？6組のデータで企業向け長文コンテキストAgentの最適な組み合わせを解説:claude-opus-5-5は予想以上に高速だが、claude-sonnet-5-5に残るのは価格面の優位性だけなのか？本稿では速度、推論レベル、Token効率、キャッシュ課金、長文コンテキスト品質、Agentの役割分担という6つの観点から比較し、企業の長文入出力シナリオ向けモデル構成案を提示する。