こんにちは！岡田です。
3月になりまして、私たち新卒が入社してもうすぐ一年になります。振り返ってみるとあっという間でした…

さて今回は私が入社してから学んだWebデザインにおけるフォント、デバイスフォントと、その中からヒラギノ角ゴシックとメイリオについて学んだことを紹介します！

デバイスフォントとは？

端末にデフォルトでインストールされているフォントのことを「デバイスフォント」といいます。

基本的にWebページでテキストを表示する際には、CSSで指定したフォントの中にあてはまるデバイスフォントが表示されますが、 デバイスフォントの種類はMacやWindowsなど端末によって差があり、インストールされていないフォントを表示させることはできません。
同じページでも表示されるフォントが異なったりするため、デザインする際には注意が必要です。

また、意図したフォントで表示させたい時は、Webフォントを使いフォントデータをダウンロードさせた上でサイトを表示させることができますが、サイトが重くなる原因にもなるため考えて使用を検討しなくてはいけません。

私はWebデザインを知るまで作った文字組が人によって違う見え方になったり、フォントに容量があることを考えたことがなかったので、衝撃をうけました。
それからWebで使われているフォントを意識するようになって、普段目にするフォントはどういった成り立ちで作られて、どのような特徴があるのか気になったので調べてみました！

ヒラギノ角ゴ Pro

ヒラギノ角ゴ Pro（ヒラギノ角ゴシック Pro）はMac（OS X以降）やiOSに標準搭載されているフォントで、みなさんもよく目にすることが多いと思います。私もこのフォントを使ってWebデザインすることが多いです！

ちなみに、名前に付いている「Pro」というのは収録文字が標準より多いことを指しています。

1990年にSCREENホールディングス（旧・大日本スクリーン製造）が、ヒラギノフォントの書体開発を始めて、「クールでスマート、明るくくせのないベーシック書体」をコンセプトに 字游工房 がデザインしたフォントです。
詳しくは こちらのサイト で紹介されていますので合わせてご覧ください！

ヒラギノ角ゴは画線の両端が少し太くなっているのが最大の特徴とも言われています。 可読性が高く、文字種も多くてベーシックな書体としてとても使いやすい書体ですね。

見やすい理由の一つに、文字の濃度を均一にするため、文字を形成する線の間が均一に見えるように調整されていて、小さいサイズでも文字がつぶれにくいようになっている点が挙げられます。

メイリオ

メイリオはWindows（Vista以降）に標準搭載されているフォントです。
先ほど紹介したヒラギノフォントより丸くて、少し癖がある印象の書体ですね。

Windows Vista以降のシステム用に開発され、「TYPE C4 」タイプディレクター鈴木竹治さんが日本語パートのデザインをされました。
詳しくは こちらのサイト で紹介されていますので合わせてご覧ください！

メイリオは、マイクロソフト社が開発したClearTypeというフォントスムージング技術を使うことを前提に作られています。ディスプレイのドット単位ではないアンチエイリアス表示がされることが特徴で、スクリーンでの視認性に優れたフォントです。

開発当時から横組みが読みやすいように作られていて、欧文と組み合わせやすい書体だと言われています。 個人的にはビジネス向けなイメージの強いフォントだと思います！

まとめ

今回、普段デザインに使っている書体の成り立ちを知ると、よりデザインに深みが出るのではないかと考えたことがきっかけで、歴史ある2つの書体を調べて学んだことを記事にしました。

普段当たり前のように目にする書体がどういった書体なのか、どういったコンセプトで作った書体なのかを知ると、そのフォントが選ばれて使われている理由がみえてきますね！
みなさんもWebサイトでどんなフォントが使われているのか、どうやって作られているのかなど調べてみてはいかがでしょうか？

ちなみにWebサイトで使われているフォントを調べる際には、Google chromeの拡張機能の Font finder を使うと簡単に調べられるのでおすすめです！