Alias Archive の構築：マルチ Agent 協働、Astro 移行、静的配信

Alias Archive は、非常に薄い個人サイトの骨格から始まった。履歴書、学校、所在地、経歴、連絡先を載せず、「私は誰か」をトップページの主役にしない。保存したかったのは別のものだった。調べている問い、遊べる実験、音の制作、そして最初の三分類へ無理に押し込むべきでない記録である。

この境界は早い段階で決まった。匿名の制作アーカイブであり、個人プロフィールではない。 トップ、ナビゲーション、内容モデル、配信方法は、作者紹介ではなく作品の理解を中心に組み立てる。

現在のサイトには、長文、研究シリーズ、開発記録、画像群、音声、映像、説明用 SVG、Godot 本体から抽出したブラウザー戦闘 Demo が共存する。英語・中国語・日本語は同じ slug と関係を共有し、出力は今も別のホストへ移せる静的ファイルである。

本稿は、増え続けるアーカイブが、複数回の内容納品、設計変更、技術移行を通じて同じサイトであり続けるための記録である。

「載せないもの」を先に決める

個人サイトは、顔写真、所在地、学歴、経歴、連絡先から始まりがちである。Alias Archive は意図してその形式を取らなかった。匿名は一時的な資料不足ではなく、製品境界である。

残した四つの入口は次の通り。

• Research——問い、読書、方法、作業中のノート；
• Games——プロジェクト記録、戦闘設計、素材工程、遊べる実験；
• Music——作品、制作過程、編曲、音の記録；
• Other——映像、写真、ウェブ、AI ワークフロー、他へ属さない材料。

これは作者を説明する四つの肩書ではない。独立して管理される四つのアーカイブ入口である。トップページは、作者を知ることより先に、読む経路を選べるようにする。

初期技術構成が大きすぎた理由

初期版は Next.js 16、vinext、Cloudflare Workers 向け構成を採用し、実際には使わない D1 と Tailwind も残っていた。動作はしたが、サイトが持つ問題より技術側の問題が大きかった。内容はローカルファイルから生成され、クライアント状態を必要とするのは絞り込み、展開、媒体起動、ゲーム Demo など一部だけである。ログイン、取引、DB 問い合わせ、サーバーレンダリングは必要なかった。

この不一致は次の負担になった。

• 静的アーカイブが不要な互換層と実行境界を背負う；
• 未使用の DB と CSS 構成が、存在しないシステムを示唆する；
• 配信先とアダプターの方向が一致しない；
• 最重要の内容と視覚より、実行時の説明に注意を奪われる。

移行目的は新しい流行を採用することではない。問題と構造を一致させることである。Astro が静的ページを生成し、React は必要な島だけに残し、Cloudflare Pages が dist を直接公開する。

移行は作り直しではなく保存である

移行は独立した astro-migration ブランチで行い、実行可能な main を比較用に残した。移行元は最後のコミットではなく、その時点の作業ツリーである。未コミットの書体、ゲーム、音楽内容も現行製品に含まれ、整った履歴を作るために消してはならなかった。

四つの制約を置いた。

1. 視覚を先にそのまま移す——全体 CSS、紙の粒子、製図グリッド、金と青緑の意味色；
2. 三言語内容を編集前に保存する；
3. URL を維持する——英語はルート、中国語と日本語は /zh/ と /ja/；
4. 旧版と新版を並行して検証してから削除を決める。

同等性を確認した後、未使用の Tailwind と D1 を外した。源ノ明朝、源ノ角ゴシック、EB Garamond、Courier Prime は維持し、X Typewriter を WOFF2 で自前配信した。英語 UI の等幅層では X Typewriter を使うが、中国語・日本語画面中の英語断片は従来の書体へ戻し、ゲーム的な書体が他言語全体を支配しないようにした。

リポジトリを Agent 間の共通面にする

内容は一つの長い会話から生まれたわけではない。研究、ゲーム、音楽、映像、ウェブ制作には別々の Agent または Claude セッションがある。Codex は統合、翻訳、フロント実装、テスト、Git、公開を担当する。オーナーは公開境界を決め、実ページを確認し、最終判断を行う。

