Webデザイン初心者向け｜フォントの基本知識と使い方を独学で身につける

はじめに：フォントを学ぶとデザインが変わる

フォントとは、「デザインされた文字のデータ」のこと。

私たちが普段目にしているWebサイトや書籍の文字は、すべて誰かが意図してデザインしたものです。

フォントは種類がとても多く、なんとなく選ぶと「おしゃれなのになんか違う」ということもあると思います。

でも、実は、フォント選びに特別なセンスは必要ありません。

基本的な考え方と、文字組みのポイントを押さえるだけで、デザインの印象は大きく変わります。

ターゲットや目的からフォントを考える

ターゲットは誰か？
20代の流行に敏感な女性か、50代のビジネスマンか。

どんな感情になってほしいか？
「ワクワクしてほしい」のか「信頼してほしい」のか。

世界観を言語化する
「ナチュラル」「近未来」「伝統的」など、キーワードを決めます。

この整理ができると、フォントは自然と絞られます。

同じ内容でも、フォントが違うと受ける印象は全く違います。

もちろん、実際に当ててみて「何か違う」と感じたり、クライアントの好みと合わなかったということもありますが…でも、言語化がぶれていないと、修正や提案がずっと楽になります。

ルール1：書体数は「1デザインに3つ」まで

ひとつのデザインにフォントを増やしすぎると、全体の統一感が失われます。

初心者のうちは、最大3つと決めておきましょう。

太さ（ウェイト）を変えるだけでも、十分に情報の強弱は作れます。無理にフォント数を増やす必要はありません。

ルール2：まずは「定番フォント」を使おう

デザイン性の強いフォントを使いたくなりがちですが、まずは定番フォントを使いましょう。

定番は、

• 組み合わせやすい
• 読みやすい
• 失敗しにくい

という理由で選ばれています。「定番をきれいに使える」こと自体が、立派なスキルです。

定番フォントを知りたい方はこちら 

まずは基本を覚える。フォントの分類と選び方のコツ

私たちが使うフォントには、

・日本語フォント（和文フォント）
・欧文フォント

があります。

和文フォント：明朝体とゴシック体

明朝体
文字の端に「ウロコ」と呼ばれる飾りがある書体。イメージは、信頼感・高級感・繊細さ

ゴシック体
線の太さがほぼ一定の書体です。イメージは、親近感、モダン、力強さ、カジュアル

欧文フォント：セリフ体とサンセリフ体

セリフ体
和文の明朝体に相当し、文字の端に飾り（セリフ）があります。
イメージは、伝統的・高級感・エレガント

サンセリフ体
和文のゴシック体に相当し、飾りがありません（サン＝フランス語で「〜がない」という意味）。
イメージは、モダン、カジュアル、ストロング

注意が必要な「手描き・装飾フォント」

筆文字や手描き風のフォントは、アクセントとして使うと効果的です。

使いすぎると全体のバランスが崩れやすいので注意が必要ですが、少しずつ取り入れて慣れていくのがおすすめです。

初心者が迷わないためのフォントの絞り方

フォントってついお気に入りをたくさんダウンロードしたくなりますが、これは挫折の元です。

上達の近道は、「あれこれ手を出さず、信頼できる精鋭」を使い倒すこと。使うのは5種類くらいで十分です。

まずは、各書体ごとにお気に入りのひとつを作ってみましょう。

迷う人は、以下の定番フォントを参考にしてみてください（基本フリーフォントから選んでいます）

脱・素人！フォントを整える基本スキルとは

プロが文字を扱うときは、見た目を支えている基本的な仕組みを意識しています。

最低限押さえておきたいポイントを紹介しますね。

ウェイト（太さ）で、視覚的な優先順位を作る

フォントの太さのことを、ウェイトと言います。

見出しを太く、本文を細くすることで、読者の視線を誘導する「ジャンプ率」を作ります。

初心者のうちは、ウェイトの差をしっかりつけるだけでも、デザインが一気に引き締まります。

文字詰めを意識する

フォントをただ入力しただけの状態（ベタ打ち）では、文字の間隔が不揃いに見えたり、バランスが悪くみえることがあります。

文字の間隔を調整して読みやすく綺麗にすることを、「文字詰め」と呼び、デザイナーの仕事になります。

カーニングやトラッキングなど調整方法はいくつかありますが、必ず正解というものはなく、個人の経験や感覚によるものも多いです。

初心者は、デザインソフトの文字設定機能を使ってみることから始めましょう。

行間と一行の長さ。「読みやすさ」を数値で考える

行間
行間がつまった文章ほど読みづらいものがありません。文字サイズの150〜180%程度が、ひとつの目安です。
行間を少し広めにするだけで、デザインがすっきり洗練されて見えることもあります

一行の長さ
一行を長くしすぎても、読みづらいです。
特にWeb画面だと、横幅が長すぎる文章はまず読まれないので、一行を短くするなどのレイアウトにします。

合成フォントのバランスを考える

「Photoshop CC 2024 の使い方」のように、日本語の文章に英数字が混ざる場合がありますよね。

この時は、日本語フォントに含まれる英字をそのまま使うのがダメなわけじゃないのですが、和文フォントと欧文フォントを分けて使うと、見た目が整いやすいです。

これは合成フォントといって、デザインソフトで設定できる機能です。

コツ
欧文フォントは、和文より少し小さく見えがちです。欧文のサイズを数％大きくする、またはベースラインを微調整するだけで、印象がぐっと良くなります。

有料フォント vs 無料フォントとプロの使い方

フォントは「無料で使えるもの」と思われがちですが、もともとは有料のデザイン商品です。

フォントデザイナーが時間をかけて作った文字で、ライセンスを契約することで使用するのが基本です。

