フォントの違いで、どのように見え方が変わるか分析してみた!

 

 

お疲れ様です^^

 

文字を使ったデザインを行う際には、沢山のフォントの中から一つを選択しなくてはなりません。

ですが大量にインストールされているフォントを一つ一つ確認していると、

非常に時間がかかり、効率が悪くなってしまいます。

よく使われているフォントや、自分が使いやすいフォントを、ある程度覚えておくと、作業がスムーズに進められます。

今回は日本語のいくつかのフォントについて、特長と使い分けの方法について説明します。

みなさんのデザイン作業の参考にしていただければ幸いです!



今日はフォントの種類によって見え方がどのように変わるかを分析してみます!

 

まずは、フォントの種類から。

フォントは様々な種類がありますが、一般的に使われるフォントとして、以下の二つがあります。

・ゴシック体

明朝体

 

今回は、この二つのフォントを分析していきます。

 

まずはゴシック体

 

ゴシック体の主な特徴として、縦画も横画も同じくらいの太さ、全体を等して均一であることが挙げられます。

全体的に言えるのは、視認性(遠くからでも文字を判別できる)に優れたフォントと言える頃ができるでしょう

ゴシック体を用いると、以下のような印象を与えられます。

 

ゴシック体全般シンプル、均一、目に入りやすい

太いゴシック体力強い、元気、親しみやすい、可愛らしい

細いゴシック体無機質、クール、落ち着き、幾何学

引用:http://saikirin.com/font_erabi/

 

ゴシック体は、プレゼン資料等に向いているフォントです。これらは「読む」というより、「見る」という意味合いの方が強い要素となります。したがって可読性(読みやすさ)よりも視認性に優れたフォントであるゴシック体が向いているでしょう(バナーや広告でゴシック体が使われるのもそのためだと思われます)。

f:id:toshikimaebayashi:20190221003358p:plain



 

次に明朝体

 

明朝体は、縦画が太く、横画が細い文字です。

線は先端に向かうに連れて細くなります

 

明朝体は、例えばレポートや記事、新聞といった長い文章を読む時に優れています。一般的に、明朝体は文字が細いため、読み手に負荷をかけません。仮に、文字が太い場合で文章を書くと、読み手にかなり負荷をかけてしまいます。新聞や、小説のように長い文章で「明朝体」が使われるのはそのためです。

f:id:toshikimaebayashi:20190221002800p:plain

 

ここで次にバナーを題材にして、フォントを見比べてみます。

 

 一応、バナーの設定

バナーのコンセプト「転職サービスを使ってもらうために、インターネットに流すバナー」

ターゲット「若い、優秀なエンジニア」

 

 

 

ちなみに、このサービスは架空のもので、バナーも、完全に優れているものではないのであくまでフォントを見比べる程度でお願いします。

 

 

 

背景画像は統一して、それぞれのフォントを見比べてみた

 

游ゴシックの場合

f:id:toshikimaebayashi:20190216182547j:plain

游ゴシック体は、ゴシック体のベース(全て同じ太さになっている)は保ちつつ、文字をスマートにしたり、角を少し装飾したりしてる書体です。一番、これがしっくりくるなあ。




ヒラギノ角ゴシックの場合

f:id:toshikimaebayashi:20190216182614j:plain

ヒラギノ角ゴシックは、普通のゴシック体ですね。文字の太さを全て均一にしているので、すごいシンプルなデザインになります。でも逆に均一でシンプルすぎるってのが問題で、特に印象には残らないイメージがあります。

 

 

ヒラギノ角ゴシックStdNの場合

f:id:toshikimaebayashi:20190216182857j:plain

ヒラギノ角ゴシックStdNは、普通のゴシック体を、太くしたフォントですね。文字がだいぶ太くなったので、迫力感や力強いイメージがあります。ただ、このバナーのコンセプト枯らしたら、写真のイメージとはちょっと合わないかもですね〜




ヒラギノ丸ゴシックの場合

f:id:toshikimaebayashi:20190216182919j:plain

ヒラギノ丸ゴシックは、普通のゴシック体の角を丸くしたパターンです。細めで使用すると、落ち着きと柔らかさを両立した綺麗なイメージになるので、女性や子供向けのフォントかもしれませんね。

 

 

 

ヒラギノ明朝の場合

f:id:toshikimaebayashi:20190217035623j:plain

