フォントは本当に大事!書体で魅せるデザインにする方法を解説!

こんにちは!
しがない雑食系クリエイターのはまやん(@hama_paz)です!

皆さんはデザインをする時にフォント(文字の書体)選びをされていますか?

とりあえず読めたらいいや」にしていませんか?

甘い!チョコラテのように甘いですよ!
ちゃんと文字に意味を持たせてフォントを選ばないと、デザインとチグハグだったり、可読性が悪くなって読まれなくなります!

読まれないということは結果的に印象を与える事も出来ませんので、見る人の頭に残りません。

それではせっかく作ったデザインも意味がありませんよね。

フォントにはカラーと一緒で、与える印象やイメージがしっかりとあります!
そのイメージさえしっかり掴んでおけばデザインのイメージとバッチリ合わせる事が出来ます!

そこで今回はフォントから魅せるデザインのコツをご紹介します!
この記事を読む事でフォント選びの作業がスムーズに出来て制作スピードがグンっとアップしますよ!

はまやん
読まれてこそのデザインよ!
スポンサーリンク

フォントのイメージを知ろう

フォントは本当に大事!書体で魅せるデザインにする方法を解説!1

まずは各フォントが持つイメージを順番に解説していきます!
イメージとは書体から連想される印象の事を指します。

実はこれを変えるだけ同じ内容の文面でも印象がガラリと変わってしまうんです!

このイメージを正しく認識してデザインに落とし込んでいく事で、あなたが伝えたい事を視覚的に、本能的に訴えかける事が出来ます!
今回はおおまかにカラーの区分けを以下に分けました。

  • セリフ体(明朝体)
  • サンセリフ体(ゴシック体)
  • 筆記体
  • 手書き書体
  • 装飾書体

セリフ体(明朝体)

フォントは本当に大事!書体で魅せるデザインにする方法を解説!2

セリフ体は馴染みが薄いかと思いますが、日本では明朝体と呼ばれているものがそうですね!
ここからはわかりやすいように明朝体で紹介します!

明朝体は「落ち着き・高級感・伝統・権威的・和風」といったイメージがあります。
全体的に大人な感じのイメージでしょうか。

書体自体がキレイなバランスなので高級感を出したいときや、趣きのある伝統工芸品の紹介などする時にも使われていますね。
また新聞などでも馴染みがあるので、ご年配の方は明朝体の方が読みやすいそうです。

デメリットとしては割と明朝体を使用して文字を大きくしてもそこまでインパクトは無い反面、ゴシック体に比べて印象に残りにくいです。

また、文字の一部が細いので小さい文字で使用する時は文字が潰れてしまう可能性があります。
僕も結婚式の動画制作などで明朝体をよく使うのですが、いざプロジェクターで映してみると解像度の低さから潰れていることがよくあります。

また、太字にし過ぎると野暮ったい印象を与えがちですね。

サンセリフ体(ゴシック体)

フォントは本当に大事!書体で魅せるデザインにする方法を解説!3

サンセリフ体は先ほどのセリフ体と同じで馴染みが薄いかと思いますが、日本ではゴシック体と呼ばれています。

ゴシック体は「元気・読みやすい・シンプル・安い・受け入れやすい」といったイメージがあります。
明朝体に比べて強弱をつけやすいのと、可読性があるので文字の内容を理解させるのに最適です!

スーパーや通販サイトなどでデカデカと「SALE!」と書いてあるのもセールだとわかりやすく認識してもらうためゴシック体を使われているところが多いです!

デメリットとしては明朝体に比べて安易に大きくするとインパクトが強いので、デザインより文字が先行して入ってきてしまいがちです。
また、上記のようにセール等で使われることが多いので安い印象を与えやすくもなります。

もちろんしっかりとした緻密な計算でゴシック体を使って高級感を損なうことなく演出することも可能ですが、配色だったり文字間だったり、全体のバランスを
みて使わないといけないのでデザイン初心者の方には相当難しいテクニックです。

筆記体

フォントは本当に大事!書体で魅せるデザインにする方法を解説!4

筆記体は「伝統的・著名的・幻想的・歴史的」といったイメージがあります。
よく著名人のサインや神話やファンタジーなどを題材にした映画で使われている書体ですね!

伝記もののデザインや単純にオシャレなイメージを与えたい時には重宝します。

反対にデメリットとしては特に日本人には英語の筆記体に慣れていないため、可読性がすごく悪いです。
デザインの一部として使用するのは全然OKですが、読ませる箇所に筆記体は読まれにくいですね。

手書き書体

フォントは本当に大事!書体で魅せるデザインにする方法を解説!5

手書き書体は「親しみやすい・メモ・感情がある」といったイメージです。
先ほどの筆記体と手書き感は同じなんですが、可読性が高いのが違う点です。

言語に限らず、毎日必ず一回は手書きで書く事は誰でもあるので、親しみやすく選ぶフォントによっては文字に感情が乗せやすいですね。
例えばまる文字で書いたら「女性的・かわいい」といった印象やガリガリっと直角で書いたような文字であれば「強い・攻撃的」な印象を出す事ができます。

ゴシック体に比べてクセがあるので、相性が良いので合わせて使う事が多いです。
ロゴとかタイトルとかは手書き書体で、細かい説明の部分はゴシック体みたいな感じですね!

装飾書体

フォントは本当に大事!書体で魅せるデザインにする方法を解説!6

装飾書体は「デザイン・装飾」といったイメージがあります。
名前そのままなのですが、文字自体に装飾が施されていますので文字をデザインパーツのひとつとして使います。

