【フォント】イメージにマッチしたフォント選び | 元パチンコ店員SEのWEBデザイン・IT独学ブログ~異業種からWEBデザイナーを目指す~

元パチンコ店員SEのWEBデザイン・IT独学ブログ~異業種からWEBデザイナーを目指す~

当ブログは元パチンコ店員のSE(システムエンジニア)が異業種から将来WEB制作会社へ
就職OR副業WEBデザイナーになりたいと始めた独学記録です。
独学でWEBデザインを習得する様や日常の出来事、ITに関することを日々綴っています。

フォントが持っている意味を正確に伝えるためには、どのようなフォントを選ぶのかも重要です。
文字の意味とデザイン全体で伝えたいイメージや印象を考慮して、そのイメージが伝わりやすいデザインのフォントを選ぶようにします。

文字の内容と伝えたいイメージにマッチしたフォント選び

どのようなデザインのフォントを使用して文章をレイアウトしても、文字自体が持つ意味は変わりません。
しかし使用しているフォントデザインによっては与える印象は大きく変わり、内容に合っていないフォントを使用すると、情報が間違った解釈で伝わってしまう場合もあります。
たとえば、信頼感を与えたいときにラフでポップなフォントを選択してしまうと、文章の意味が疑われてしまう結果になりかねません。また、やさしく女性らしい雰囲気を出したいのに骨太なフォントを選んでしまうと伝えたいイメージとは反対の印象を与えてしまいます。
文章の内容と全体のデザインイメージをよく考えて、伝えたい情報にマッチしたフォントを選びましょう。

系統を軸としてフォントを絞り込む

「イメージにマッチしたフォント選び」とひと口に言っても、無数にあるデザインの中から1つのフォントを選ぶことは難しいことです。まずは「明朝体系統」と「ゴシック体系統」のどちらの系統のフォントを使用するのかを決めてから、それぞれの系統の中からイメージとマッチするフォントデザインを選択するのが基本となります。
「明朝体」は伝統的で繊細なイメージ、「ゴシック体」は近代的で親近感のあるイメージを与えることができます。
明朝体のフォントにおいては、細い線で構成されたものは、より繊細でデリケートなイメージになります。
太い線で構成されたものは、信頼感や伝統的なイメージが強調されます。
ゴシック体のフォントでは細い線で構成されたものは現代的でモダンな印象が強くなり、太い線で構成されたものは堅実・硬質さを表現することができます。

1つのレイアウト内で使うフォント数

フォントを選択するとき、あまりにも多くの種類のフォントを1つのレイアウトエリア内で使ってしまうと、ひとつひとつのフォントが文字の内容やデザインイメージに合っていても全体的に統制のとれていない雑な印象を与えてしまいます。
フォントの種類が多すぎると、たくさんの色を多用した場合と同じように賑やか過ぎるイメージになってしまいます。
1つのレイアウトエリア内で使うフォントの種類は3~5種類程度に抑えたほうが、フォントに違和感を感じることなく内容が伝わることでしょう。
フォントによっては同じデザインでも線の太さが異なるフォントファミリーとして展開しているものもあります。
フォントファミリ―を利用すると、多数のフォントを使用していてもレイアウトエリア全体を統一されたように見せることができます。
役割の違いに合わせて文字のデザインに差を付けたい場合などは、同じフォントファミリ―で太さの異なるものを使用すると全体をまとまった印象にすることができます。

閲覧環境による使用フォントの制限

WEBページの場合、本文はデバイスフォントでの構成が多いため、自由にフォントを使用することが難しくなっています。
制作時に特定のフォントを指定しても、閲覧している環境によって同じフォントがインストールされていない場合は、強制的に別のフォントに置き換えて表示されてしまいます。
デバイスフォントで文字をレイアウトする場合は、WindowsとMacのそれぞれのOsに標準インストールされているフォントで表示されることを前提にデザインします。
スマートフォンなどの携帯端末では、さらに標準でインストールされているフォントが限られるため、デバイスフォントを使用したレイアウトには要注意です。
Android OSを使用しているスマートフォンやタブレットでは、機種によっては明朝体がインストールされていないので、すべてゴシック体で表示されてしまいます。また、太字のフォントがインストールされていない場合もあるので、フォントの太さだけで差別化しているようなレイアウトは避けるべきです。