静的サイトを多言語対応するのに、もう何週間もかけなくていい── AI Static Translatorが変えた「翻訳のコスト感」

「海外のお客様にも見てもらいたい」「英語版を作りたい」── そう思っていながら、対応を先送りにしているサイトは多い。翻訳会社に頼めば数十万円、自分でやれば何週間もかかる。そのコスト感が、多言語対応の最大の壁だった。

AI Static Translator は、そのコスト感を根本から変えるOSSツールだ。静的サイトのHTMLをAIが解析し、コードブロック・スクリプト・スタイルを一切壊さずに翻訳。hreflangタグの自動生成まで含めて、npxコマンド1本から始められる。

「翻訳するだけ」ではない。なぜ静的サイトの多言語化は難しいのか

Webサイトをそのまま翻訳サービスに投げることはできない。HTMLの中には、翻訳してはいけない要素が無数に混在しているからだ。

• <script>タグの中のJavaScript
• <style>タグの中のCSS
• data-*属性の値
• コードサンプルやプレースホルダー
• ブランド名・固有名詞

これらを誤って翻訳すると、サイトが壊れる。だからこれまでは、翻訳の前後に人間が「翻訳してはいけない箇所」を手動で管理する必要があった。

AI Static Translatorはこの問題を、プレースホルダー方式で解決する。翻訳前にコード・スクリプト・SVGをすべてプレースホルダー（__SKIP_PLACEHOLDER_N__）に置き換え、翻訳後に元の内容を復元する。AIは純粋なテキストだけを翻訳すればよく、HTML構造が破壊されるリスクがない。

旅の糸 ── 会津の観光サイトが英語対応するまで

旅の糸は、福島県・裏磐梯を拠点に会津地域の完全プライベートツアーを提供するサービスだ。地元在住50年のベテランガイドが案内するというコンセプトで、海外からの旅行者にも届けたいというニーズがあった。

課題は明確だった。 Astroで構築された静的サイト。ページ数は数十ページ。観光スポット・コース・記事ページを含む構造で、手動翻訳では現実的なコストにならない。

AI Static Translatorを導入した結果：

• 全ページの英語版（/en/以下）を自動生成
• hreflangタグが自動挿入され、Google検索での言語別インデックスに対応
• グロッサリー機能で「旅の糸」→「Tabinoito」など固有名詞を固定
• GitHub Actionsに組み込み、プッシュのたびに自動で翻訳・デプロイ

辻井音々公式サイト ── クラシック音楽家のグローバル発信

辻井音々はヴァイオリニストの公式サイトだ。国際的な演奏活動を行うアーティストにとって、英語での情報発信は必須。しかしNext.jsで構築されたサイトの多言語対応は、Astroとはまた異なる難しさがある。

Next.jsのApp Routerは、RSC（React Server Components）のペイロードをJSONとしてHTMLに埋め込む。このペイロードの中にも日本語テキストが含まれており、HTMLのテキストノードを翻訳するだけでは不完全になる。

AI Static TranslatorはNext.jsのRSCペイロード構造を解析し、JSON内の日本語文字列も含めて翻訳する機能を備えている。

実導入での成果：

• プロフィール・公演情報・ニュースページが英語化
• RSCペイロード内のテキストも正確に翻訳
• CI/CDパイプラインに統合し、コンテンツ更新時に自動翻訳

3分で始められる。導入の全手順

# 設定ウィザードを起動
npx ai-static-translator init

# 翻訳を実行
npx ai-static-translator translate

initコマンドを実行すると対話式ウィザードが起動し、以下を順番に設定できる。

1. 翻訳元ディレクトリ（例：./dist）
2. 出力ディレクトリ（例：./dist-i18n）
3. 対象言語（例：en, zh, ko）
4. OpenAI APIキー
5. グロッサリー（固有名詞の固定訳）

設定が完了するとtranslator.config.jsonが生成される。あとはtranslateコマンドを実行するだけだ。

GitHub Actionsへの組み込み例

- name: Install AI Static Translator
  run: npm install -g ai-static-translator

- name: Run Translation
  env:
    OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
  run: ai-static-translator translate --verbose

プッシュのたびに翻訳が自動実行される。--clear-cacheオプションを外せば、変更のないファイルは再翻訳されず、APIコストを最小化できる。

コストはどれくらいかかるか

モデルはgpt-4o-miniを標準として使用する。1ページあたりのコストは内容量によるが、数十ページのサイトでも初回翻訳で数百円程度に収まるケースが多い。

キャッシュ機能により、2回目以降はコンテンツに変更があったファイルのみ翻訳される。更新頻度が高くないサイトであれば、月次の翻訳コストはほぼゼロに近づく。

グロッサリー機能 ── ブランド名を守る

AIによる翻訳の最大の弱点は、固有名詞の扱いだ。「旅の糸」を”Travel Thread”と訳されては困る。

グロッサリー機能を使えば、特定の文字列を必ず指定の訳語に固定できる。APIの翻訳結果を無視して直接上書きするため、どんな文脈でも一貫性が保たれる。

{
  "glossary": {
    "en": {
      "旅の糸": "Tabinoito",
      "詳しく見る": "See more",
      "無料相談する": "Free consultation"
    }
  }
}

ソース言語は日本語だけではない

バージョン0.1.3から、sourceLanguage設定により英語→日本語など逆方向の翻訳にも対応した。海外向けに英語で構築したサイトを日本語ローカライズするケースでも同じ仕組みで動作する。

{
  "sourceLanguage": "en",
  "targetLanguages": ["ja", "zh"]
}

まとめ

AI Static Translatorは、静的サイトの多言語対応にかかるコストを桁ごと変えるツールだ。

npmパッケージとして公開されており、すぐに試せる。

npx ai-static-translator init

ソースコードはGitHubで公開されている：github.com/qurated-lab-org/static-site-translator