タイポグラフィがデザインに与える影響
Webサイトのコンテンツの大部分はテキストです。フォントの選び方と使い方（タイポグラフィ）は、読みやすさだけでなくブランドの印象にも大きく影響します。
フォントの種類と印象
- セリフ体（明朝体）：伝統的・格式・信頼感。ニュースサイトや文芸系に向いている
- サンセリフ体（ゴシック体）：モダン・クリーン・デジタル的。大半のWebサイトで使われる
- 等幅フォント：コード・ターミナル表示に使用
- ディスプレイフォント：装飾的。見出しやロゴに少量使用
Webフォントの読み込み方法
Google Fontsを使う場合はHTMLのheadタグに以下を追加します。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">タイポグラフィの基本設定
body {
font-family: 'Noto Sans JP', sans-serif;
font-size: 16px;
line-height: 1.7;
color: #333;
}
h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 700; }日本語フォントの注意点
日本語フォントはファイルサイズが大きく、読み込みに時間がかかります。サブセット化やdisplay=swapの設定でパフォーマンスを最適化しましょう。
フォントの組み合わせ法
- 見出しと本文でフォントを変える場合、同じ系統同士（セリフ+セリフ）か対比（セリフ+サンセリフ）の組み合わせが基本
- 種類は最大3種類まで
- ウェイト（太さ）の差でメリハリをつける
まとめ
フォントは「見えない力」としてデザインを支えています。可読性・印象・パフォーマンスの3要素を意識してフォントを選ぶと、完成度の高いタイポグラフィが実現できます。
webデザインでは、googleフォントなどwebで使えるフォントを基準に制作しましょう。
webフォントの中には、有料だったり商用不可だったするものもあります。
デザインの段階でしっかりと確認することが大切です。
webフォントで表現できないデザインは、画像にして利用します。
その場合、PC用とSP用の画像制作が必要になる場合もあります。
デザイナーとコーダーで担当が違う場合、テキストを画像にするのかwebフォントを利用するのかの意思疎通が重要です。
