BLOG

  • Facebook
  • Twitter

Webフォント15選!Webサイトデザインにおすすめの定番フォントをご紹介

千年原楓

千年原楓

こんにちは!シンスのデザイナー 千年原です。

この記事では、私が勉強の為に多くのサイトを見ている中でよく使われていたり、使い勝手が良いと思ったフォントをピックアップして紹介しています。

フォント選びの際に役立てていただけると嬉しいです!

まずはフォントを選ぶ際に知っておくべき、システムフォントとWebフォントについて説明します。

Webフォントとシステムフォントについて

システムフォントとは

システムフォントは、OS(Mac、Windows、iOS、Android)にインストールされているフォントのことです。
例えば「メイリオ」というフォントはWindowsのシステムフォントなので、デフォルトではMacでの表示ができません。

Webフォントとは

Webフォントは、ページを読み込む際にネットワーク上にあるフォントを呼び出して表示するフォントのことです。
OSなどの表示環境が違っても同じフォントを表示することができ、デザイン崩れによる視認性・可読性、トンマナを確保できます。

システムフォントとWebフォントの特徴を理解して、適切なフォント選びをしましょう!

よく使われているゴシック体フォント

  • 游ゴシック
  • ヒラギノ角ゴシック
  • Noto Sans JP / Source Han San / 源ノ角ゴシック
  • 筑紫A丸ゴシック
  • りょうゴシック PlusN
  • DNP 秀英角ゴシック銀 Std

游ゴシック

「游ゴシック」はWindows / Macに標準搭載されているフォントです。
文字間にゆとりがあり、落ち着ついた印象を与えることができます。

【利用できるサービス】

【このフォントを使っているWebサイト】
https://lanch.jp
https://lifework-ichihara.com
https://saisyoudo.co.jp

ヒラギノ角ゴシック

ヒラギノ角ゴシック

「ヒラギノ角ゴシック」はMacOSとiOSに標準搭載されているフォントです。
字面が大きく、明るくつぶれにくいのが特徴です。
読みやすさと存在感を兼ね備えたオーソドックスなフォントです。

【利用できるサービス】

【このフォントを使っているWebサイト】
https://www.ut-g.co.jp
https://www.mes.co.jp/
https://www.nmsk.co.jp/

Noto Sans JP / Source Han San / 源ノ角ゴシック

Noto Sans JP / Source Han San / 源ノ角ゴシック

「Noto Sans」は対応漢字の種類が多く、視認性が高いのでアプリのLPなどによく使われている印象があります。
装飾から見出し、テキストという幅広い箇所で使用できる定番フォントです。

【利用できるサービス】

【このフォントを使っているWebサイト】
https://pay.pocket-change.jp
https://tapple.me
https://pickles.tv
https://saisyoudo.co.jp
https://www.arigatobank.com/
http://www.okakin.com/

筑紫A丸ゴシック

筑紫A丸ゴシック

「筑紫A丸ゴシック」は標準的な丸ゴシック体とは一味違う雰囲気を持っているフォントです。
優しい存在感があるので、丁寧な印象も与えることができます。

【利用できるサービス】

【このフォントを使っているWebサイト】
https://www.waseda.jp/prj-foodecon/
https://rts.tokyo
https://www.momforstar.jp

りょうゴシック PlusN

りょうゴシック PlusN

「りょうゴシック PlusN」はゴシック体の中でもカジュアルさと品を兼ね備えたフォントです。
まるっとしすぎていないので、綺麗めな印象があります。

【利用できるサービス】

【このフォントを使っているWebサイト】
https://www.ntt.com/lp/koel/
https://store.united-arrows.co.jp/s/all/focuson/gift/christmas2021/

DNP 秀英角ゴシック銀 Std

DNP 秀英角ゴシック銀 Std

「DNP 秀英角ゴシック銀 Std」はクラシックでモダンな印象を持つゴシック体です。
伝統的・信頼感のある印象を出しつつ、先進的なサービスを扱うようなサイトにおすすめです。

【利用できるサービス】

【このフォントを使っているWebサイト】
https://sparty.jp
https://jyou.media
https://tojiro.net

よく使われている明朝体フォント

  • 游明朝
  • Noto Serif JP / Source Han Serif / 源ノ角明朝
  • FOT-筑紫Aオールド明朝 Pr6N
  • しっぽり明朝

游明朝

游明朝

「游明朝」はWindows8.1OSとMacOSにインストールされているフォントです。
文字間にゆとりがあり、繊細で品のある印象を与えてくれます。

【利用できるサービス】

【このフォントを使っているWebサイト】
https://shinmi-shika.com
https://www.mitsuoka-motor.com/
https://ambientweaving.lab.zozo.jp/

Noto Serif JP / Source Han Serif / 源ノ角明朝

「Noto Serif」はベーシックな明朝体で使いやすいフォントです。
游ゴシックよりも文字の幅がやや太めなので、和風・高級感という雰囲気よりも親しみを表現したいときにおすすめです。

