Taken apart
終電のあと、列車は回送で車庫に戻る。ここは、このサイトの車庫。一夜の一コマを本物の層に、制作の日々を列車ダイヤに、ばらして見せる。
作ったのは Shohei Kitajima と AI。最初の版は Codex で、2026-09-29 からは Claude Code と。写真は、どれも生成したもの。
Seen straight on,
he is the I.
本編の最後の一コマを、ページが重ねている 7 枚の板に分けた。手前の板ほど小さく描くので、正面からは元の絵のまま。回り込むと、彼と名前は別の板で、1 点からだけ揃っていたことが分かる。
仕組み
- 本物の板フッターは DOM と CSS だけの合成。板は本編のページそのものから、ほかの板を隠して 1 枚ずつ、2 倍の解像度で撮った。
- だまし絵奥行き d の板を (P − d) / P の大きさで描く（P は視点までの 1800 px）。正面からは、どの板も元の場所に重なる。
- 消えた I名前が伸びきると、I が 0.9 秒で消え、彼がその位置（画面幅の 79.1%）に立つ。点線の枠が、その I。
- この形だけ3:2 より縦長の画面とスマホでは、名前が彼の手前に来るので、この重なりはない。分けたのは 1512×820 の一コマ。
Stopped at 00:24,
read by its own lens.
プロローグで時間が 0.9 秒止まる一コマ。本編では AI レンズが車両を読む場面で、ここでは同じ走査線が通ったあとに、その一コマの作り方の札が付く。札の値は、すべて実際の値。
- 列車Blender 5.2.2（Cycles、OptiX、RTX 4070 Ti SUPER）。4 両 79.5 m、帯はサイトのライムに寄せた黄緑。2880×1620 で 1 コマ平均、列車 2.7 秒・光 30.8 秒。CAR の箱は、カメラ空間の線路とレンズから、車両ごとに 8 隅を投影。
- 00:24名前と同じ書体の中抜き。0・0・:・2・4 が別々の管で、電源が一度しゃくり、2 から順に瞬いて落ち、最後の 0 が一度強く光って消える（約 1 秒）。
- 看板写真の紫の看板の 4 隅から射影変換。時刻とレンズ名は別のテクスチャで、最後のパスが画素ごとに選ぶ。
- 彼背景を差し戻して色を求めるので、止まっているときは写真と同じ画素。後ろは、輪郭の 4.5 px 外まで作り直した背景。
- 止まる 0.9 秒動画を止め、ヒーローの世界の時計（雨・ネオン・霧）も止める。その間に走査線が横切って AI レンズへ。
- 街灯写真の (822, 241) の灯具。列車の層だけ、Blender の同じ位置に 30 W の面光源を置き、車体に流れる映り込みを作った。
本物の層に分ける
同じ瞬間（動画の 2.4 秒、フレーム 72）を、写真の設計サイズ 1672×941 で 10 枚の層に分けた。列車と光は Blender の再レンダーの EXR、カメラ合わせは納品の図、AI の箱はサイトと同じ線路の幾何から。
仕組み
- 写真生成した雨の夜の街（1672×941。大きな画面では 3344 に差し替える）。本編では奥から、街・名前・彼の順に重ねる。
- 彼の後ろの背景彼の下と輪郭の外 4.5 px だけを作り直した背景。層がずれても、縁に元の彼が残らない。
- カメラ合わせBlender のカメラ（焦点距離 30.06 mm、高さ 1.6 m、6.9° の見上げ）と、高架・街灯・建物の 3D のプロキシを、写真の輪郭に重なるように解いた図。写真が生成なので、遠近は完全には合わない。
- 深度プロキシまでの距離（ここでは 2〜150 m を線に）。納品物で、サイトは使っていない。
- 00:24本番はヒーローのシェーダーが街の層に描くので、列車と彼の後ろ。ここでは位置と書体を SVG で再現した。
- 列車と光列車だけの層と、水面・壁・霧に落ちる光だけの層。動画では上半分に色を sRGB(L/(1+L)) で、16 px あけて下半分に覆いを入れ、白より明るい光を残す。光は見えるよう 4 倍に明るくしている。
- AI の箱線路（カメラ空間の原点・向き・レンズ）と、フレームごとの先頭の位置から、車両の 8 隅を投影。右の建物の所で切る。
Shot three times,
kept once.
大きな 00:24 が消える 1 秒は、3 回作った。同じ瞬間を、作った順に同じ枠で並べる。どれも、その版のコードを動かして撮った録画。1 本目だけは、コミットする前にそのとき撮った録画しか残っていない。
- 吸い込み TAKE 1 · 10-22 · 未コミット大きな 00:24 が回りながら縮み、看板へ吸い込まれる。監督は「なんか古の powerpoint のアニメーションっぽくて引っかかるかも」。昔のスライドに付けた、終了のアニメーションのこと。
- 電源断 TAKE 2 · 10-22 · edbadb6ネオン管の電源が一度揺らいで、残光なしで切れる（0.23 秒）。消え方には世界の中の理由を付ける、と決めた版。監督は「もうちょいネオン管が寿命切れで切れる時みたいな点滅感が欲しいかな。ここから終電後の世界が始まる、みたいな」。
- 寿命 TAKE 3 · 10-22 · 1978134 · 本番0・0・:・2・4 が別々の管として、2 から順に瞬いて落ち、戻りかけてはまた消え、最後の 0 が一度強く光って暗くなる（約 1 秒）。同じ日のうちに、闇に目が慣れていく明るさの弧も入った。いま本編で流れているのが、これ。
使わなかったカット
作ったが、本編に残らなかった動き。外した理由と並べる。押すと 1 回だけ流れる。
-
PARTICLES · 09-30 → 10-21 · 14d2380
粒子
最初のイントロの 1 本。粒子が渦を巻いて、名前に集まる。
3 本からくじで選ぶイントロだった。一夜の話ができる前の、どこにでもある始まり。3 本とも、終電のプロローグ 1 本に替えた。
WARP · 09-30 → 10-21 · 14d2380ワープ
4 つの言葉の枠を光速で抜け、閃光から名前へ。
ほぼ白い閃光が、画面いっぱいに 1 秒に約 4 回。点滅の基準を超えるので、先にくじから外した。ここでも動画にせず、4 コマだけ。
-
KINETIC · 09-30 → 10-21 · 14d2380
文字の組み上げ
SYSTEMS・AI・DATA・WEB3 を、文字の動きで叩く。
点滅は 1 秒に 3 回で、上限ちょうど（このカードの大きさなら 2.5 回以下）。並べた 4 つの言葉も、本編を作り直す前のもの。
-
DRAWN TRAIN · 10-20 · UNCOMMITTED
描いた列車
終電を、コードで描いて走らせた。
監督は「列車のデザインがチープすぎるかも。あえて列車を描かず、列車の疾走感をデザインで表現とかはどうだろう？」。
-
LIGHT ONLY · 10-20 · UNCOMMITTED
光だけの列車
車体を描かず、光の筋だけで走る終電。
監督は「元の映像よりも、映像としてのクオリティが下がっちゃってる感が強い」。Blender で描いた終電を、写真に合成する形へ。
RODS & TILT · 10-25 · UNCOMMITTED吊り棒と前傾
発車標を 2 本の棒で吊り、少し前へ傾けた。
棒は細い線にしか見えず、どう吊っても見出しの間を通った。前傾は、1 倍密度の画面で 14 px の字がにじんだ。
仕組み
- 撮り方テイクとカットは、その版のコミットを手元で動かし、ヘッドレスの Chrome で 1512×820 の画面を撮った（画面キャストを毎秒 30 コマに並べ直し、イントロの SKIP は消した）。コミットのない版は、そのとき同じ形で撮っていた録画から。
- 合わせ方テイクは、プロローグの AI レンズが列車を読み終えたところから（00:24 が消え始める約 0.7 秒前）。どれも、最後尾が肩の陰に消えて 00:24 が消え始めるところで、そろう。
- 点滅公開する前に、10° の視野ごとの明るさで点滅を数えた（WCAG 2.3.1、1 秒に 3 回まで）。ワープは画面のほぼ全体が白く光るのが 1 秒に約 4 回なので、動画にしなかった。文字の組み上げは、大きく流すと 3 回で上限ちょうど（カードの 520 px では 1 回）なので、カードの大きさから広げない。ほかは基準を下回る。
- 流し方テイクは初めて見えたときに 1 回だけ流れ（流れている間は「順に見る」が「止める」になる）、カットは押したときに 1 回だけ。くり返さず、画面の外では止まる。動画は丸ごと読んでから、メモリで再生する（配信が範囲の要求に全体で答えるので、iPhone の Safari はそのままでは再生しない）。
- 動きを減らす設定どれも自分からは流れず、押す前は動画を読まない。押したときだけ、走査線なしで流れる。
Every pull request,
a train.
GitHub に移してからの制作を、列車ダイヤに。PR が 1 本の列車で、コミットが触れたページの場所に停まる。新しい場面を作った回は特急、機能を足した回は快速、直しは各停。
CREDITS
- 監督
- Shohei Kitajima
- 最初の版
- Codex
- 実装（2026-09-29〜）
- Claude Code
- サブエージェント
- テスト Sonnet · 最終レビュー Fable
- 写真
- GPT Image（生成）
- 切り抜き
- BiRefNet
- 拡大
- Real-ESRGAN（生成ではない）
- 終電
- Blender 5.2 · Cycles（別のマシンのエージェント）
- 地形
- 国土地理院の標高タイルを加工して作成
- 書体
- Barlow Condensed · DM Sans · IBM Plex Mono · Noto Sans JP
- 配信
- Cloudflare Workers