「font」は閲覧者のWebサイトに対するイメージを大きく左右するもので、
「ゴシック体で良いか」など何となくで決めて良いものではないのです。
ではゴシック体は閲覧者にどういったイメージを与えるのかなど、
fontの特徴について詳しく見ていきましょう。
ゴシック体は「親近感」を与える
テキストのfontとして多くのWebサイトで使われている「ゴシック体」には、
閲覧者に「親近感」を与える効果があります。
ゴシック体は
・縦線と横線が同じ太さ
・はねやはらいの先が細くならない
・とめの部分にうろこと言われる三角形の山がない
といった特徴を持っています。
どの部分も同じ太さの線で描かれるため視認性が高く、人の目につきやすいのです。
人の目につきやすいので看板やポスターなど、
新聞やチラシの見出しにもゴシック体が使われていることが多くなっています。
使われる頻度が高い上に目につきやすいので、
ゴシック体は他のfontに比べて見ている人に親近感を与えるというわけです。
線の太さで印象が大きく変わる
ゴシック体は文字の線の太さで閲覧者に与える印象が大きく変わるのも
1つの特徴です。
線が太ければ太いほど力強さとインパクトが大きくなって男性的な印象が強くなります。
線が細くなるとシンプルで洗練されてモダンで女性的な印象となり、
同じゴシック体でも線の太さが変わるだけで全く正反対の印象を与えるのです。
また角を取って全体的に丸みを帯びた丸ゴシック体になると、
ソフトさや子供っぽさといった印象が加わります。
可読性は低い
ゴシック体は人の目につきやすい視認性は高いものの、
可読性いわゆる読みやすさはそれほど高くありません。
単語や見出し程度の短い文章なら全く問題ありませんが、長い文章になると
縦横の線の太さが同じなため彩色割合が高くなって読みにくくなるのです。
Webサイトで長めのテキストをゴシック体で表示すると、目にかかる負担が大きいので
閲覧者に最後まで読んでもらえない可能性が高くなってしまいます。
実際に新聞や書籍では、見出しにはゴシック体が使われていても
本文は明朝体など可読性の高いfontが使われていることが多くなっています。
明朝体のイメージは「上品さ」
日本語のfontとしてゴシック体とともに使われることが多いのが「明朝体」です。
明朝体のfontとしての特徴は
・縦線に比べて横線が細い
・はねやはらいの先が細くなる
・とめの部分にうろこと言われる三角形の山がある
などとなります。
上記の3点は毛筆で書いた文字と共通する特徴で、上品や優雅、知的といった印象を
閲覧者に与えるのです。
上品や優雅といった印象は堅苦しさと表裏一体でもあり、
明朝体表記は閲覧者にとっつきにくさを感じさせる恐れもあります。
線が太いと信頼感、細いと繊細
明朝体は線が太くなるほど固い印象が強くなるので、
線の太い明朝体は閲覧者にどっしりとした信頼感を与えます。
反対に線が細くなるほど繊細さが強くなりますから、
信頼感よりも上品や優雅といった印象が強くなるのです。
明朝体は全体として角張っているため、
線の太さに関わらずゴシック体に比べると古典的で固い印象となります。
可読性は高い
明朝体はゴシック体よりも可読性が高く、
Webサイトのfontとして使用するとテキストが読みやすいです。
実際に新聞や書籍などの本文は明朝体で表記されることが多く、
同じ文章量でもゴシック体に比べると明朝体の方が疲労度が軽く感じます。
ただディスプレイの解像度が低いと細い横線がきれいに表示されないことが多く、
パソコンやスマホでは明朝体の文章がかえって読みにくくなることもあります。
そのためWebサイトで明朝体が使われることはそれほど多くなく、
長い文章でもゴシック体表記となっていることが多いです。
fontでイメージが変わるWebサイトの実例
見出しやテキストのfontでWebサイトの印象が変わる実例をいくつか紹介しましょう。
まずは太いゴシック体を使って閲覧者に力強さとインパクトを与える
Apple社のホームページ（https://www.apple.com/jp/watch/）です。
AppleWatchの紹介ページですが、白い背景に黒文字、黒い背景に白文字という
強いコントラストで文字がダイレクトに目に飛び込んできます。
機能性や特徴を短い文章で表現することで、
ゴシック体の可読性の低さをカバーしているのです。
Apple社がAppleWatchに対して大きな自信を持っていることが、
太いゴシック体によって上手く表現されています。
細いゴシック体で誠実さと丁寧さを表現
同じゴシック体でも線を細い線のものを使って誠実さと丁寧さを表現しているのが
「スイコウ」のホームページ（https://suikou-tokyo.jp/）です。
スイコウは空調や給排水衛生設備の工事を請け負う会社で、ホームページの
トップビューには「誠実に、そして丁寧に。」というスローガンが掲載されています。
ゴシック体は線が太いと力強さやインパクトが強くなりますが、
線を細くすることで繊細さも表現できます。
線の細いゴシック体によって「誠実に、そして丁寧に。」というスローガンがより強調され、
ミス1つ許されない工事を請け負う会社にピッタリのfontです。
線が細くなっても力強さは失われていないので、
業務に対する自信もうかがい知れるホームページとなっています。
角の取れた丸ゴシック体で優しさと親しみやすさを表現
丸みを帯びた丸ゴシック体を使って優しさと親しみやすさを表現しているのが
西宮回生病院のホームページ（https://kaiseihp.jp/）です。
トップビューのスローガンには明朝体が使われていますが、
病院名や多くの項目が丸ゴシック体で表示されています。
クリニックならともかく大きな病院はとっつきにくい施設の代表格で、
少しぐらいの不調では診てもらいに行きにくい印象が強いです。
ホームページに丸ゴシック体を使うことで「どんな些細な事でも相談してください」
という優しさや親しみやすさを表現しているのです。
またゴシック体には安心感を与える効果もありますから、
「この病院に任せれば大丈夫」といった印象も閲覧者に与えています。
イラストとfontで統一感を演出
イラストに合ったfontを使うことで統一感を演出しているのが
イプロスのホームページ（https://recruit.ipros.jp/）です。
BtoBマッチングプラットフォームを提供している会社で、
「野心」「変革」「進化」といったことを前面に押し出しています。
トップビューの背景には浮世絵風のイラストが使われており、
「キミの野心で、ビジネスに変革を。」というスローガンが明朝体で表示されています。
浮世絵という昔ながらの画風に古典的な印象を持つ明朝体のテキストを
組み合わせることで、ホームページ全体に統一感が生まれているのです。
本来明朝体は繊細な印象が強く、力強さではゴシック体に劣るとされます。
しかしイプロスのホームページでは明朝体の線を太くして
赤いラインの上に表示させることで力強さも表現できています。
また「野心」と「変革」の2つを少し大きくして赤いラインからはみ出させて、
「枠にはまらない企業」であることもアピールしているのです。
余白と細く小さい明朝体で特別感を表現
細く小さい明朝体のテキストの周りに余白を作って特別感を表現しているのが
里山十帖のホームページ（https://satoyama-jujo.com/thehouse/）です。
トップビューは、里山十帖の建物や周辺の景色などのスライドショーの背景に
里山十帖のロゴと「一日一組。絶景の古民家。」のコンセプトのテキストのみ。
あえてテキストを少なくして余白を多く作ることで、
里山十帖が高級で特別なものでことが表現されています。
古民家を利用した宿泊施設ということもあって、テキストを明朝体にして
歴史や伝統的な雰囲気が感じられるようにもなっているのです。
またトップビューのロゴとコンセプトは白字で、背景のスライドショーによって
文字が見えやすくなったり見えにくくなったりして隠れ家的雰囲気も醸し出しています。
画面を下にスクロールすると里山十帖に関する説明が書いているのですが、
見出しは明朝体で本文はゴシック体とfontを使い分けています。
文字の大きい見出しは明朝体で全体的な統一感を演出し、文字の小さい本文は
ゴシック体で画面の解像度によって読みにくくならない配慮がなされているのです。
こうした細やかな心遣いが里山十帖のサービスのきめ細やかさを連想させ、
シンプルながら印象深いホームページとなっています。
Webサイトで使うfontの選び方
いくつか紹介した実例のようにfontによってWebサイトの印象が変わるので、
Webサイトで使うfont選びは重要です。
まず第一にWebサイトや企業の方向性・雰囲気に合ったfontを探しましょう。
親しみやすい企業なのに明朝体、歴史と伝統を受け継ぐ業態なのに
ゴシック体を使ったWebサイトでは企業の雰囲気と合っていません。
自社の持つ雰囲気に合ったfontを使うことで、
閲覧者に自社の良さや強みをよりアピールできるのです。
社長のあいさつなど長い文章には読みやすいfont選びを意識しましょう。
可読性は明朝体の方が高いですが、解像度の関係で小さい明朝体の文字は
パソコンやスマホだとかえって読みにくいです。
線を少し細くしたゴシック体で、
行間や文字間を広めにして余白とのバランスを取るなど読みやすい工夫を施します。
fontを何種類も使うとホームページ全体の統一感が失われて、
閲覧者にごちゃごちゃした印象を与えてしまいます。
1つのホームページで使うfontは3種類程度に絞り、
統一感やまとまりのあるデザインに仕上げるのがベターです。
本当に伝えたい箇所は線を太くしたり文字を大きくするなど、
同じfontでも太さや大きさでメリハリをつけることで伝えたいことが明確になります。
まとめ
Webサイトはfontによって良くも悪くも印象が大きく変わります。
これからWebサイトを作るなら「どのfontが正解か」、
現在進行形で制作中なら「今使っているfontで正解か」を検討してみてください。