ロゴデザインで社名とかによく一部分だけ手を加えてたりしているのもこの区分けでは装飾書体ですね!
アルファベットの穴が空いている部分や点などを少し変えているものが印象的にさせますね!

デザインにおけるフォントのルール

ここまで各フォントのイメージをご紹介してきましたが、じゃあそれに沿って作っていけばええんやね!って思ったそこのアナタ!
まだデザインに取り掛かるには早いですよ!

実はデザインにおけるフォントのルールというかセオリーがあります。
そこをちゃんとしていないと言葉は悪いですが素人っぽいデザインになって伝えたい事が伝わりません!

また、あくまでセオリーなのでデザインに慣れてきたら目を引くためにあえてセオリーを無視して違和感を与えるのもOKです!

https://twitter.com/hama_paz/status/1296595703163006976?s=20

同じフォントでまとめよう

上記にもある通り書体にはそれぞれイメージがあります。
人は文字を見る時にまず形として認識してから文字として認識します。

その文字として認識する際に書体のイメージも情報として処理されますので、たくさん使い過ぎるとそこで渋滞を起こしてしまいます。
渋滞が起きると読むために意識と時間を要しますので、いわゆる「見にくい文字」として認識されます。
NG例
フォントは本当に大事!書体で魅せるデザインにする方法を解説!7
OK例
フォントは本当に大事!書体で魅せるデザインにする方法を解説!7

見にくい文字があると読みたいと思いますか?

なので書体のイメージの情報の処理をスムーズに行えるよう同じ書体でまとめる事が大事になってきます。
サイトデザインやポスターのデザインなどで変わりますが、大体使う書体は1〜2種類程で、多くても3種類にしておきましょう!

どゆこと?って思われたら街中の看板や映画のポスターなんかを注意して見るとこのセオリーで作られてますね!
特に広告バナーを作られる場合は押されないと意味が無いのでこの部分は気をつけないとですね!

太さや大きさや色などで優劣をつけよう

書体の種類を同じにすることで統一感と見やすさは確保できたかと思います。
全て同じ大きさや色にしていると、単調で文章を読まないといけなくなりますよね?
なので、内容を認識するのに時間を要してしまいます。

そうすると読むという作業が入るので、めんどくさいと感じて読まなくなってしまいますよね?

太さや大きさ、色など変化をつけて文章に緩急をつけてあげるとリズムが出来ますので、読む方も読みやすくなります。

NG例
フォントは本当に大事!書体で魅せるデザインにする方法を解説!8

OK例
フォントは本当に大事!書体で魅せるデザインにする方法を解説!9

有名企業のフォント例

ここで、参考までに有名な企業がどういったフォントを使用しているか見てみましょう!

Apple

フォントは本当に大事!書体で魅せるデザインにする方法を解説!10

https://www.apple.com/jp/

Google

フォントは本当に大事!書体で魅せるデザインにする方法を解説!11
https://www.google.com/

GUCCI

フォントは本当に大事!書体で魅せるデザインにする方法を解説!12
https://www.gucci.com/jp/ja/

MercedesBenz

フォントは本当に大事!書体で魅せるデザインにする方法を解説!13
https://www.mercedes-benz.co.jp/

こうして見ると、世界を牽引しているIT企業はシンプルなゴシック体を使用していて、ラグジュアリーなハイエンドブランドは明朝体で高級感を演出していますね!

おすすめのフォントサイト

大体のフォントの使い方がわかったところでじゃあ、フォントはどこで手に入れたらいいのさ!?と思うはずです。

そこでいくつかフォントを扱っているサイトをご紹介します!

Adobe Font

フォントは本当に大事!書体で魅せるデザインにする方法を解説!14
実はAdobeさんソフトの他にフォントも扱っているんです!
日本語ではモリサワと提携しているので、有名なフォントやデザイン性のあるフォントも多数取り揃えています。
Adobe製品を使用しているのであれば、使用したいフォントを選んでアクティベートのボタンを押すだけで即座に使う事ができるところがポイントですね!

Adobe fontはこちら

モリサワ

フォントは本当に大事!書体で魅せるデザインにする方法を解説!15

先ほどちらっと触れたモリサワですが、日本語フォントの最大手の会社です。
以前はAdobeと同じ買い切りタイプの販売形態を取っておりましたが、今はサブスクリプション制になっています。
なので、契約すれば有名フォントが使い放題なんです!

もちろん有償サービスだけあってフォントの数とクオリティは群を抜いています!
デザインをするならチェックしておくべきサイトですね!

モリサワフォントはこちら

DaFont

フォントは本当に大事!書体で魅せるデザインにする方法を解説!16

こちらは海外のサイトになるのですが、フリーフォントを扱っているサイトです!
海外サイトなので日本語フォントはありませんが、英字フォントの数がかなりあるのであなたが探していたフォントも見つかるかも?

フリーなのでダウンロードは無料なのですが、フォントによっては商用で使う時にはクリエイティブ・コモン(©️マークの事です)の表記が必要だったりしますので、
使う際には注意しましょう!

DaFontはこちら

フォント選びのコツのまとめ

いかがでしたか?
フォント選びのコツを以下にまとめました。

  • フォントには連想するイメージがあるので把握しよう
  • 複数のフォントを使いすぎないようにしよう
  • 文字の大きさや色を変えて緩急をつけよう
  • フォントサイトを活用してみよう

広告やポスターは、本ではないのでいかに目に止まるか・早く内容を伝えられるかにかかってきます。
それがデザインというものですね!

適当に選んでいたら見向きもされない悲しい結果に終わってしまいますので、フォントの特徴を掴んで魅せるデザインを作っちゃってください!

はまやん
それでは良いFontライフを!
Twitterやってるのでフォローしておくんなまし!