ブログ

WEBデザイン基礎Part1 ~フォントの種類と押さえておきたいポイント~

2018.03.19

ホームページを見ていると、高級感があるサイトや可愛いサイト、見やすいサイトと思う機会があるかと思います。

サイトの色味やレイアウトで見え方や雰囲気、伝い得たい情報も変わりますが、フォント(文字)のサイズや種類、行間、太さを変えるだけで、分かりやすくユーザーに情報を伝えることができます。

 

今回は、WEBデザインをこれから始める方や、WEBデザイナーの初心者の方に向けて、フォントの特徴やポイントを押さえていきます。

初心者ではないよ、という方でも復習がてら読んでいただけたらと思います。

 

フォントの種類
フォントには、和文フォントと欧文フォントの2つに分かれています。

さらに和文フォントには大きく分けて行書体、明朝体、ゴシック体、手書きなどに分けられています。

 

欧文フォントにはスクリプト体、セリフ体、サンセリフ体、手書きに分けられます。

 

下記の画像を見比べてみると、レイアウトや背景色は同じ状態であるのにも関わらず、左のゴシック体とサンセリフ体を使用したデザインは、元気でポップや印象がありますが、右の明朝体とセリフ体を使用したデザインでは、少し高級感がある印象を受けるのではないでしょうか。

フォントの特徴や印象を知ることによって、ホームページの目的やターゲット層に合ったフォント選びをすると、効果的に見せることができます。

 

フォントの特徴や印象が異なることが分かったところで、続いては、押さえておきたいポイントを4点ご紹介させていただきます。

欧文には欧文フォントを使う

和文フォントにも欧文(半角英数字)は登録されていますが、和文フォントは和文を美しく表現するためにデザインされた書体のため、欧文の表現にはあまり向いていません。

その為、欧文を使用するときには、基本的には欧文書体を使用することをおススメします。

欧文フォントは和文フォントと違って、アルファベットや数字を入力したときに綺麗に見えるように文字間も設定されています。

行間を調整する

複数行に渡って読ませる文章では、行間が重要になってきます。

文字サイズやフォントによっても左右されますが、cssのline-heightを用いて調整を調整すると、読みやすくなります。

フォントサイズに強弱を付ける

ホームページを見ているユーザーは、目線をZのようにして読んでいきます。

これをZの法則と言います。(Zの法則についてはこちら)タイトルと本文に強弱をつけて、文書の文字にコントラストを付けていきます。

長文の場合は左寄せに

ホームページの長文は読んでもらうためにも、視認性が大切になってきます。

長文の場合は、文字の先頭を左寄せに揃えることによって視認性が高くなります。

また、レスポンシブデザインの場合にPCで見る時には中央寄せで、画面が狭く文章が読みづらいスマートフォンには左寄せにして、文章の折り返しを目立たなくすることもあります。

まとめ

今回はWEBデザインをこれから始める方やWEBデザイナー初心者の方向けに、フォントの種類とポイントを書かせていただきました。

ホームページ制作をするにあたり、ユーザーに適切なことを伝える為にも、フォント選びはとても重要になってきます。

 

そしてホームページに合っているフォントを選んだとしても、読みづらい配置・見せ方では伝わる内容も伝わらなくなってしまいます。

昨今ではWEBフォントがたくさんあり、手書き風フォントもホームページでテキストデータとして表現ができるようになっています。

 

より一層フォント選びが重要になっているので、今回の基礎を押さえてみてはいかがでしょうか。

ホームページ制作・LP制作

集客やサイト改善などWebに関することなら、
何でもお気軽にお問い合わせください

ウェブ集客のご相談、見積り依頼などは、こちらからお問い合わせください

ご相談・お問い合わせ

サービスや実績などをまとめた会社案内は、こちらからダウンロードできます

会社資料ダウンロード

お急ぎの方はお電話でも相談いただけます

0120-439-241