Web戦略講座 ソーイ株式会社
未経験のWeb担当者でもWeb戦略を作成できるようになるWeb戦略ブログ

フォントを選定するときに参考にしてほしいこと

大きくわけるとフォントは4タイプ

フォントには大きくわけて、

日本語なら明朝体とゴシック体、欧文書体ならセリフ体とサンセリフ体がある。

 

それぞれの違いは以下の通りだ。

 

明朝体・・・ヒゲがある

ゴシック体・・・ヒゲがない

 

セリフ体・・・ヒゲがある

サンセリフ体・・・ヒゲがない

 

 

フォントが与える印象

フォントによってWebサイト全体の印象は異なる。ひげあり(明朝体・セリフ体)とひげなし(ゴシック体・サンセリフ体)でくくっておおよそ問題ないかと思うので、それぞれまとめてその印象について説明する。

 

明朝体・セリフ体

情緒的な雰囲気を出すことができる。

ただ、個人的な感覚をできるだけ排除したとしても、本文で使う場合はその細さもあって、読みやすいとはいえないだろう。新聞のように紙面の都合上、字が詰まっている情報誌などは、逆にその細さ具合が読みやすい。

 

また、明朝体の一番使いにくい点は、太文字があまり強調されないことだ。

長い文章であれば太文字を使って部分的に強調したくなることもあるだろう。しかしそれが思いの外目立たず、文章にメリハリがつきにくい。

 

しかし、物語を読ませるような、そんなストーリー性を重視するような世界観のWebであれば本文に明朝体を使うことは有効である。明朝体は世界観を出すことに長けているといえるだろう。

 

 

ゴシック体・サンセリフ体

くせがなく読みやすいタイプであろう。行間さえ気をつけていればかなり読みやすい文章になる。

ただ、フォント自体はタンパクで淡々としている感じなので、全体的に躍動感は出ない。文章にはゴシック体を使い、見出しやキャッチコピーに明朝体を使ったりすることもよいだろう。

 

Webサイトの中で一つのフォントしか使ってはならないということはもちろんない。

それぞれのフォントに特徴があるので、役割に応じてフォントを決めればよい。

 

 

Webサイトで表示されるフォントはどうやって決まるのか?

ところでWebサイトで表示されるフォントはどのようにして決まっているかはご存知だろうか。

フォントには2つの指定方法があり、一つはデバイスフォントを指定してPCの中に入っているフォントを読み込む方法、もう一つはWebフォントといって、サーバー上にフォントを設置し、そこから読み込む方法である。

 

 

デバイスフォント

デバイスフォントとは、PCに予めインストールされているフォントである。

デザイナーはWebサイトを読み込んだときにどのフォントを使うかを複数、優先順位をつけて指定しておく。ユーザーがWebサイトを開いたときに、ユーザーのPCに入っているフォントの中で優先順位の高いものから優先的に表示するということだ。

 

デバイスフォントは当然、PCに何のフォントが入っているのかによって表示されるフォントが変わるのだが、WindowsとMacに標準でインストールされているフォントは種類が決まっているので(バージョンによって差異はある)、デザイナーはその中のどれを使用するか考える。

 

ただ、WindowsとMacでそれぞれ異なるフォントが標準フォントになっているため、どうしてもユーザーの環境によって表示されるフォントが異なる。

またスマホでもAndroidとiOSでは異なる。特にAndroidには明朝体はない。

 

そのため、意図したフォントで表示させたい場合は画像を使う。もちろん文章全体を画像にはしないが、キャッチコピーや、メニューバーの文字など、印象を左右する場所を画像化することは多い。

 

 

 

Webフォント

Webフォンとは、Web上に置いてあるフォントファイルを読み込むことで、任意のフォントをどんな環境でも再現する方法だ。

Webフォントサービスがたくさんあるので、基本的にはどこかと契約して利用することになる。ただ、欧文書体はたくさんあるのだが日本語は限られている。どんな日本語があるのか確認しよう。

例えばadobeのtypekitなどは日本語のWebフォントがたくさんある。

 

Webフォントを使えば、デバイス間の差異は解消できる上に、PCに標準でインストールされていないような魅力的なフォントがたくさん使えるようになる。

ただし多くのものが有料である。

 

 

まとめ

フォント1つでかなり全体の印象は変わる。

デザインで何か違和感があるなと思ったら、フォントを変えてみたり、行間を調整するだけでも随分と変わるものだ。それだけフォントの影響は大きい。

あなたの提供しているものをより魅力的にパッケージングしてくれるフォントを使おう。



無料相談はこちらから

Web制作についてのご相談はこちらからお願いします。
真剣に制作をお考えの方に無料でご提案いたします。まずはお気軽にメールでご相談ください。

* しつこい営業は一切しておりません。

御社名
お名前
ふりがな
HPのURL
メールアドレス
検討内容
制作の背景
認識している課題・要望
その他、ご相談



ホームページ制作会社の賢い選び方