言語切り替えの型の選び方
言語切り替えの型は、「どこに置くか」「別の言語の読み手をどう案内するか」「版がないページをどう扱うか」の3つで変わります。問い1で置き方を決め、問い2と問い3で案内の仕方を加えます。型を選んだら、各Patternのページでワイヤーフレームとプロンプト、動くデモを確認できます。
問い1：言語の切り替えを、どこに置きますか？
対応する言語の数と、別の言語の読み手の多さで決まる問いです。
| 状況 | 向く型 |
|---|---|
| 対応する言語が2〜3つで、別の言語の読み手も多い（基本） | ヘッダー内リンク型 |
| 対応する言語が4つ以上ある | ドロップダウン型 |
| ほとんどの読み手が1つの言語で、別の言語の読み手は少ない（直接たどり着く別の言語の読み手が多いなら、問い2の提案を組み合わせる） | フッター配置型 |
問い2：別の言語の読み手が、最初に違う言語のページを開くことがありますか？
検索や共有されたリンクから、読めない言語のページにたどり着く読み手への案内です。
| 状況 | 向く型 |
|---|---|
| ブラウザの言語とページの言語が違う読み手に、別の言語のページを知らせたい | 言語の提案バナー型 |
| ほとんどの読み手が、自分の言語のページから入ってくる | 提案は出さず、切り替えを置くだけで足りる |
問い3：一部のページにしか、別の言語の版がありませんか？
言語を切り替えたときに、移る先がない場合の扱いです。
| 状況 | 向く型 |
|---|---|
| ブログやお知らせは日本語のみなど、版がないページがある | 翻訳がないページの案内型 |
| すべてのページに版がある | 同じ内容のページへ移れば足りる（ヘッダー内リンク型 など） |
言語切り替えの型の比較
| 型 | 役割 | 置く場所 | 向く状況 |
|---|---|---|---|
| ヘッダー内リンク型 | 置き方 | ヘッダーの右端 | 対応する言語が2〜3つ |
| ドロップダウン型 | 置き方 | ヘッダーの右端 | 対応する言語が4つ以上 |
| フッター配置型 | 置き方 | フッター | 別の言語の読み手が少ない |
| 言語の提案バナー型 | 案内の仕方 | ページの最上部 | 別の言語の読み手が、違う言語のページから入ってくる |
| 翻訳がないページの案内型 | 案内の仕方 | 版がないページの上部 | 一部のページにしか別の言語の版がない |
すべての型に共通する設計の原則
言語切り替えの型を作る中で、型が違っても繰り返し出てきた原則です。どの型を選んでも、次の点は同じように確かめます。
- 国旗を使わず、言語名をそれぞれの言語で書く（日本語・English・简体中文など）
- 今見ているページと同じ内容の、別の言語のページへ移る。版がない場合は、ないことを伝えて次の行動を示す
- アクセスした場所やブラウザの言語で、自動的に転送しない。提案にとどめ、読み手が選べるようにする
- リンクに lang と hreflang を付け、表示中の言語に aria-current を付ける。lang はリンクの文字の言語、hreflang はリンク先のページの言語を示す。ページの html 要素には lang を指定する
- head に hreflang で、同じ内容の別の言語のページを示す。対応づけは相互に行い（日本語のページから英語のページ、英語のページから日本語のページ）、版がない言語のページは示さない
- 別の言語の読み手が検索などから直接たどり着く可能性が高い場合は、切り替えの置き場所にかかわらず、提案のバナーを組み合わせる。閉じた提案は繰り返し出さない
- 提案や案内の文は、読み手が読める言語で書く
- 機械翻訳を出す場合は、機械翻訳であることを明記する
組み合わせの例
- 英語のページがある会社のサイト：ヘッダー内リンク型で「日本語 / English」を並べ、ブログなど版がないページでは翻訳がないページの案内型で案内する
- 多くの言語に対応する観光・宿泊のサイト：ドロップダウン型で言語を選べるようにし、海外からの読み手には言語の提案バナー型で提案する
- 英語のページが会社概要だけにある中小企業：フッター配置型で入口を残し、ヘッダーは主な読み手のために使う
よくある質問
言語の切り替えに、国旗を使ってもよいですか?
国旗は国を表すもので、言語を表しません。英語のように多くの国で使われる言語や、1つの国で複数の言語が使われる場合に合わなくなるため、言語名を文字で書くのが望ましいと考えられます。
アクセスした国に合わせて、自動で言語を切り替えてもよいですか?
自動で切り替えると、海外にいる日本語の読み手や、あえて元の言語のページを見たい読み手が困ります。ブラウザの設定などを手がかりに提案するところまでにとどめ、読み手が選べるようにする形が安全です。
言語ごとのページは、検索エンジンにどう伝えればよいですか?
各ページの html 要素に lang 属性でページの言語を指定し、head に hreflang で同じ内容の別の言語のページを示す方法があります。版がないページでは、その言語のページを示しません。対応づけは、それぞれのページから相互に行います。どの言語にも当てはまらない読み手向けの既定のページがある場合は、x-default を使う方法もあります。
言語の切り替えは、ヘッダーとフッターのどちらに置けばよいですか?
別の言語の読み手が多いならヘッダー、少ないならフッターが目安です。両方に置き、ヘッダーには主な言語だけ、フッターにはすべての言語を並べる方法もあります。