会話履歴だけで接続すると、長期的には必ず判断を失う。そこでリポジトリ自体をインターフェースとして設計した。

良い納品パッケージには次を含める。

• 完全な frontmatter を持つ Markdown；
• 固定名と配置先を持つ画像、SVG、音声、映像；
• 挿入位置、クレジット、公開境界、受入条件を記した README；
• シリーズ順、関連記録、言語要件；
• 編集可能な箇所と原文維持が必要な箇所の区別。

Codex の統合作業はコピーではない。schema、slug、素材 URL、翻訳同伴、関連、並び順、レスポンシブ挙動を検査する。このプロジェクトでは README が軽量 API として働く。一つのセッションに隠れていた判断を、次のセッションが検証できる入力へ変える。

内容契約：分類、系列、関連、三言語

Astro Content Collections は全記事へ共通 schema を与える。タイトルと日付のほか、各記録は次を持つ。

• category——games / research / music / other の主な所属；
• tags——自由な細分類；
• series と seriesOrder——連続した読書順；
• related——手動で選ぶ記事間の関係；
• abstract——一覧の先頭または hover 展開で示す詳細概要；
• draft——公開一覧へ入るか；
• locale と共通 slug——三言語を同じ記録として結ぶ識別子。

category と tags は意図して併存させる。category は「主にどこへ属するか」、tags は「ほかに何へ触れるか」を答える。前者は全記事一覧を読みやすくし、後者は分野間の重なりを失わせない。

Research にはさらに四つの系列がある。初期表示は全記録であり、系列を選んだときだけ一覧を絞る。PC では大きな系列カードと小さな記録行で階層を作る。モバイルでは、カードを押すと説明が展開する一方で自動スクロールがその説明を画面外へ送ってしまう、という以前の衝突を避けた。

三言語化は、中国語を二度機械翻訳することではない。タイトル、abstract、本文、図内文字、UI ラベルを言語別に整える。テストは公開 slug ごとに en / zh / ja が揃うことを確認する。英語ファイルが既定ルートを生成するため、英語同伴がないとページ自体が存在しない場合がある。ローカル確認でも孤立した中国語ファイルだけを見てはならない。

視覚的な雰囲気を運用可能な規則へ

視覚の出発点は、黒い画面、細い金色の製図線、紙の粒子、四つの抽象パネルだった。アーカイブ、計測器、古い技術資料、舞台記録の中間にある感触である。サイトは暗いキャンバス、薄いグリッド、抑えた金、研究用の青緑、セリフ見出し、等幅の技術ラベルを継承した。

しかし、雰囲気があるだけでは階層にならない。内容が増えるにつれて問題が現れた。

• 大見出しが大きすぎ、技術ラベルが小さすぎる；
• 中国語と日本語が英語の余白を継承して窮屈になる；
• トップカード、分野主カード、一覧行の大きさが近く、重要度が曖昧；
• 枠付き category ラベルが本文の基線とずれる；
• モバイルの内部スクロールが端でページ全体を止める；
• Research の絞り込み結果が画面下で変わり、押しても反応がないように見える。

後から導入した Impeccable skill は、既存の美意識を置き換えたのではない。その美意識を運用可能にした。PRODUCT.md と DESIGN.md に内容階層と視覚文法を定義し、実ページでレスポンシブ、アクセシビリティ、文字尺度、hover、スクロール、状態差を確認した。換装ではなく、デザインシステムの校正である。

最終的にアーカイブ感は残し、装飾ノイズを減らした。すべてのカードを発光させるのではなく、大きさ、余白、番号、罫線、展開内容で階層を示す。モバイルでは操作結果が見えることを優先する。中国語と日本語には独自の見出し尺度と行間を与え、長い英語本文には読みやすい書体を残し、X Typewriter を全文へ広げない。

静的な外殻でも媒体は限定されない

サイトには次の媒体が入っている。

