Field Atlas：生産工程のインタラクティブガイド

_背景

Field Atlasは、動物性製品が何を必要としているのかを辿るインタラクティブなガイドです。読者が自分の食べているもの、身につけているものを選ぶと、実際の設備の写真と説明、そして各記述の出典を添えながら、生産工程を一歩ずつ案内します。出発点は、75枚の写真をbase64で埋め込み、スタイルシートもすべて同じファイルに含んだ13 MBのHTMLファイル1枚でした。現在は構造化されたコンテンツモデルとなり、7言語・561ページの静的ページを生成しています。サイトは一般に公開されています。

_担当範囲

すべて一人で構築しました。構造と文章を分離するコンテンツ設計、フォールバックチェーンを備えた7言語対応の仕組み、案内フローのステートマシン、レスポンシブ画像パイプライン、翻訳の同期を保つツール群を担当しています。

_構築したもの

• 写真と出典を各ステップに添えて、一歩ずつ進む案内フロー。
• 50点の道具を収録した検索可能なカタログと、同じデータから生成する小さなパズル。
• フォールバックチェーンを備えた7言語のコンテンツ基盤と、言語間のズレを検出するツール。

_示せること

• 出発点は、75枚の写真をbase64で埋め込み、スタイルシートもすべて同じファイルに含んだ13 MBのHTMLファイル1枚。現在は561ページの静的ページを生成する構造化コンテンツモデルになっています。
• 構造と文章を別々に保持しているため、言語を追加してもレイアウトには一切触れず、レイアウトを変更しても翻訳が無効になりません。
• 事実に関する記述にはすべて出典リンクを付与。案内ステップのロジックは、DOMの状態ではなく読者の状態に対する純粋関数として実装しています。