ATELIER

2課題

このサイトは、仕事を取るための窓口ではなく、技術そのものを見せるための展示として作った。問い合わせ欄や資料請求といった営業の機能は、要件の段階で明示的に禁じている。売り込む言葉の代わりに、実際に動くものと、その裏で何を決めたかを置く。

3要件・制約

制約は先に文書へ書き出した。素材は商用で自由に使える出所のものだけを用いること。新しい描画方式だけに依存せず、旧い端末でも同じ絵が出ること。日本語と英語の双方を持つこと。支援技術での読み上げと、動きを抑える設定に応えること。そして営業の機能を持たないこと。実装より先に登録簿の形で固定し、機能ごとに満たすべき項目として引けるようにした。

4設計

画面は夜の書斎を手続き的に組み立てた三次元の空間とし、時刻に応じた採光の変化と、机上の画面へ寄って作品一覧へ移る流れを主動線に置いた。設定の解決順序は、住所に載った指定、端末に残した選択、端末の性質からの推定、の順に固定してある。途中で機能の契約を統一し、生成と破棄の入口を一本化する再設計を挟んだ。現在は前段に手描きの導入を別途設計しており、この三次元の書斎は別館という位置づけへ移りつつある。

5技術選定理由

WebGPU 専用の構成は、携帯端末で WebGL2 に性能で負ける場合があり、旧い端末では動かない。この調査結果を受け、同じ TSL の記述から WebGPU と WebGL2 の双方を出力できる書き方を選んだ。素材は監査の結果すべて自作へ統一している。広く使われている後処理の実装群は、既定の許諾が非商用であったり、上位版が有償で商用に使えなかったりしたためである。慣性のある巻き取りに使われる外部実装も、評価の上で採らず自前の補間で置き換えた。有機的な形の生き物は、箱と円柱の組み合わせによる手続き的な生成が品質として通らず、Blender を bpy でヘッドレス駆動して形を作る工程へ切り替えている。

6実装

実装は型付きの記述で通し、機能ごとに生成と破棄の対を持つ契約へ揃えた。品質の段階は正本を一つ決め、実行中に切り替えても場面を組み直さずに済むようにしてある。天候は Open-Meteo の公開値を取り込み、言語と品質と動きの抑制はいずれも同じ優先順位の規則で解決する。検証は puppeteer-core による自動操作のブラウザで通し、axe-core による支援技術の検査、描画装置の失敗を意図的に起こした場合の退避、SEO 向けの頭部の記述、描画の間隔までを機械で見ている。

7性能対策

性能は基準を先に取ってから手を入れた。抑えた処理能力と細い回線を模した条件で初期値を測り、入口の殻と本体を分けて、後者は必要になってから読み込む形へ組み替えている。表示までの時間の改善幅と、分割後のそれぞれの大きさは本節末の計測に示す。品質の段階では粒子の数と影の解像度を落とした。初回に生じる描画の準備待ちは、非同期の下準備を先に走らせることで短縮しており、その幅も本節末に併記する。

FCP — 5.9-7.1s → 0.56-0.62s（約 10 倍改善。CPU 4x スロットリング + Slow4G 相当）¹

バンドル分割 — シェル 11KB (gzip 4.3KB) / 本体 ~1MB (gzip 297KB, 動的 import)²

シェーダーコンパイル — 915-972ms → 165-204ms（compileAsync ウォームアップ）³

8結果

短い実働期間の中で、時刻による採光の変化、外部の観測値と連動する天候、日英の切り替え、そして支援技術の検査で重大な指摘が出ない状態までを通した。自動操作による点検は本節末の計測のとおり全項目を通過している。配信は Cloudflare Pages へ本番と検証の双方を出している。ただし外形からの確認は取っていないため、この作品については稼働しているとは書かない。

スモーク — 91/91 チェック（axe 検査 17 箇所、critical/serious 0）⁴

9検証で判明した注意点

生き物にあたる工程は未完了で、該当する記述はまだ一件も版管理へ入っていない。三次元ソフトで生成した形も複数回にわたり品質として通らず、作り直しの途中にある。

入口の導入演出は実装済みだが、撤去する方針が出ており、現行の形として扱えない。

説明書に載る点検の件数は世代の異なる数字が混ざっている。本稿では典拠に使っていない。

本番の入口へ最新の修正が反映されているかは確認していない。リンクの状態も未確認のまま置いている。

10AI 支援の関与

設計と裁定を人が持ち、実装と並列の敵対的なレビューを言語モデルのエージェントへ委ねる編成で作っており、素材の品質不合格から生成工程の作り直しまで、方針の転換はいずれもその往復の中で決まっている。