english

ブログ

2018.03.19

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

Web制作ホームページ制作関連

こんにちは、制作部の青木です。ホームページを見ていると、高級感があるサイトや可愛いサイト、見やすいサイトと思う機会があるかと思います。サイトの色味やレイアウトで見え方や雰囲気、伝い得たい情報も変わりますが、フォント(文字)のサイズや種類、行間、太さを変えるだけで、分かりやすくユーザーに情報を伝えることができます。

今回は、WEBデザインをこれから始める方や、WEBデザイナーの初心者の方に向けて、フォントの特徴やポイントを押さえていきます。初心者ではないよ、という方でも復習がてら読んでいただけたらと思います。

 

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

 

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

 

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

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

 

 

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

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

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

その為、欧文を使用するときには、基本的には欧文書体を使用することをおススメします。欧文フォントは和文フォントと違って、アルファベットや数字を入力したときに綺麗に見えるように文字間も設定されています。

 

Point2 行間を調整する

複数行に渡って読ませる文章では、行間が重要になってきます。文字サイズやフォントによっても左右されますが、cssのline-heightを用いて調整を調整すると、読みやすくなります。

 

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

ホームページを見ているユーザーは、目線をZのようにして読んでいきます。これをZの法則と言います。(Zの法則についてはこちら)タイトルと本文に強弱をつけて、文書の文字にコントラストを付けていきます。

 

Point4 長文の場合は左寄せに

ホームページの長文は読んでもらうためにも、視認性が大切になってきます。長文の場合は、文字の先頭を左寄せに揃えることによって視認性が高くなります。また、レスポンシブデザインの場合にPCで見る時には中央寄せで、画面が狭く文章が読みづらいスマートフォンには左寄せにして、文章の折り返しを目立たなくすることもあります。

 

 

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

ホームページ制作をするにあたり、ユーザーに適切なことを伝える為にも、フォント選びはとても重要になってきます。そしてホームページに合っているフォントを選んだとしても、読みづらい配置・見せ方では伝わる内容も伝わらなくなってしまいます。

昨今ではWEBフォントがたくさんあり、手書き風フォントもホームページでテキストデータとして表現ができるようになっています。より一層フォント選びが重要になっているので、今回の基礎を押さえてみてはいかがでしょうか。

WEBコンサルティング

最適化・最大化させる。

制作、集客、解析、改善、検証まで一気通貫した完全オーダーメイドのWebコンサルティング。
お客様のビジネスゴールに向けた戦略的コンサルティングを行います。

VIEW MORE くわしく見る

ホームページ制作

キレイなだけじゃない。

競合分析・サイト設計から更新・運用までトータルサポート。
Web集客のプロが在籍しているアクシスだからこそ実現するデータに基づき最適化されたHPを制作します。

VIEW MORE くわしく見る

ネット集客・広告

来てほしい人が来てくれる。

御社にとっての最適解は、本当にリスティング広告で集客することですか?
リスティング運用者全員がWebコンサルタントのアクシスでは、そこから話を始めます。

VIEW MORE くわしく見る

解析・分析・改善

あなたのサイトを丸裸に。

Webサイトの現状を正しく把握し、目指すべき姿とのギャップを知る。
“2軸思考”であなたのWebサイトを丸裸にし、Webサイトで今何が起きているかを正しく把握します。

VIEW MORE くわしく見る

お問い合わせ

メールフォームからの
お問い合わせ