Webサイトの印象を決めるフォント選びの基本

こんにちは。

スターティアラボ　ブログ編集部です。

前回、Webサイトの重要な要素として「色」について触れましたが、今回はWebサイトを表現する上でこちらも重要な「フォント」についてご説明します。

「フォントでWebサイトの印象やイメージを伝えるって難しい」と感じる方もいらっしゃると思いますが、「色」と同様に、実は「フォント」もWebサイトの印象を大きく左右する重要な要素なのです。

普段何気なく見ているからこそ、気付いていない価値に触れ、訪れたユーザーへより内容が伝わるようにフォント選びを意識してみましょう。

1.フォントが与える印象

「書は人となりをあらわす」とあるように、書き文字に関しては、文字を見るとその人の人となりがわかると言われたりもしますね。ただ、フォントは決まった表示が出来るし（下手な字を書ける訳ではない）、なんでもいいじゃないか？と思う方もいらっしゃると思います。

それでは、次の文字をみて、あなたはどのような印象を受けますでしょうか。

これらをパッと見たとき

①は力強い印象を

②は女性的な印象

③はかわいらしさ

④は不安や怯えた印象

それぞれ上記のように感じたの方が多いのではないでしょうか？

何気なく暮らしている中で、私たちはフォントの種類によってそれぞれ印象やイメージを持っていて、気づかないうちに「文字」そのもの以外の情報を受け取っていることが分かります。

では、印象やイメージを与える要素にはどのようなものがあるのでしょうか？

2.フォントの種類とウェイト(太さ)

普段お使いの明朝体とゴシック体で例を挙げ、文字から受ける情報がどのように変化するか見ていきましょう。

ゴシック体

細いものを使うと、同じ文字でも親近感・洗練された女性的といったイメージがあり、太いものは元気・力強い・信頼・落ち着いたといったイメージがあります。

明朝体

細いものは上品・繊細・無機質・優雅といったイメージで、太いものは威厳・男性的・固い・古典的といったイメージになります。

ひとえにフォントといっても、種類やウェイトを変化させることで印象やイメージが明確に変わることが分かりますね。

3.目的に応じてフォントを使う

それでは、Webサイト内のどの箇所にどのフォントやウェイトを使用して公開するのがいいのでしょうか？
実際の例を挙げながら、イメージの変化を確認してみましょう。
よくWebサイトで見られる見出しと内容の構成です。まずはこちらの3パターンをご覧ください。

①

②

③

おそらく、一番見やすく体裁がいいと感じるのは個人差はもちろんあると思いますが②番かと思いますがいかがでしょうか？

短文で表現される見出しの文字は、太文字で元気や力強いといったアイキャッチとして使用されることが多く、多字数の内容を表示する場合は細文字を使用すると調和がとれ、見やすくなります。

4.使用を避けたほうがいいフォント

書き文字風や筆記体のフォント使用は、初めのうちは避けるのが良いかと。
理由は、書き文字に近いフォントは特徴が強く、文字以外の情報を多く伝えやすくなり、書かれている内容が頭に入りにくくなる原因となります。

書き文字風

■筆記体

実際にゴシックや明朝体と比べてみると、フォントが邪魔をして内容に集中しにくいのがすぐにわかります。デザインに自信がある方やコンセプトがない限りは避けたほうが良いでしょう。

5.印象からフォントを選ぶ例

ここまでフォントの持つ印象やイメージを確認してきましたが、実際にフォントを使用するイメージが沸くように、今までの内容を含め、ユーザーへ伝えたい印象からフォントを選び、実際に作ってみましょう。

例として挙げるのは現在ご覧いただいている弊社サイトのバナーです。

落ち着いた印象や信頼を伝える場合は明朝体で、親しみやすさや柔らかい印象を伝えたい場合にはゴシックを選びます。

さらにアイキャッチとなる箇所は太文字にし、詳細や付属する情報を表示する箇所を細字にします。

ゴシック体

明朝体

一担当者の方が訪れた際に、親しみやすさや柔らかい印象を伝える際にゴシックを使用することで抵抗が少なくなります。

逆に信頼性や堅実さなど、病院や法律事務所といった信頼感を大切にしたい場合は明朝体の方が優れています。

このように、ユーザーに対してどのような印象を与えたいかを考えてみると、どのフォントを使用するのが最適かが見えてきますね。

6.まとめ

今まで何気なく見てきたフォントも、ちょっと視点や意識を変えてみると、ユーザーに多くの情報を伝える力があることが分かります。

今回ご紹介したものは、フォントの特徴のほんの一部ですが、これまで意識されていなかった方にとっては驚きもあったのではないしょうか？

いきなりWebフォントやメイン画像ですと、ハードルが高いですが、ちょっとした画像やバナーなどを作る際には印象やイメージからフォントを選び、どれが一番ユーザーに伝わるかと考えるところから始めてみてはいかがでしょうか。

その小さな工夫を積み重ねが、良いWebサイトを作るきっかけとなると思います。