こんにちは！デザイナーのフジモトです。
最近、ロゴデザインのお仕事でフォントに携わる機会が多かったので、
今一度2020年版として、国内のWebサイトでよく使用されている和文フォントの調査を行いました。
ベースフォントに普段見かけないフォントや有名では無いフォントを使うと、一気に素人感が出てしまう危険性も確かにありますね。
今一度、デザインの幅を広げるためにもベースのフォントは結構重要かと思います。
(1)国内で制作されたWebサイトに限るため、検証用のWebギャラリーサイトは
https://81-web.com/ を基準にする
(2)ジャンルは被らないようランダムに100サイト以上ピックアップする
(3)フォントはデバイスフォントとして使用されているものが対象(バナーやビジュアルなど画像内に使用されているものは含まない)
ホームページごとフォントを調べられるGoogleChromeの拡張機能。
今回初めて導入しますが、驚くほどに便利でした。どうしてもっと早く導入しなかったのか・・・font-sizeやfont-weightまで詳細なデータが表示されるので、新規でデザインする際にも参考になると思います。
それでは早速、よく使用されている順にランキング形式でご紹介していきます！
圧倒的な差をつけて「游ゴシック」が1位となりました!
Windows、Mac、iPhoneに搭載されているフォント。幅広いデバイスでの再現が可能となっているので、Web制作業界内では慣れ親しまれたフォントでもあります。女性向け問わず、旅館や和食など日本的なサービスを提供するWebサイトの紹介をはじめ、企業、行政関係とあらゆるジャンルのWebサイトで採用されていました。国内で閲覧されている中でも、一番馴染みのあるフォントと言えますね。
オープンソースの美しいフォント。Noto Sansは游ゴシックより少し丸みを帯びた、親しみやすく優しいデザインです。メイリオと比較すると、ひらがなの書体がややスマートな印象なので可愛くなりすぎず個人的にはとても好みです。安定・視認性にも優れているので、PASUMOをはじめ、製造・工業系、不動産会社、幅広い事業のコーポレートサイトで使用されるフォントです。
游明朝体は単行本や文庫などで小説を組むことを目的に開発された明朝体ファミリーです。Windowsで明朝体といえばMS明朝でしたが、現在標準フォントとして游明朝が広く採用されています。読み文字としてはもちろん、見出しなどメッセージ性の高い場面で使用される頻度が高いかも。1位だった游ゴシックとの親和性も高いです。
「ヒラギノ角ゴ」は、現代的な明るさを残しつつもオーソドックスな印象を与える書体。日本語書体として、ヒラギノ明朝体、ヒラギノ角ゴシック、ヒラギノ丸ゴシックなどがあります。Ｗ１からＷ９まで幅広いウェイトで展開しています。
本文から見出しまで、幅広く活躍するフォントですね。Webデザインだけではなく、紙面の方でもなじみが深いかと思います。
書体自体は4位で紹介したヒラギノ角ゴと同じフォントです。
ここで、ヒラギノの「Pro」と「ProN」の違いについておさらいですが、"pro"とは、基本的には「収録文字の種類が豊富である」という意味を表します。“N”がついていたら旧字体の漢字が混ざっているので、見分け方としてそこを知っていればOK。
やはり上記のヒラギノフォントと機能的な違いはありません。W0～W9 の合計10ウェイトで構成されていることが特徴です。
「-webkit-font-smoothing: antialiased; 」との親和性が高いなどの理由から、2016年以降、cssのFont Family に指定することが推奨されている傾向にあります。
他のベーシックな明朝体よりも、本格的な長文本文用明朝体。
フリーで再現できるWebフォントではなく、ライセンスを有するデータとして購入が必要です。
キャンペーンLPや純和風のサイトで使用されることが多く、ややフォント自体の癖は強いですが、印象的なWebサイトに仕上がります。
Adobeが2017年に発表した、アドビオリジナルの和文書体です。先発としてリリースされている貂明朝とはまた用途が違い、見出しよりも文字数の多い、本文用のテキストに適したフォントです。
特徴のある江戸時代の瓦版印刷に見える運筆のフォントで、書籍の装丁などにも使用できる独特な味がありますね。鳥獣戯画など日本的なモチーフとの親和性が高く、その世界観からファンが多い書体です。
2018年に、Google とAdobe が共同開発した新フォント。既存のゴシック体「Noto Sans JP」より 2つ少ない 7ウェイトで展開しています。
実際に導入されている方のレビューを見る限りでも、かなり綺麗に表示され、日本語のみを使用する場合にとても便利そう。これから使用される定番フォントとして登場してきそうです。
万人から愛されるすっきりとした明朝書体。広告見出しから書籍本文まで幅広い用途に対応し、豊富なウエイトバリエーションと、仮名書体との組み合わせで、様々な表現を可能にするオールマイティさを備えています。昔からWin/Mac問わず明朝といえばこの書体でしょう。
しかし、Windowsだと公式ブラウザであるEdge/IE11においてアンチエイリアスがかからず、ややザラついてしまうのが難点。用途によって使い分けたいところです。
順当にいけば、Webフォントとしての使いやすさでヒラギノ角ゴシックが圧倒的かな? という当初の予想でした。一位の游ゴシックはデバイスを問わない再現度、幅広いデザインで導入できると使いやすさが一番の理由ですね。
よく使われているということはそれだけ普遍的であるということですが、Webサイト自体のデザイン性も損なわず、共存しているフォントは本当に計算され尽くして使用されているのだなと感じました。フォントのデザイナーさんには頭が上がりませんね…
あと個人的に、こんなに探しても、メイリオを指定したWebサイトが全くなかったことが驚きでした。
ここまでお読みいただき、大変ありがとうございました！
新しいWebデザインの構築の何かお役に立てれば幸いです。
ほか、参考にさせていただいたサイト↓
https://webdesigner-go.com/proskill/font/
しずおかオンライン中途採用社員も、積極募集中！
しずおかオンラインののスタッフとして、地域の魅力を伝える仕事です。
くわしくはこちら！
