Webデザインの添削をしていると、「なんとなく素人っぽい」「見づらい」「垢抜けない」と感じるデザインがあります。しかし、その原因を詳しく見ていくと、写真や色ではなく、実は「文字」に問題があるケースが非常に多くあります。フォントを変えれば良いという単純な話ではありません。
フォントの種類、サイズ、太さ、行間、字間、文章量、見出しと本文の比率、文字の揃え方など、タイポグラフィに関わる複数の要素が崩れることで、Webサイト全体が一気に素人っぽく見えてしまいます。
特にWebデザイン初心者がデザイン添削を受ける場合、「フォントは何を使えばいいですか？」という質問になりがちですが、本当に見るべきなのはフォントそのものではありません。「その文字が、情報をどう伝えるために設計されているのか」です。
この記事では、Webデザインの現場でデザイン添削を行う際に確認したい「タイポグラフィ」の基本から、初心者が陥りやすい失敗、実務レベルの改善方法まで詳しく解説します。
※第５弾以降は順次公開していきます
第１弾：デザイン添削で見るべき「余白」の設計とは
第２弾：デザイン添削で見るべき「ジャンプ率」とは
第３弾：デザイン添削で見るべき「視線誘導」とレイアウト設計
第４弾：デザイン添削で見るべき「タイポグラフィ」の基本※本記事
第５弾：デザイン添削で素人っぽく見える原因10選
第６弾：デザイン添削で「なんとなく良い」を卒業する方法
第７弾：デザイン添削で色を変える前に確認すべきこと
第８弾：デザイン添削でレイアウトを改善する具体的な方法
- そもそもタイポグラフィとは？「フォント選び」だけではない
- デザイン添削で最初に見るべきは「フォントの種類」ではない
- タイポグラフィで最も重要な「文字の階層」
- 「全部目立たせる」は、何も目立たせていないのと同じ
- ジャンプ率とタイポグラフィは密接に関係している
- 素人っぽく見える原因①「フォントを使いすぎる」
- 素人っぽく見える原因②「文字サイズがバラバラ」
- 素人っぽく見える原因③「行間が狭すぎる」
- 素人っぽく見える原因④「文字量をデザインで解決しようとする」
- 素人っぽく見える原因⑤「左揃え・中央揃えの意味を理解していない」
- フォントには「声」がある
- デザイン添削では「フォント」ではなく「文字の扱い方」を見る
- AIに「このフォントはどうですか？」と聞くだけではデザイン力は上がらない
- デザイン添削でタイポグラフィを見るなら「一部分」ではなく全体を見る
- タイポグラフィが上手いデザイナーは「文字をデザインできる」
- Webデザインを本気で上達させたいなら「正解」ではなく「判断基準」を身につける
- まとめ｜タイポグラフィを理解すると、Webデザインの完成度は大きく変わる
そもそもタイポグラフィとは？「フォント選び」だけではない
タイポグラフィという言葉を聞くと、「フォントを選ぶこと」と考える人が少なくありません。
これは半分正解で、半分間違いです。Webデザインにおけるタイポグラフィとは、文字を使って情報を整理し、読みやすく、理解しやすく、そして意図した印象を与えるための設計全体を指します。
✅ 大きく太く見せるのか。
✅ 細く上品に見せるのか。
✅ 小さく補足情報として見せるのか。
✅ 余白を広く取るのか。
✅ 写真の上に重ねるのか。
✅ 中央揃えにするのか。
✅ 左揃えにするのか。
それだけでユーザーが受ける印象は大きく変わります。
つまり、文字は「情報」であると同時に「デザイン要素」でもあります。
ここを理解していないと、どれだけおしゃれなフォントを使っても、デザインは良くなりません。
デザイン添削で最初に見るべきは「フォントの種類」ではない
デザイン添削で初心者の作品を見ると、最初にフォントを変えようとする人が多いです。
しかし、これは順番が違います。例えば、文字サイズがすべて同じ、見出しと本文の区別がない、行間が狭すぎる、情報量が多すぎるという問題を抱えているデザインで、フォントだけ変更しても根本的な問題は解決しません。むしろ、「フォントを変えたら何となくおしゃれになった」という錯覚に陥るだけです。デザイン添削では、まず文字の「構造」を見ます。
✅ 「何を一番読ませたいのか」
✅ 「次に何を読ませたいのか」
✅ 「どこは読まなくてもいいのか」
という情報の優先順位です。
タイポグラフィは、情報の優先順位を視覚的に伝えるための重要な手段なのです。
タイポグラフィで最も重要な「文字の階層」
Webサイトには、基本的に情報の階層があります。
H1：WebデザインスクールならAppRizz
H2：現役プロから学べる理由
本文：現役のWeb制作会社で実際に制作を行っているデザイナーが……
という構造です。
この場合、H1、H2、本文が全部同じサイズ・同じ太さ・同じ色だったらどうでしょうか。
当然、どこが重要なのか分かりません。逆に、H1だけ極端に大きく、H2も大きく、本文まで太字だらけになると、今度は「全部重要」に見えてしまいます。これもタイポグラフィとしては失敗です。デザインにおいて重要なのは「強調すること」ではなく、「強弱を設計すること」です。
「全部目立たせる」は、何も目立たせていないのと同じ
初心者のWebデザインで非常によくあるのが、重要そうなところを全部太字にすることです。
さらに、
・文字を大きくする
・色を変える
・マーカーを引く
・太字にする
・背景色を付ける
といった装飾を重ねていきます。
本人としては「重要なところを分かりやすくしている」つもりです。
しかし、結果として画面全体がうるさくなります。これは「情報の優先順位を付けられていない」状態です。プロのデザインでは、重要な情報ほど強く見せる一方で、重要度の低い情報は意図的に存在感を落とします。「目立たせる技術」よりも、「目立たせない技術」の方が難しいのです。
ジャンプ率とタイポグラフィは密接に関係している
前回の記事で解説した「ジャンプ率」も、タイポグラフィとは切り離せません。
見出しと本文のサイズ差が小さければ、情報の階層が弱くなります。逆に、見出しだけ極端に大きくすると、本文とのバランスが崩れます。
例えば
本文が16pxなのに、見出しが18pxしかなければ、見出しとしての存在感は弱いでしょう。
反対に、
本文16pxに対して見出しが80px、さらに太字となれば、今度は主張が強すぎる可能性があります。
重要なのは「何pxが正解」という話ではありません。
そのデザイン全体の目的、ターゲット、情報量、画面サイズに合わせて、文字の強弱を設計することです。
素人っぽく見える原因①「フォントを使いすぎる」
Webデザイン初心者にありがちな失敗が、フォントの使いすぎです。
「ここはゴシック体」
「英語は別フォント」
「数字はまた別フォント」
というように、部分ごとにフォントを変えていく。
一見すると個性的ですが、統一感がなくなります。
基本的には、使用するフォント数をむやみに増やさず、ウェイトやサイズ、字間、行間によって変化を付ける方が、まとまりのあるデザインを作りやすくなります。
もちろん、意図的に複数の書体を組み合わせる高度なタイポグラフィもあります。しかし、それは「何となく違うフォントを使った」のとは全く違います。フォントの組み合わせには、ブランドイメージや可読性、コントラストなどの明確な理由があります。
素人っぽく見える原因②「文字サイズがバラバラ」
文字サイズを細かく変えすぎるのも危険です。
例えば、見出しが32px、次の見出しが29px、その次が35px、本文が17px、補足が14px……というように、ルールなくサイズが変化すると、サイト全体の秩序がなくなります。
プロのデザインでは、ある程度のサイズルールを設定します。
H1 → 大きい
H2 → 中〜大
H3 → 中
本文 → 標準
注釈 → 小さい
というように、情報の役割と文字サイズを連動させます。
重要なのは、数字を覚えることではありません。
「このサイズは何のために存在しているのか」を説明できることです。
素人っぽく見える原因③「行間が狭すぎる」
デザイン添削で非常に多いのが、文章の行間不足です。
特に初心者は「情報をたくさん入れたい」という意識が強く、文字を詰め込んでしまいます。
逆に、行間を広げすぎても文章がバラバラに見えます。
つまり、行間も「読みやすさ」と「デザイン」のバランスを取る必要があります。
Webサイトでは、PCだけではなくスマートフォンでの見え方も考えなければいけません。PCではちょうど良くても、スマートフォンでは文章が何行にも分かれ、想定以上に縦長になることがあります。タイポグラフィは、画面サイズによっても変化するのです。
素人っぽく見える原因④「文字量をデザインで解決しようとする」
これは非常に重要です。
文字が多すぎるデザインを見て、「フォントを小さくすれば入る」と考える人がいます。これは基本的に悪手です。本来考えるべきなのは、「この文章は本当に必要なのか？」です。デザインとは、与えられた文字を全部入れる作業ではありません。情報の優先順位を整理し、ユーザーに必要な情報を必要な順番で伝えることもデザインです。
✅ 重複している説明を削る。
✅ 見出しと本文を分ける。
✅ 箇条書きにする。
✅ 図や画像に置き換える。
こうした判断も、Webデザイナーの仕事です。
「文字が多いから小さくして全部入れました」は、デザインではなく収納です。
素人っぽく見える原因⑤「左揃え・中央揃えの意味を理解していない」
文字の揃え方にも意味があります。
一方、短いキャッチコピーや見出しであれば、中央揃えによって視覚的なまとまりを作ることもできます。
つまり「中央揃えがおしゃれ」「左揃えが正解」という話ではありません。
コンテンツの性質とデザインの目的によって判断する必要があります。特に本文まで中央揃えにしてしまうケースは、デザイン添削でよく見る失敗です。「なんとなくおしゃれだから」という理由だけで配置を決めると、見た目と可読性が衝突します。
フォントには「声」がある
タイポグラフィを理解するうえで重要なのが、フォントにはそれぞれ印象があるということです。
✅ ゴシック体なら現代的、力強い、シンプル。
✅ 丸みのある書体なら親しみやすい、柔らかい。
もちろん、これは絶対的なルールではありません。
同じゴシック体でも、書体によって印象は大きく変わります。
だからこそ、「好きだからこのフォント」という選び方では不十分です。
「このターゲットに、このブランドイメージを伝えるために、この書体を選んだ」という説明ができるところまで考える必要があります。
デザイン添削では「フォント」ではなく「文字の扱い方」を見る
ここまで読んで分かるように、タイポグラフィの問題はフォントだけではありません。
✅ フォントの種類。
✅ 文字サイズ。
✅ ウェイト。
✅ 行間。
✅ 字間。
✅ 文字色。
✅ 見出しと本文の比率。
✅ 文章量。
✅ 揃え方。
✅ 情報の階層。
これらが全体として機能しているかどうかです。
例えば、フォント選びだけ完璧でも、文字サイズの階層が崩れていれば良いデザインにはなりません。反対に、一般的なフォントを使用していても、文字の階層、余白、行間、サイズ、ウェイトがきちんと設計されていれば、非常に洗練されたデザインになります。ここが「フォントを知っている人」と「タイポグラフィを理解しているデザイナー」の違いです。
AIに「このフォントはどうですか？」と聞くだけではデザイン力は上がらない
現在はAIにデザインを見せて、「改善点を教えて」と聞くこともできます。
もちろん、AIを補助的に利用すること自体は悪いことではありません。しかし、それだけでデザイン力が身につくわけではありません。
「文字が小さいです」
「行間を広げましょう」
「フォントを統一しましょう」
「コントラストを付けましょう」
こうした指摘は、ある程度誰でも言えます。
問題は「なぜそうするのか」です。
さらに重要なのは、その判断を実際のデザインに落とし込むことです。
✅ どこまで削るのか。
✅ どのフォントにするのか。
✅ どのウェイトを使うのか。
✅ どこに余白を作るのか。
そして、それによってデザイン全体がどう変わるのか。ここには経験と判断力が必要です。
だからこそ、本気でデザイン力を上げたいのであれば、単に一般論を教えてくれるだけではなく、実際の制作物を見ながら具体的に添削してくれる相手を選ぶことが重要です。
デザイン添削でタイポグラフィを見るなら「一部分」ではなく全体を見る
タイポグラフィは、文字だけを切り取って評価してはいけません。
写真、余白、レイアウト、色、装飾など、他のデザイン要素との関係性を見る必要があります。
✅ 写真が非常に強いデザインなら、文字は控えめにする。
逆に、
✅ 写真を使わず文字を主役にするなら、文字そのものに強い表現力を持たせる。
高級感を出したいなら、
✅ 単純に明朝体にするのではなく、文字サイズ、字間、余白、写真、色などを含めて全体の空気感を設計する。
つまり、タイポグラフィは単独のテクニックではありません。
Webデザイン全体を成立させるための一つの設計要素です。
タイポグラフィが上手いデザイナーは「文字をデザインできる」
本当にデザインが上手い人は、文字を単なる文章として扱いません。
文字そのものをビジュアルとして扱います。
✅ キャッチコピーをどこに置くのか。
✅ どの一文を最も強く見せるのか。
✅ どの言葉だけサイズを変えるのか。
✅ 英数字をどう組み合わせるのか。
✅ どこまで字間を広げるのか。
✅ どこで改行するのか。
✅ どこまで文章を削るのか。
こうした判断の積み重ねによって、Webサイトの「見た目」と「伝わり方」が決まります。
だから、デザイン添削で「このフォントに変えましょう」というだけでは、本質的な添削とは言えません。「なぜこの文字を、この大きさで、この位置に、この間隔で配置するのか」まで考える必要があります。
Webデザインを本気で上達させたいなら「正解」ではなく「判断基準」を身につける
デザインには、数学のような一つの正解が存在するわけではありません。
だからこそ、初心者は「正解のフォント」「正解のサイズ」「正解のレイアウト」を探してしまいます。しかし、実務で必要なのは正解を暗記することではありません。「この案件なら、この選択が適切だ」と判断できることです。そのためには、たくさんの優れたデザインを見るだけではなく、なぜ優れているのかを分析する必要があります。
「なぜこのフォントなのか？」
「なぜこのサイズなのか？」
「なぜこの行間なのか？」
「なぜここで改行したのか？」
「なぜこの文章を強調したのか？」
を説明できるようになることが重要です。
説明できないのであれば、まだ「何となく」で作っている可能性があります。
まとめ｜タイポグラフィを理解すると、Webデザインの完成度は大きく変わる
Webデザインの添削で「何となく素人っぽい」と感じたとき、すぐに色や写真を変える必要はありません。まず文字を見てください。
✅ 文字の階層は明確か。
✅ 見出しと本文のジャンプ率は適切か。
✅ 行間は読みやすいか。
✅ 文字量は多すぎないか。
✅ 強調しすぎていないか。
✅ 揃え方に意味があるか。
そして何より、「その文字が何を伝えるために存在しているのか」を考えてみてください。
タイポグラフィは、Webデザインの中でも非常に基本的な要素です。
しかし、基本だからこそ誤魔化しが効きません。フォントを知っているだけでは、デザインは上手くなりません。文字を使って情報を整理し、視線を誘導し、ブランドの印象を作り、ユーザーに伝わる状態まで設計できて初めて、タイポグラフィを扱えていると言えます。
Webデザインスクールや独学でデザインを学んでいる人で、「作品を作っても何となく素人っぽい」「プロっぽいデザインにならない」と悩んでいるなら、一度自分の作品を文字だけに絞って見直してみてください。意外なほど多くの問題が、タイポグラフィの中に隠れています。
WebデザインスクールAppRizz（アップリズ）では、単に「このフォントを使えばいい」といった表面的な知識を教えるのではなく、実際の制作物を見ながら、なぜそのデザインになるのかという判断基準まで含めてデザイン添削を行っています。
「何となく作る」から「意図を持って作る」へ。
デザイン力を本気で上げたいのであれば、まずは自分の作品を第三者に見てもらい、どこに問題があるのかを具体的に把握することから始めてみてください。