• MV 制作記録の SVG、QC filmstrip、色調比較；
• 音楽記録の音声と制作資料；
• 自動再生しない AI Presenter の映像；
• Godot をインストールせず遊べる Games 内の Web 戦闘 Demo；
• 画像記録の大判画像と説明文。

原則は重い媒体を利用者の意思で起動すること。映像は controls と poster を持ち、ページ到着時に音と帯域を奪わない。Godot Demo はサイト固有の起動画面と進捗を先に示し、選択後に Web パッケージを読み込む。周囲の文章は検索可能で読みやすい静的 HTML のままである。

Astro はこの構造に適している。大部分をビルド時に完成させ、フィルター、展開、媒体起動、ゲームだけへクライアント状態を与える。静的とは機能が少ないことではなく、不要なコードを初期状態で動かさないことである。

失敗を規則として残す

持続的な規則の多くは具体的な失敗から生まれた。

現象	原因	後に作った規則
localhost に変更が出ない	preview 停止または旧 build を配信	build、再起動、実 URL をブラウザー確認
記事が消えたように見える	draft が一覧から除外	確認時の可視性を明示し、公開前に再確認
中国語題名が短編動画の見出しに近い	情報が煽り表現に包まれていた	主語と動作を使い、正式で短い題名にする
Research と Other の色が近い	意味色の色相差が不足	category 色を分け、枠なしで基線を揃える
モバイルの絞り込みが無反応に見える	結果が画面外で変わる	条件付きスクロールと展開動作を競合させない
一覧の端でページが動かない	入れ子スクロールが操作を捕捉	長い一覧は本文の自然な流れへ戻す
Godot Demo が本体らしくない	一般的な近似実装で本体契約を置換	動画、衝突、強靭、距離、入力時序を本体と照合

異なる問題に見えるが、根は同じである。現実の状態を粗く近似しすぎた。見た目が近いだけではページは完成せず、イベントが発火しただけでは操作も完成しない。

公開を反復可能な閉ループにする

各納品は同じ経路を通って本番へ進む。

1. 納品と公開境界を確認する；
2. 素材、frontmatter、三言語同伴を統合する；
3. 関連、系列、並び順、一覧挙動を更新する；
4. 内容テストと本番 build を実行する；
5. 英語ルート、中国語・日本語の接頭辞ルートを確認する；
6. PC とモバイル寸法を確認する；
7. オーナーがローカルサイトを確認する；
8. commit、push、Cloudflare Pages 公開へ進む。

テストは TypeScript だけではない。公開 slug の三言語同伴、内容件数とデータ hash、静的ルート、必要素材を検査する。視覚挙動はブラウザーが必要である。スクロール、hover、focus、実書体読み込みは画像だけでは代替できない。

Cloudflare Pages と移行可能性

本番境界は Astro の静的出力である。Node.js 22.13 以上で pnpm build を実行し、結果を dist へ出し、Cloudflare Pages がそのディレクトリを公開する。Astro 7 の Cloudflare adapter は Workers 向けなので、Pages 配信と一致しないアダプターを形式のために追加しない。

独自 apex ドメインを正規 URL とし、www と pages.dev からは path と query を保ったまま転送する。robots.txt、sitemap、404、三言語ルートは build で生成される。移出できない重要 DB はない。ホストを変える場合は同じ dist を公開し、DNS を差し替えればよい。

この抑制は匿名境界とも一致する。目的がない段階で連絡先収集やコメント backend を作らず、不要な個人データを集めない。記事構造は用意するが、実行機能は内容が必要とした時だけ追加する。

結論：成長を続けられるアーカイブにする

Alias Archive の難所は、一枚の美しいトップを作ることではなかった。記事、言語、媒体、操作が増えても、同じサイトに見え続けることだった。そのためには複数の制約が必要になる。製品境界が「作らないもの」を決め、内容契約が材料の入り方を決め、デザインシステムが変化の一貫性を決め、テストとローカル確認が公開可能な時点を決める。

フレームワークは変わり、Agent も増える。残すべき方法は単純である。判断をリポジトリへ書き、管理権をオーナーの手元に置き、各増分を検証・復元・移行可能にする。