【完全版】デザイナーが教えるフォント選びのコツ【VTuberスタイル11月号限定コラム】

この記事は【VTuberスタイル11月号】ご購入者様限定のコラムです

本記事は、株式会社アプリスタイル様が発刊する【VTuberスタイル11月号】をご購入された方に限定公開しているコラムです。
本記事の内容を転載することおよびURLの共有・公開を固く禁じます。

誌面では与えたい印象や文章から逆算してフォントを選ぶコツをご紹介しました。
この記事ではさらに発展させて「デザインに合ったフォントの選び方」を解説していきます。

contents

おさらい

1.デザインテイストに合わせよう!

自分が表現したい「世界観」に合ったフォントを選びが大切です。
書体のシルエットやデザインとの相性を見て検討すると良いですよ◎

2.テキストの役割によって使い分けよう!

短いキーワードを印象付けたいなら「インパクトのあるフォント」じっくり読んで欲しい長文には「シンプルで読みやすいフォント」など、目的によって使い分けてみましょう。

デザインに合ったフォントの選び方

まずはフォントの特徴をよく観察してみましょう!
以下の項目を見ていくと、「自分の表現したい世界観」や「シーン」とフォントの相性が見えてくると思います。

書体の種類(ゴシック体、明朝体、筆書体…etc)

書体の種類はデザインとの相性や読みやすさに影響が大きい項目です!
書体はおおまかに分類すると「ゴシック体」「明朝体」「筆書体」「デザイン書体」の4種類に分かれます。

ゴシック体…文字の線の太さがほぼ均一でウロコ(三角形の山)がほぼない書体
明朝体…横線に対して縦線が太く、ウロコ(三角形の山)がある書体
筆書体…筆で書いた文字を再現した書体
デザイン書体…手書き風書体やポップ体など、個別の特徴を持つ書体

書体の種類と特徴

どんな時にどのフォントが向いてるの?

知識として理解できても、具体的にどのようなシーンでどの書体が使われているかイメージしづらいと思います。
なので、書体毎に「よく使われる・推奨される場面」を簡単にまとめてみました!

ゴシック体…見出し、本文、目立たせたいテキストなど
明朝体…新聞やビジネス文書のような長文を読ませるテキストなど
筆書体…和の雰囲気を表現したい場面、迫力感を持たせたいテキスト、ロゴなど
デザイン書体…見出し、キーワード、目立たせたいテキストなど
ポイント

書体の持つ特徴得意としているシーンもフォントを選ぶ際の判断材料になります!

シルエット(角があるか、丸みを帯びているかetc)

同じゴシック体でも「角ゴシック体」と「丸ゴシック体」があるように、フォントによってシルエットが異なります。
明朝体であればウロコやはね・はらいの形など、そのフォントが持つ「シルエット」をよく見てみましょう。

角ゴシック体と丸ゴシック体の違い
明朝体のはね・はらいのフォントによる形の違い
ポイント

角があるとスタイリッシュで洗練された印象を与えやすいです。逆に丸みを帯びていると柔らかい印象を与えやすいです。

ポイント

ウロコやはね・はらいが特徴的であるほど、遠目に見た時の視認性があまりよくありません直線に近いシルエットの方が遠目で見た場合にも読みやすくなっています

身近な例だと、道路標識や駅の案内がゴシック体なのも遠くから見た時に見やすいからです。

フォントの太さ

同じフォントでも太さが変わるだけで向いている場面や与える印象が変わります。
細字はより柔らかく繊細な印象を与え、太字は力強くインパクトのある印象を与えやすいです。

フォントの太さによる印象の違い
ポイント

見出しや目立たせたいキーワードは太字、本文や注釈のようなじっくり読んでもらうテキストは中~細字にするとバランスがとれます!

デザインジャンル毎の書体傾向

上記のポイントを踏まえた上で、ここから先は具体的なデザインジャンル・シーン別に相性の良い傾向の書体をまとめてみました!

※ここでご紹介するのはあくまで「一般的な傾向」なので、「絶対にこのジャンルはこうでなければならない!」ということではありません。
フォント選びに困ってしまったときに、自分が表現したいジャンルから逆索引するようなイメージで参考にしてみて下さいね。

かわいい・キュート系

かわいさを表現したいときは「ゴシック体」「デザイン書体」から選ぶと合わせやすいです◎

特に太めの「ポップ体」や「丸ゴシック体」は柔らかい雰囲気が出せるのでかわいい系のデザインとの相性抜群です!