【利用できるサービス】

【このフォントを使っているWebサイト】
https://www.kaneco.co.jp
https://shiro-kyoto.com
https://architekton-villa.jp/concept/
https://www.lignyte.co.jp/

FOT-筑紫Aオールド明朝 Pr6N

FOT-筑紫Aオールド明朝 Pr6N

「FOT-筑紫Aオールド明朝 Pr6N」は伸びやかなハネ、ハライが特徴的な書体です。
文字の幅が狭いため、凛とした格式高い印象を与えることができます。
繊細さ・高級感・静けさを表現したいときにおすすめです。

【利用できるサービス】

【このフォントを使っているWebサイト】
https://seki-koumuten.co.jp
https://www.nishioka-nmc.com
https://www.hosoo.co.jp/

しっぽり明朝

しっぽり明朝

「しっぽり明朝」は物静かで上品で、見ているだけでうっとりするような明朝体をコンセプトに制作された、オールドスタイルのフォントです。
ハネ・ハライは強いですが、丸みがあるのでやや柔らかい印象があります。

【利用できるサービス】

【このフォントを使っているWebサイト】
https://www.ushijima-law.gr.jp
https://www.yoshimatsukouki.com
https://satoyama-jujo.com/thehouse/
https://tamagaway.jp/

よく使われている欧文フォント

  • Montserrat(モントセラト)
  • Roboto(ロボト)
  • Lato(ラト)
  • Oswald(オズワルド)
  • Futura(フーツラ)

Montserrat(モントセラト)

「Montserrat(モントセラト)」はオーソドックスなゴシックですが、やや縦に潰れた形でポップな印象があります。
採用サイトなどの信頼感と親近感を合わせて表現したいときや硬すぎる印象を少し崩したいときにもおすすめです。

【利用できるサービス】

【このフォントを使っているWebサイト】
https://recruit.moneyforward.com
https://sansho.co.jp

Roboto(ロボト)

Roboto(ロボト)

「Roboto(ロボト)」は色々なところで使われている定番フォントです。
安定感、読みやすさを兼ね備えていて使いやすいです。

【利用できるサービス】

【このフォントを使っているWebサイト】
https://kyokai-kinki.jp
https://examination.w3.kanazawa-u.ac.jp/

Lato(ラト)

「Lato(ラト)」は上品で柔らかい雰囲気のフォントです。
シンプルで安定感があるので汎用性が高いです。
大きなサイズで字間を広めにすると、モダンな雰囲気を演出することもできます。

【利用できるサービス】

【このフォントを使っているWebサイト】
https://www.oricon.jp
https://www.kawaidenki.co.jp/
https://architekton-villa.jp/concept/
http://www.okakin.com/

Oswald(オズワルド)

Oswald(オズワルド)

「Oswald(オズワルド)」は文字の幅が狭い形をしており、シャープな印象を与えることができます。
製造業のコーポレートサイトに使われていることが多い印象でした。
先進的な印象を与えることができるので、テクノロジーや最先端というイメージを表現したいときにおすすめです。

【利用できるサービス】

【このフォントを使っているWebサイト】
https://dhf.co.jp
https://asahi-plating.co.jp
http://www.tada.co.jp/

Futura(フーツラ)

Futura(フーツラ)

「Futura(フーツラ)」はクールな印象を出す定番欧文フォントです。
丸・三角・四角形をベースに作られており、幾何学的な美しさがあります。
ルイ・ヴィトンやフォルクスワーゲンのロゴにも使われており、既視感があるので信頼感も確保できると思います。

【利用できるサービス】

【このフォントを使っているWebサイト】
https://infcurion.com
https://company.matcha-jp.com/
https://i-ne.co.jp/

まとめ

サイトで使われているフォントを見てわかったことは、Noto Sansを使っているサイトが多かったということです。
Noto Sansは対応している漢字も多く、視認性も良いので幅広いターゲット層に適しているということから、どのサイトでも使用しやすいのだろうなと思いました。

またフォント選びひとつで、意図する雰囲気が変わってきます。
フォント選びの参考にするときは、制作した方の意図を考えながらフォントを見ることが重要だと思いました。

シンス株式会社ではデザインに合ったフォントを使用し、分かりやすいホームページ制作を行なっています。
弊社の制作実績はこちらをご覧くださいませ。

https://since-inc.jp/works

〈 この記事を書いた人 〉

千年原楓

Webデザイナー千年原楓

シンス株式会社でWebデザイナーとして働いています。
伝わりやすいデザインをお届けできるように頑張っています。
音楽と野球とお酒が好きです。

その他のオススメの記事

ホームページのことは何でもお気軽にご相談ください!

092-406-8630

平日10:00〜18:00セールス目的のお電話はご遠慮ください

シンス株式会社

Webマーケティングのお役立ち情報を発信しています!