【海外Xで話題】「Claude Opus 5」が1枚のHTMLで絵画風3D世界を生成？投稿内容と注意点を検証

海外Xで、Claudeが「1枚のHTMLファイル」だけで絵画のような3D世界を生成したとするデモ映像が話題になっています。

先に重要な注意点

投稿者は使用モデルを「Claude Opus 5」と説明しています。しかし、2026年7月26日時点でAnthropicの公式サイト上に一般提供モデルとして確認できる最新のOpusは「Claude Opus 4.8」です。本記事では、投稿内容と公式情報を分けて紹介します。

海外Xで話題になった「1枚のHTMLによる3D世界」
何がそれほどすごいのか
「Claude Opus 5」は公式モデルなのか
このデモから分かるWeb制作の変化
1. ページ生成から世界観生成へ
2. 試作品の制作速度が大きく上がる
本番サイトへ使う際の注意点
同じ方向性を試すプロンプト例
まとめ
次に決めること

海外Xで話題になった「1枚のHTMLによる3D世界」

今回注目されたのは、海外クリエイターのLentils氏が公開したデモ映像です。投稿文では、Claudeが美しい絵画風の世界を単一のHTMLファイルで生成し、画面上の大量の草が風に反応するシミュレーションまで実装したと説明されています。

映像には、広い草原、遠景の山、雲、滝、風に揺れる植物などが表示されています。単なる静止画ではなく、ブラウザでリアルタイムに動く3D空間として構築されている点が大きな特徴です。

海外Xの元投稿を見る

何がそれほどすごいのか

1．画像ではなく「動く体験」をコードで生成している

画像生成AIで草原の絵を作ること自体は、すでに珍しくありません。しかし今回の事例は、景色を1枚の画像として出力したのではなく、カメラ、地形、光、草、風の動きなどをコードで組み合わせています。

つまり、AIが作ったものは「絵」だけではありません。ユーザーがブラウザで閲覧できる、動的な体験そのものです。

2．単一HTMLは共有と検証がしやすい

「1枚のHTML」とは、HTML、CSS、JavaScriptを1つのファイルにまとめた構成を指します。外部ライブラリをCDNから読み込む場合もありますが、ビルド環境や複雑なフォルダ構成を用意せず、ファイルをブラウザで開くだけで試せるのが利点です。

AIに試作品を作らせる場合、単一HTMLは次のような用途と相性がよい形式です。

アイデアを短時間で視覚化する
他の人にそのまま共有する
スマートフォンや複数ブラウザで動作を確認する
修正前後の違いを比較する
ランディングページや展示用デモを試作する

3．個人開発でも高度な表現へ到達しやすくなる

従来、ブラウザで動く3D表現を制作するには、JavaScript、WebGL、Three.js、シェーダー、3Dモデリング、パフォーマンス最適化など、複数分野の知識が必要でした。

生成AIがコードの土台を作ることで、専門家でなくてもプロトタイプへ到達しやすくなります。完成品を完全自動で作れるという意味ではありませんが、「アイデアを動く形にするまで」の距離は明らかに短くなっています。

「Claude Opus 5」は公式モデルなのか

ここは、今回の話題を紹介するうえで最も注意が必要な点です。

元投稿では「Claude Opus 5 made this…」と説明されています。一方、Anthropicの公式Opus製品ページでは、2026年7月26日時点の最新モデルとしてClaude Opus 4.8が案内されています。

Anthropicは2026年5月28日にOpus 4.8を発表し、1Mコンテキストウィンドウを備えた、コーディングやAIエージェント向けの上位モデルとして提供しています。公式ページに掲載されたAPIモデル名は claude-opus-4-8、通常料金は入力100万トークン当たり5ドル、出力100万トークン当たり25ドルです。

Anthropic公式のClaude Opusページ
 Claude Opus 4.8の公式発表

また、Anthropicは2026年6月30日にClaude Sonnet 5を正式発表していますが、これはOpus 5とは別のモデルです。

Claude Sonnet 5の公式発表

現時点では、投稿者が先行提供モデル、内部表示、別名、誤記のどれを指しているのか、公開情報だけでは断定できません。そのため、「AnthropicがClaude Opus 5を正式発表した」と書くのは不正確です。

このデモから分かるWeb制作の変化

ページ生成から世界観生成へ

これまでのAIコーディングでは、フォーム、管理画面、料金表、ランディングページなど、実用的なUIの生成が中心でした。今回のデモは、AIが機能だけでなく、光、空気感、奥行き、動きといった世界観までコード化できることを示しています。

今後は「Webサイトを作る」という依頼が、文章やレイアウトを組むだけでなく、ユーザーが没入できる空間を設計する仕事へ広がっていく可能性があります。

試作品の制作速度が大きく上がる

クライアントへの提案や新サービスの企画では、説明資料だけよりも、実際に動くデモがあるほうが完成イメージを共有しやすくなります。

AIを使えば、最初から本番品質を目指さず、まず単一HTMLで方向性を確認し、その後にスマートフォン対応、アクセシビリティ、速度、保守性を改善する進め方が取りやすくなります。

本番サイトへ使う際の注意点

海外Xのデモが美しく動いていても、そのコードをそのまま商用サイトへ配置できるとは限りません。最低でも次の確認が必要です。

表示速度：大量の草やパーティクルはGPU負荷が高くなりやすい
スマートフォン対応：端末性能に応じて描画数や解像度を落とす必要がある
ブラウザ互換性：Safari、Chrome、Firefoxなどで挙動が異なる場合がある
アクセシビリティ：3D演出を停止できる設定や代替コンテンツが必要
保守性：1ファイルにすべて詰め込むと、規模が大きくなった際に修正しにくい
権利確認：外部素材、フォント、ライブラリのライセンスを確認する
セキュリティ：AI生成コードに不審な通信や危険な入力処理がないか確認する

単一HTMLはプロトタイプには強力ですが、運用段階ではCSSやJavaScriptを分離し、テストや監視を追加する判断も必要です。

同じ方向性を試すプロンプト例

以下は元投稿で使用されたプロンプトではなく、同様の方向性を検証するためのZenvix Labオリジナル例です。

1つのHTMLファイルだけで動作する、絵画風の3D草原を作成してください。

要件:
- HTML、CSS、JavaScriptを1ファイルにまとめる
- 草原、山、空、雲、滝をプロシージャルに表現する
- 草が風の方向と強さに応じて揺れる
- マウスまたはタッチ操作でカメラをゆっくり動かせる
- スマートフォンでは草の本数と描画品質を自動的に下げる
- 「動きを減らす」設定を尊重する
- 外部素材を使う場合は、使用元とライセンスを明記する
- 完成後に、構造、負荷が高い処理、修正ポイントを説明する

最初は軽量版を作り、動作確認後に草、光、風、遠景を順番に改善してください。

一度の指示ですべてを完成させるより、軽量版から段階的に改善したほうが、問題が起きた場所を特定しやすくなります。