明朝体とゴシック体は、どう読んでほしいかで選ぶ

「なんとなく明朝体にしてみたけど、しっくりこない」
ホームページ、メニュー、SNSの画像。作るたびに迷うのが書体選びです。デザインの知識がなくても判断できる決め方を、実例を並べて説明します。

1. 印象ではなく、どう読んでほしいかで決める

「上品にしたいから明朝体」「今っぽくしたいからゴシック体」。印象から選ぼうとすると、だいたい迷子になります。印象は言葉にしづらいうえに、人によってもズレるからです。

決め手になるのは、その文章を、どう読んでほしいかです。

明朝体は線に強弱があるぶん、目が文字の形を追う時間が生まれます。ゆっくり読ませる書体です。

ゴシック体は線が均一で、形が一瞬で認識できる。速く確実に届ける書体です。

コンセプト文や店主の想いは明朝体でゆっくり。価格や営業時間、アクセスはゴシック体ではっきり。

見出しは明朝体、本文はゴシック体という組み合わせが定番なのは、この理由です。どちらかを選ぶのではなく、どこに使うかを決めると考えてください。

明朝体は、相手との距離を少し取る書体です。丁寧で品はありますが、親しみとは逆の方向に働きます。

高級店、和食、旅館のように「きちんとした時間を過ごす場所」なら、この距離感がそのまま魅力になります。

でも、ふらっと立ち寄ってほしいカフェのサイトを全部明朝体で組むと、「なんだか入りにくそう」な印象になってしまう。

同じ飲食店でも、カウンターだけの店と、家族で来てほしい店では、取るべき距離が違います。そのお店がお客さんとどのくらいの距離でいたいかで考えると外しません。

明朝体は、小さくすると弱くなります。画面上で14pxを下回るあたりから、細い線がつぶれたり飛んだりして、読みにくさが一気に出てきます。

キャプション、注釈、ボタンの文字、スマホでの表示。こうした小さい文字は、ゴシック体を選んでおくのが安全です。

明朝体を使うなら、十分な大きさを確保できる場所に限定してください。

見落とされがちなのですが、明朝体を選ぶということは、組み方も一緒に選んでいるということです。

明朝体は、行間と字間を広げてはじめて本来の表情が出ます。ぎゅっと詰めて組むと、繊細さが出ないどころか、ただ読みにくいだけになります。

「明朝体にしてみたけど、なんだか違う」という違和感の正体は、たいていここにあります。書体だけを変えて、余白をそのままにしているケースです。

写真の上に文字を重ねるのは、お店のサイトでいちばんよく使う表現です。トップページの大きな写真に、キャッチコピーを乗せる形ですね。

ここで効いてくるのは、実は書体よりも写真のほうです。背景がごちゃついていると、明朝体の細い線はあっさり埋もれます。

逆に、余白のある静かな写真なら、明朝体はきれいに成立します。上の写真では、明朝体でも文字はしっかり読めます。

ただし、営業時間のような実用情報は、ゴシック体のほうが目に入るのが速い。雰囲気は明朝体、実用情報はゴシック体という分け方が、写真の上でも効きます。

文字を置くための余白がある写真かどうかを、先に見てください。余白のない写真に明朝体を乗せたいなら、写真を少し暗く加工するか、文字を大きくするか、どちらかが必要になります。

ここはWebサイトならではのポイントで、SNSの画像とは事情が違います。

日本語の明朝体は、データがとても重いんです。ひらがな・カタカナ・漢字をすべて含むので、ファイルサイズが数メガバイトになることも珍しくありません。

その結果、ページを開いた瞬間は別の書体で表示され、あとから明朝体に切り替わる。あのちらつきが起きます。

一方でゴシック体は、パソコンやスマホにもともと入っている書体（ヒラギノ角ゴ、游ゴシックなど）で済ませられるので、読み込み時間は実質ゼロです。

本文まるごとを明朝体にするのは、表示速度の面でもおすすめできません。明朝体は見出しだけに絞る。それだけで雰囲気は十分に出せて、速度の問題もほぼ消えます。

書体は、お店がお客さんに話しかけるときの声のトーンのようなものです。同じ「いらっしゃいませ」でも、ゆっくり丁寧に言うのか、明るくはきはき言うのか。

迷ったときは、接客しているときの自分の声を思い浮かべてみてください。その距離感に近いほうが、たぶん正解です。

ROOM NOTE STUDIOは、写真を起点にWebとSNSをつくるスタジオです。お店のホームページやSNSの書体選び、写真とテキストのトーンを揃えるところからご相談いただけます。既存サイトの見直しだけのご依頼も承っています。