日本語と英語でも読みやすい！そんな行間を考えてみた

今回は日英対応での行間
行間は日本語と英語でだいぶ違うので、デザインする段階で多言語対応を考えてデザインしていきましょう。

前回「ウェブの行間って何なの？line-heightを数値的に考察してみた。」で行間について触れましたが、今回も行間です。

外国人のデザイナーも自分の言語でのレギュレーションを決めて満足してるようなら考えを改めて！！

海外の企業がデザインレギュレーションを作り、それを守った上で日本語対応された企業なんてのはline-heightが1.5や1.6なんてキチキチの行間になっている。そんなサイトがいっぱいあります。

紙の小説を読み慣れていたり、雑誌ばっかり読んでいる人間にはその行間でいいかもしれないけれど、全てが電子化され紙のサイズ、ページ数を気にしなくなった現代ででそれは良くない。（スクロール量を気にしなくてはいけなくなったけど、それは別の話）

行間いくつが最適に見えるのかしっかりと検証するのが大事だと思う。

日本語と英語で高さをそろえるとこんな感じ。

あなたのサイトの行間は大丈夫？line-height:1.6ではダメな理由

けっこー差が出る。
英語はx-heightという基準があって、そのせいで行間設定も日本語と違います。

英語でのフォントの基準はこちらの記事も参考にしてみてください

デザイン初心者が覚えておきたい、文字フォントの基礎テクニック26個まとめ
文字テキスト全体のバランスを整えるには、行間の高さをX-ハイトの150%に設定しましょう。より簡単にこのルールを適用するには、行間の高さ（Line Height）を文字テキストサイズの125%に設定します。

先にポイントまとめ

1. 英語見出しは全部大文字にするほうが楽、小文字なら行間設定は要調整
2. 本文はline-height:1.7;あたりを基準に調整する。
3. フォントで日英の文字サイズの差を調整する

1.見出しサイズは英語で大文字か小文字かによって選ぶ。

海外のブログなどがそうですが、見出しを全て大文字にしているサイトと、大文字と小文字を織り交ぜているページがありますよね。

上のタイトルを比べた時、印象が違うでしょう？
大文字と日本語は同じに感じる？全部同じに感じる？
では、行間を変えて見ましょう。

行間をあわせようとすると、小文字のほうが大分余白をとらなくてはいけないとわかります。
大文字にした場合はほぼ変更しなくても印象がかわることはないので、見出しなどは大文字に統一してしまえば基本的に差を感じないはずです。

具体的には英語大文字とひらがなのheight差が0.1、小文字とひらがなのheight差が0.3程度になりました。
※本文の時には1.2程度の差となっていたので、フォントサイズが大きいほど差が出やすいのかも。

特に、小文字で見出しをつけている時には行間が空きすぎず、詰めすぎないラインが難しくなります。

また、大文字小文字でもう一点注意するべきは本文との文字のジャンプ率で、小文字と本文のジャンプ率と
大文字と本文のジャンプ率では大分印象が変わるので、そこも比較しないといけない。

個人的基準は

小文字ならline-height:1.3~1.4
大文字ならline-height:1.4~1.5
です。
できる限り大文字で統一したほうが、差は生まれにくい
※また、本文とのジャンプ率にも配慮する。

2.本文行間を考慮する時のポイント

日本語はひらがなと漢字でその大きさに1pxほどの違いがあるんです。あまり重要ではない差で行間の設定をする時には、漢字が混ざっても変に感じない程度の行間であればどんな行間でもいい程度です。

しかし、英語は大文字と小文字に圧倒的なまでのサイズ差があり、無視できないレベルです。Aaこの差はデザインの与える印象にすら影響する！！

さて、ひらがなと英語が並んだ時は当然のように差がいっぱい出ます。
line-heightは0.2ほどの差が常に出てしまうので、行間は日本語を基準に英語で空きすぎていないかを見ていきます。 個人的な基準は
line-height:1.7〜1.8あたり

3.フォントで日英の文字サイズの差を調整する

日英でのサイズさを減らすためにフォントを選びなおすのも手です。

基本的には日本語フォントのひらがなが小さめなものを選べばいいと思います。
ただ、デフォルトのフォントだと文字の太さが違う程度であまり差はないので、
google fontあたりでいいのあればいいんですけどねー。
探しておすすめしたりしないんかい！

まとめ

ぶっちゃけ、言語ごとに変えてもいいんでしょうが、googleが勝手に翻訳してしまうご時世。意図せず翻訳されてデザインが変にされる前に意識するのもありでしょう。

今、多くの企業がコーポレートイメージを守るためにレギュレーションを設けてどんな状況でもデザインに統一感を持たせる努力をしている。
デザイナーは依頼された時にその企業が海外にも展開しうるのかしっかりと考えてレギュレーション作りをすることが必要だと思います。しっかりと考えないと他の言語がコーポレートイメージを崩すべく牙を向きます。

最後に先輩デザイナーの皆さん、私と同じ成長中のデザイナーの皆さん。
自分が考える最適な日英対応line-heightなんて考えがあれば、ブログを引用しつつ意見を書いて欲しいなと思います。※リツイートしてもらえるときっと探しやすいから。

外国人の皆さん、海外で活動している日本人デザイナーの皆さんこの言語ならこの行間がベストだよなんてのも合ったら面白いと思うんで、書きたいと思ったら記事にしてください。

あ、ウェブクリエイターボックス様が多言語対応の記事をあげていましたよ。
多言語Webサイトを制作する時に気をつけたいポイント

英語が話せないデザイナー、MIYATAの日英対応の話でした。