多言語サイトを使いやすくする、画面と操作の確認ポイント

多言語サイトの使いやすさは、訳文の質だけでは判断できません。言語を選択し、必要な情報を読み、問い合わせや購入を終えるまでの一連の流れを、実際の画面で確かめる必要があります。日本語では問題のないボタンや入力欄であっても、別の言語では操作しにくくなる場合があります。

言語の選択導線は、どのページからでも見つけられる位置に配置します。「日本語」「English」のように各言語の名称を自言語で示し、国旗のアイコンだけに頼らないようにします。国と使用言語は必ずしも一対一ではないためです。

言語を切り替えた後は、可能であれば同じ内容のページへ案内します。対応する翻訳先ページがない場合は、どのページへ進めるのかを明示します。選択中の言語がひと目でわかることや、キーボード操作でも開閉や選択ができることを確認してください。

対応言語が多い場合は、一覧の並び順や検索機能の使いやすさも検討します。利用頻度の高い言語を上位に置く場合でも、他の言語を見つけられる経路を確保します。スマートフォンにおいてメニューを閉じたり、元の画面へ戻ったりできるかも実際に操作して確認します。

翻訳後の文字数は、言語や文章、表示するフォントによって変動します。一律の増加率を当てはめて枠幅を決めることはできません。「送信」が「Submit」のような表記になるだけでも、ボタンに必要な横幅は変わります。

ボタンやラベルには文字数が増えても収まる余裕を持たせ、改行が発生した際に高さが足りなくならないようにします。長い見出し、製品名、エラーメッセージの表示を入れて確かめます。枠内に表示を収めるためにフォントを過度に小さくしたり、重要な条件を省略したりしないでください。

アラビア語など右から左へ読む言語では、文字の進行方向とレイアウトを確認します。すべての要素を機械的に反転させるのではなく、メニューや余白、方向を示すアイコンなどを個別に確認します。ロゴや写真、数値、URLの扱いにも注意が必要です。実装の考え方はW3Cの右から左へ読む文章の解説で確認できます。

画像内の文字は、HTMLの本文テキストとは分けて扱います。言語ごとの画像を用意する方法や画像翻訳機能の活用を検討し、生成・差し替え後の内容と見た目を確認します。重要な説明は、画像以外でも読めるテキスト形式にしておくと更新が容易になります。

氏名や住所、電話番号の入力形式が対象地域で過不足なく使えるかを確認します。入力エラーが発生した際は、どこをどのように直せばよいかがその言語で理解できるようにします。ボタンの文言や確認画面、完了後の案内メッセージも確認の対象です。

見出しの構造、入力欄のラベル、画像の代替テキストなどを確認し、音声読み上げやキーボード操作でも必要な情報にたどり着けるかを検証します。色やアイコンだけで意味を伝えている箇所は、テキストによる補足説明も検討します。

単に「わかりやすいですか」と尋ねるだけでなく、製品を探す、料金を確認する、問い合わせを送信する、といった具体的なタスクの実行を依頼します。操作に迷った場所、読み違えた説明、完了できなかった箇所を記録し、修正後に再度確認します。

検索サイトからの流入も含めて確認する場合は、対象言語での検索キーワードやページタイトルが、ページ内容と合致しているかを確認します。画面表示の課題と検索向けの設定は切り分けて確認してください。表示崩れへの対処法は多言語サイトのレイアウトとCSSで説明しています。