Webデザインで使いたいフォント15選!迷ったときの厳選3つも用意

ヒラギノ角ゴシック Webデザイン

「Webデザインで使われるいろんなフォントを見てみたい」

「Webデザインのおすすめフォントが知りたい」

と思うことはありませんか?

デザインを作るときにサイトに合ったフォントを探すのって大変ですよね。

それでは、プロのWebデザイナーも使うフォントはどのようなものがあるのでしょうか。

そこで今回は、

  • Webデザインで使えるフォント
  • Webデザインで迷ったときおすすめのフォント
  • Webサイトにフォントを使うときの注意点

についてご紹介します。

この記事を読めば、あなたのお気に入りのフォントが必ず見つかります。

最後まで読んで見てくださいね。

Webデザインのフォント選びは超重要!フォントの種類とイメージを紹介

Webデザインのフォント選びは超重要!フォントの種類とイメージを紹介

Pch.vector – jp.freepik.com によって作成された people ベクトル

Webデザインにおいてフォント選びは慎重になる必要があります。

なぜなら、フォントの変更だけでサイト全体の印象を左右するからです。

この章ではフォントの種類と重要性について以下の内容でご紹介します。

  1. フォントの種類とイメージ
  2. 各フォントの具体的な使用用途

フォントごとにマッチするイメージがわかれば、フォント選びに困る機会は減ります。

Webサイトのデザインの、フォント選びで失敗しないようにしましょう。

それでは以下でご紹介していきます。

1.フォントの種類とイメージ

一般的に利用されるフォントの種類は以下のとおりで、4つの種類があります。

  • 日本語フォント:明朝体、ゴシック体
  • 欧文フォント :セリフ体、サンセリフ体

フォントの種類

