oto archiveの2031年コンセプトサイトをNuxtで構築した

既存の otoarchive.com の5年後の進化版として、2031年のビジョンサイトをNuxt 3で構築した。React製の既存サイトをVue/Nuxtに変換しつつ、大量のダミーデータを自動生成してSSGプリレンダリングまで通した1日。

ブランドの統一: 「oto archive」小文字表記に決定

まずトンマナの統一から始めた。既存サイトでは表記揺れがあったが、ブランド名を oto archive（小文字）に統一することに決めた。コンセプトサイト全体でこの表記を徹底した。

React → Vue/Nuxt への変換

既存サイトはReactで作られていたので、コンポーネントをVue 3に変換していった。JSXをtemplateに書き換え、useStateをrefに置き換える作業。React固有のパターン（useEffect等）はNuxtのライフサイクルに合わせて調整した。

ヒーローセクションの波形背景画像、コンセプトセクションなど、既存サイトの主要パーツを移植した。

Netflix風の横スクロールカルーセル

トップページにNetflix風の横スクロールカルーセルを3行配置した。

新着: 最近追加されたライブラリ
人気: 再生数の多いもの
季節のおすすめ: 時期に合わせたセレクション

カード画像はUnsplashから18枚を並列ダウンロードして使用した。注目のライブラリセクション用のビジュアル素材として、都市風景や自然の写真を選んだ。

/library ページの独立化

トップページに埋め込まれていたBrowseTabsコンポーネントを分離して、/library を独立ページとして切り出した。ライブラリの一覧・検索・フィルタリングを専用ページで扱えるようにした。

188地点マスターデータと5,850件の自動生成

コンセプトサイトのデータ量を現実的なスケールにするため、マスターデータを整備した。

188地点のマスターデータ（東京都内の録音ポイント）
ライブラリ生成関数で 5,850件のアイテムを自動生成

各アイテムにはセッション情報、録音ポイント座標、ファイル一覧、使用機材、天候、ライセンス情報などのメタデータを持たせた。生成関数でランダムに組み合わせることで、リアルな見た目のダミーデータを大量に作れた。

シーンとライブラリのデータ統合

データ構造の整理も進めた。subScene を導入してシーンの粒度を細かくし、不要になった rain シーンを削除。データ駆動でUIが変わる設計にしたことで、マスターデータを更新するだけでサイト全体に反映される。

個別詳細ページ

各ライブラリアイテムの詳細ページには以下を表示するようにした。

セッション情報（日時、所要時間、天候）
録音ポイントの座標と地図
収録ファイル一覧（フォーマット、サンプルレート、ビット深度）
使用機材
ライセンス情報

Leaflet + OpenStreetMap での地図表示

詳細ページに地図を組み込んだ。Leaflet + OpenStreetMapで、タイルは CartoDB Dark Matter を採用した。サイト全体のダークトーンと相性がよく、録音ポイントのマーカーが見やすい。

// CartoDB Dark Matterタイル
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
  attribution: '&copy; OpenStreetMap contributors &copy; CARTO'
})

フィールドワークの地図データをどう統合するかは今後の課題として残した。

SSGで1万ルート超を135秒で処理できたのは安心材料。実際のコンテンツが増えてもこのアプローチでいける見込みが立った。

次のステップ

フィールドワークマップデータの統合
Cloudflare Accessの設定・テスト
カルーセルのレスポンシブ対応確認
音源プレーヤーコンポーネントのプロトタイプ

oto archiveの2031年コンセプトサイトをNuxtで構築した

ブランドの統一: 「oto archive」小文字表記に決定

React → Vue/Nuxt への変換

Netflix風の横スクロールカルーセル

/library ページの独立化

188地点マスターデータと5,850件の自動生成

シーンとライブラリのデータ統合

個別詳細ページ

Leaflet + OpenStreetMap での地図表示

11,732ルートのSSGプリレンダリング

Cloudflareデプロイと開発環境

wrangler.toml の作成

ローカル開発のサブドメイン

Cloudflare Accessによるアクセス制限

「消えゆく都市の音」という切り口

ふりかえり

次のステップ