生成AI「Claude」によって1996年のウェブサイト「Space Jam」を再現する試み

「Space Jam」はバスケットボールを主題にしたアメリカのアニメーション映画です。「Space Jam」が公開された1996年は折しもインターネットが一般に普及しだした時期にあたり、「Space Jam」もウェブサイトを開設していたことが、当時を懐古する人々の話題に上ることがあります。そんな往年のウェブサイトを、対話型生成AI「Claude」を用いて再現しようという試みが、ソーシャルニュースサイトのHacker Newsで話題になっています。

I failed to recreate the 1996 Space Jam Website with Claude | j0nah.com
https://j0nah.com/i-failed-to-recreate-the-1996-space-jam-website-with-claude

エンジニアのJonah Glover氏は、「Space Jam」のスクリーンショットとアセットをClaudeに渡し、ランディングページを忠実に再現できるかどうかを検証しました。

I am giving you:

1. A full screenshot of the Space Jam 1996 landing page.
2. A directory of raw image assets** extracted from the original site

Your job is to recreate the landing page as faithfully as possible, matching the screenshot exactly.

しかしながら、生成結果は満足できるものではありませんでした。Claudeは再現が成功したと報告し、確かにオリジナルに似たものを生成しましたが、正確に再現したとは言えない代物だったのです。「Space Jam」のウェブサイトで最も特徴的な点として、ロゴを環状に取り囲むアイコン群がありますが、この配置がオリジナルに忠実なものとはならず、ダイヤ型に配置されていました。Claudeの出力を誘導するために、「ピクセル座標に関する具体的な質問」をしたり、構造化されたアプローチを提供したりしてみたものの、Claudeはピクセルの位置を正確に測定できず、オリジナルの再現には失敗しました。

ログの解析やClaudeの空間把握状況を分析するうち、Claudeは途中までは順調に分析を進めていたものの、HTMLを生成する段階でClaude自体の分析を無視した挙動を取ってしまうことが分かりました。そこでGlover氏はClaudeといくつかの問答を試みました。

・「『PLANET B-BALL』のテキストが始まる正確なピクセル位置は？」→「正確なピクセル座標を測定することはできません。」
・「正確なピクセル座標を抽出できますか？」→「いいえ。」
・「正確な距離を測れますか？」→「いいえ。」
・「5ピクセル以内の誤差に収める自信はどのくらい？」→「100点満点中15点です。」

Claudeはウェブサイトの構造は正しく理解していたものの、それを正確に再現することができなかったのでは、と考えたGlover氏は、再現精度の向上を目論み「スクリーンショットにグリッドオーバーレイを生成するスクリプト」「ラベル付きピクセル座標基準点」「色の差分比較」「再現したウェブサイトのスクリーンショットとオリジナルとを反復的に比較するツール」などをClaudeに追加で渡しました。するとClaudeはグリッドを使用するようになったものの、アイコン群の配置位置が圧縮されて不正確になってしまい、やはり出力結果はオリジナルを再現できませんでした。Claudeはグリッドに基づいてアイコンの位置を微調整しようとしましたが、全体的なレイアウトは再現できませんでした。

最終的に2倍のサイズに引き延ばしたスクリーンショットを使用しても「Space Jam」ウェブサイトの再現に失敗したGlover氏は、「Claudeは画像を理解する能力が限られており、ピクセルレベルでの正確な再現には向いていない」と結論づけました。つまり、画像が16x16ピクセルのブロックで処理され、アイコンの位置がぼやけてしまうため、HTMLに落とし込むことができなかった可能性があるということです。

この投稿に対して、ソーシャルニュースサイトのHacker Newsではさまざまなコメントが寄せられました。

I failed to recreate the 1996 Space Jam website with Claude | Hacker News
https://news.ycombinator.com/item?id=46183294

そのうち多くは、大規模言語モデル(LLM)はそもそもレイアウトや視覚的なものを正確に扱うのが苦手である、という指摘でした。

他に多かった意見は、1996年当時のウェブサイトが<table>・<tr>・<td>といったテーブル系タグを多用してレイアウトされていたことに言及し、Claudeにこれらのタグを使用してコードを生成するよう促すべきだった、というものでした。ウェブページのレイアウトやデザインを制御するCSSは、最初の公式な仕様であるCSS1が策定されたのが1996年12月であり、「Space Jam」ウェブサイトが作成された1996年当時はCSSが一般的に普及するより前でした。したがって当時のレイアウト調整はテーブルベースが主流だったため、Claudeにテーブルタグを使わせることで、より正確な再現が可能だったかもしれない、という指摘です。

そこへ、Claudeを使用して「Space Jam」ウェブサイトの再現に成功した、という投稿が行われました。

I successfully recreated the 1996 Space Jam Website with Claude
https://12gramsofcarbon.com/p/i-successfully-recreated-the-1996

theahura氏は、Claude Code(Opus 4.1)とnoriを採用し、webapp-testingスキルによるテストを利用して、「CSSによる位置合わせ」「星の画像をタイリングした背景」「フッターあり」の静的HTMLページの生成を計画しました。再現したウェブサイトについては、オリジナルのスクリーンショットとピクセル単位で比較するPlaywrightテストを作成し、忠実度を確認したとのことです。

当初は背景がピクセル単位で再現できず苦労したものの、参照用のスクリーンショットを背景画像に使用することで半ば強引に解決できました。背景の問題は最後まで残りましたが、当初の目標は達成できたため、「Space Jam」ウェブサイトの再現に成功したものとしています。

theahura氏は作業を通じて、テスト駆動開発(TDD)を採用して問題を「自動形式化」することは、LLMを使用する上で問題になる「コンテキストの腐敗」に対処する上で極めて重要であると結論づけました。Claudeは文脈を保持する能力が限られているため、テストを通じて生成物の正確性を継続的に検証することが重要である、ということです。そして、特定の用途やニーズに合わせてツールを適切に構成することが、LLMに指示するプロンプトよりも重要であると指摘しています。