Colophon
このサイトのつくり方
このサイトも、人と AI のチームで作りました。人が方向と良し悪しを決め、AI が設計・実装・絵・動画・確認を分けて受け持っています。ここには、その中身を書いておきます。
1. 光の粒（WebGL2）
- 背景の粒は最大 56,000 個（スマホは 22,000 個）。すべてを 1 回の描画命令（
drawArrays）で描いています。頂点のデータは持たず、各粒はgl_VertexIDを手がかりに、自分の位置と色をテクスチャから読みます。 - マーク・川・門・門の中・異世界・チーム・銀河・矢印・「あなたの言葉」の 9 つの形を GPU 上でつないで変形させています。スクロールが、そのまま時間になります。
- ページを開くと、見出しの「無理」に線が引かれたあと、その字が光の粒になってマークへ飛んでいきます。画面に出ている字の位置をその場で測り、同じ形の粒を GPU 側に置いてから飛ばしています。
- 光のにじみ（ブルーム）は、半精度の浮動小数のバッファに描いてから、縮小と拡大を最大 5 段重ねて作っています（dual Kawase）。
- 重い端末では自動でにじみを止め、解像度を下げます。GPU の無い環境や「視差効果を減らす」設定では、粒を止めて絵だけを見せます。
2. 銀河の 1 粒は、本物の仕事 1 件
- トップの銀河の粒は、git の commit、AI への指示書が「完了」になった時刻（git に入った時刻。入っていない物はファイルの時刻）、人が決めたことの記録、の 1 件ずつです（いま 1,665 件・commit は 500 件）。サイトを作り直すたびに、記録から数え直します。
- 公開しているのは「種類」と「時刻」だけです。仕事の題名や中身は出していません。
- いちばん外の金色の 1 粒だけは記録ではなく、いま見ているあなたです。
3. 絵と動画
- ゲームのキーアートは AI（Google Flow）で描き、背景だけの 8 秒のループ動画と、ロボットだけを切り抜いた層に分けて重ねています。だから、門は回り続け、ロボットはマウスに合わせて少し手前に動きます。
- 異世界の場面では、粒がキーアートを 1 粒ずつ描き直したあとに、本物の絵が下から浮かび上がります。
3-2. 映像の章
- トップの映像は、全カットを AI（Google Flow の Veo）で生成しています。1 本 8 秒で生成し、いちばん良い 6 秒を使っています。ゲームのカットは 2 本だけで、ほかはシステム・アプリ・映像・ものづくりなど、Axelai の仕事ぜんぶを描いています。崩れた物（顔の絵柄が変わる・余計な物が映る）は撮り直し、人の目で通った物だけを使っています。
- パソコンでは映画と同じ 2.39:1、スマホでは縦長の 4:5 の別のファイルを流します（横長の帯を縦の画面に小さく置かないように、カットごとに主役が入る位置で切り直しています）。同じ映像を 2 つの形式（H.264・VP9）で用意し、小さい方を先に使います。今のカットと次のカットだけを読み込みます。
- 映像の章が見えている間は、背景の動く絵や事例の動画を止めて、動画を 1 本だけ流します。2 本を同時に流すと、ブラウザが画面を描き直す回数が半分（1 秒 30 回）に落ちることを測って確かめたためです。
3-3. 3D の案内役
- 画面の下を走るアルテミスは、ゲームの絵 1 枚から AI（Meshy）で 3D にし、骨を入れ、立つ・歩く・走る・手を振るの 4 つの動きを付けました。4 つを 1 つのファイルにまとめ、面の数を半分にして約 1MB にしています。
- 3D の部品（three.js）は、最初にスクロールやマウスを動かした後、手が空いた時に読みます（開いた直後の表示を重くしない）。WebGL2 が無い端末・GPU の無い環境・「視差効果を減らす」設定では、2D の絵で動きます。
- スクロールが止まると、画面の下の帯で文字やボタンの無い所を探して歩いていき、そこで顔の上だけ覗かせます。空いている所が無ければ、頭のてっぺんだけ残して沈みます。
4. 軽さと安全
- Astro で静的なページに書き出しています。フレームワークの実行時のコードは送っていません。
- ページを移る時の切り替え（光ってから次のページが浮かぶ）は、ブラウザの View Transitions を CSS だけで使っています。対応していないブラウザでは普通に移ります。
- 日本語フォント（Noto Sans JP）は、このサイトで使っている字だけを切り出して 2 つのファイル（約 315KB）にしています。
- スクリプトはハッシュで許可した物だけが動くよう Content-Security-Policy を付けています。Cookie・アクセス解析・広告のタグはありません。
- お問い合わせの「光にして送る」は、打った言葉をこの画面の中で粒の文字にして、メールのアプリに下書きとして渡すだけです。サイトからはどこにも送信しません。
5. 実測を見る
トップページのいちばん下の「ENGINE STATS」を押すと、いまの fps・粒の数・描画命令の数・GPU を画面の左下に出せます。