以前は、仕事なら有料フォントを契約するのが当たり前な時代もありました。でも、近年は、高品質なフリーフォント（無料フォント）が増えてきています。

フリーフォント：高品質な「Google Fonts」の台頭

フリーフォントの代表例がGoogle Fontsです。

Google Fonts 

Google Fontsは、Googleが提供している無料で使えるフォントで、プロの現場でも普通にメインフォントとして使われています。

初心者は、無理に高価な有料フォントを契約するより、まずはGoogle Fontsのような信頼できる無料フォントから始めてみましょう。

有料フォントを選ぶタイミング

無料のGoogle Fontsと並んで、プロの現場で欠かせないのが以下の2大フォントです。

有料フォントが必要になるケースは、

・グラフィックデザインがメインのお仕事の場合

・クライアントからフォント指定がある場合

などです。

必ずしも「仕事＝有料フォント」ではなく、目的に応じて選ぶ、という考え方が一般的ですね。

特に、Webデザイン中心だとAdobe FontsやGoogle Fontsのみのケースもあります。私も昔はモリサワを契約していましたが、今はAdobe Fontsです。(Adobe Fontsはデザインソフトを契約すると無料で使えるので）

仕事でフォントを使うときの注意点

無料・有料に関わらず、仕事でフォントを使う場合は、ライセンス（利用規約）を守る責任が発生します。

フォント配布サイトには、必ず「利用規約」があるので、絶対に確認するようにしてくださいね。

商用利用が可能かを確認する

フリーフォントの中には、個人利用限定なものもあります。

利用方法によってはNGとなるケースも

「印刷物ならOKでも、Webサイトのテキスト表示は不可」「アプリへの組み込みは別途契約が必要」「YouTubeはOKだがテレビ放送はNG」など、フォントによって規定はさまざまです。

納品形式に気をつける

自分のパソコンに入っているフォントが、納品先のクライアントのパソコンにも入っているとは限りません。
IllustratorやPhotoshop、Figmaでの生データを渡すと、フォントが別のものに置き換わり、デザインが崩れてしまいます。
「アウトライン化」するなどの実務知識が必要です。

フォントファイルを添付して第三者に渡すのはNG。

例えば上記の例で、納品先がフォントを持ってないから、「コピーしてくれないか」と言われるかもしれません。でも、たとえ自分が購入したフォントであっても、フォントファイルを第三者に渡すことは、利用規約（ライセンス）で禁止されています。

Webデザイン特有のフォントの扱い

Webデザインが紙のデザインと大きく違う点は、画面サイズや環境によって表示が変わるという前提です。

この前提を意識して、デザインをするようにしましょう。

フォントサイズの変化
PC/タブレット/スマホと、媒体によって画面サイズが大きく異なります。それぞれに適したフォントサイズを考える必要があります。

改行位置の不一致
紙は改行位置を固定できますが、Web画面では画面幅によって意図しない場所で改行されることがあります。

フォント学習に役立つ本・ツール・サイト

プロも日常的に使っているリソースをフル活用しましょう。

おすすめフォント書籍

フォント関連の書籍は、理論を学ぶだけではなく、辞書のように使えるのも大きなメリットです。

手元に置いておくことで、「この雰囲気に合うフォントはどれだろう？」と思ったときに、すぐにイメージに近い例を探せます。

ほんとに、フォント。フォントを活かしたデザインレイアウトの本

「フォントが変わればデザインは変わる！」を実感できる、初心者向けのやさしい解説書です。

イメージごとにフォントの使い方が学べますよ。

怖くないタイポグラフィ 1日10分30日！フォント・文字組み・文字レイアウト

フォントの見分け方、定番のフォント、文字組みや文字レイアウトについて、初心者向けに優しく解説した一冊です。

初心者向けとありますが、内容は濃く専門的。繰り返し読むことでタイポグラフィの基礎知識は確実に身につきます。セクションごとに理解を深めるミニテストもついていますよ。

おすすめフォントツール

おすすめWebサイト

モリサワ note編集部 

Monotype 公式note 

フォントメーカーが発信する記事は、考え方やトレンドを学ぶのに最適です。

Q&A：フォント学習でよくある悩み

有料フォントは最初から買うべき？

無理に買う必要はありません。まずは無料のGoogle Fontsを使い倒しましょう。「これがないと表現できない」と思った時が買い時です。

トレンドのフォントはどうやって追えばいい？

街中の広告や、最新のWebデザインのまとめサイトでチェックするのが一番です。ツールなら「WhatFont」でWebサイトのフォント名を調べられます。

フォントを使いすぎてデザインがバラバラになる

一度、すべてのフォントを1種類にリセットしてみてください。サイズと太さ、レイアウトの使い分けだけでどこまで表現できるか挑戦してみるのも良い勉強です。

フォントは何個覚えればいい？

闇雲に覚えるより、まずは定番の10種類くらいを覚えたらOK。それで仕事の9割はカバーできます。あとはフォントデザインの書籍を持っていると、辞書のように使えます。

まとめ｜フォントは「完璧」を目指さなくていい

フォントって、歴史が長い分、敷居が高くて怖い印象があります。

種類も多いし、ライセンスの話は細かくて追いきれないし、正解がわからなくて戸惑うこともあります。

でも、完璧に理解する必要はありません。

フォントは覚えるものではなく、少しずつ慣れていくもの。

フォントの世界はとても奥深いのですが、最初から奥を覗こうとすると疲れてしまいます。

まずは定番のフォントを使ってみる。
少しだけ太さや行間を調整してみる。
気になったフォントを眺めてみる。

それだけでも、デザインは確実に変わってきます。

webデザインといえば、「Webフォント」！Webフォントについて、気になる方はこちらの記事もどうぞ！