あ;株式会社TLP(https://www.tlp.jp/column/20171219.html)

明朝体セリフ体はハネやハライ、ウロコと呼ばれる文字装飾があり、高級感や落ち着いた印象を与えるフォントです。

可読性がよくて長文に向いているという特徴があります。

ゴシック体サンセリフ体は横縦の太さが均等で、視認性が高く遠くから見ても文字が認識しやすいのが特徴です。

インパクトのあるデザインで、強調したいときにもよく使われます。

このほかにも「デザインフォント」や「筆文字書体」などの特殊フォントというものが存在しますが、一般的には上記の4種類が使用されています。

2.各フォントの具体的な使用用途

上記で紹介した4種類のフォントのイメージを元に、具体的に使用される場所をご紹介します。

※なお明朝体とセリフ体、ゴシック体とサンセリフ体はそれぞれ日本語フォントか欧文フォントかで使い分けるものです。なので今回は明朝体とゴシック体の違いという表記でご紹介します。

  • 明朝体  :小説、新聞、論文
  • ゴシック体:プレゼン資料、ポスター

明朝体は文字を「読んでもらう」ときに利用されやすいです。

逆にゴシック体は文字が少なく、「見るデザイン」として利用したいときに有効です。

欧文フォントでもセリフ体とサンセリフ体は似たような使い分けをしましょう。

最低限上記のルールを守っていれば、サイトにミスマッチするフォントを選ぶことはなくなります。

Webデザインで使えるゴシック体フォント5選

Webデザインで使えるゴシック体フォント5選

Pch.vector – jp.freepik.com によって作成された people ベクトル

  1. ヒラギノ角ゴシック
  2. 游ゴシック体
  3. Noto Sans
  4. 筑紫ゴシック
  5. メイリオ

ゴシック体は本文や強調したいときなど、困ったときに使える万能なフォントです。

どんなサイトで使っても馴染むので、ゴシック体をつかうWebデザイナーは多いでしょう。

ゴシック体の中でも種類はたくさんあるので、以下で紹介していきます。

1.ヒラギノ角ゴシック

ヒラギノ角ゴシック

  • フォントタイプ:デバイスフォント(MacOSに標準搭載)
  • 利用方法   :単体購入、モリサワパスポート
  • 購入サイト  :https://www.screen-hiragino.jp/index.html

「ヒラギノ角ゴシック」は、クセがなくどこにでも使いやすいフォントです。

ゴシック体の特徴が活かされた読みやすさと存在感があります。

利用場所が多く、テレビCM・テロップ、道路標識、雑誌・書籍、スマートフォンなど日常でも見かけるシーンが多いため、見ている方にも安心感を与えるフォントです。

2.游ゴシック体

游ゴシック体

  • フォントタイプ:デバイスフォント(Windows8以降・MacOSに標準搭載)
  • 利用方法   :単体購入
  • 購入サイト  :http://www.jiyu-kobo.co.jp/library/ygf/

「游ゴシック体」はゴシック体の中でもやや柔らかいイメージのフォントです。

WindowsとMacの両方に標準搭載されていることから、Web制作でも利用頻度が増えています。

またPCに標準搭載されていることで、Webサイトでこのフォントが使われているときのページの読み込みがはやいというメリットもあります。

3.Noto Sans JP

note sans jp

  • フォントタイプ:Webフォント
  • 利用方法   :Googleフォント
  • 購入サイト  :https://fonts.google.com/specimen/Noto+Sans+JP

「Noto Sans JP」は日本語専用のフォントで、優しくて丸みのある字体が特徴です。

日本語に特化しておりフォント情報が軽いので、日本語しか使わないサイトにおすすめです。

4.筑紫ゴシック

  • フォントタイプ:Webフォント
  • 利用方法   :単体購入、モリサワパスポート、LETS
  • 購入サイト  :https://fontworks.co.jp/fontsearch/tsukugopro-b/

「筑紫ゴシック」はアクセントと上品な美しさがあり、文字の質感を重視して作られたフォントです。

書籍、雑誌、カタログなどのフォーマルなシーンでの利用が多く見られます。

実際の手書きに近いかたちを追求したフォントで、文字のしなやかさが特徴です。

5. メイリオ

メイリオ

  • フォントタイプ:デバイスフォント(Windowsに標準搭載)
  • 利用方法   :単体購入
  • 購入サイト  :https://www.fonts.com/ja/font/microsoft-corporation/meiryo

「メイリオ」は、遠くからでも読みやすく視認性と判読性に優れたフォントです。

読みやすさを追求したフォントで、日本語の「明瞭(めいりょう)」が由来とされています。

現在はWindowsに標準搭載されているため、見慣れている人も多いのではないでしょうか。

Webデザインで使える明朝体フォント5選

Webデザインで使える欧文フォント5選

Pch.vector – jp.freepik.com によって作成された people ベクトル

  1. ヒラギノ明朝
  2. 游明朝体
  3. Noto Serif
  4. 筑紫明朝
  5. リュウミン

明朝体はゴシック体と比べて線が細く、文字全体にアクセントがあるのが特徴のフォントです。

目が疲れにくく小説などの長文に適しているといわれています。

高級、和風、真面目な文章などに使うと雰囲気がマッチします。

1.ヒラギノ明朝

ヒラギノ明朝体フォント

  • フォントタイプ:デバイスフォント(MacOSに標準搭載)
  • 利用方法   :単体購入、モリサワパスポート
  • 購入サイト  :https://www.screen-hiragino.jp/lineup/hirm/

「ヒラギノ明朝」は筆文字で書いたような上品なフォントです。

手書きのような、とめ、はね、はらいがしっかりと残っており、高級感があるデザインに適しています。

2.游明朝体

游明朝体

  • フォントタイプ:デバイスフォント(Windows8以降・MacOSに標準搭載)
  • 利用方法   :単体購入
  • 購入サイト  :http://www.jiyu-kobo.co.jp/library/ymf/

「游明朝体」は游ゴシック体と同じく、WindowsとMacOSに標準で搭載されているフォントです。

こちらもどのPCにも標準搭載されているため、ページの更新速度を重視したサイトにマッチしています。

しっかりとした明朝体のデザインの中に優しさがあるのが特徴です。

3.Noto Serif JP

noto serif jp

  • フォントタイプ:Webフォント
  • 利用方法   :Googleフォント
  • 購入サイト  :https://fonts.google.com/specimen/Noto+Serif+JP

「Noto Serif JP」はNoto Sans JPと同じく日本語専用フォントで、フォント情報にムダがないのでサイトも軽くなります。

ほかの国の言語を使わないサイトであれば、Noto Serif JPだけを使うというのもいいでしょう。

4.筑紫明朝

筑紫明朝フォント

  • フォントタイプ:Webフォント
  • 利用方法   :単体購入、モリサワパスポート、LETS
  • 購入サイト  :https://fontworks.co.jp/fontsearch/TsukuMinPr6-R/

「筑紫明朝体」は明朝体の読みやすさを追求しており、活字などの長文に特化した美しいフォントです。

文字が続いてもリズミカルで心地よい可読性を醸し出します。

有料のフォントですが、その分明朝体のなかでも高品質なフォントです。

5.リュウミン

リュウミン

  • フォントタイプ:デバイスフォント
  • 利用方法   :モリサワ
  • 購入サイト  :https://www.morisawa.co.jp/fonts/specimen/1317

「リュウミン」は明朝体らしいハライや点を置きつつも、線の先端やウロコは柔らかく親しみやすい雰囲気のフォントです。

文字のバランスも流れるような美しさがあり、本文から見出しまでどこで使っても馴染みます。

Webデザインで使える欧文フォント5選

Webデザインで使える欧文フォント5選

Pch.vector – jp.freepik.com によって作成された school ベクトル

  1. Arial
  2. Roboto
  3. Quicksand
  4. Oswald
  5. Times New Roman

日本語用のフォントだと英語などの独特の表現が損なわれてしまいます。

なので英語などの外国語をよく使うサイトでは、欧文フォントを選びましょう。

以下で紹介する中から、お気に入りのフォントを探してみてください。

1.Arial

Arial

  • フォントタイプ:デバイスフォント(Windows8以降、MacOSで標準搭載)
  • 利用方法   :単体購入
  • 購入サイト  :https://www.fontfactory.jp/font/detail/arialmtpro-mediumotf/

「Arial」は非常にシンプルなフォントで、Webデザインに使い勝手のいい欧文書体として有名です。

世界中で多くのデザインに使用されており、日本ではトヨタやパナソニックなどでも採用されています。

2.Roboto

Roboto

  • フォントタイプ:Webフォント
  • 利用方法   :Googleフォント
  • 購入サイト  :https://fonts.google.com/specimen/Roboto

「Roboto」はGoogleのデザイナーが開発したフォントで、見た目や読みやすさがクリエイター目線で作られています。

AndroidやChromeのシステムフォントに採用されているため、Webデザインとも相性がいいです。

3.Quicksand

quicksand

  • フォントタイプ:Webフォント
  • 利用方法   :Googleフォント
  • 購入サイト  :https://fonts.google.com/specimen/Quicksand

「Quicksand」はコロコロと丸みがあり、可愛らしい・親しみやすい印象のフォントです。

サイトの雰囲気が可愛いとフォントも馴染むでしょう。

4.Oswald

oswald

  • フォントタイプ:Webフォント
  • 利用方法   :Googleフォント
  • 購入サイト  :https://fonts.google.com/specimen/Oswald

「Oswald」は縦に細長いのが特徴のフォントです。

横幅がない分、情報がスッキリまとまっていてスタイリッシュな印象になります。

DINという有料の人気フォントにも似ているため、無料で使えるDINとして採用されることもあります。

5. Times New Roman

Times New Roman

  • フォントタイプ:デバイスフォント(Windows・MacOSに標準搭載)
  • 利用方法   :単体購入
  • 購入サイト  :https://www.fontfactory.jp/font/detail/timesnrmtpro-mediumotf/

「Times New Roman」はもともと新聞で使うフォントとして開発されているため、見出しから本文までしっかりした印象をもたせるときに使われます。

また、Times New Romanはセリフ書体と言って、線の端についてる線や飾りが特徴です。

Webデザインのフォントで迷ったらこれを使おう【3つ厳選】

Webデザインのフォントで迷ったらこれを使おう【3つ厳選】

Pch.vector – jp.freepik.com によって作成された people ベクトル

合計で15種類のフォントを紹介しましたが、こんなに多いとどれをつかっていいかわからないですよね。

なので、迷ったら使いたいどんなサイトにもマッチするおすすめのフォントを3つ厳選しました。

以下のフォントの組み合わせを使いましょう。

  1. ゴシック体 :游ゴシック体
  2. 明朝体   :游明朝体
  3. 欧文フォント:Arial

コンセプトがはっきりしているサイトや独創的なデザインのサイトでない限りは、上記のフォントを使っていれば間違いありません。

Windows・MacOSに標準搭載されているデバイスフォントなので、ページ数が多いサイトでも動作に影響しないのがメリットです。

後でフォントを変えたい場合でも、とりあえず無料で高品質なフォントが使えるのはありがたいですよね。

デバイスフォントとWebフォントについて

デバイスフォントとWebフォントについて

Freepik – jp.freepik.com によって作成された design ベクトル

この記事でも既に記載がありますが、フォントにはデバイスフォントとWebフォントの2種類あります。

覚えていないとフォントを使えないわけではないですが、知識として覚えておくと便利ですよ。

デバイスフォントとWebフォントの大きな違いは、以下のとおりです。

  • デバイスフォント:PCにあらかじめ入っているフォントやダウンロードして使うフォントのこと
  • Webフォント     :サーバー上にフォント情報をアップロードすることで、各デバイスでサーバーからフォント情報を取得する方法

例えば、ネット上で見つけて自分のPCにダウンロードしたフォントなら、それはデバイスフォントといいます。

Webフォントの使い方は、ネット上で見つけたお気に入りのフォントのコードを取得し、自身のサイトのHTMLとCSSに読み込むことで利用できます。

わからない場合は、PCにあらかじめ搭載されているデバイスフォントをそのまま使うのがおすすめです。

フリーのWebフォントを使うときは利用規約を確認しよう

フリーのWebフォントを使うときは利用規約を確認しよう

Katemangostar – jp.freepik.com によって作成された banner ベクトル

フォントによってはWeb上での埋め込みの使用が不可とされていることもあります。

使い方を間違えれば規約違反になる可能性もあるため、フリーのWebフォントを使う場合は利用規約を確認しましょう。

「そんなこといわれると怖くて使えない!」と思うかもしれませんが、利用規約は以下の項目に注意していれば大丈夫です。

  • 商用利用は可能か
  • フォントの再配布の記載はあるか
  • データの改変をしても大丈夫か

上記がダメなら以下の操作をするときに気をつけましょう。

Webフォントの利用過程でフォントをウェブサーバーに丸ごとアップする必要があるため、そのときにフォントの再配布となってしまいます。

また、サイトの軽量化のためにフォントをサブセット化すると、それはデータの改変に該当してしまします。

意図していなくても利用規約を犯している可能性もあるので、利用規約に上記の記載がある場合は気をつけましょうね。

まとめ|Webサイトのテーマに沿ったフォントを見つけよう

この記事では、Webデザインで使えるフォントについて以下の内容でご紹介しました。

  • Webデザインで使えるフォントを15個紹介
  • フォントで迷ったら、游ゴシック体、游明朝体、Arialを使おう
  • 利用規約に注意して上手にフォントを使いこなそう

有料のフォントはこだわり抜かれたデザインをしているため、あなたのWebサイトに合ったフォントが必ず見つかるでしょう。

予算がないという方は無料でもいいフォントはたくさんあるので、そちらで似たものを探してみてもいいかもしれません。

ただし無料のフォントを利用する場合は、利用規約を確認してから使うようにしましょう。

楽しくフォント選びをして、上手にWebデザインに活かしてください。

コメント

タイトルとURLをコピーしました