実はそうはいかないことが多いです。言語が変わると文字の長さ・文字の大きさ・読む方向・フォントまで変わるため、日本語ではきれいに見えていたレイアウトが、別の言語に切り替えた途端に崩れてしまうことがよくあります。
この記事では、多言語サイトのデザインで起きやすい問題と、その対策をわかりやすくお伝えします。「デザインってそんなに考えることがあるの？」と思っている方にもぜひ読んでいただきたい内容です。
目次
言語によってテキストの長さが大きく変わる
多言語デザインで最もよく起きる問題が、言語によってテキストの長さが変わることです。
日本語は漢字・ひらがな・カタカナを組み合わせた情報密度の高い言語で、少ない文字数でも多くの意味を伝えられます。一方、英語やドイツ語などのアルファベット系の言語は、同じ意味を表すのに文字数が多くなりやすいです。
たとえば「お問い合わせ」という6文字が、英語では「Contact Us」、ドイツ語では「Kontaktieren Sie uns」と、かなり長くなります。ボタンやナビゲーションメニューなど、固定幅のデザインに文字を当てはめているとき、テキストがはみ出したり折り返したりしてレイアウトが崩れやすくなります。
言語ごとのテキスト長の目安
漢字・かな混じりで情報密度が高い。短い文字数で多くの意味を伝えられる。
日本語より1.3〜1.5倍程度長くなることが多い。ボタンやラベルでの影響が出やすい。
単語が非常に長くなりやすい言語。日本語の2倍近くになることもある。
日本語に近い文字密度。ただし簡体字と繁体字で文字数が変わることがある。
デザインを作る段階で、最もテキストが長くなる言語を想定してレイアウトを設計しておくことが大切です。日本語で見栄えよくデザインしてから他の言語に対応しようとすると、後から修正が大変になります。
右から左へ読む言語（RTL）への対応
日本語・英語・中国語などは左から右へ読みますが、アラビア語・ヘブライ語などは右から左へ読む（RTL：Right To Left）言語です。
RTL言語に対応するということは、テキストを右寄せにするだけでなく、ページ全体のレイアウト・ナビゲーション・アイコンの向き・フォームの入力方向まで、すべてを左右反転させる必要があります。
たとえばナビゲーションメニューが左側にあるデザインは、アラビア語版では右側に移動させます。矢印アイコンの向きも逆になります。「テキストだけ右寄せにした」という対応では、ユーザーにとって非常に使いにくいサイトになってしまいます。
RTL言語への対応は、後付けで追加するのが難しい要素のひとつです。アラビア語圏・中東市場への展開を検討しているなら、最初のシステム設計・CSS設計の段階からRTLを考慮した構造にしておくことが重要です。
フォントの問題
日本語サイトで使っているフォントは、他の言語の文字をきれいに表示できないことがあります。
日本語フォントは海外の文字に対応していないことが多い
日本語向けのWebフォントは日本語・英数字には対応していますが、アラビア語・タイ語・ベトナム語など特殊な文字体系の言語には対応していないことがほとんどです。対応していないフォントで表示しようとすると、文字が豆腐のような四角い記号に置き換わって表示されてしまいます。
言語ごとに読みやすいフォントは異なる
フォントには「その言語のユーザーにとって読みやすいかどうか」という観点があります。
英語で読みやすいとされるフォントが、日本語ではバランスが悪く見えることもあります。言語ごとに適切なフォントを選ぶことで、読みやすさとデザインの統一感を両立できます。
フォントの読み込みサイズに注意
日本語フォントはファイルサイズが大きくなりやすく、複数言語のフォントを読み込むとページの表示速度に影響することがあります。言語ごとに必要な文字だけを読み込む「サブセット化」などの対策を取ることで、パフォーマンスへの影響を抑えられます。
画像・アイコンに含まれるテキストの問題
見落とされがちなポイントのひとつが、画像やバナーの中に文字が入っているケースです。
「期間限定セール中」「無料相談受付中」といったテキストが画像に直接埋め込まれていると、言語を切り替えてもその画像の文字は日本語のまま残ります。多言語対応をするなら、画像内のテキストはHTML・CSSで別途表示するか、言語ごとに画像を用意する必要があります。
また、文化によって受け取られ方が異なる画像やアイコンにも注意が必要です。たとえばOKサインの手のジェスチャーは、国によっては侮辱的な意味を持つことがあります。グローバルに使える画像・アイコンを選ぶか、地域ごとに差し替えられる設計にしておくと安心です。
色・デザインの文化的な意味の違い
色にも文化によって異なる意味やイメージがあります。デザイン全体を作り替える必要はありませんが、メインカラーやアクセントカラーが対象市場でどんな印象を与えるかは知っておいたほうがいいです。
たとえば白は日本では清潔感・シンプルさを表しますが、一部のアジア・中東文化では弔いの色とされることがあります。赤は日本では情熱や警告を表すことが多いですが、中国では縁起の良い色として好まれます。
メインのデザインを大きく変えなくても、ターゲット市場のユーザーに違和感を与えないかどうかを事前に確認しておくことをおすすめします。
多言語デザインを成功させるための考え方
ここまでさまざまな注意点をお伝えしてきましたが、大切なのは「多言語対応を後から追加するのではなく、最初から多言語を前提に設計すること」です。
日本語版のデザインが完成してから「では多言語化しましょう」という進め方をすると、テキストの長さ・フォント・画像など、あちこちで修正が必要になります。修正のたびにコストと時間がかかります。
対応する言語とその特性（RTLの有無・文字の長さ傾向）を把握しておく
テキストが長くなっても崩れない余裕のあるレイアウト設計にする
画像内のテキストはなるべく避け、HTMLで表示できる設計にする
言語ごとに適切なフォントを選んでおく
対象市場の文化・色の意味を事前に確認しておく
「全部最初から完璧に対応しなければ」と思う必要はありません。まず展開する言語を絞って、その言語に合わせた設計をしっかり行うことから始めると、無理なく進められます。
まとめ
- 言語によってテキストの長さが変わるため、余裕のあるレイアウト設計が必要
- アラビア語などRTL言語への対応は、設計段階から考慮しないと後から修正が大変になる
- 言語ごとに適切なフォントを選ぶことで、読みやすさとデザインの質が上がる
- 画像内のテキストは多言語化の大きな落とし穴。HTMLで表示できる設計にしておく
- 色・デザインには文化的な意味の違いがある。対象市場への影響を事前に確認する
- 多言語対応は後付けではなく、最初から前提として設計することがコスト削減のカギ
「どんな言語に対応すればいいか」「デザインの相談も含めて依頼したい」という方は、まずはお気軽にご相談ください。対応言語の特性を踏まえた設計から、一緒に進めていきます。