多言語・グローバル展開で押さえておきたいUX設計の視点
多言語・グローバル展開するサイトのUX設計で押さえておきたいのは、「翻訳や国の違いによって、見た目や構造が変わっても崩れない」ことを前提に設計しておくという視点です。
テキストの長さ、国ごとの表示要素の有無、言語・国の切り替え方、色や写真表現の受け取られ方など、日本語版だけを見ていては気づきにくい"ゆらぎ"は必ず発生します。
これを個別に場当たり的に直すのではなく、最初から吸収できる仕組みにしておくことが、公開後の運用のしやすさと、ユーザーにとっての使いやすさの両方を左右します。
目次
翻訳によるテキスト長の変化を前提にする
同じ意味の文章でも、言語によって表示に必要な長さは大きく変わります。
- 日本語から英語に翻訳すると、同じ意味でも文字数・単語数が増えることが多い(例:「検索」→「Search」、「続きを読む」→「Continue Reading」など)
- 日本語・中国語は文字数自体は少なくても、1文字あたりの情報量が多く、フォントによって見た目の圧迫感が変わる
- 見出しやボタンラベルのような短い文言ほど、言語による長さの差が目立ちやすい
だからこそ、タイトルや見出しを「表示できる文字数の上限を決めて、はみ出た部分は三点リーダー(…)で省略する」という対応は、あくまで応急処置と考えたほうがよいでしょう。タイトルが最後まで読めないことは、情報そのものが欠けてしまうということです。
特に見出しやCTA文言は意思決定に直結するため、影響が大きくなります。
省略に頼るのではなく、どの言語・どれくらいの文字量が入っても崩れないレイアウトを前提にすることが基本の考え方です。多少長くなっても違和感なく収まる余白・行間・折り返しを想定しておく、ということです。
言語・国の切り替えは「見つけやすさ」と「分かりやすさ」を両立させる
言語切り替えの設置場所については、ヘッダー(多くはグローバルナビの端)に置くのが一般的で、今も広く支持されているパターンです。ユーザーが最初に視線を向けやすい場所であり、どのページに移動しても同じ場所にあることで「迷ったらここを見ればいい」という安心感につながります。
あわせて押さえておきたいのが、「言語の切り替え」と「国・地域の切り替え」は目的が異なるということです。
- 言語の切り替え:表示するテキストの言語を変えるもの
- 国・地域の切り替え:価格、法令、在庫、問い合わせ先など、コンテンツの中身そのものを地域仕様に変えるもの
この2つをまとめて選ばせる専用ページやモーダルを用意する手法は、今も広く使われている定番のやり方です。
ただし、モーダルで選択を強制する形は離脱の要因にもなりやすいため、閉じたり後回しにしたりできる非強制的な見せ方(バナーなど)を組み合わせる事例も増えてきています。
サイトの規模やブランドの見せ方に応じて、どちらが合うかを検討するとよいでしょう。
また、IPアドレスやブラウザの言語設定から自動で言語・国を判定し、そのままリダイレクトしてしまう方法は注意が必要です。旅行中のユーザーや複数言語を使うユーザーにとっては、「望まないバージョンに勝手に飛ばされた」という体験になりやすいためです。
自動判定はあくまで候補の提案にとどめ、最終的な選択はユーザーに委ねる設計が望ましいといえます。
国旗で言語を表現しない
言語の選択肢を示す際、国旗アイコンは視認性が高く分かりやすいため使われがちですが、言語と国は必ずしも1対1の関係ではありません。
- 英語は米・英・豪など複数の国で使われている
- スペイン語はスペインだけでなく中南米の多くの国でも使われている
- 中国語も簡体字・繁体字で使用地域が異なる
1つの国旗で1つの言語を代表させてしまうと、当てはまらないユーザーに違和感や疎外感を与えることになります。
言語の選択には、国旗よりも言語名そのもの(日本語、English、Español など、可能であればその言語自体の表記)を使うのが基本です。
一方で、国・地域そのものを選ばせる場面であれば、国旗を使うこと自体は問題ありません。
要素やロゴが変わっても崩れないレイアウトにする
グローバル展開するサイトでは、国や地域によって表示する要素が変わることがあります。
- 例:日本ではヘッダーに「地域を選択」ボタンがあるが、単一拠点のみで展開する国向けサイトにはそのボタン自体が不要
- 例:地域限定のキャンペーンバナーや、法令対応の注記なども国ごとに有無が分かれる
同じように、ロゴにも国名や地域名を組み合わせたバリエーション(社名ロゴ+「Japan」「Asia Pacific」など)が使われるケースがあり、ロゴの縦横比が国によって変わることもあります。
要素の有無やロゴの大きさが変わっても、レイアウト全体のバランスが崩れないことが重要です。
特定の要素があることを前提に他の要素の位置を固定しない、要素が減っても不自然な余白ができない、逆に増えても窮屈にならない、といった視点で設計しておく必要があります。
日本人にとっての見やすさだけを基準にしない
日本語サイトの感覚のまま作ると、海外のユーザーにとっては窮屈だったり、直感的に理解しにくいデザインになることがあります。
- 日本は文字情報の密度が高いデザインが好まれる傾向があるが、海外では余白や画像を多く使い、直感的に理解できるデザインが好まれやすい
- 画像やアイコンを大きめに使い、テキストだけに頼りすぎない情報伝達を意識する
- 色や写真表現の受け取られ方は文化によって異なるため、展開する国・地域ごとに確認する
万国共通で好まれやすい方向性としては、「情報を詰め込みすぎない」「視覚的に直感で理解できる」ことを意識すると、翻訳による調整コストも下げやすくなります。
日付・数値・住所などの「表記ルール」の違いにも目を向ける
見た目のレイアウトだけでなく、情報そのものの表記ルールが国によって異なる点もUX設計上見落とされがちなポイントです。
- 日付表記(年月日の順序、区切り記号)は国によって異なり、誤読を招きやすい
- 数値の桁区切り・小数点の表記(カンマとピリオドの使い分け)も国によって逆になる
- 住所や氏名の入力フォームは、国によって構成要素や順序が異なる(都道府県のような単位がない国も多い)
これらは翻訳だけでは解決できない部分であり、フォームや一覧表示を設計する段階から「日本の常識をそのまま当てはめない」という意識が必要です。
右から左に書く言語(RTL)への配慮
アラビア語やヘブライ語のように、右から左に読む言語を展開する可能性がある場合は、UI全体を反転させる前提での設計が必要になります。
- テキストだけでなく、ナビゲーションの並び順、アイコンの向き、フォームのレイアウトなども左右反転させる必要がある
- 展開予定がない場合でも、将来的な拡張を見据えるなら、早い段階で意識しておくと後の手戻りを減らせる
すべてのプロジェクトで必須の観点ではありませんが、グローバル展開の範囲によっては検討しておく価値があります。
LYZON Designのクリエイティブ・UI/UX
デザインひとつでCVRが変わります
見た目だけでなく成果につながるUI/UX設計を提供。LYZON Designのサービス詳細はこちらからどうぞ。
多言語・グローバル展開のUXに関するよくある質問
Q1. 言語切り替えはヘッダー以外に置いてもいいですか?
フッターに補助的に設置する例もありますが、主要な切り替え導線はヘッダーに置くのが基本です。フッターのみだと発見性が下がり、特に初回訪問者が言語を変えられずに離脱するリスクがあります。
Q2. 国旗を使わずに言語を表現する場合、何を表示すればいいですか?
「日本語」「English」「Español」のように、その言語自体の表記(エンドニム)を使うのが基本です。略語表記(JP、ENなど)を使う場合も、国旗だけに頼らないようにしましょう。
Q3. タイトルがどうしても長くなってしまう場合はどうすればいいですか?
まずは複数行への折り返しを許容できないか検討します。それでも収まらない場合のみ、ツールチップなどで全文を確認できる補助手段を検討し、情報を欠落させないようにします。
Q4. 国選択と言語選択、どちらを先に選ばせるべきですか?
決まったルールはありませんが、まず「言語」を選ばせ、必要な場合のみ「国・地域」を選ばせる流れが分かりやすいとされています。ビジネスモデルによって適した順序は変わるため、実際のユーザー導線を踏まえて検討することをおすすめします。
Q5. モーダルでの地域選択は絶対に避けるべきですか?
絶対にNGというわけではありません。ただし離脱要因になりやすいため、閉じられる・後回しにできる見せ方(バナーなど)や、初回訪問時のみ表示するといった配慮を組み合わせることをおすすめします。
LYZONのWebデザイナー マネージャー。社内案件ではディレクターも担当。
Webデザイン・コーディングとの比率は半々。2015年入社。
ロックンロールを深く愛している。