目次

  1. Webフォントとは
  2. フォントの種類と特徴
  3. 選び方のポイント
  4. Google Fontsの使い方
  5. おすすめ日本語フォント
  6. パフォーマンスへの配慮
  7. まとめ

Webフォントとは

Webフォントとは、インターネット経由で読み込んで使用するフォントのことです。

従来、Webサイトでは閲覧者のパソコンにインストールされているフォント（システムフォント）しか使えませんでした。そのため、デザイナーが意図したフォントで表示されない問題がありました。

Webフォントを使うことで、どのデバイスでも同じフォントで表示できるようになります。

Webフォントのメリット

  • デザインの一貫性を保てる
  • ブランドイメージを表現しやすい
  • 多くのフォントから選べる
  • テキストなのでSEOに有利（画像テキストより）

フォントの種類と特徴

フォントは大きく分けて以下の種類があります。

ゴシック体（Sans-serif）

線の太さが均一で、端に装飾（セリフ）がないフォント。

  • 特徴：モダン、シンプル、読みやすい
  • 用途：Webサイト全般、UI、見出し
  • 例：Noto Sans JP、游ゴシック、ヒラギノ角ゴ

明朝体（Serif）

線の太さに強弱があり、端に装飾（セリフ）があるフォント。

  • 特徴：伝統的、上品、フォーマル
  • 用途：長文、和風サイト、高級感を出したい時
  • 例：Noto Serif JP、游明朝、ヒラギノ明朝

手書き風・デザインフォント

個性的なデザインのフォント。

  • 特徴：個性的、親しみやすい、インパクト
  • 用途：見出し、ロゴ、アクセント
  • 注意：本文には使わない（読みにくい）

基本ルール：本文はゴシック体か明朝体、見出しや装飾にデザインフォントを使う。1つのサイトで2〜3種類に抑えましょう。

選び方のポイント

1. 読みやすさを最優先

本文に使うフォントは、読みやすさが最重要です。長時間読んでも疲れないフォントを選びましょう。

  • 線が細すぎない
  • 文字間隔が適切
  • 小さいサイズでも判読できる

2. ブランドイメージに合わせる

フォントはサイトの印象を大きく左右します。

  • 信頼感・誠実さ：ゴシック体（太め）
  • 高級感・上品さ：明朝体
  • 親しみやすさ：丸ゴシック
  • モダン・先進的：細めのゴシック体

3. 日本語と英語の相性

日本語フォントと英語フォントを組み合わせる場合、相性を確認しましょう。太さ、高さ、雰囲気が合っているかがポイントです。

4. ウェイト（太さ）のバリエーション

見出し、本文、強調など、複数の太さを使い分けます。ウェイトのバリエーションが豊富なフォントを選ぶと便利です。

Google Fontsの使い方

Google Fontsは、無料で使えるWebフォントサービスです。商用利用も可能で、最も手軽にWebフォントを導入できます。

設定手順

  1. Google Fontsにアクセス
  2. 使いたいフォントを検索・選択
  3. 必要なウェイト（太さ）を選択
  4. Select→Embed codeからコードを取得
  5. HTMLのheadタグ内にコードを貼り付け
  6. CSSでfont-familyを指定

コード例

<!-- HTML head内 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

/* CSS */
body {
  font-family: 'Noto Sans JP', sans-serif;
}

おすすめ日本語フォント

Google Fontsで使える日本語フォント

  • Noto Sans JP：最も人気。読みやすく、ウェイトも豊富
  • Noto Serif JP：明朝体。上品で読みやすい
  • M PLUS 1p：丸みがあり、親しみやすい
  • Kosugi Maru：丸ゴシック。カジュアルな印象
  • Zen Kaku Gothic：モダンでスタイリッシュ

システムフォント（無料で使える）

  • 游ゴシック：Windows/Mac標準。上品で読みやすい
  • ヒラギノ角ゴ：Mac標準。美しく読みやすい
  • メイリオ：Windows標準。画面表示に最適化

おすすめの組み合わせ：見出しはNoto Sans JP Bold、本文はNoto Sans JP Regularが鉄板です。統一感がありつつ、メリハリも出せます。

パフォーマンスへの配慮

Webフォント、特に日本語フォントはファイルサイズが大きく、表示速度に影響します。以下の点に注意しましょう。

1. 使うウェイトを絞る

必要なウェイトだけを読み込みましょう。全ウェイトを読み込むとファイルサイズが膨大になります。

2. display=swapを使う

フォント読み込み中は代替フォントを表示し、読み込み完了後に切り替える設定。ユーザーを待たせません。

3. preconnectを設定

Google Fontsへの接続を事前に確立し、読み込みを高速化します。

4. サブセット化を検討

使用する文字だけを抽出したフォントファイルを使う方法。上級者向けですが、大幅な軽量化が可能です。

目安

  • 日本語フォントは1ウェイトで約1〜2MB
  • 英語フォントは1ウェイトで約20〜50KB
  • 読み込むフォントは合計2〜3ウェイトに抑える

まとめ

フォント選びは、サイトの印象と読みやすさを左右する重要な要素です。

Webフォント選びのポイント

  • 本文は読みやすさ重視（ゴシック体か明朝体）
  • ブランドイメージに合ったフォントを選ぶ
  • 1サイトで2〜3種類に抑える
  • Google Fontsなら無料で簡単に導入可能
  • 日本語はNoto Sans JPがおすすめ
  • パフォーマンスに配慮し、ウェイトを絞る

サイトのフォントを変えたいどのフォントが合うかわからないという方は、LIKaNONにご相談ください。ブランドイメージに合ったフォント選びから設定までサポートします。

Webデザインのご相談

フォント選びから全体のデザインまで、トータルでサポートします。

無料相談はこちら