文字の大きさと書体で、会社の印象は変わる

同じ言葉でも、書体が変わると、まったく違う会社に見えます。色や写真ほど気にされないことが多い「文字」ですが、ホームページの印象をいちばん長く支えているのは、実は文字かもしれません。

ホームページは、ほとんどが文字でできている

ホームページを開いて、画面の中でいちばん面積を占めているものは何でしょうか。多くの場合、それは写真ではなく文字です。

だから、書体と文字の大きさが少し変わるだけで、ページ全体の印象が変わります。上品に見えるか、親しみやすく見えるか、頼りがいがあるように見えるか。その土台を、文字がつくっています。

明朝体とゴシック体、どちらが合う?

日本語の書体は、大きく分けると明朝体とゴシック体があります。

明朝体は、筆で書いたような強弱がある書体です。落ち着いていて、上品で、伝統や信頼を感じさせます。旅館や和食のお店、老舗、高級なサービスによく合います。

ゴシック体は、線の太さがそろった書体です。はっきりしていて、親しみやすく、現代的な印象です。小さくしても読みやすいので、説明の多いページや、スマートフォンでの本文に向いています。

このサイトは、見出しを明朝体、本文をゴシック体にしています。見出しで上品さを、本文で読みやすさを、と役割を分けている形です。

書体は、2つまでにする

あれこれ使いたくなっても、ひとつのホームページで使う書体は、2つまでにしておくのがおすすめです。見出し用にひとつ、本文用にひとつ。それ以上増えると、ページごとに雰囲気がばらばらになり、まとまりがなくなります。

太さも同じです。太字は、本当に大事なところだけに使います。あちこち太くすると、どこが大事なのかが、かえってわからなくなります。

スマートフォンでは、本文は16px前後から

スマートフォンで読む本文の文字は、16px前後を目安にしています。これより小さいと、読むために画面を指で広げる必要が出てきます。年配の方が多いお客様なら、もう少し大きくしてもいいくらいです。

文字の大きさと同じくらい大切なのが、行と行のあいだです。日本語は、行間が詰まっていると、とたんに読みにくくなります。文字の大きさのおよそ1.7倍から2倍くらいの行の高さをとると、ゆったり読めます。行間も、余白のひとつです。

見出しと本文には、はっきり差をつける

見出しと本文の大きさが近いと、どこが見出しなのかがわかりにくくなります。見出しは本文よりはっきり大きく、または太く。ひと目で「ここから新しい話が始まる」とわかるようにします。

スマートフォンで読む人の多くは、まず見出しだけを拾い読みして、気になるところで止まります。見出しが見出しとして目に入ることは、読んでもらうための入口です。

大事な言葉は、画像にしない

おしゃれな書体を使いたくて、キャッチコピーや料金を画像にしてしまうことがあります。けれど、画像の中の文字は、検索エンジンやAIには読み取りにくく、スマートフォンで拡大するとぼやけることもあります。

いまはホームページでも、さまざまな書体を文字のまま使えます。会社名やサービス、料金など、見つけてほしい言葉は、文字として書いておきましょう。

文字の設計から、ご相談ください

書体の選び方、大きさ、行間。ひとつひとつは小さなことですが、積み重なると「読みやすいサイト」と「なんとなく読みにくいサイト」の差になります。私たちは、文字の組み方まで含めてホームページをつくっています。

vivittoのホームページ制作を見る

よくあるご質問

会社で使っている書体を、ホームページでも使えますか?

書体によります。ホームページで使えるように用意されている書体なら使えます。使えない場合は、雰囲気の近い書体をご提案します。

文字を大きくすると、デザインが野暮ったくなりませんか?

大きさだけでなく、行間や余白、見出しとの差とあわせて整えれば、読みやすさと見た目は両立できます。

あなたの会社に合う形を、15分でご提案します。

お問い合わせ

3営業日以内に、メールでご返信します。

お問い合わせ