デザイン&クリエイティブ

【Webサイトの重要要素】フォントでサイトイメージは変わる

Webサイト上の文字フォントについて、どのような役目を果たしていると思いますか?
普段何気無く見ているWebサイトでもフォントの種類は異なっていますよね。それぞれのサイトで様々なフォントが使用されていますが、見やすいフォントもあれば、Aのサイトでは文字が見やすいのに、同じ文字でもBのサイトだとなんだか見づらい…と思ったことはありませんか?Webサイト上に表示されているフォント、どのフォントを選ぶかによってサイトに対する印象を大きく変えてしまうのです。この記事では、適切なフォントを選ぶ重要性と、どのようなフォントを選択すればWebサイトのイメージを良くすることができるのかを解説していきます。

【Webサイトの重要要素】フォントでサイトイメージは変わる

フォントはユーザーに強い印象を与えている

Webサイトのフォントですが、どのくらいユーザーに強い印象を与えていると思いますか?少し意識をしながら、お気に入りサイトのフォントを確認してみてましょう。企業のイメージを伝えるコーポレートサイトでは、しっかりとした印象を与えるフォントが使われていますし、20代前半女性向けのファッション系Webサイトであれば、丸目のフォントが使われていますよね。では、もしこのフォントが入れ替わってしまったらどうでしょうか?しっかりとした印象を与えたいコーポレートサイトで丸目のフォントを使えば、どこかゆるい印象を与えてしまいますし、ファッション系のWebサイトに固いフォントを使用してしまうと、洋服や画像イメージのモデルさんとは異なる印象を与えてしまいますよね。それだけ、フォントがユーザーに与えている印象とはとても大きいのです。では、よく使用されているフォントイメージについて確認していきましょう。

フォントはユーザーに強い印象を与えている

メイリオ

Webサイト上で一番よく使われているフォントが、このメイリオと言われています。私たちがよく見るサイトもこのメイリオが使われているので、私たちにとっても一番見慣れている文字なのです。企業のコーポレートサイトに使われていたりと、フォントでの印象を抑えたり、できる限り見やすくするために使えるフォントだと思います。アイキャッチ画像では、さまざまなフォントを使っているサイトが多いのですが、スクロールしたあとの本文文字には、このフォントが使われていることが多いです。
■参考サイト■

メイリオ

ゴシック

ゴシック体はずっしりと重い印象があります。しかし、全体的に丸みがあるため柔らかい印象も受けるのです。右の画像を見ても写真やイメージカラーの水色と組み合わさり、優しい印象を感じることができますよね。丸ゴシックを使用すれば、より優しく可愛い印象を出せるので、柔らかい雰囲気のあるファッションサイトやコスメサイトにもぴったり合います。
■参考サイト■

ゴシック

明朝体

明朝体からは、礼儀正しさや力強さを感じることができます。ひらがなや漢字の良さが生かされていて、ダイレクトに言葉が伝わりやすいフォントですので、ユーザーに企業やサイトイメージを強く与えることができます。明朝体もきちんとした印象を強く表していますので、企業のコーポレートサイト に合うフォントです。
■参考サイト■

明朝体

その他のフォント

フリーフォントサイトをチェックすると、他にも様々なフォントがあります。上記はWebサイト上のテキストとしてよく使用されているフォントですが、TOP画像やアイキャッチ画像となっている画像には、他にもさまざまなフォントが使用されています。フリーフォントサイトを見てみても、多数のフォントがあることもわかりますし、それぞれのフォントから受ける印象も異なりますよね。よりサイト のイメージやターゲットに与えたい印象を強めるためにも、TOP画像などのフォントは1番サイトイメージを与えやすいフォントを使用すると、より良いサイトを作ることができます。
■参考サイト■

その他のフォント

まとめ

フォントが与えるイメージいかがでしたでしょうか?作ってみたWebサイトにどこか違和感があるとき、フォントを見直してみるといいかもしれません。フォントを変えてみるだけでも、サイト の印象がガラリと変わり、ストレスを感じさせないWebサイトを作ることができるのです。

Written by ねねまる
現在フリーWebデザイナー・フリーライターとして活動しております。
女性向け商品のLP制作/個人経営カフェのHP制作/女性向けのライフスタイル・デザイン・プログラミングの記事作成が得意です。

PICK UP NEWS