はじめに
本書の目的
この文書は、Webサイトで日本語と英語を切り替える仕組みを分かりやすく解説するために作りました。多言語対応の基本から、実務で使える設計や実装方法までを体系的にまとめます。
想定する読者
Web制作や運用に関わる方を想定しています。デザイナー、フロントエンド開発者、バックエンド担当、CMSを使う編集者など、技術レベルは問いません。初心者でも理解できるよう具体例を多めに記載します。
本書で学べること
- なぜ言語切替が必要かの理由と効果
- URL設計や言語識別の基本ルール
- ユーザーに優しい言語切替ボタンの作り方
- JavaScriptによるクライアント側切替の実装例
- PHPや主要なCMSでのサーバー側対応の方針
各章は実務で役立つポイントに重点を置き、実例と注意点を交えて説明します。まずは全体像を把握してから、必要な章を順に読み進めてください。
なぜ今「日本語／英語の切り替え」が重要なのか
背景
近年、企業やブランドが国内外に情報を発信する機会が増えています。海外顧客や訪日客、海外採用の増加を考えると、日本語のみのサイトでは伝わらない情報が出てきます。簡単な英語案内でも接点が大きく広がります。
なぜ重要か
英語対応は単に翻訳だけでなく、信頼獲得や問い合わせ増、採用の幅を広げる役割を果たします。例えば採用ページを英語にすると応募者の母集団が増え、製品説明を英語にすると海外からの購買につながります。
直面する課題
URL設計（/en/やen.example.com）やブラウザ言語優先の扱い、言語切替時のページ遷移の整合性が難点です。翻訳版の更新管理やSEOの重複対策も注意が必要です。
優先すべきポイント
ユーザーが迷わない切替導線、明確なURL、翻訳の品質維持を優先してください。まずは対象ユーザーを決め、必要な範囲から段階的に対応すると負担を抑えられます。
Webサイトの言語切り替えの基本設計
対応言語の決定
まず、どの言語に対応するかを明確にします。ターゲットユーザーやアクセス解析を参考に、優先度の高い言語から対応します。例：日本語（default）→英語、次に中国語や韓国語など。
翻訳方針（自動翻訳と人のチェック）
機械翻訳は迅速でコストが低い利点がありますが、表現や専門用語で誤訳が出ることがあります。推奨する流れは、機械翻訳で一次翻訳を作成し、その後に人（翻訳者またはネイティブ担当者）が校正する方式です。重要ページは必ず人の確認を入れてください。
URL設計：言語ごとにパスを分ける（例：/en/）
言語ごとにパスを分けると管理が分かりやすくなります。例：
– 日本語: https://example.com/
– 英語: https://example.com/en/
この形にするとSEOやブックマークもしやすくなります。
1対1対応のページ構造と利点
各ページを言語ごとに1対1で用意すると、言語切替ロジックを単純化できます。実装例：現在のパスの先頭に言語プレフィックスを付け替えるだけで切替可能です。翻訳がない場合はフォールバックとして元の言語を表示し、ユーザーに翻訳予定を案内すると親切です。
注意点
メタ情報（title、description）も言語ごとに用意し、ナビゲーションやフォームのプレースホルダも忘れずに翻訳してください。
言語切り替えボタンのUIデザインと配置
見つけやすい配置
言語切り替えはヘッダーの右上に置くと直感的です。ユーザーがページを開いて最初に目にする場所にあるため、迷わず切替えできます。モバイルではハンバーガーメニュー内か、ナビゲーションの上部に配置すると使いやすくなります。
代表的なUIパターン
- テキストリンク：『日本語 / English』のように言語名を並べます。分かりやすく覚えやすいです。例：フッターにも同じリンクを置くと安心感が増します。
- トグルスイッチ：2言語のみの場合に有効です。視覚的に現在の言語が分かるので手早く切替えられます。
- ドロップダウンメニュー：多数の言語を扱うときに適します。一覧から選べるため拡張性があります。
- 国旗アイコン付きボタン：視覚的に伝わりやすいですが、国旗＝言語ではない点に注意してください。併せて言語名を表示すると誤解を防げます。
見せ方のポイント
- ラベルを明確に：英語表記が必要なユーザー向けに “English” と表記するなど、言語名を併記します。
- タップ領域を広く：モバイルで押しやすい大きさにしてください。
- 視認性を確保：十分なコントラストと余白で目立たせます。
- 選択の保持：ユーザーが選んだ言語は次回も反映されると便利です。
これらを組み合わせ、ユーザーにとって分かりやすい見た目を優先してください。
JavaScriptで日本語／英語切り替えを実装する方法
概要
HTML＋CSS＋JavaScriptで、クリックすると対応言語のURLへ遷移するトグル式の基本実装を説明します。ファイル名やパスの規則（例：/ja/ ↔ /en/, index.html ↔ index-en.html）に基づく切り替えロジックを扱います。
シンプルなHTML例
<button id="langToggle" aria-label="言語を切り替える">日本語</button>
基本的なJSロジック（URLベース）
以下はパスまたはファイル名を置換して遷移する例です。クエリやハッシュは維持します。
function getAlternateUrl(url) {
const u = new URL(url);
// パスに /ja/ または /en/ がある場合
if (u.pathname.startsWith('/ja/')) return url.replace('/ja/','/en/');
if (u.pathname.startsWith('/en/')) return url.replace('/en/','/ja/');
// ファイル名に -en が付くパターン
u.pathname = u.pathname.replace(/(.*)(-en)?(\.html)?$/, (m,p,minusEn,ext)=>{
if (minusEn) return p + (ext||'.html');
return p + '-en' + (ext||'.html');
});
return u.toString();
}
document.getElementById('langToggle').addEventListener('click', (e)=>{
const target = getAlternateUrl(location.href);
location.href = target;
});
補足ポイント
- クエリ文字列やハッシュを失わないようにURLオブジェクトで扱うと安全です。
- サイト内で規則が統一されているほど単純な置換で済みます。異なるページ構成が混在する場合は、ページごとに対応URLをdata属性で指定すると確実です。
- アクセシビリティ：ボタンにaria-pressedや明確なaria-labelを付けると親切です。
サーバーサイド（PHP）やCMSによる実装
概要
サーバー側で言語切り替えを行うと、ページの内容やメタ情報を確実に切り替えられます。PHPではURLやクッキー、セッションを使って言語を判別します。CMS（例：WordPress、HubSpot）は多言語機能やプラグインで簡単に対応できます。
PHPでの基本パターン
- URLパラメータ方式（例：?lang=ja または /ja/ページ）: 実装が単純でSEOにも有利です。
- クッキー／セッション方式: ユーザーの選択を保存しますが、URLに情報が残らないため共有時に言語が変わることがあります。
簡単な例：URLでlangを受け取り、表示テンプレートを切り替える
– $_GET[‘lang’] を検査し、’ja’なら日本語テンプレート、’en’なら英語テンプレートを読み込みます。
WordPressやHubSpotでの実装
- WordPress: PolylangやWPMLを使うと投稿ごとの翻訳管理、言語切替ウィジェット、hreflang対応を提供します。Multisiteで言語ごとにサイトを分ける方法もあります。利点は管理画面で翻訳を一元管理できる点、注意点はプラグインの互換性とパフォーマンスです。
- HubSpot: 管理画面に多言語対応の仕組みがあり、ランディングページやCTAを言語別に設定できます。CMS提供の翻訳ワークフローを使うと作業が整います。
プラグイン／外部翻訳サービスの比較
- 自動翻訳（Google Translate等）: すばやく多言語化できますが、品質のバラつきに注意します。
- 手動翻訳（プロ翻訳者）: 品質は高いですが時間と費用がかかります。
- ハイブリッド: まず自動翻訳で下訳を作り、編集者が校正する運用が現実的です。
運用上の注意点
- URLは言語ごとに分ける（/ja/、/en/）とSEOに有利です。hreflangタグを設定してください。
- 翻訳の更新フローを決め、CMS内で担当者を明確にします。コンテンツ増加時の運用負荷を事前に見積もってください。
この章では実装の選択肢と現実的な運用方法を中心に説明しました。具体的なコードやプラグイン設定は環境に合わせて調整してください。
