サンゴ礁の一日

1つのプロンプトから、単一HTMLのCanvasアニメーションとしてどこまで作れるか。

生成用のプロンプトは、別のClaudeとの対話で作成しました。最初のプロンプトのあとに追加指示を1回送り、昼夜の周期を90秒から20秒へ変更しています。

HTML / CSS / JavaScript を単一HTMLに収録。外部ライブラリ・外部画像はありません。Canvas 2Dの補間を切り、低解像度の描画を整数倍で拡大しています。

収録版は2026-09-25に取得したVercel公開版です。作品本体のHTMLは改変せず保存しています。

生成時間

記録なし

トークン

記録なし

コスト

記録なし

収録HTMLの行数

472行

収録HTMLのサイズ

43,727 bytes

行数・サイズは収録版の実測値です。Zenn記事に書かれている470行・43,528 bytesとは差があります。収録しているのはVercelの公開版です。

出典：Zenn記事に掲載されたプロンプト。

掲載にあたり、一部を省略しています。

# 依頼
ピクセルアートの「サンゴ礁の一日」アニメーションを、単一のHTMLファイル（Canvas）で実装してください。
眺めているだけで驚きがあるくらい、生き物の数と動きの種類を多くしてください。

# 世界観
- 浅い海のサンゴ礁を横から見た断面構図。上部に水面、下部に砂地とサンゴ、岩場
- 雰囲気は「にぎやかで情報量多め」。画面のどこを見ても何かが動いている状態にする
- 時間が流れ、朝→昼→夕→夜→朝とループする（1周90秒程度）
  - 昼：水面から光の筋（コースティクス）が差し込み、色鮮やか
  - 夕：全体が橙色に寄る
  - 夜：暗くなり、クラゲや夜光プランクトンが発光する。昼の魚は岩陰で休み、夜行性の生き物が出てくる

# 生き物（それぞれ独自のルールで自律的に動くこと）
- 小魚の群れ：ボイド（分離・整列・結合）で群泳する。複数の群れを配置
- サメ（1〜2匹）：ゆっくり巡回し、ときどき群れに近づく。近づかれた群れは散開して逃げ、しばらくすると再集結する
- クマノミ：イソギンチャクの周りを離れず、危険が近づくと中に隠れる
- ウミガメ：画面をゆったり横断し、たまに水面へ息継ぎに上がる
- カニ・エビ：砂地を横歩きし、ときどき砂をつつく
- タコ：岩場を移動し、サメが近いと体色を岩と同じ色に変える
- エイ：砂地すれすれを滑空し、砂煙を上げる
- クラゲ：拍動しながら漂う。夜に発光
- そのほか、泡、揺れる海藻、漂う粒子など背景の動き
- 生き物同士の反応（逃げる・隠れる・追う）が見えるようにし、同じ光景が二度と繰り返されないようにする

# ピクセルアートの表現
- 内部解像度は低く（例：320×180）描画し、画面サイズまで整数倍で拡大。補間はオフ（image-rendering: pixelated、imageSmoothingEnabled = false）
- 限られたパレット（32色前後）で統一感を出す
- スプライトは画像ファイルを使わず、コード内のドット配列やプロシージャル生成で作る
- 各生き物に数フレームのアニメーション（ヒレの動き、拍動など）をつける
- 奥行きを出すため、背景・中景・前景の3層程度で描き分け、奥ほど色を青く薄くする

# 技術要件
- 外部ライブラリ・外部ファイルなし。HTML1ファイルで完結し、ブラウザで開くだけで動く
- requestAnimationFrameで60fpsを保つ。生き物の数が多くても重くならないよう工夫する
- アスペクト比16:9。ウィンドウサイズに合わせて中央に配置し、余白は黒
- 開いた瞬間から見栄えがよい状態で始まる（生き物がすでに配置されている）
- 録画の邪魔になるUIは一切表示しない。キー操作（例：Dキー）で生き物の数やFPSを出すデバッグ表示だけ用意してよい

# 仕上げ
- 実装後、コードを見直して、動きの不自然な点や、止まって見える領域がないか確認し、改善してから最終版を出してください
- 最後に、実装した生き物と挙動の一覧を簡潔に添えてください

追加指示（1回）

今更だけど20秒くらいのアニメーションでも充分

最初のプロンプト中の「1周90秒程度」は当初の指定です。現在の作品は、この追加指示を反映した20秒周期です。

題材や表現、動きのルールを文章で伝え、外部ライブラリや画像素材を使わずに、生き物同士が反応する単一HTMLのアニメーションが生成されました。小魚がサメから逃げて再び集まり、夜には岩陰へ移動するなど、個別の動きが周囲の状況と結びついています。

1件だけの検証のため、生成結果の再現性は判断できません。

小さな生態系

小魚は3つの群れ、計54匹。サメが近づくと散開し、しばらくすると再集合します。夜になると岩陰へ移動。クマノミはイソギンチャクに隠れ、ウミガメは水面へ息継ぎに上がります。

カニ、エビ、タコ、エイ、クラゲ、チョウチョウウオも登場します。砂煙、泡、揺れる海藻、夜の発光まで、周囲の動きと反応がつながっています。

Claudeが加えたもの

指定になかったウツボ、7匹のチンアナゴ、12匹のヒカリキンメを追加。タコは擬態するだけでなく、サメの接近時に墨を吐きます。

観察の手がかり

地形は固定シードで再現され、生き物の初期値と行動は再読込ごとに変わります。開始前には3秒分の先行シミュレーションがあり、開いた瞬間から群れが動いています。

作品でDキーを押すと、FPS、時刻、生き物の数や状態を表示できます。もう一度押すと閉じます。