見出し画像

Webサイトでよく使われているフォントをまとめてみる -日本語フォント編-

近年Webフォントも充実してきて、サイトで使用されているフォントにも幅がかなり出てきました。既にメイリオが懐かしいですね、、
その中でもよく見るな〜と感じるフォントを備忘録も兼ねてまとめてみたいと思います。

1.游ゴシック体

提供:Windows / Mac標準搭載

画像1

今一番使われているんじゃないでしょうか。(メジャーなのでまとめるか迷いました)
良い意味で「かわいい」「カッコイイ」など固定のイメージを持ちにくく、どんなターゲット層のサイトにも使用しやすいフォントです。
バランスが非常によく洗練された印象があり、見出しにも本文にも使用しやすく重宝されています。
WindowsとMacどちらにも標準搭載されていることも人気の理由かもしれません。とはいえ搭載されているウェイトに差分があるので対策は必須!

游ゴシックが使われているサイト例
ルルルン:https://lululun.com/
WELLZ UNITED:https://www.wellz-united.jp/
株式会社イザナ:https://izana-ezo.jp/


2. A-OTF 見出ゴMB31

提供:モリサワ (TypeSquare内にもあり)
最近までAdobefontでの提供もあったのですが終了してしまいました....

画像3

游ゴシックよりもセリフが強調されていて、ハッキリとした印象を受けます。ひらがなの「お」が可愛い。
魅せたいメッセージなど、ここぞ!というところで効果的に使われていることが多い印象です。
筆者は名前に引っ張られていたので、見出しだけでなく本文にも使用しているサイトがわりとあって驚きました。

見出ゴMB31が使われているサイト例
スナックミー:https://snaqme.com/
株式会社スピッカート:https://spicato.com/
welleg:https://www.welleg.co.jp/
ドット道東:https://dotdoto.com/about/

3. Shippori Mincho

提供:GoogleFonts

画像3

"物静かで上品、見ているだけでうっとりするような明朝体を目指して制作"されたフォントだそうで、こだわりや高級感を演出してくれます。入り抜きの強弱が強めなのも特徴です。
明朝体はタイトルのみなど一部だけに使用されるパターンも多いですが、ウェイト細めのゴシック体との相性が抜群で美しいです。

Shippori Minchoが使われているサイト例
積奏:https://seki-sou.com/
料理谷邸葛籠:https://tudzura.jp/
株式会社吉松工機:https://www.yoshimatsukouki.com/


4. 筑紫A丸ゴシック/B丸ゴシック

提供:AdobeFontsFontworks

画像4

丸ゴシックというと可愛らしい・子供らしいイメージを持ちがちですが、筑紫シリーズの丸ゴシックは余白が小さく大人っぽさや落ち着きも兼ね備えています。
筑紫シリーズには角ゴシック・明朝も揃っているので、組み合わせても統一感が出るのも強みですね。

筑紫丸ゴシックが使われているサイト例
猫壁-にゃんぺき-:https://www.lixil.co.jp/lineup/s/catwall/
たかしま農園:https://www.takashima-nouen.com/
Odakyu feel free trip:https://www.odakyu.jp/feelfreetrip/


おまけ. Yaku Han JP

提供:Webフォント

その名の通り通常全角になってしまう約物(句読点や括弧など)を半角にしてくれるWebフォントです。
カギ括弧が行の頭にくるとスペースが空いているように見えてしまったり、間延びして見えてしまったり、ということを解決してくれます!!すごい
ゴシック・明朝・丸ゴシックに対応しているのも嬉しい点です

Yaku Han JPが使われているサイト例
株式会社スピッカート:https://spicato.com/
RICHO:https://rdc.ricoh.co.jp/?utm=wewantwebs


まとめ

Webサイトで使用できるフォントは制約が多いため、どうしてもフォントへのこだわりに比重を置くことが少なくなりがちです。だからこそトレンドやWebフォントにアンテナを張っていきたいですね!
今度は英字フォントもまとめてみたいと思います。

関連記事
Webでよく使われているフォントをまとめてみる -英字フォント編-