多言語サイトは「言語切替型」と「二言語同時表示型」のどちらが正解なのか？ 現場で何度も悩まされた話

Webサイトの多言語対応について議論するとき、多くの人は翻訳精度や対応言語数に注目します。 しかし、実際の開発現場で意外と大きな論点になるのが、 「言語を切り替える方式にするのか」 それとも 「日本語と英語を同時に表示する方式にするのか」 というUI設計の問題です。 一見すると単純な話に見えます。 しかし、この選択を誤ると、ユーザー体験、SEO、保守性、開発コスト、コンテンツ運用負荷など、あらゆる部分に影響が及びます。 私はこれまで複数の多言語サイト開発に関わってきましたが、このテーマは毎回のように議論になりました。 そして毎回のように、 「どちらにもメリットがある」 という、エンジニアが最も嫌う結論にたどり着きます。 本記事では、多言語サイトにおける二つの主要な実装方式について、実際の開発経験を踏まえながら解説したいと思います。 ⭐️まずは二つの方式を整理する →言語切替型 最も一般的な方式です。 画面上部に言語選択メニューを設置し、 ・Japanese ・English ・Français ・Deutsch などを切り替える仕組みです。 現在の多言語サイトの大半はこちらです。 技術的には、 ・i18n ・l10n ・locale routing ・language detection ・hreflang などの仕組みと組み合わせて実装します。 URL設計も、 ・/ja/ ・/en/ のように分離されることが多いです。 →二言語同時表示型 一つの画面内に、 ・日本語 ・English を同時に掲載する方式です。 例えば、 ・サービス概要 ・Service Overview ・当社はクラウドソリューションを提供しています。 ・We provide cloud solutions. という構成になります。 大学の案内ページや公共機関のサイトなどで見かけることがあります。 実装自体は比較的単純です。 翻訳データを同じテンプレート内に並べるだけなので、技術的難易度は決して高くありません。 しかし、別の問題が大量発生します。 →言語切替型のメリット ‐UIが圧倒的にスッキリする 最大のメリットです。 ユーザーは自分の言語だけを閲覧できます。 例えば1000文字の記事なら、 ・日本語ユーザーは1000文字。 ・英語ユーザーも1000文字。 非常にシンプルです。 もし同じ内容を二言語同時表示すると、体感的には2000文字になります。 ユーザーからすると、 「記事を読んでいるのかスクロール耐久試験を受けているのか分からない」 状態になりかねません。 ‐SEOに有利 Googleは言語別ページを推奨しています。 適切なhreflang設定を行えば、 ・日本語検索結果には日本語ページ ・英語検索結果には英語ページ が表示されます。 国際SEOの観点では非常に有効です。 グローバル展開を前提とする企業サイトではほぼ必須と言えるでしょう。 ‐CMS運用が整理しやすい WordPressやHeadless CMSを利用する場合、言語ごとのコンテンツ管理がしやすくなります。 最近では、 ・WordPress ・Contentful ・Strapi ・Sanity ・Hygraph なども多言語管理機能が充実しています。 翻訳ワークフローも構築しやすいため、企業サイトとの相性が非常に良いです。 →言語切替型のデメリット ユーザーが内容を比較しにくい 例えば英語学習者の場合、 日本語版と英語版を見比べたいケースがあります。 その場合、 日本語ページを開く ↓ 英語ページへ移動 ↓ 日本語へ戻る ↓ 英語へ戻る という、まるで負荷試験ツールがブラウザを操作しているような動きになります。 ユーザー体験としてはあまり美しくありません。 ‐翻訳漏れに気付きにくい 現場では意外と頻発します。 ・日本語版だけ更新されている ・英語版だけ古い ・フランス語版だけ存在しない。 ・開発チームは気付いていない。 ・利用者だけが知っている。 という状態です。 私自身、公開後に「英語版だけ3年前の情報が残っています」という指摘を受けて冷や汗をかいた経験があります。 本番環境はいつも正直です。 →二言語同時表示型のメリット ‐情報比較が圧倒的にしやすい これは非常に大きな利点です。 例えば、 ・契約書 ・利用規約 ・学術資料 ・技術文書 などでは、原文と翻訳文を比較したいケースがあります。 この場合、日本語と英語が同じ画面に並んでいる方が圧倒的に便利です。 実際に国際プロジェクトでは、日本語仕様書と英語仕様書を並べて確認することが頻繁にあります。 エンジニア同士の認識齟齬を減らす効果も期待できます。 ‐翻訳品質レビューがしやすい 翻訳者やレビュー担当者にとっては非常に便利です。 原文と翻訳文を同時に確認できるため、 ・誤訳 ・脱字 ・意味の欠落 を発見しやすくなります。 翻訳管理システム（TMS）でも、この考え方は広く採用されています。 ‐実装が比較的シンプル 高度な言語切替ロジックを実装しなくても運用できます。 場合によってはCMSすら不要です。 静的サイトでも十分対応可能です。 →二言語同時表示型のデメリット ・とにかく長い ・本当に長いです。 ・驚くほど長いです。 ・想像以上に長いです。 ユーザーは途中で「私は情報を読んでいるのだろうか。それともマラソンをしているのだろうか。」という哲学的な問いに到達します。 特にスマートフォンでは深刻です。 1ページが異常な縦長構造になります。 ‐SEO上の扱いが難しい 一つのページ内に複数言語が混在するため、 検索エンジンが主要言語を判断しづらくなるケースがあります。 ‐国際SEOの観点では一般的に不利です。 グローバル集客を重視するサイトには向いていません。 ・デザインが崩れやすい ・英語は短い ・ドイツ語は長い ・日本語は文字密度が高い ・中国語はさらに別の特徴がある つまり、多言語対応とは実質的にレイアウト破壊テストです。 デザイナーとフロントエンドエンジニアが頭を抱える理由の一つでもあります。 ⭐️結局どちらを選ぶべきなのか？ 私の経験上、以下のように考えるのが最も合理的です。 →言語切替型が向いているサイト ・企業コーポレートサイト ・SaaSサービス ・ECサイト ・Webメディア ・ブログ ・マーケティングサイト ・グローバルサービス これらはSEOとユーザー体験が重要です。 そのため、基本的には言語切替型が最適です。 現在の業界標準もこちらです。 →二言語同時表示型が向いているサイト ・契約関連文書 ・技術仕様書 ・学術論文 ・大学関連サイト ・国際機関向け資料 ・教育コンテンツ ・翻訳比較コンテンツ ユーザーが内容を比較しながら読む前提なら、こちらが強力です。 ⭐️まとめ 多言語対応に万能な正解は存在しません。 言語切替型は、「読みやすさ」と「SEO」に強い。 二言語同時表示型は、「比較性」と「翻訳確認」に強い。 私自身、これまでの開発経験の中で両方の方式を採用してきましたが、企業向けWebサイトやサービスサイトであれば、基本的には言語切替型を選択します。 一方で、仕様書や技術文書のように原文との比較が重要なケースでは、二言語同時表示型の価値は非常に高いと感じています。 要するに、「ユーザーは何をしにそのページへ来るのか」というUX設計の原点に立ち返ることが重要です。 技術選定においても同じですが、最適解は最新技術の中にあるとは限りません。 時には設計会議で一時間議論した結果、「ユーザーに聞いたら一瞬で解決した」ということもあります。 エンジニアリングとは、時に高度な分散システムよりも、人間を理解することの方が難しい仕事なのかもしれません。