かわいい系のデザインに合わせやすいフォント
かわいい系のデザインにおすすめのフォント


コーポレート・ロゴ(ラウンド):無料 / 商用利用可能
視認性と使い勝手のよい丸ゴシック体フォント

mini-わくわく:無料 / 商用利用可能
ぷっくりした丸いフォルムがかわいい手書き風フォント

うずらフォント:無料 / 商用利用可能
丸いフォルムの手書き感があるフォント
手書きっぽさを表現したいときに

パンダベーカリー:有料 / 商用利用可能
手書き感のある太字のゴシック系フォントです
太字で視認性が良いのでサムネなどにも使いやすいです

あめちゃんポップ まる:有料 / 商用利用可能
シルエットが丸いぽってりめのポップ体フォント


※本記事の内容は2022年10月28日時点の情報となり、フォントの有料/無料および利用規約は変更される可能性があります。利用の際は必ず配布元のサイトにて最新の利用規約をご確認ください。

かっこいい・クール・SF系

かっこいい系のデザインは、「角ゴシック体」「デザイン書体」から選ぶとクールな印象を与えやすいです。
その中でも特に力強さを表現したいときは太めのフォント、よりスタイリッシュな印象にしたい時は細めのフォントがおすすめです。


また、長体(縦に長いフォント)のフォントは近未来・SFっぽいクールさを表現できるので個人的によく使っています。

かっこいい系のデザインに合わせやすいフォント
かっこいい系のデザインにおすすめのフォント


コーポレート・ロゴ:無料 / 商用利用可能
企業ロゴのようなシンプルでモダンな角ゴシック体フォント
ロゴはもちろんのこと、見出しやサムネにもおすすめです

M PLUS 1p:無料 / 商用利用可能
シンプルで見やすい角ゴシック体フォント
ウェイト(太さ)が7種類用意されているのでデザインに合わせて太さを選べるのがとても良いです!

Noto Sans JP:無料 / 商用利用可能
収録文字数6,934文字のシンプルで汎用性あるゴシック体フォント
PCのデフォルトフォントしかない方はまずこのフォントを入れれば間違いないです

スマートフォントUI:無料 / 商用利用可能
細身でスタイリッシュなゴシック体フォント
かっこいいデザインにするならぜひおすすめしたいフォントです

ガガガガ:無料(有料版あり) / 商用利用可能
太字の斜体ゴシック系フォント
インパクトを与えたいシーンにおすすめです

UD新ゴ コンデンス80:有料 / 商用利用可能
視認性が良い長体のフォント
ロゴやサムネなどクールに決めたいときに使い勝手が良いフォントです

ヒラギノ角ゴシック体:有料 / 商用利用可能
言わずと知れたシンプルで使い勝手の良い角ゴシック体フォント
ウェイト(太さ)のバリエーションが豊富なので本文から見出しまで多彩な用途で使用できます


※本記事の内容は2022年10月28日時点の情報となり、フォントの有料/無料および利用規約は変更される可能性があります。利用の際は必ず配布元のサイトにて最新の利用規約をご確認ください。

上品フォーマル系

上品・フォーマルなデザインにしたい時は、書体を問わず癖の強くないシンプルなフォントから選ぶとしっかりまとまります◎


より繊細な印象を与えたい場合は、線が細めのフォントを使うと華奢な上品さを表現できます。
また、フォント同士の間隔(カーニング)を広めにとると、ゆったりした余裕が生まれます。

上品・フォーマル系のデザインに合わせやすいフォント
上品・フォーマル系のデザインにおすすめのフォント


ほのか新アンティーク角:無料 / 商用利用可能
適度なウェイト(太さ)で見やすいアンティーク体のフォント

アプリ明朝:無料 / 商用利用可能
ウロコが丸く横線が太めの明朝体のフォント
明朝体ではあるものの現代的で柔らかいシルエットなので幅広い場面で使いやすいです

サブリナ:無料(有料版あり) / 製品版のみ商用利用可能
エレガントで市ネマティックなカタカナ単体フォント

きずなドロップス:無料(有料版あり) / 製品版のみ商用利用可能
品のあるゴシック系のデザインにおすすめのデザインフォント

凸版文久明朝 R:有料 / 商用利用可能
Macの標準フォントとして使われている明朝体のフォント
特に縦組での読みやすさに特化している本文向きなフォントです

