多言語サイトの設計 ― テキストを 3 種類に分けて持つ

Mon, 15 Jun 2026 13:00:00 +0900

シリーズ・第 3 回 — 「個人で出版ツールを作って配るまで」（全 5 回予定）。前回は出力を契約する話でした。一覧はシリーズの記事一覧から。今回のテーマは「多言語対応をどう設計するか」です。

「サイトを多言語にする」と聞くと、まず本文の翻訳を思い浮かべます。でも実際にやってみると、翻訳が要るテキストは本文だけではありませんでした。ナビのラベル、プロフィール、設定値。それぞれ性質が違い、同じ入れ物に押し込むと無理が出ます。

うまくいったのは、テキストを種類ごとに分けて、それぞれに合った持ち方をする設計でした。今回はその話です。例として Hugo（crofty が内部で使うもの）を挙げます。

テキストは 3 種類に分かれる

多言語サイトのテキストを整理すると、だいたい次の 3 種類になります。住む場所も、翻訳の仕組みも別です。

ひとつずつ見ます。

記事は、ひとつのフォルダ（ページバンドル）に言語別のファイルを並べます。

content/posts/my-article/
  index.md       … 日本語（既定言語）
  index.en.md    … 英語
  photo.avif     … 同梱する画像

ビルドすると /posts/my-article/ と /en/posts/my-article/ の両方ができ、言語の切り替えはページ同士のリンクで済みます。JavaScript は要りません。

ひとつだけ小さな罠があります。画像（ページではないファイル）は既定言語のパスにしか出力されないので、英語版から相対参照すると 404 になります。英語版だけ、絶対パスで既定言語側を指せば直ります。

![図](photo.avif)                     <!-- 日本語：相対でよい -->
![図](/posts/my-article/photo.avif)   <!-- 英語：絶対パスで指す -->

ナビゲーションやボタンのラベルのような、記事に依らない固定の文言は、本文に混ぜません。言語から文字列を引く「翻訳テーブル」でまとめて持ちます。