Webデザインをする上で最適なフォントの選び方｜よく使われるフォントは何？

Webデザインにおいて、フォントはWebサイトの印象を左右する重要な要素です。
しかし、フォントは膨大に種類があり、何を選んだら良いか迷うことも多いはず。
そこで、本記事ではフォントの選び方、定番フォントの種類を解説していきます。
ぜひ、記事を読んでフォントの基本を習得していきましょう！

フォントを選ぶ際のポイント

フォントには様々な種類があり、それぞれが与える印象も異なります。
Webサイトにおける文字の割合は高く、文字のデザイン、つまりフォント選びは非常に重要な要素です。フォントを選ぶ際のポイントがありますので、チェックしていきましょう。

制作物の目的に沿っているか

Webサイトを作る場合は、まずその制作目的を考えます。その目的を踏まえた上で、フォントも決めていく必要があります。
読みやすさを何よりも重視するのか、写真が中心でキャッチコピーが伝わるようにしたいのかなど、サイトの目的に沿って検討していきましょう。

与えたい印象と合っているか

コーポレートサイトやポートフォリオサイト、病院のサイトなど、ケースによって訪れる人に与えたい印象というのが異なります。
例えば、信頼や安心感に重きをおきたい場合は明朝体が良いでしょう。紙媒体でもよく使用され、その洗練されたデザインが信頼に繋がります。
馴染みやすさや親しみやすさを与えたいという場合はゴシック体がおすすめです。柔らかい雰囲気を持ったフォントで、視認性も高いため、Webサイトのナビゲーションや見出しなどにもよく使用されます。

Webデザインにおけるフォントの重要性

情報を伝えるために文字があり、その文字をどのように伝えるかという役割を担うのがフォントです。
それぞれのフォントが特徴を持っており、どのような印象を与えるのかを理解した上で使用してく必要があります。
また、読み手がフォントを意識することなく読むことができる自然な状態が理想とされています。
この状態を目指して、フォント選びをしていきましょう。

デバイスフォントとWebフォントとは？

Web上でよく使用されるフォントには2種類あります。「デバイスフォント」と「Webフォント」です。それぞれどういったものかを確認しておきましょう。

デバイスフォント

デバイスフォントとは、それぞれの端末にあらかじめインストールしてあるフォント(OS標準フォント)もしくはユーザーが個別にインストールしたフォントのことを言います。
例えば、Windowsでいう「メイリオ」「MS明朝」やiOSでの「ヒラギノ角ゴ」「ヒラギノ明朝」などのフォントです。

デバイスフォントのメリット

• 修正や更新が簡単
• 表示速度がはやい

デバイスフォントのデメリット

• デバイスやOSのバージョンによって表示のされ方が異なる場合がある
• 選択肢が少なく、多彩な表現をすることが難しい

Webフォント

Webフォントとは、サーバー上のフォントデータを呼び出すことで、そのフォントを表示させる仕組みのことです。
外部のWebフォントサービスが提供するものと、自身がサーバーにアップロードすることでWebフォント化したものの2種類があります。
デバイスにフォントをインストールする必要はありません。

Webフォントのメリット

• 画像フォントを使わなくても特定のフォントを指定できる
• ユーザー側の環境によらずに均一のフォントを表示させられる

Webフォントのデメリット

• 日本語Webフォントを使用する場合、継続的に費用がかかる
• 読み込むのに時間がかかる

フリーフォントをWebフォントとして使用する場合の方法は、以下の記事にまとめております。

▼関連記事

Webフォントを使用する方法

使用頻度の高いGoogle Fontsの使用方法を説明したと思います。

1. まずはGoogle Fontsにアクセスしましょう。
   https://fonts.google.com/
2. 使用したいフォントをクリックし、「このスタイルを選択してください」をクリックします。
3. 右側に開かれたウィンドウから、のソースコードをコピーし、これをHTMLファイルの内に貼り付けます。同じウィンドウ内にあるfont-familyはCSSに貼り付けます。

以上でフォントの適用が完了しました。
AdobeFontsに関しては、以下の記事を参考にしてください。

▼関連記事

よく使われるフォントをご紹介！

今回は、和文のフォントの中で使用頻度が高い明朝体とゴシック体を紹介いたします。それぞれの特徴を知ることで、適したフォントを選択することができるようになります。

明朝体

明朝体とは、縦の線に対して横の線が細く、文字の端に三角の山のような飾りが付いているフォントになります。洗練されており品のあるイメージ、女性的なイメージを持っています。
有名な明朝体は、「ヒラギノ明朝」「游明朝」などがあります。

ゴシック体

ゴシック体とは縦と横の線の幅がほぼ均一で文字の飾りがないフォントになります。親近感やポップなイメージを持っており、明朝体と反対で男性的な印象を与えます。
有名なゴシック体には、「ヒラギノ角ゴ」「游ゴシック」「メイリオ」などがあります。

Webサイトに使われているフォントをチェックしてみよう！

Webサイトを見ていて、「このフォントなんだろう？」と思った際に、さくっと調べることができると便利ですよね。ここからは、実際にWebサイトに使用されているフォントを確認する方法をご説明していきます。

デベロッパーツールを使用して調べる

参考にしたいサイトを開いて、調べたいフォント部分のテキストを選択し、右クリック⇨「検証」を押します。

すると、デベロッパーツールが開き、サイト内のソースコードの情報が展開されます。
そのウィンドウから「Computed」を選択し、下までスクロールします。
右下の「Rendered Fonts」の項目に使用されているフォントが表示されています。

Chromeの拡張機能を使用して調べる

web上のフォントを簡単に調べることができるChromeの拡張機能として「WhatFont」というものがあります。
使用する場合は、Webストアからインストールしましょう。

WhatFont

「WhatFont」のアイコンをクリックし、機能している状態にしたら、フォントを調べたいテキスト上にマウスオーバーすることでフォントの名前を知ることができます。

まとめ

さて、Webデザインにおけるフォントの選び方、その種類を解説してまいりました。
見る人に与える印象を大きく左右する要素であることに注意し、サイトによって最適なフォントを選べるようにしましょう。
また、デバイスフォントとWebフォントのどちらを選択するべきかも、メリットとデメリットを考慮して都度判断するようにしましょう。