続いて、明朝体です。先程までみていたゴシック体とは違い、高級感のあるイメージになりました。写真とは一見マッチしていますが、ターゲットやコンセプトという視点から見るといかにもハイクラス・30〜40代向けで、若年層向けではないかもしれませんね。




こんな感じになりました。

個人的には、游ゴシックが一番しっくりくるかな。

 

総じて言えることは、フォントによって、バナー(今回の場合は)のイメージは全然変わってしまうということですね。




実際のバナーをもとに、フォントがどのような用いられ方をしているか見比べてみた



では、どのようなフォントがどのような画像(写真)とマッチしているのか調べてみましょう

 

 

游ゴシックの場合

f:id:toshikimaebayashi:20190217041805j:plain

f:id:toshikimaebayashi:20190217042117j:plain

游ゴシックは、シンプルだけれども(文字の太さを全て均一にしているゴシック体の特徴を保ちつつ)シンプルすぎない(文字がスリムになったことで文字間が広がり、余白ができるため文字に余裕が生まれる)印象があり、暖かみやゆったりとした印象を提供できるので、バナーの文言としても使い勝手がいいと思います。

そんな便利屋な游ゴシックですが、ブランドコンセプトとしては、人と人との繋がりだったり、暖かい環境を表現したい場合にはおすすめかも。

 

 

ヒラギノ角ゴシックの場合

f:id:toshikimaebayashi:20190217042331j:plain

ゴシック体の特徴をそのまま反映したヒラギノ角ゴシックですが、上記のバナー上は、ある文言を強調したい場合にそれ以外の文言として用いており、うまい使い方をしているなあと思いました。やはり、それだけだとシンプルすぎるヒラギノ角ゴシックは、他に強調したい文字があるときは、いい引き立て役になりますね笑

 

*ちなみに、個人でブログ(例えば、ワードプレスなどで)を開設している人の多くは、ヒラギノ角ゴシックをフォントとして用いているのですが、文字の大きさや、余白(行間、文字間、端と文章の間)に気をつけないと、かなりぎこちない印象を与えてしまうので注意してください。

noteや、はてなブログiosで、ヒラギノ角ゴシックを用いていますが、文字を小さくしたり、余白を保つことでぎこちない印象を無くしています。

 

f:id:toshikimaebayashi:20190220214901j:plain

 

例えば、noteは行間をかなり開けたり、文章の左右に余白を設けることで、読みやすくしていることが見受けられます

 

 

 

 

ヒラギノ角ゴシックStdNの場合

f:id:toshikimaebayashi:20190217042552p:plain

ヒラギノ角ゴシックStdNは、ゴシック体を太くしたフォントなので、強い印象を与えることができます。何か強調したい時におすすめ。ただ、普通のゴシック体を太くしただけなので、ただただ用いると、デザインとしてはテキトーな印象を与えかねないので用いる際は注意してください。

 

 

ヒラギノ丸ゴシックの場合

f:id:toshikimaebayashi:20190217042954j:plain

f:id:toshikimaebayashi:20190217043013j:plain

ヒラギノ丸ゴシックは、ゴシック体の先端が丸くなっている特徴があるので、落ち着きと柔らかさを両立した綺麗なイメージがあるので、女性をターゲットにしたい時や雰囲気の良さだったり、優しい印象をあたえたい時に向いていると思います。

 

 

明朝体の場合

f:id:toshikimaebayashi:20190217043117j:plain

f:id:toshikimaebayashi:20190217043205p:plain

最後に明朝体です。バナーは広告なので、視認性に優れた明朝体はあまり使われない傾向にあります。ただ明朝体を使っているバナーももちろんあって、明朝体は、シンプルな使い方をすると高級感のある印象を与えたい時に用いられます。上の二つは、高級感をコンセプトにしていますが、「明朝体=高級感」という訳ではありません。ただ、総じて言えることは明朝体を用いているときは、ハイクラスの年収層、30代以上をターゲットにしている時だったり、洗練されたイメージ、スタイリッシュなイメージを与えたい時に用いられる場合が多いですカネ。

 

 

 

まとめ

 

今回はフォントの中のごくごく一部ですが、他にも様々なフォントがあります。

各フォントにおける、それに伴うイメージは以下の通り。

 

f:id:toshikimaebayashi:20190217043537j:plain

出典:http://saikirin.com/font_erabi/



今回わかったことは、

 

・フォントの違いで印象が全然変わってくる

・フォントを扱う中で、空白をどのように用いるか(行間・文字間)が大事。



ではまた^^