ウェブサイトを日本語にローカライズするときはスタイルも調整しよう。
海外のウェブサイトをそのまま日本語に翻訳 (ローカライズ) したものを見かけるとき、わたしたち日本人は「あ、海外のサイトが翻訳されてるんだな」と気づくことが多い。同時に、純粋に日本語サイトとしてデザインされたウェブサイトに比べて一定の違和感も感じる。その違和感はなぜ生まれるのか、簡単に紹介したいと思います。
直訳しただけだと良くない
↑は、とあるサイトのキャプチャ。上は英語のオリジナル。下は直訳された日本語版サイト。日本語の方はなんだか窮屈で、息が詰まったように見えてしまう。
文字部分をハイライトしてみる。たしかに、面積として日本語のほうが窮屈だ。日本語の方の書式を、恣意的にスタイル調整してみると以下のようになる。
幾分見やすくなった。
具体的にどんな調整をすると見やすくなるのか挙げていきたい。
(1) フォントサイズ
上述の違和感が起こる理由はシンプルで、日本語の文字が占める面積が英語に対して大きいからだ。
↑同じフォントサイズで表示しても、日本語と英語では1文字あたりの面積が大きく違う。英語サイトを日本語にローカライズする場合、フォントサイズは少し小さく調整したほうが見やすくなる可能性がある。
(2) 行間
先述の通り英語は一文字の面積が小さいため、行間 (行ごとの間隔、line-height) が小さく設定されていることが多い。日本語にローカライズするときは、やや広めに行間を調整することで、読みやすくなる。
(3) 字間
同様の理由で、字間 (文字と文字の間隔、letter-spacing) も英語より広めに取るほうがよい。
ただし現代では日本語のWEBフォントも多く利用できるようになり、それらの多くはメトリクス情報 (字詰めの情報) を内包していることが多い。その場合はフォント側の字詰めを使用したほうがキレイに表示される。
(4) 書体
冒頭の例では日本語版サイトは「メイリオ」で表現されていたが、世の中にはもっと多くのウェブフォントが存在するため、そのサイトの佇まいに合った書体を使用するほうがよい。以下は日本語のウェブフォントの例。
・ Morisawa TypeSquare http://typesquare.com
・ Adobe Typekit https://typekit.com/fonts
・ Google Noto Fonts https://www.google.com/get/noto/
・ Yu Gothic / Yu Mincho http://www.jiyu-kobo.co.jp/
・ AXIS Fonts http://www.axisfont.com/
まとめ
日本語はひらがな、カタカナ、漢字、アルファベットが入り交じった複雑な言語であり、英語などラテン文字と大きく視覚的な性質が異なる。そのため、英語でデザインされたものを日本語にローカライズするときは、テキスト部分の翻訳だけでなく、書式スタイルも調整したほうが、グンと見やすくなる。
以前ベトナムに出張したとき、現地オフィスのエンジニアと会話したところ、この記事で紹介したような「違和感」は感じていなかったことから、日本語に慣れ親しんだ日本人固有の感覚のようにも感じる。上記のコツをおさえば、日本語サイトが見やすく/読みやすくなることを伝えたところ、エンジニアは喜んでいた。
海外のデザイナーやエンジニアと、日本語のクリエイティブを協業するときは、このあたりの感覚の違い（自分が当たり前に感じることが他者はそうではない可能性があること）を意識するようにしたい。
#デザイン #UIデザイン #UI #タイポグラフィ #design #uidesign #typography