ゴシック体と明朝体の使い分け。あなたはどうしてますか?

0630

日本語フォントの代表格「ゴシック体」と「明朝体」。最近は色々なフリーフォントも出ているので、バリエーションも豊かで見るだけでも楽しいです。でもこのゴシック体と明朝体、みなさんはどうやって使い分けていますか?見た感じのイメージ?媒体の雰囲気に合わせて?色々な基準があると思いますが、今回は大きさや太さなど、色々な視点で比べてみたいと思います。このブログはデザインに関する勉強もかねてやっているので、実験的な内容かもしれませんが、何かの役に立てばと思って書いてみます。

文字の違いを比べてみる

ではまず、例として個人的によく使っている小塚ゴシックと小塚明朝を比べてみたいと思います。ひらがな・カタカナ・漢字でサンプルとして載せてみたいと思います。

小塚ゴシックと小塚明朝の見比べ

見た目の特徴としてはそれぞれこういった特徴があると思いますので、思いつく限りざっとあげてみます。

ゴシック体の特徴

ゴシック体は全体的に動きが少なく、統一感がある雰囲気です。また丸みを帯びている印象も受けますね。

明朝体の特徴

筆で書いた字の特徴をそのまま受け継いだのが分かると思いますが、線の太さも強弱があり動きがある印象を受けます。

※ちなみに図の中の装飾のことを専門用語で「ウロコ」と呼ぶようです。洋書体の場合は「セリフ」です。

それぞれの文字を重ねてみる

試しに重ねてみると、このように横線や線の終わりに違いが大きくあることが分かります。

重ねてみました。

文字を太くした時の違い

今度はそれぞれの文字を太くしてみたいと思います。

小塚ゴシックを徐々に太く

ゴシック体は全体的に親近感を感じさせる、子供らしさがあります。太くするごとに、力強く元気な雰囲気が出ました。また線が太くなるにつれて、丸みが強くなったような印象を受けます。

小塚明朝を徐々に太く

小塚明朝も同じように太くしてみました。細い線だと大人っぽい洗練された落ち着いた感じ、太い線だと太い部分と細い部分のギャップが大きくなり、少しポップで親近感を感じさせる印象を受けますね。ひらがなは特に、太くなるにつれて丸みを帯びた感じがします。同じフォントでも太さを変えるだけで、見た目の印象が変わるのがよくわかると思います。

ゴシック体と明朝体、太さの違いを見たところで分かりやすく図にしてみました。

それぞれの文字で受ける印象の違い

2つの文字から受ける印象から

・強弱や動きのある文字(明朝体や筆文字)は、大人っぽい印象を受けやすい

・強弱や動きの少ない文字(ゴシック体)は、子供っぽい親近感のある印象を受けやすい

・文字が太くなると元気で力強くなる分、明朝体本来の特徴が薄くなる

・文字が細くなると落ち付いた印象を受けるため、親近感のあるゴシック体も少し洗練された印象を受ける。

文字の大きさによる違い

また文字の大きさの違いによって、見た目の印象も変わってきます。大きくなるほど、元気で親近感を感じさせやすくなります。逆に落ち着いた感じにしたい場合は小さめの文字にすると良いと思います。

文字の大きさによる違い

写真を組み合わせてみる

では試しに参考例として写真と組み合わせて、やってみたいと思います。

東京スカイツリー

東京スカイツリーの写真を用意しました。ここに単純に「東京スカイツリー」という文字を入れてみます。今回はスカイツリーというタワーの洗練された印象から細い文字を使ってやってみたいと思います。フォントの種類と大きさを変えることで、どういう違いが出てくるかを見てみますね。

【小塚ゴシック体】マウスを重ねると、大きい文字の場合が表示されます。

東京スカイツリーゴシック

【小塚明朝体】マウスを重ねると、大きい文字の場合が表示されます。

東京スカイツリー明朝

写真と一緒に使う場合、文字が小さいとまず写真が目に入ってきますが、逆に文字が大きいと写真よりも文字の内容が先に目に入ってきます。また、ゴシック体だと文字の持つ印象から親近感のある感じ、明朝体だと洗練された感じを受けるため、伝えたい対象や文章の内容によって文字を使い分けてみると、より伝わりやすさが出てくると思います。

まとめ

同じ種類の文字でも、大きさや太さを変えるだけで印象ががらりと変わって、見る人に違った印象を与えることができることが分かったと思います。使う写真やキャッチコピー、文字の配置や色を使うことで、さらにバリエーションが増し色々な伝え方が出来ますね。ただ、慣れないうちはまず基本的な文字の種類や大きさを使った表現手法を練習してみるのも良いと思います。あなたなら、ゴシック体と明朝体をどう使い分けますか?

関連記事を読む

0630

シェア・feed登録もどーぞ!

オンラインでWebの勉強ができるTech Academy

独学で勉強すると細かい部分が分からなかったり、一体何を覚えたらいいのか迷ったりませんか? Tech Academyなら、オンラインスクールだから場所を選ばずWebやプログラミングの勉強ができます。【無料の動画説明会】を一度ご覧ください!

TechAcademy [テックアカデミー]