ホームページは、ほとんどが文字でできている
ホームページを開いて、画面の中でいちばん面積を占めているものは何でしょうか。多くの場合、それは写真ではなく文字です。
だから、書体と文字の大きさが少し変わるだけで、ページ全体の印象が変わります。上品に見えるか、親しみやすく見えるか、頼りがいがあるように見えるか。その土台を、文字がつくっています。
明朝体とゴシック体、どちらが合う?
日本語の書体は、大きく分けると明朝体とゴシック体があります。
明朝体は、筆で書いたような強弱がある書体です。落ち着いていて、上品で、伝統や信頼を感じさせます。旅館や和食のお店、老舗、高級なサービスによく合います。
ゴシック体は、線の太さがそろった書体です。はっきりしていて、親しみやすく、現代的な印象です。小さくしても読みやすいので、説明の多いページや、スマートフォンでの本文に向いています。
このサイトは、見出しを明朝体、本文をゴシック体にしています。見出しで上品さを、本文で読みやすさを、と役割を分けている形です。
書体は、2つまでにする
あれこれ使いたくなっても、ひとつのホームページで使う書体は、2つまでにしておくのがおすすめです。見出し用にひとつ、本文用にひとつ。それ以上増えると、ページごとに雰囲気がばらばらになり、まとまりがなくなります。
太さも同じです。太字は、本当に大事なところだけに使います。あちこち太くすると、どこが大事なのかが、かえってわからなくなります。
スマートフォンでは、本文は16px前後から
スマートフォンで読む本文の文字は、16px前後を目安にしています。これより小さいと、読むために画面を指で広げる必要が出てきます。年配の方が多いお客様なら、もう少し大きくしてもいいくらいです。
文字の大きさと同じくらい大切なのが、行と行のあいだです。日本語は、行間が詰まっていると、とたんに読みにくくなります。文字の大きさのおよそ1.7倍から2倍くらいの行の高さをとると、ゆったり読めます。行間も、余白のひとつです。
見出しと本文には、はっきり差をつける
見出しと本文の大きさが近いと、どこが見出しなのかがわかりにくくなります。見出しは本文よりはっきり大きく、または太く。ひと目で「ここから新しい話が始まる」とわかるようにします。
スマートフォンで読む人の多くは、まず見出しだけを拾い読みして、気になるところで止まります。見出しが見出しとして目に入ることは、読んでもらうための入口です。
大事な言葉は、画像にしない
おしゃれな書体を使いたくて、キャッチコピーや料金を画像にしてしまうことがあります。けれど、画像の中の文字は、検索エンジンやAIには読み取りにくく、スマートフォンで拡大するとぼやけることもあります。
いまはホームページでも、さまざまな書体を文字のまま使えます。会社名やサービス、料金など、見つけてほしい言葉は、文字として書いておきましょう。
文字の設計から、ご相談ください
書体の選び方、大きさ、行間。ひとつひとつは小さなことですが、積み重なると「読みやすいサイト」と「なんとなく読みにくいサイト」の差になります。私たちは、文字の組み方まで含めてホームページをつくっています。
よくあるご質問
会社で使っている書体を、ホームページでも使えますか?
書体によります。ホームページで使えるように用意されている書体なら使えます。使えない場合は、雰囲気の近い書体をご提案します。
文字を大きくすると、デザインが野暮ったくなりませんか?
大きさだけでなく、行間や余白、見出しとの差とあわせて整えれば、読みやすさと見た目は両立できます。