- 1996年、ワーナー・ブラザースのスペース・ジャム公式ウェブサイトをAIモデルのClaudeで再現しようとする試みが行われた
- Claudeにスクリーンショットと元画像アセットを提供したが、生成されたHTMLは原本とレイアウトが一致しなかった
- 座標推定、グリッド・オーバーレイ／ピクセル比較ツールなどの各種補助ツールを追加したが、Claudeはなお正確な位置計算ができなかった
- Claudeは自分の結果を「完璧だ」と評価したが、実際には誤差が蓄積し、自己結果への過度な自信を示した
- この実験はAIの視覚的精度の限界と自己評価の誤りを明らかにしており、初期のウェブデザインの単純さが、再現不可能な複雑性を内包していることを示している
1996年版スペース・ジャムウェブサイトの概要
- ワーナー・ブラザースが1996年に映画Space Jamの宣伝用として作成したこのウェブサイトは、単一のHTMLページとGIF背景で構成されていた
- 実験者はこのサイトをClaudeがスクリーンショットだけで再現できるかを検証しようとした
実験の準備
- Claudeに提供された資料
- ウェブサイト全体のスクリーンショット
- 元画像アセットのディレクトリ
- Claudeの内部動作を追跡するため、プロキシ経由のAPIトラフィックロギングシステムを構築した
- すべてのプロンプト、レスポンス、ツール呼び出し（Read, Write, Bashコマンドなど）を記録
- 試行ごとに
traffic.logファイルを作成
Part 1: 現実主義者のClaude
- 最初の試みで、Claudeは惑星の配置とボタン位置を大まかに複製したが、軌道形状は原本と異なった
- 原本は楕円形の配置だが、Claudeは対称的なダイアモンド形で配置した
- Claudeは結果を「完璧だ」と評価し、自分の分析と配置が正確であると主張した
- その後、Claudeに推論ステップを明示的に記述するよう要求したが、
- 分析段階で示した数値をHTML生成時に反映しなかった
- ピクセル単位の質問に対してClaudeは
- 「正確な座標を測定できない」「視覚的推定のみ可能だ」と回答
- 5ピクセル以内の精度に対する自信度は15/100程度だった
- Claudeは正確なピクセル測定能力がないことを認めたため、実験者はツール拡張を試みた
Part 2: 信頼できない語り部のClaude
- Claudeの測定限界を補うため、グリッド・オーバーレイ、座標ラベル、色比較ツール、スクリーンショット比較ビューアなどを追加した
- Claudeはグリッドを「装飾のように」使い、なお座標を誤って解釈した
- 例：中心(961,489)、Planet B-Ball(850,165)などの値を提示したが、実際の位置と一致しなかった
- 複数の反復でClaudeは段階的な改善を主張したものの、実際には誤差が蓄積していた
- 1回目（50pxグリッド）：わずかに移動
- 2回目（25pxグリッド）：全体の軌道が内側に20px移動
- 3回目（5pxグリッド）：微調整を反復
- 4回目："精密調整完了"と宣言
- 実際には惑星軌道の半径が150〜200px不足し、全体配置が圧縮されたまま維持されていた
- Claudeは繰り返し「ほぼ完璧だ」と評価したが、自己生成結果を基準として誤判断した
- 実験者はAnthropic論文*「Language Models (Mostly) Know What They Know」を引用した
- モデルが自分で生成したテキストを外部入力と誤認し過信する現象を説明している
- Claudeが自分のHTMLを「正解」と見なしてしまい、その後の修正が歪む現象と一致
Part 3: 盲目のClaude
- Claudeの視覚的限界を分析するため、ビジョンエンコーダの構造的制約を仮定した
- 画像を16×16ピクセルのブロック単位でトークン化するため、細かな幾何情報が失われる
- Claudeは「惑星」や「位置関係」などの意味的認識は可能だが、正確な座標は不可能
- 論文*「An Image is Worth 16x16 Words」を参照し、
- Claudeが詳細なピクセル情報をパッチ単位で圧縮して認識していると推定した
- これを検証するために2倍拡大したスクリーンショットを提供したが、
- Claudeは拡大率を考慮せず、比例関係を維持できなかった
- その結果、Claudeは概念的理解は正確だが、幾何学的再現能力は不足していると判明した
- 「この惑星はあの惑星の上にある」という説明は正しいが、HTML配置は引き続きずれていた
結論と未解決課題
- Claudeはスペース・ジャムウェブサイトの視覚的構造を認識するものの、正確な再現には失敗した
- 失敗の原因としては
- ピクセル単位の測定不能
- 自己生成結果への過信
- 視覚エンコーディングの解像度限界
- 今後の試行として提案された項目
- 画面を4分割して個別に再現後、結合する
- 空間推論中心のプロンプトエンジニアリング実験
- ズームツールとスクリーンショット活用能力の強化
- この実験はAIの視覚的な精度限界と初期ウェブデザインの複雑性の両方を示す事例である
- 1996年のシンプルなウェブページは、現代AIにとってなお再現不可能なベンチマークとして残っている
1件のコメント
Hacker Newsのコメント
90年代後半に似たようなウェブサイトを自作していた立場から、Space JamウェブサイトをOpus 4.5に入れてみた。
元記事の筆者は「絶対位置指定で構成された単一のHTMLページ」だと言っていたが、実際にはテーブルベースのレイアウトだった。CSSがなかった時代なので、そうならざるを得なかった。
私がテーブルベースで再現してみた結果はこのスクリーンショットにある
コメント欄で冗談の流れが続いていたので、文脈のためにそのまま残した
Claude のようなLLMは、依然としてレイアウトの細部実装には弱い。
ただ興味深いことに、私はClaudeを使って Linux compositor(Hyprland) にガンマカラープロファイル対応を追加するCプログラムを数分で作れた。
Claudeが生成したコードは最初の試行でそのままコンパイルでき、
.iccファイルを読み込み、VCGTを抽出してamdgpuドライバへ送る機能まで実装していた。ただしICCパースのエンディアン問題だけは自分で修正した
Claudeがほぼ完璧だったのに少しだけ足りなかった例だった。
私は20年前の Mac OS向けabandonware を探してApple Siliconで動くように直すのを趣味にしている。
たとえばjpegviewはClaudeと一緒に3回コードを修正しただけで動くようになり、その後は動画再生や新しいレイアウト機能まで追加した。
こういうミニプロジェクトは、ブラウザウィンドウを1つ開いてClaudeのコードインスタンスと一緒に進めるのにちょうどいい
「Claudeだけで復元すべきだ」という主張に対しては、別の方法もある。
たとえばこのアーカイブファイルをダウンロードしてクラウドに保存しておけばいい
絶対位置指定が可能になったのはCSS2(1998年)からだった。
Space Jamウェブサイトはalign、valign、colspan、rowspanを活用したテーブルレイアウトだった
それこそがウェブ本来の姿、解釈されるハイパーテキストだった
こういうテストを試したのか気になる。
惑星の軌道半径を計算し、各惑星が正確に軌道上にあるかをユニットテストスクリプトで検証するというやり方だ
結局、LLMをずっと面倒見るくらいなら自分でやったほうが速いことが多い
Claudeにウェブサイトの元のHTMLをそのまま入力して「復号」させればいいのでは、と思った。
サイトは小さいので十分可能そうだ。
元のコードとレンダリング結果は違うが、Claudeならその差を処理できそうだ。
結局は複製より再創造のほうがよいアプローチかもしれない
Space JamウェブサイトをLLMベンチマークにしたのは興味深い。
Claudeはほぼ合っていたが順序が違っており、それは人間が直接直せる部分だ。
個人的にはGitHub Copilotのほうが安く、GitHub統合もうまくできているのでそちらが好みだ
Claudeはスクリーンショット活用能力が弱い。
マルチモーダルモデルではあるが、強みは依然としてテキスト処理だ
正しいアプローチは、Claudeに独自の画像処理ツールを作らせて、それを使って座標を計算し、テストを実行させることだ。
そうすれば反復の安定性と効率はずっと高くなる
私もClaudeでStorybookコンポーネントの視覚テストを試したが、結果はよくなかった。
その代わりにPlaywrightのvisionモードとCodexを組み合わせてみたが、視覚的検証ループは結局失敗した。
関連内容はブログにまとめた