この章では、文字のデザインを学びます。
Webページの多くは、文字で情報を伝えます。
画像や色がきれいでも、文字が読みにくいと、内容は伝わりにくくなります。
文字は情報の中心
Webページでは、見出し、本文、ボタン、リンク、フォームラベルなど、さまざまな場所で文字を使います。
文字のデザインでは、次のことを考えます。
- 読みやすいサイズか
- 行間が適切か
- 見出しと本文の違いがわかるか
- 強調が多すぎないか
- 1行が長すぎないか
- スマホで読みにくくないか
文字は、ページの印象だけでなく、理解しやすさにも影響します。
フォントサイズ
フォントサイズは、読みやすさに直結します。
本文が小さすぎると読みにくくなります。
見出しが大きすぎると、ページ全体のバランスが崩れることがあります。
基本的には、次のように役割でサイズを分けます。
| 種類 | 役割 |
|---|---|
| 大見出し | ページやセクションの主題を伝える |
| 中見出し | セクション内の小さなまとまりを作る |
| 本文 | 詳細情報を読んでもらう |
| 補足 | ラベル、注釈、メタ情報を伝える |
| ボタン | 行動を促す |
重要なのは、サイズに階層があることです。
すべて大きくすると、どれが重要かわからなくなります。
行間
行間は、文章の読みやすさに大きく影響します。
行間が狭すぎると、文字が詰まって見えます。
行間が広すぎると、文章のまとまりが弱くなります。
本文では、少し余裕のある行間にすると読みやすくなります。
一方で、ボタンやナビゲーションなど短いテキストでは、広すぎる行間は必要ありません。
| 場所 | 行間の考え方 |
|---|---|
| 本文 | 読みやすさを優先して余裕を持たせる |
| 見出し | 本文より少し詰めてもよい |
| ボタン | 高さとのバランスを見て調整する |
| 注釈 | 小さくても読める行間を確保する |
行間は、文字サイズとセットで調整します。
太さ
文字の太さは、強調や階層を作るために使います。
見出しや重要な言葉は太くしてもよいですが、太字を使いすぎると、どこを見ればよいかわからなくなります。
太さを使う時は、次のことを意識します。
- 見出しは本文より太くする
- 強調する言葉を絞る
- ボタンの文字は少し太めにする
- 本文全体を太くしすぎない
- 細すぎる文字を小さく使わない
太字は便利ですが、使いすぎるとページ全体が重く見えます。
見出し階層
見出しは、文章の構造を伝えます。
見出し階層が整理されていると、ページの内容を理解しやすくなります。
たとえば、次のように階層を作ります。
- ページタイトル
- セクション見出し
- 小見出し
- 本文
見出しは、見た目だけでなく、意味としても大切です。
HTMLでは、h1、h2、h3 などの見出しタグを使って構造を作ります。
デザイン上も、階層に合わせてサイズや余白を変えます。
本文幅
本文の1行が長すぎると、読みづらくなります。
横幅いっぱいに文章を広げると、目線の移動が大きくなり、次の行を追いにくくなります。
本文中心のページでは、最大幅を決めると読みやすくなります。
確認したい項目は次の通りです。
- 1行が長すぎないか
- スマホで左右余白が狭すぎないか
- 本文の周りに余白があるか
- 見出しと本文の幅が合っているか
本文は、広い画面でも無理に広げすぎないようにします。
文字量
デザインでは、文字量も重要です。
1つのカードに文章を詰め込みすぎると、読みづらくなります。
ファーストビューに説明を入れすぎると、何を伝えたいのかわかりにくくなります。
文字量を調整する時は、次のことを考えます。
- 見出しだけで内容が伝わるか
- 本文は長すぎないか
- 箇条書きにできないか
- 詳細は別ページに分けられないか
- ボタン文言は短く明確か
必要な情報を残しながら、読む負担を減らします。
日本語の読みやすさ
日本語は、英語よりも文字の密度が高く見えることがあります。
そのため、行間、余白、文字サイズに余裕を持たせると読みやすくなります。
また、長い見出しは折り返し方に注意します。
見出しが長すぎる場合は、言葉を削る、改行位置を調整する、補足文に分けるなどの方法があります。
よくある失敗
文字のデザインでよくある失敗は、次の通りです。
- 本文が小さすぎる
- 行間が狭すぎる
- 見出しが大きすぎる
- 太字が多すぎる
- 本文幅が広すぎる
- 文字量が多く、読む前に疲れる
- ボタン文言が長すぎる
- 見出し階層が見た目だけで決まっている
文字は、ページ全体の読みやすさを左右します。
まずは、本文が気持ちよく読めるかを確認します。
この章のまとめ
- Webページでは、文字が情報伝達の中心になる
- フォントサイズ、行間、太さで情報の階層を作る
- 本文は横に広げすぎず、読みやすい幅を保つ
- 太字や大きな見出しは、使いすぎると強調が弱くなる
- 次の章では、色の役割と使い分けを学ぶ