Anthropicが公開した最上位モデルが、フロントエンド生成の実戦評価でも頂点に立った。

Claude Fable 5は、2026年6月10日にArena.aiが発表したCode Arena: Frontendのリーダーボードで総合1位を獲得した。HTMLとReactのサブリーダーボード、ブランド・マーケティング、参照デザイン、データ分析、コンシューマー向けプロダクト、ゲーム、シミュレーションなどのカテゴリでもいずれも首位だ。同社の前世代モデルClaude Opus 4.8を大きく引き離している。

この記事でわかること

  • Code Arena: FrontendでClaude Fable 5が何を達成したか
  • Code Arenaがフロントエンド開発をどう評価しているか
  • フロントエンド実務者がこの結果をどう読むべきか

公開翌日に前端評価の頂点へ

Introducing Claude Fable 5 and Claude Mythos 5
Claude Fable 5 and Claude Mythos 5 capabilities, API changes, and availability.
Claude Platform Docs

Claude Fable 5は2026年6月9日にAnthropicが一般公開したモデルだ。APIモデルIDはclaude-fable-5で、同社が「最も能力の高い広くリリースされたモデル」と位置づけている。Mythosクラスの推論力を持ち、長時間のエージェント作業やソフトウェアエンジニアリング向けに設計された。

公開から翌日、Arena.aiはXで次の内容を報告した。

  • Code Arena: Frontendの総合1位
  • HTML・Reactの各サブリーダーボードでも1位
  • Brand & Marketing、Reference-Based Design、Data & Analytics、Consumer Product、Gaming、Simulationsなど全サブカテゴリで1位
  • 2位のClaude Opus 4.8に対して大差をつけている

Fable 5は発表からわずか1日で、人間の投票に基づく前端コーディング評価の各軸を横断して首位を取った。

Code Arenaが測っていること

https://arena.ai/blog/code-arena/

Code ArenaはArena.aiが運営する、AIコーディングモデルの対戦型評価基盤だ。従来の静的ベンチマークとは異なり、モデルがツールを使ってファイルを作成・編集しながらWebアプリを組み立てる一連の流れを評価する。

評価の流れは次のとおりだ。

  1. 開発者が「ダークモード付きマークダウンエディタを作って」といったプロンプトを入力する
  2. 2つの匿名モデルが並行してアプリを生成する
  3. 評価者がプレビューを確認し、どちらが優れているかを投票する
  4. 投票結果からEloスコアが更新され、リーダーボードに反映される

スコアリングは3軸で行われる。機能性（意図どおり動くか）、使いやすさ（操作が直感的か）、忠実度（デザインや要件への一致度）だ。コードがコンパイルを通るかだけでなく、実際のプロダクト開発に近い判断が入る。

Frontendカテゴリの中身

https://arena.ai/blog/new-categories-code-arena/

Code ArenaのWeb開発評価は、単一の総合ランキングだけではモデルの強みが見えにくい。Arena.aiは25万件超のプロンプトを分析し、7つのドメインカテゴリを設けた。

カテゴリ 主な対象
Reference-Based Design 既存プロダクトやUIを参考にした再現
Brand, Marketing & Informational Websites ランディングページ、企業サイト、ポートフォリオ
Data & Analytics Applications ダッシュボード、管理画面、CRM
Consumer Product & Platform Applications EC、SNS、予約アプリなど
Gaming ブラウザゲーム
Simulations 物理デモ、教育用シミュレーション
Content Creation & Editing Tools ロゴメーカー、図形エディタなど

Arena.aiの発表によると、Claude Fable 5はこれらのカテゴリに加え、技術スタック別のHTML・Reactリーダーボードでも1位を占めている。ランディングページの見た目だけでなく、データ可視化やゲームロジックまで、前端開発の幅広いタスクで優位性が確認された形だ。

なぜ前端開発者に関係するか

フロントエンド実務では、単一ファイルのHTML生成と、Reactを使った複数ファイル構成のプロダクト開発では求められる能力が異なる。Code Arena: Frontendはその両方を分けて計測しており、Fable 5が両軸で1位という事実は、UIの再現からインタラクティブなアプリ構築まで一貫して強いことを示す。

Claude Fable 5はClaude API、Amazon Bedrock、Vertex AI、Microsoft Foundry、Claude Codeから利用できる。入力トークン100万あたり10ドル、出力トークン100万あたり50ドルで、コンテキストウィンドウは100万トークン、最大出力は12万8千トークンだ。前端のプロトタイピングやUI実装の自動化を検討しているチームにとって、実戦評価での首位はモデル選定の判断材料になる。

一方で、リーダーボードはあくまで人間の好みに基づく評価だ。Arena.ai自身も、信頼区間や投票数を併せて読むべきだと説明している。自社の技術スタックやデザイン要件に合うかは、実際のプロジェクトで試すのが確実だ。

ベンチマークの読み方

Code ArenaはWebDev Arenaの後継として再設計された評価基盤だ。旧リーダーボードのデータは新システムに統合されておらず、現在のランキングは新方式のみで構成されている。つまり今回の結果は、エージェント型コーディング評価の新基準における位置づけだ。

カテゴリ別リーダーボードを導入する前の分析では、モデルによって得意分野が大きく異なることが示されていた。GPT-5.5 Highはシミュレーションやゲームで強く、Claude Opus 4.7 Thinkingはカテゴリ横断で安定していた。Fable 5が全カテゴリで1位を取ったことは、前端タスクにおける汎用性の高さを示唆する。

ただしランキングはコミュニティ投票の集計であり、更新も続く。発表直後のスナップショットとして捉え、自社のワークロードで検証するのが実務的な使い方だ。

試すには

https://lmarena.ai/code

Code ArenaはArena.ai上で無料で試せる。画面上部の< >ボタンでCode Arenaモードを有効にし、プロンプトを入力すると2つのモデルが並行してWebアプリを生成する。両方のプレビューを確認したうえで投票すると、リーダーボードのデータに反映される。

Claude Fable 5をAPI経由で使う場合は、モデルIDにclaude-fable-5を指定する。Claude Codeでは/modelコマンドから選択できる。安全分類器により一部の高リスク領域では応答が拒否され、Claude Opus 4.8にフォールバックする点は、統合時に考慮が必要だ。

前端コーディングのAI選定は、静的ベンチマークの点数だけでは決めきれない。実際にアプリを組み立て、人間が使い勝手を比較するCode Arenaの方式は、そのギャップを埋める試みだ。Claude Fable 5がこの評価で全カテゴリ首位を獲得した事実は、フロントエンド開発の現場でモデルを選ぶ際の有力な参考になる。