Trajan Sans:有料 / 商用利用可能
上品で品のあるシルエットの欧文フォントです
英字で上品な雰囲気を出したいときにおすすめ


※本記事の内容は2022年10月28日時点の情報となり、フォントの有料/無料および利用規約は変更される可能性があります。利用の際は必ず配布元のサイトにて最新の利用規約をご確認ください。

カジュアル・にぎやか系

カジュアル・にぎやかなデザインを表現したい時は「デザイン書体」がおすすめです!
「ゴシック体」や「明朝体」などのオーソドックスなフォントだけでは味気ない時、特徴的なデザイン書体を使うと画面をにぎやかに見せることができます。

フォント同士の間隔(カーニング)を見づらくならない程度に狭めると「情報・要素が詰まっている」ように見えるため、より画面がにぎやかな印象になります。

カジュアル・にぎやか系のデザインに合わせやすいフォント
カジュアル・にぎやか系のデザインにおすすめのフォント

ぱぐのみんちょ:無料(有料版あり) / 製品版のみ商用利用可能
温かみ・丸みのあるゆるい雰囲気の明朝体フォント
1文字1文字特徴的なので画面がにぎやかになること間違いなし!

バナナスリップ:無料 / 商用利用可能
しっかりしたシルエットでありながらかわいらしい雰囲気のあるフォント
堅苦しくなくインパクトを与えられるのでカジュアルなシーンで大活躍します

こまどり:無料(有料版あり) / 製品版のみ商用利用可能
小さくてかわいい小鳥のようなシルエットのフォント
カジュアル使いしやすいので重宝しています

森と湖の丸明朝:無料(有料版あり) / 製品版のみ商用利用可能
カジュアルさのある太めの明朝体フォント
ちょっとぽってりしたシルエットなので画面を

ボコスカモンスター:無料(有料版あり) / 製品版のみ商用利用可能
バトルもののオノマトペのようなシルエットのフォント

※本記事の内容は2022年10月28日時点の情報となり、フォントの有料/無料および利用規約は変更される可能性があります。利用の際は必ず配布元のサイトにて最新の利用規約をご確認ください。

和風・エスニック系

エスニック系のデザインは、表現したい国の文化に合ったフォント選びをすると「その国らしさ」が表現できます。
和風なら「明朝体」「筆書体」、場合によっては「隷書体」や「行書体」を使っても雰囲気がでるのでおすすめです!(ただし見づらくならない程度に…)

中華風や洋風などの場合は「デザイン書体」がぴったりです!
困ったときは「●●風」などで調べるとシーンや文化に合ったフォントが沢山見つかります。

和風・エスニック系のデザインに合わせやすいフォント
和風・エスニック系のデザインにおすすめのフォント

青柳疎石フォント:無料 / 商用利用可能
青柳衡山様がフォント化した毛筆フォント
筆特有のかすれやはらいが美しく和風のデザインにぴったりです

まにまに丸ゴチック:無料(有料版あり) / 商用利用可能
レトロチックなかな書体で、和ポップ向きなフォント

うつくし明朝体オールド:無料 / 商用利用可能
レトロでおしゃれな雰囲気の明朝体フォント

藍原筆文字楷書:無料(有料版あり) / 商用利用可能 ※利用条件にSNSでのシェア必須
手書き文字が元になった楷書体のフォント
教科書のような読みやすさがあるので毛筆よりもカジュアルに和な雰囲気を表現できます

※本記事の内容は2022年10月28日時点の情報となり、フォントの有料/無料および利用規約は変更される可能性があります。利用の際は必ず配布元のサイトにて最新の利用規約をご確認ください。

まとめ

ここまで「デザインに合ったフォントの選び方」をご紹介させて頂きました。

フォントはあくまでデザインを構成する「1つの要素」でしかありませんが、1つ1つの要素にこだわることでより良いデザインを作ることができます。

フォント選びに困ったときは、この記事を参考に自分の作りたいデザインに合ったフォントを見つけてみて下さい。

この記事を書いた人

清涼院ラムネ

バーチャルデザイン研究所所属のデザイナー。
商用利用可能なフリー素材サイト「ラムネマテリアル」を運営しています。Twitterでは週3~4ペースで新規素材を更新中!

この記事は【VTuberスタイル11月号】ご購入者様限定のコラムです

本記事は、株式会社アプリスタイル様が発刊する【VTuberスタイル11月号】をご購入された方に限定公開しているコラムです。
本記事の内容を転載することおよびURLの共有・公開を固く禁じます。