これは何？
AIにどんなものが生成できるかを試してみたくて、Claudeにピクセルアートの「サンゴ礁の一日」を依頼しました。外部ライブラリも画像ファイルも使わない、HTML1ファイルだけで動くアニメーションです。スプライトはすべてコード内のドット配列やプロシージャル生成で描かれていて、生き物はそれぞれ自分のルールで動き、互いに反応し合います。
生き物と挙動
ボイド（分離・整列・結合）で群泳。サメが来ると散開し、数秒後に再集結。夕方以降は岩陰で休む。
画面を往復して巡回し、ときどき群れに狙いを定めて接近。遠景にもう1匹。
イソギンチャクの周りを離れず、サメやウミガメ、エイが近づくと触手の中へ隠れる。
ゆったり横断し、水面に顔を出して息継ぎ。泡を吐く。
カニは横歩きと砂つつき。エビは大きな影が来ると尾を使って後ろへ跳ぶ。
岩場を這い、サメが近いと岩の色に擬態。至近距離では墨を吐く。夜はカニを追う。
砂地すれすれを滑空して砂煙を上げ、ときどき砂をあさる。
大きな生き物やカニが近づくと砂に引っ込み、ゆっくり顔を出す。
ペアでサンゴをつついて回る。サメが来るとサンゴに逃げ込む。
拍動で浮き、ゆっくり沈む。夜になると発光する。
夜に巣穴から体を伸ばし、近くを通る魚に噛みつこうとする。
夜だけ岩穴から現れ、点滅しながら群れで泳ぐ。
生き物が通った跡がふわっと光る。夜はサンゴの先端も蛍光する。
光の筋、砂地のコースティクス、揺れる海藻、マリンスノー、水面で弾ける泡、太陽・月・星。
30色って本当？
プロンプトでは「32色前後のパレット」と指定し、コードには30色のパレットが定義されました。生き物や地形のドットは、この30色だけで塗られています。
ただし、背景の水と空のグラデーション、時間帯の色味、光の筋や透け感は上から重ねて表現しているので、画面全体の色数は30色を超えます。実際のフレームを数えると次のとおりでした。
使ったプロンプト
# 依頼 ピクセルアートの「サンゴ礁の一日」アニメーションを、単一のHTMLファイル（Canvas）で実装してください。 目的は「AIが1回のプロンプトでここまで作れる」ことをXで見せることです。眺めているだけで驚きがあるくらい、生き物の数と動きの種類を多くしてください。 # 世界観 - 浅い海のサンゴ礁を横から見た断面構図。上部に水面、下部に砂地とサンゴ、岩場 - 雰囲気は「にぎやかで情報量多め」。画面のどこを見ても何かが動いている状態にする - 時間が流れ、朝→昼→夕→夜→朝とループする（1周90秒程度） - 昼：水面から光の筋（コースティクス）が差し込み、色鮮やか - 夕：全体が橙色に寄る - 夜：暗くなり、クラゲや夜光プランクトンが発光する。昼の魚は岩陰で休み、夜行性の生き物が出てくる # 生き物（それぞれ独自のルールで自律的に動くこと） - 小魚の群れ：ボイド（分離・整列・結合）で群泳する。複数の群れを配置 - サメ（1〜2匹）：ゆっくり巡回し、ときどき群れに近づく。近づかれた群れは散開して逃げ、しばらくすると再集結する - クマノミ：イソギンチャクの周りを離れず、危険が近づくと中に隠れる - ウミガメ：画面をゆったり横断し、たまに水面へ息継ぎに上がる - カニ・エビ：砂地を横歩きし、ときどき砂をつつく - タコ：岩場を移動し、サメが近いと体色を岩と同じ色に変える - エイ：砂地すれすれを滑空し、砂煙を上げる - クラゲ：拍動しながら漂う。夜に発光 - そのほか、泡、揺れる海藻、漂う粒子など背景の動き - 生き物同士の反応（逃げる・隠れる・追う）が見えるようにし、同じ光景が二度と繰り返されないようにする # ピクセルアートの表現 - 内部解像度は低く（例：320×180）描画し、画面サイズまで整数倍で拡大。補間はオフ（image-rendering: pixelated、imageSmoothingEnabled = false） - 限られたパレット（32色前後）で統一感を出す - スプライトは画像ファイルを使わず、コード内のドット配列やプロシージャル生成で作る - 各生き物に数フレームのアニメーション（ヒレの動き、拍動など）をつける - 奥行きを出すため、背景・中景・前景の3層程度で描き分け、奥ほど色を青く薄くする # 技術要件 - 外部ライブラリ・外部ファイルなし。HTML1ファイルで完結し、ブラウザで開くだけで動く - requestAnimationFrameで60fpsを保つ。生き物の数が多くても重くならないよう工夫する - アスペクト比16:9。ウィンドウサイズに合わせて中央に配置し、余白は黒 - 開いた瞬間から見栄えがよい状態で始まる（生き物がすでに配置されている） - 録画の邪魔になるUIは一切表示しない。キー操作（例：Dキー）で生き物の数やFPSを出すデバッグ表示だけ用意してよい # 仕上げ - 実装後、コードを見直して、動きの不自然な点や、止まって見える領域がないか確認し、改善してから最終版を出してください - 最後に、実装した生き物と挙動の一覧を簡潔に添えてください --- （追加指示） 今更だけど20秒くらいのアニメーションでも充分
どうやって作られたか
- 上のプロンプトを投げ、直後に「20秒でも充分」と一言だけ追加。これを受けてAIがHTML1ファイルを実装（依頼文の「1周90秒」ではなく20秒ループになっているのはこのため）。
- 同じ回答の中で、AIが自分でヘッドレス描画して各時間帯の画面を書き出し、不自然な点を直してから最終版を出力。群れが散ったまま戻らない、クラゲが水面に溜まる、夕焼けが一瞬で終わる、などを修正。
- 後から別の依頼で、コードを1フレームずつ描画してffmpegで20秒のMP4に書き出し（画面録画ではないのでコマ落ちなし）。