言語切り替えボタンの作り方と、確認する動作

言語切り替えは、表示中の言葉を読めない人でも、自分の言語を選べるようにします。見つけやすい入口、わかりやすい言語名、切り替えた先のページをそろえて確認してください。見た目だけでなく、入力中の内容や戻る操作への影響も設計します。

「日本語」「English」「한국어」のように、その言語の表記で示します。補助的に別の言語の名称を添える方法もありますが、現在の表示言語だけで選択肢を書かないようにします。

国旗だけでは、言語を一意に示せません。同じ言語が複数の国で使われ、一つの国に複数の言語があるためです。販売地域や通貨も選ぶ場合は、表示言語とは別の選択なのかを明確にします。

中国語は、簡体字と繁体字の違いを示すのか、特定地域向けの案内を分けるのかを決めます。実際の内容に合わせて、読み手が選べる名称にします。地域指定自体が誤りというわけではありません。

少数の言語なら、テキストリンクを並べると選択肢が見えます。多い場合は、メニューや一覧を開く形式を検討します。選択肢を隠す場合も、言語を選ぶ機能だとわかるラベルを付けます。

2言語の切り替えでも、単なるオン・オフのスイッチに見えないように、現在と切り替え先の言語を示します。年齢や国だけで好む形式を決めず、利用者に実際の操作を試してもらいます。

ヘッダーやメニューなど、各ページから見つけられる場所へ置きます。スマートフォンでは、他のボタンと重ならず、一覧を開閉できるかを確認します。

記事を読んでいる人が言語を変えたときは、その記事の別言語版へ進めるようにします。トップページへ戻す場合や、対応ページがない場合は、読み手が状況を理解できる案内を用意します。

再読み込みする方法と、画面内で差し替える方法があります。どちらでも、フォーム、絞り込み、カート、開いている画面の状態がどうなるかを確認します。その場で差し替える方式でも、状態が必ず保たれるとは限りません。

検索向けに言語別URLを用意する場合は、そのURLを直接開いたときも対象言語が表示されるかを確かめます。再読み込みの有無だけで、検索向けの対応が完了するわけではありません。

言語選択のラベルまで翻訳すると、利用者が読める言語名が別の表記へ変わる場合があります。自動翻訳を使うときは、言語選択部分を除外できるかを確認します。

AIシュリーマンの翻訳処理では、data-ignore-translate属性が付いた要素やその内側を翻訳対象から除外する仕組みがあります。独自の切り替えUIを使う場合は、サイトに合う適用方法を確認してください。この属性はAIシュリーマン側の仕組みであり、すべての翻訳ツールに共通する標準属性ではありません。

選択を保存する場合は、次のページでも引き継ぐか、URLで指定された言語を優先するかを決めます。別の人から共有された英語URLを開いたのに、保存済みの選択で日本語へ戻される、といった食い違いに注意します。

保存できない環境でも言語を選べるようにし、保存期間や利用するCookieなどは、サイトの方針に合わせます。表示言語の選択と、ログインや購入の状態を混ぜないようにしてください。

ボタンやリンクに意味のあるラベルを付け、現在の選択がわかるようにします。メニューを開いた後に選択できるか、閉じたときに適切な場所へ操作が戻るかを確認します。色だけで選択状態を伝えないことも大切です。

言語切り替えの成功、表示にかかる時間、切り替え後の操作を確認し、利用者が迷った箇所を直します。アクセス解析の数値だけで使いやすさを決めず、実際の操作と合わせて判断します。文字量や画面全体の確認は多言語サイトの使いやすさ、検索向けの対応はhreflangの設定方法で説明しています。