国旗は国を表す記号であり、一つの言語を一意に表しません。利用者が読める表記で言語名を示し、現在地と切替後の行き先が予測できる設計にします。
言語名はその言語の文字で表示する
日本語、English、简体中文、繁體中文のように、利用者が認識できる自称表記を使います。国旗だけ、二文字コードだけ、翻訳元の言語だけで表示すると、目的の選択肢を見つけにくくなります。
地域を選ぶ必要がある場合は、言語と市場を分けて示します。たとえばEnglishとAustraliaを一つの概念にせず、価格・配送先の市場選択と表示言語の選択を設計します。
全ページの同じ場所から開けるようにする
デスクトップとモバイルのヘッダーなど、予測しやすい場所へ常設し、現在言語を表示します。メニューを開くボタンには名前、展開状態、キーボード操作、十分なタップ領域を用意します。
切替先は可能なら同じ内容の他言語ページにします。対応版がないときに無言でトップへ送るのではなく、未対応であることを伝え、近いカテゴリや問い合わせへ案内します。
- 現在の言語が文字で分かる
- キーボードと画面読み上げで操作できる
- モバイルでも押しやすく、メニューを閉じられる
- 切替後も同じ商品・記事・手続きへ移動できる
HTMLの言語指定とURLの関係を揃える
各ページのhtml要素へ適切なlangを設定し、本文中で別言語へ変わる箇所にも必要に応じて言語を指定します。これにより読み上げの発音や支援技術の解釈を助けます。
言語別URL、canonical、hreflang、サイトマップをUIと同じ対応表で管理します。画面では選べるのに検索エンジンへ関係が伝わらない、または存在しないURLをhreflangへ出す状態を避けます。
自動判定は提案にとどめ、選択を尊重する
ブラウザ言語や所在地から候補を出すことはできますが、強制転送すると旅行中の利用者、共有URL、検索クローラーが意図しない版へ移る場合があります。通知や選択肢として提示し、閉じられるようにします。
利用者が選んだ言語は一定期間保持し、いつでも変更できるようにします。ログイン前後、予約、決済、外部フォームへ進んでも不意に原文へ戻らないかを代表フローで試します。
実行前に押さえる要点
- 国旗ではなく、利用者が読める自称表記で言語を示す。
- 切替先は同じ内容の対応ページとし、未対応なら理由と代替導線を伝える。
- lang、言語別URL、hreflang、選択保持を一つの対応表で管理する。