書体は、声色です。
上の三つ、書いてある文字は全部同じです。でも聞こえてくる声が違うはずです。それが書体の仕事。
| 書体の方向 | 与えやすい印象（仮説） | 使いどころと注意 |
|---|---|---|
| 明朝・セリフ | 余韻、編集的、伝統、上質 | 大きな見出し向き。細いので小さくすると死ぬ |
| 角ゴシック・サンセリフ | 明快、現代的、実務的 | 本文と操作向き。太すぎる長文は重い |
| 丸ゴシック | 柔らかさ、親しみ | ケア系の短文。やりすぎると子どもっぽい |
| 手書き・筆記調 | 人の気配、個性 | 短い補足だけ。本文には向かない |
| 等幅 | 記録、数値、技術 | コードや数値。それ以外に使う理由は薄い |
ただし印象は、文字の内容と、文化と、サイズと、周りの要素で変わります。書体だけで信頼や売上が決まるわけじゃないです。あと日本語向けの字形、約物、英数字との相性も確認してください。
最初は本文用と見出し用、二つで十分です。
本文は16〜18pxくらい、行の高さは1.7〜2くらいから始めて、実機で調整。これは万能の正解じゃなくて出発点です。書体の種類を増やす前に、サイズと太さと余白で階層を作ってください。三種類目を足したくなったら、だいたいそれは階層設計の失敗です。
- 一行を長くしすぎない。日本語で30〜45字くらいを最初の目安に。
- 数字・価格・英字を、実際の文章の中で確認する。ウェイトを無理に合成しない。
- Webフォントが読み込めなかったときの、日本語の代替を必ず設定する。
- 使う書体ごとに、商用・Web配信・埋め込みの条件を確認する。
- 文字を画像に焼き込まない。検索も選択も拡大もできなくなります。
ピンクなら女性向け、で止まるのやめませんか。
わたし、黒いパッケージも好きですけど。色相（種類）、明度（明るさ）、彩度（鮮やかさ）。この三つのつまみで印象は動きます。同じ青でも、暗くて彩度が低ければ静けさ、明るくて鮮やかなら活動的。性別や業界と色を一対一で固定するの、雑すぎます。
落ち着いたケア深い緑 / 明るい背景 / 淡いアクセント
静かな贈り物墨色 / 紙色 / 控えめな金系
本音を話す学習誌墨色 / 紙色 / ライム
上の三つは、本サイトが用意した仮のブリーフ用サンプルです。色に普遍的な心理効果があると保証するものではないです。「何に使うか」を揃えてから比べてください。
色は、名前じゃなくて役割で決める。
まず背景と本文の色を決めて、次にリンクとメインのボタン、最後に補助色。60:30:10みたいな配分はあくまで目安で、規則じゃないです。目立つ色をあちこちに置くと、結局どこが大事なのか消えます。
薄い文字は、上品さと同じ意味ではないです。
WCAGの最低コントラストは、通常の文字で4.5:1、大きな文字で3:1。大きな文字っていうのは、だいたい24 CSS px以上か、18.66 CSS px以上の太字に相当します。装飾の例外と、本文や操作に必要な読みやすさは、分けて考えてください。読めない上品さは、ただの読めない文字です。
- 色だけで正誤や状態を伝えない。文字か記号も添える。
- 写真の上に文字を置くなら、画像が変わってもコントラストが保てる面を用意する。
- ホバーだけじゃなくて、キーボードのフォーカスも見えるようにする。
- スマホで、明るい場所と拡大時にも確認する。
つるつる、ざらざら。触ってないのに、なんで感じるんでしょうね。
マットな箱、捨てられないんですよ。中身が空でも、ちゃんと価値を感じてしまう。収納は圧迫してます。
| 質感 | 印象の仮説 | 表現のしかた |
|---|---|---|
| 紙・グレイン | 編集感、素朴さ、人の気配 | 薄い粒子、柔らかい輪郭 |
| マット | 落ち着き、静かな上質さ | 反射を抑えた素材写真、明度差 |
| 光沢・メタル | 精密さ、華やかさ、先進性 | ハイライトと暗部を制御する |
| ガラス・透過 | 軽さ、階層、透明感 | 背景に対する文字の可読性を確保 |
| 布・繊維 | 温かさ、日常、柔らかさ | 実際の素材の寄りと、使用場面 |
| 傷・グリッチ | 匿名性、違和感、荒さ | 局所的に。情報を壊さない |
この対応は素材表現の実務上の読み方であって、効果を保証する心理法則ではないです。同じ傷でも、文脈次第で「味」にも「劣化」にも見えます。
「おいしそう」も「清潔そう」も、質感がつくっています。
ここからは実際の写真で見てみます。四枚とも撮り方は丁寧なんですけど、担当してる仕事はまったく違います。
層、焼き色、溶けたバターの照り。味は写せないので、代わりに質感を写します。皿に散ったパン屑をあえて片づけないのは、たった今割ったばかりに見せるため。整いすぎた写真は、作りたてに見えません。
向いているとき：食べ物、体験そのものを売るとき。
透明、気泡、水面の揺らぎ。影を濃くせず、全体を明るいまま撮ると「軽い」「しみこむ」印象になります。青みを少し残すのが冷たさの正体。同じジェルでも、影を濃くすると途端に重くなります。
向いているとき：スキンケア、清涼感、衛生を伝えたいとき。
背景も小物も消して、形と色だけを見せます。雰囲気は出ませんが、「これを買うとこれが届く」がひと目で分かる。通販の一覧や比較の場面では、雰囲気より、取り違えないことのほうが役に立ちます。
向いているとき：通販の商品一覧、比較検討、価格を見せる場面。
写っているのは商品ではなく、使う人と場所と時間帯です。「朝の洗面台で、手のひらに一滴」まで見せると、使い方の説明が一行減ります。生活の温度が乗るぶん、誰の生活かを外すと途端に他人事になります。
向いているとき：使い方が想像しにくい商品、続けてほしい商品。
四枚とも「きれいな写真」ですが、減らしている情報が違います。1と2は質感を足し、3は情報を削り、4は状況を足す。何を足すかより、何を削るかで写真の役割は決まります。
本文の裏まで、ざらざらにしないでください。
質感は背景とか章の扉に寄せて、長い本文には安定した面を残す。Webで布や紙の手触りを伝えたいなら、雰囲気の写真だけじゃなくて、購入判断に必要な実物の拡大写真も置く。演出と、性能の証拠は別物です。
ちなみに、わたしの顔と名前がここだけ読めないのも、同じ話です。
顔のノイズと名前の削れは、匿名のキャラクター表現としてやってます。でも、学ぶ内容とリンクとボタンと条件説明は一切ノイズにしてないです。演出を広げる場所と、絶対に止める場所を決める。これをやらないと、ただ読みにくいだけのサイトになります。
質感を一つ選んで、①伝えたい印象、②使う面積、③絶対に使わない場所、④実物との差、を決める。④を飛ばすと、届いた瞬間にガッカリされます。
身近な例と実務の提案は、本サイトによる説明用の仮説です。人物の発言は架空で、調査回答や利用者の証言ではありません。
この章の出典・参考資料（3件）
- W3C Internationalization｜Typeface styles & font fallback 言語と書体の技術解説
- WAIC / W3C日本語訳｜WCAG 2.2 コントラスト（最低限） 通常文字4.5:1、大きな文字3:1
- Nielsen Norman Group｜Visual Hierarchy in UX UX研究