言語切り替えを6つの型に分け、AIへの指示文・動く見本・コードを載せています。
言語切り替えはどの型を選ぶか
言語切り替えは、日本語が読めない人が最初に探す部品です。型を選ぶときは、対応する言語がいくつあるか、別の言語の読み手がどれくらいいるか、すべてのページに訳があるか、の3つを先に確かめます。入口の型（01〜03）から1つを選び、国や地域ごとにサイトが分かれているなら地域と言語の2段選択型（04）にします。そのうえで、必要に応じて案内の型（05・06）を組み合わせます。
| こんなとき | 向いている型 |
|---|---|
| 言語が2〜3個で、別の言語の読み手が多い | ヘッダー内リンク型 |
| 扱う言語が4つを超え、ヘッダーに横並びでは入らない | ドロップダウン型 |
| 読み手のほとんどが日本語で、英語版は一部の人向け | フッター配置型 |
| 国や地域ごとにサイトが分かれ、値段や配送が地域で変わる | 地域と言語の2段選択型 |
| 検索や共有から海外の人が日本語のページに直接来る | 言語の提案バナー型（ほかの型と組み合わせる） |
| ページによって別の言語の版がない | 翻訳がないページの案内型（ほかの型と組み合わせる） |
提案バナー型と翻訳がないページの案内型は「どう案内するか」の型なので、ヘッダー内リンク型やドロップダウン型と組み合わせて使います。
どの型でも守ること
- 言語名はその言語で書く。
English・中文・한국어のように書き、国旗は使いません。国と言語は1対1ではないためです。 - lang と hreflang を付ける。リンクに
lang="en"とhreflang="en"を持たせておけば、スクリーンリーダーはその言語の発音で読み上げ、検索エンジンは行き先の言語を判断できます。 - 行き先は、いま見ているページを訳した版にする。どこで押しても各言語のトップページに戻される作りだと、さっきまで読んでいた記事に、読み手が自力で戻らなければなりません。
<head>のlink rel="alternate" hreflangと対応をそろえます。 - 自動で転送しない。ブラウザの言語や国だけで別の言語のページへ移すと、日本語の版を見たい人が戻れなくなります。提案にとどめ、選ぶのは読み手にします。
- 押せる部分を 44px 角くらい取る。言語名は短いので、文字の大きさのままだと押しにくくなります。
よくある質問 (FAQ)
言語を表すなら、国旗より言語名のほうが確実です。英語はイギリスやアメリカなど多くの国で使われ、中国語には簡体字と繁体字があります。国旗を選ぶと、どの国の人に向けたかで受け取り方が変わります。飾りとして添える場合も、言語名は必ず書きます。
言語の切り替えは、日本語が読めない人のための部品なので、その言語で書きます。日本語で「英語」とあっても、英語しか読めない人にはそれが何を指すリンクなのか読み取れません。
English と書いておけば、日本語が読める人にも十分伝わります。
自動で移さず、提案にとどめるのがおすすめです。ブラウザの言語が英語でも、日本語を読める人や日本語の版を見たい人がいます。自動で移すと元のページに戻りにくく、検索エンジンも日本語のページを読みにくくなります。言語の提案バナー型のように、移るかどうかを読み手が選べる形にします。
隠すより、置き場所を変えずに残して、押したら案内するほうが迷いません。ページによって切り替えが消えると、読み手は「このサイトに英語の版はない」と受け取ります。翻訳がないページの案内型のように、版がないことを英語で伝え、英語のトップページなど次の行き先を示します。