フォントの選び方|デザイン初心者が覚えたい基本

フォントの選び方|デザイン初心者が覚えたい基本
読者の女性アイコン

フォントを選ぶたびに迷います。センスで決めるしかないですか?

PORTのロゴPORT編集部

候補が多いほど迷いますよね。センスだけに頼らず、使う場所・文字量・伝えたい印象から絞れます。候補を比べる順番を紹介します。

フォントは、伝えたい印象、使う場所、日本語の読みやすさの順に選びます。迷ったら本文を読みやすい書体に固定し、見出しだけ候補を比べましょう。

フォントとは?

フォントとは、一定の文字デザインを表示するための一式のことです。例えば、同じ「デザイン講座」を別のフォントで表示すると、文字の形や印象が変わります。

書体とは?

書体とは、文字の形に共通するデザインのことです。例えば、明朝体やゴシック体のように、線の太さや端の形に特徴があります。

日本語だけで選ばず、数字も見る
見出しだけの試作
週末のカフェ時間

雰囲気は分かるが、実際の案内の全ては確認できない。

使う文字をまとめて試す
週末のカフェ時間
10月5日 14:00
3,000円 / Web予約

漢字・数字・英字・記号まで比べる。

架空の文面です。候補を比べるときは同じ文章を使います。

フォントを選ぶと何が変わる?

フォントは、文字の形や見え方をそろえたものです。同じ「週末のカフェ時間」でも、線が太い書体なら力強く、細い明朝体なら繊細に感じることがあります。ただし、印象は写真・色・余白との組み合わせで変わります。フォントだけで全体の雰囲気を決めようとしないことが大切です。

同じ告知を、2つの書体で比較
ゴシック体の例ゴシック体で書いた「週末のカフェ時間」。本文と日付も同じ書体。
明朝体の例明朝体で書いた「週末のカフェ時間」。本文と日付も同じ書体。
文字と配置をそろえ、書体を変えた例です。どちらが正解かではなく、読ませたい場面と雰囲気に合うかを見ます。

最初に決める3つのこと

考えること確認する例
使う場所スマホの投稿/Web記事/資料
読む量ひと目で見る見出し/長い説明文
伝えたい印象親しみやすい/落ち着いた/元気

たとえば初心者向けの講座なら、「スマホで見る」「日程や料金も読む」「説明が分かりやすい」という条件から始められます。書体の名前を知らなくても、この3つが決まれば候補を比べやすくなります。

基本の書体を見分ける

候補を絞る3つの質問
1
どこで読む?

スマホの画像、Web本文、資料など。

2
どれだけ読む?

短い見出しか、長い説明か。

3
どんな印象?

落ち着いた、親しみやすい、力強いなど。

好みだけでなく、読む条件からフォントを選びます。

ゴシック体:すっきり見せたいとき

線の太さが比較的そろい、文字の端の飾りが少ない書体です。案内や短い見出しなどで使いやすい候補。太いものは力強く、細いものは軽く見えるので、ゴシック体の中でも違いを見ましょう。

明朝体:落ち着いた雰囲気を試すとき

縦線と横線に太さの差があり、横線の端などに小さな三角形の飾りがある書体です。静かな雰囲気や読み物で使われます。細い横線が小さな画面で見えるかも確認しましょう。

丸ゴシック・手書き風:雰囲気を添えるとき

丸みのある書体や手書き風は、親しみや個性を加える候補です。ただし、長い文章や料金まで同じ装飾的な書体にすると読みにくいことも。短いタイトルや小さな一言から試しましょう。

形の違いは、明朝体とゴシック体の使い分けで詳しく見比べられます。

迷いにくい選び方の順番

  • 本文へ使う読みやすい書体を1つ選ぶ
  • 日付・料金・数字・英字を実際に入れる
  • 見出しを同じ書体の太字で作る
  • 雰囲気が足りなければ見出しだけ別の書体を試す
  • スマホや掲載サイズで読めるか確認する

本文と見出しを最初から別の書体にする必要はありません。同じフォントの標準・太字を使い分けるだけでも、まとまりと強弱を作れます。フォントを何種類まで使うかも参考になります。

タイトル用のかわいいフォントを選んだら、料金の数字だけ違う雰囲気になりました。

PORTのロゴPORT編集部

日本語だけでなく「3,000円」「10月12日」「Web」も入れて比較してみましょう。数字や英字の形まで見て選ぶと、実際の告知に使いやすくなります。

選ぶ前に確認すること

形と太さを分けて比べる
書体を替える
デザイン講座
デザイン講座

文字の設計そのものが変わる。

太さを替える
デザイン講座
デザイン講座

同じ書体でも線の太さで差を作れる。

表示例です。選択できる太さはフォントによって異なります。

太さを選べるか

書体によって、標準・太字など用意されている太さが違います。同じ書体で強弱を作りたいなら、必要な太さがあるか確認します。操作画面の太字ボタンと、書体が用意する太さの選択は、ツールによって扱いが異なります。

使う文字と利用条件に対応しているか

日本語に対応していないフォントでは、漢字だけ別の書体へ切り替わる場合があります。使いたい文字を試し、商用利用・画像への使用・Webへの組み込みなど、用途に合う利用条件も配布元で確認しましょう。「無料」と書かれていても、全ての使い方が許されるとは限りません。

表示できても、読みやすいとは限りません。細い文字に淡い色を合わせるなど、書体以外の条件も見直します。配色は配色の基本で確認できます。

告知カードで練習する

まず1つのゴシック体で、タイトル・短い説明・日程を作ります。次にタイトルだけ明朝体に変えて、雰囲気と読みやすさを比べてみましょう。本文や配置を固定すると、書体の違いをつかみやすくなります。

はじめてのWeb講座

自宅から参加できる、初心者向けの体験会です。

10月12日(月)/参加費 3,000円 ※架空の例

図の書体例はNoto Sans JPとNoto Serif JPです。特定のアプリですべての太さを選べることを示すものではありません。

よくある疑問

まとめ

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人