Astro + Cloudflare Pages で 7 言語対応のゲーム攻略サイトを作った話

はじめに

発売を控えたソウルライク・アクション RPG「Phantom Blade Zero」（S-GAME）。発売前の情報は Steam ページ、公式 X（Twitter）、各メディアの記事に分散していて、「発売日はいつ？」「対応プラットフォームは？」「体験版はある？」といった基本情報をまとめて確認するだけでも、じつは結構手間がかかります。

そこで、発売前の基本情報を整理した多言語対応のガイドサイト Phantom Blade Zero Guide を作りました（私が運営しています）。

• サイトトップ: Phantom Blade Zero Guide
• 発売日まわりの情報はこのページにまとめています: Phantom Blade Zero Release Date

この記事では、このサイトを Astro + Cloudflare Pages で構築するにあたって設計した

• 多言語（7 言語）の URL とコンテンツ設計
• コンテンツの「事実確認」を管理するための manifest
• 公開前の品質ゲート（npm scripts）

についてまとめます。フレームワークのチュートリアルではなく、「情報の鮮度が命なサイト」のための、地に足のついた運用設計の話です。

技術スタック

• Astro（静的サイト生成）
• @astrojs/sitemap
• Cloudflare Pages（ホスティング）
• 多言語実装・QA ゲート用の自作スクリプト群

コンテンツ中心のサイトなので、デフォルトではクライアント JS をほぼ出力しない Astro と相性が良かったです。ビルド結果は純粋な静的ファイルで、Cloudflare Pages にそのままデプロイできます。

多言語設計: 10 ページ × 7 言語

対応言語は en / zh-cn / zh-tw / es / pt-br / de / fr の 7 言語。URL はパスプレフィックス方式で、デフォルト言語（en）のみプレフィックスなしです。

https://phantombladezero.quest/                  … en（デフォルト）
https://phantombladezero.quest/release-date/     … en の発売日ページ
https://phantombladezero.quest/es/release-date/  … es の発売日ページ
https://phantombladezero.quest/zh-tw/platforms/  … zh-TW の対応機種ページ

サイトマップには（サイト内検索ページを除く）10 ページ × 7 言語 = 70 URL が並びます。

ページ種別は release-date / platforms / price-and-preorder / demo / gameplay / system-requirements / updates / about / sources-and-methodology といった、「発売前ゲームの基本情報」に絞っています。全部入りを目指すより、検索需要があって情報の追従コストが低いページだけを最初に揃える方針です。

コンテンツの状態を 1 つの JSON で管理する

多言語サイトで一番怖いのは、翻訳が中途半端なページや、訳が古くなったページが検索エンジンに載ってしまうことです。そこで、ルート × 言語ごとの状態を 1 つの manifest に集約しました。

{
  "slug": "release-date",
  "locales": {
    "en": {
      "translation": "complete",
      "review": "pending-owner",
      "publication": "preview",
      "indexable": false,
     factEvidenceDate: "2026-10-06"
    }
  }
}

注目ポイントは factEvidenceDate（事実確認日付）です。発売前のゲーム情報は、発売日の延期や体験版の配信終了ですぐに古くなります。そこで「この記述はいつ確認したものか」をページ単位・言語単位で記録するようにしました。出典の扱いについては sources-and-methodology という専用ページも用意しています。

この manifest がビルドと QA の単一の真実の源（SSOT）になっていて、後述のスクリプトはすべてこの JSON を読んで動きます。

品質ゲートを npm scripts に組み込む

package.json にはこんなスクリプトを並べています（一部抜粋）。

{
  "scripts": {
    "build:preview": "…",
    "build:production": "…",
    "test:content-facts": "…",
    "test:locale-gates": "…",
    "validate:localization": "…",
    "validate:production": "…",
    "qa:content": "…",
    "qa:preview": "…",
    "qa:production": "…"
  }
}

それぞれ次のような目的で配置しています。

• test:locale-gates / validate:localization：翻訳が complete でない言語・レビューが済んでいないページが本番ビルドに混ざらないようにするゲート
• test:content-facts：コンテンツのファクト周り（factEvidenceDate を含む manifest との整合）を守るテスト
• qa:preview / qa:production：preview ビルドと本番ビルドそれぞれに対する総合チェック

「スペイン語だけ訳が中途半端なページがサイトマップに載る」「確認日の古い情報がそのまま index される」といった事故は、レビュー時の注意力ではなくスクリプトで防ぐのが安全です。

SEO 周りの素朴なポイント

特別なことはしていませんが、効くと判断してやっていることだけ挙げます。

• canonical と robots meta をページ単位で生成：トップページは index,follow + 自己参照 canonical。検索に出したくない段階のページは manifest の indexable フラグで制御
• sitemap は @astrojs/sitemap で自動生成：全言語版の URL を列挙
• URL を /{locale}/{slug}/ に統一：言語切り替えが URL の規則だけ説明できて、内部リンクも張りやすい

デプロイと運用

デプロイは Cloudflare Pages に wrangler で乗せているだけです。

npm run build:preview      # 確認用ビルド
npm run qa:preview         # preview 向け QA
npm run build:production   # 本番ビルド
npx wrangler pages deploy dist

静的ファイルを CDN に置くだけなので、表示速度や SSL・独自ドメインまわりで悩むことがほぼありません。CI に乗せれば、ゲートが全部通ったコミットだけが本番に届く運用もすぐ組めます。

おわりに

発売前のゲーム情報サイトはコンテンツの鮮度が命なので、見た目や機能よりも先に「事実確認日付の管理」と「翻訳ゲート」を仕組み化したのが良かったと感じています。発売日が決まって情報が動くたびに、manifest を更新してゲートを回すだけで、安全に全言語へ反映できます。

サイトはこちらで運用中です: Phantom Blade Zero Guide

多言語コンテンツサイトを立てようとしている人の参考になれば嬉しいです。