TIPS

【英語+日本語デザイン】よく使われるフォントを調べてみた!

突然ですが、デザイナーのみなさん。
デザインの参考サイトを探しているときに、よくこんなデザインを目にしませんか?

「英語の見出し+日本語の本文」でコンテンツが構成されているデザインです。

見出しに英語を取り入れることで、漢字の堅苦しい印象を取り除き、よりスタイリッシュで現代的なイメージを印象付けることができるからか、いろいろなサイトで見かけることと思います。

こういったデザインだと大抵の場合、英語フォントと日本語フォントは別のものを適用されているパターンが多いようです。

そこでふと思ったのですが、英語フォントと日本語フォントの組み合わせに、デザイナー的な王道や好まれる組み合わせはあるのでしょうか。
普段、要件に合わせて経験から肌感覚でフォントを選定することが多いのですが、もしフォント同士の相性に「定番」という外さない組み合わせがあるのだとしたら、より合理的にフォント選定ができるのではないかと思います。

というわけで、今回は実際に色々なサイトに適用されているフォントを調査し、傾向を分析してみるTIPSです。

調査内容

今回の分析の対象として適切ではないデータを除くため、あらかじめ下記の条件を設定して調査しました。 ざっくり、以下のような感じです。

■対象
・本文に日本語を使用している日本向けサイト(英語オンリーのサイトは除外)
・見出し箇所が「英語のゴシック体」で、本文が「日本語(ゴシック体・明朝体問わず)」のパーツで構成されているコンテンツを持つサイト
・ギャラリーサイトに掲載されているサイトからランダムに50件

■調査方法
・ブラウザの検証ツールで「font-family」に指定されているフォントを抽出
・複数フォントが当てられている場合は、最も優先して適用されることが想定されているフォントを選定
(例:日本語の本文箇所に「font-family:ヒラギノ角ゴ,Noto Sans JP,sans-serif;」と指定されている場合は「ヒラギノ角ゴ」を日本語フォントとする)

■参考にしたギャラリーサイト
81-web.com
MUUUUU.ORG

わざわざ自分で調べなくてもどこかにデータ落ちてるような気がしなくもないですが、今回は自分の目で確かめるのも目的なのでちまちまと調査していきます。

結果

日本語フォント(総合)

日本語フォントの割合の円グラフ

※このグラフでは仕様違いのフォント(例:「ヒラギノ角ゴ Pro」と「ヒラギノ角ゴ ProN」は旧字体の有無が区別されているだけ)は同じフォントとしてカウント
ヒラギノ角ゴシック体 pro と proN の違い – Rachicom
※WEBフォント等、フォントファイルの名称を変更してFont-familyに適用していると思われるものも、書体が一致することを目視で確認した上で正式名称に計上(例:「noto」というファイル名のwoffファイルのWebフォントが適用されている場合、「Noto Sans JP」と一致すれば「Noto Sans JP」としてカウント)
※「YakuHanJP」は「Noto Sans JP」の約物を半角にしたフォントのため、「Noto Sans JP」としてカウント

グラフを見て分かる通り、本文に適用されている日本語フォントはざっと3種類が主流で「Noto Sans JP」「游ゴシック体」「ヒラギノ角ゴ」の順に使用されているようです。
いずれも癖がなく可読性の高い書体なので、本文のフォントとしてたくさんのサイトで用いられるのも納得の結果ですね。
日本語フォントについては、迷ったらこのいずれかを使用すると良さそうです。

では、見出しとして用いられる英語フォントはどうでしょうか。

英語フォント(総合)

英語フォントの割合の円グラフ

こちらは日本語のフォントとは違い、サイト毎に結構個性があるようです!

最も多かったのは10.4%(5件)で「Montserrat」で次が8.3%(4件)の「Poppins」、6.3%(3件)の「DIN」と並びます。
確かに上位3つのフォントはよく見かける気がします。
以降はおおむね2件ずつで「Work Sans」「Lato」「futura」などが続きます。

どれも大変使い勝手がよいですし、フォルムも似ているのでデザインに取り入れやすいですよね。
日本語(本文)フォントと英語(見出し)フォントの結果が出そろったところで、最も多い組み合わせはどうなのかというと…?

英語フォント+日本語フォントの組み合わせ(総合)

英語フォント+日本語フォントの組み合わせの円グラフ

画像見づらくてごめんなさいm(__)m

さらにばらついてしまいましたが…。

「Noto Sans JP」との組み合わせだと「Noto Sans JP + DIN」「Noto Sans JP + Poppins」「Noto Sans JP + Montserrat」、「游ゴシック体」との組み合わせだと「游ゴシック体 + Oswald」「游ゴシック体 + Futura」「游ゴシック体 + Roboto」、そしてヒラギノ角ゴは「ヒラギノ角ゴ + Poppins」の組み合わせがそれぞれ2.1%(2件)という結果になりました。

英語見出しと組み合わせる日本語フォントとしてはやはり「Noto Sans JP」が人気のようです。(わたしも好きです)
そして游ゴシック体は、ヒラギノやNotoと比べると少し特徴あるフォントだからなのか、縦長のフォントと組み合わせて引き締めるような効果を狙っていたりするのでしょうか…?

番外編

・50件中1件のみ、英語見出し箇所に「italic」を適用していました。逆に50件のうち1件だけということは、「王道」を踏襲するのであれば書体に 「italic」 は適用しない方が、ユーザーが「よく見る」と感じるデザインに近づけられるのではないかと思います。あるいは「italic」 にすればそれだけ他サイトとの差別化を図れるともいえます。

・50件中3件が、英語見出しと日本語本文に同じフォントを適用していました。英字にこだわりがなければ、読み込むフォントが少なくて済むのでこちらの方がよいかもしれません。

・日本語フォントで大人気だった「Noto Sans JP」ですが、意外なことに英語見出しとして使用されているのはたったの1サイトのみでした。「Bold」「Black」くらいのウェイトなら十分見出しで使えると思うのですが、やはり目立たせるとなると少々個性が足りないのでしょうか。

まとめ

・日本語の本文箇所には 「Noto Sans JP」か「游ゴシック体」か「ヒラギノ角ゴ」 を適用しておけば間違いなさそう(もちろん要件やデザインの目的を考慮した上で)

・英語見出しと組み合わせるなら 「Noto Sans JP」か「游ゴシック体」 をベースにして、英語フォントは「Montserrat」「Poppins」「DIN」あたりからデザインに合わせて選ぶとよさげ。

・「他と違う」こだわりや個性を発揮する場合は、本文のフォントではなく英字の見出しで。(本文のフォント独特だと可読性にも関わりますもんね)

感想

簡単そうに見えて結構時間がかかりました。

この調査は総数が50件と少ないため、もう少し件数が多ければはっきりとした結果になりそう…という心残りもありますが、漠然と感覚的に抱いていた傾向を数字として確認できたので第1回としては満足です。

ちなみに、調査したサイトのURL等をまとめたデータが手元にありますので、もし欲しい方がいましたらお問い合わせかTwitterのDMからお気軽にご連絡ください!

サイトのジャンルなど、条件を変えることでまた色々なデータがとれると思うので、機会があれば次回以降挑戦してみたいです。