「なんとなく」のフォント選びから卒業！バナー広告やスライドに使えるフォントの基本を事例付きで紹介

この記事は最終更新日から約2年が経過しています。

皆さんはバナー広告やスライドを作るときに「フォント」を意識したことはありますか？

色んなフォントを試した上で選んでいる方もいれば、特に意識せずに適当に選んでいる方もいるのではないでしょうか。

フォントを「なんとなく」で決めてしまうのは非常にもったいないことです。なぜならフォントの持つ印象や特性、機能を生かした使い方をすることで、あなたの制作物をもっと良くすることができるからです。

例えば下のバナー広告をご覧ください。シンプルで細めのフォントを使用しています。

このバナー広告のテキストは一切変えずに、フォントのみを変更してみましょう。

いかがでしょうか。驚くことにフォントを変えるだけでテキストの印象が大きく変わったように感じませんか？フォントの使い方次第ではテキストに感情や個性を宿すことができるのです。またパッと見たときのテキストの視認性や可読性にも大きな影響を及ぼします。

本記事のゴールは「なんとなく」のフォント選びを卒業し、目的と用途に合わせて適切なフォント選びができるようになることです。実際の事例を交えながら、普段の業務からバナー広告まで幅広く使える知識やコツを解説していきます。

フォントに関する用語や知識
フォントの分類と選び方
- 和文フォント
- 欧文フォント
フォント&テキストの扱い方のNG例
フォントを増やす方法
フォントを使ったデータを共有するときの注意点
まとめ

フォントに関する用語や知識

まず最初に「フォントとは何か？」というところから、専門的な用語や知識まで解説していきます。

「書体」と「フォント」の違い

混同されがちな「書体」と「フォント」ですが、厳密には意味が異なります。「書体」は字の形状や特徴、大きさが統一された文字の集まりのことで、「フォント」は書体を表現するための手段を指します。（例：活版印刷用の金属活字、パソコン上で使用する書体をデジタル化したデータ）

ウエイト

「Weight（重さ）」が語源のフォントの太さを表す呼称です。フォントの種類によって太さの表現が異なり、例えば「Noto Sans Japanese」の場合は「Thin」〜「Black」、「ヒラギノ角ゴ」の場合は「W1」〜「W6」といったように表現されています。

テキストを強調したりインパクトを出したいときは太めのウエイト、シンプルでスマートなイメージを出したいときは細いウエイトにすると効果的です。本文などの小さい文字の場合は太過ぎても細過ぎても読みにくいため、やや細め〜やや太めくらいのウエイトにするとベターです。

文字詰め（カーニング・トラッキング）

文字詰めとは文字と文字の間隔を調整することを指し、２文字間の間隔を個別に整えることを「カーニング」、テキスト全体に一括で間隔を設定することを「トラッキング」と呼びます。フォントや文字の種類によって間隔の空き具合が異なるため、余白がまばらだったり隙間が気になるときは文字詰めを行うと良いでしょう。

カーニングの機能が備わっているソフトはごく限られているため、一般的にはトラッキングで調整する機会が多いと思います。文字の間隔が狭いと窮屈で緊張感のある印象、間隔が広いとゆったりした風通しの良い印象を与えることができます。

ジャンプ率

「ジャンプ率を高くする」はテキストサイズの比率の差を大きくするという意味です。テキストにメリハリや躍動感をつけたいときに効果的です。

Q数

テキストの大きさを表す単位で「級数」とも書きます。写植の時代に生まれた単位であり、１Q＝0.25mmで実寸の計算がしやすくDTPや印刷業界で活用されてきました。現在はテキストの単位といえば「pt（ポイント）」が代表的ですが、「文字を大きくする」の意味で「Q数を上げる」「Q上げ」といった表現が使われることがあります。

システムフォント

システムフォントはパソコンに標準インストールされているフォントのことです。メニュー画面やファイル名、ダイアログボックスなどのテキストを表示する際に使われます。システムフォントはOSによって異なり、現在Windows10の日本語システムフォントは「Yu Gothic UI（游ゴシック）」、Macは「ヒラギノ角ゴ」が採用されています。

デバイスフォント

パソコンなどの各端末にインストールされているフォントのことを「デバイスフォント」と呼びます。システムフォントもデバイスフォントの一部です。

「TrueType」と「OpenType」

フォントのファイル形式はTrueType（.ttf／.ttc）とOpenType（.otf）の２種類が主流です。

TrueTypeは歴史が古く動作環境が広いことが特徴で、Windowsでは標準的に使われています。同じフォントであっても大抵WindowsとMac用に別々にファイルが作られているため、互換性はありません。OpenTypeよりも安価で手に入れることができます。

OpenTypeはTrueTypeと比べて収録文字数が多く、文字詰めや文字制御などの機能性に優れていることが特徴です。１つのフォントファイルでWindowsとMac間で互換性を持ちます。デザインやDTP制作に携わる方やMacをお使いの方はOpenTypeがおすすめですが、バージョンの古いアプリケーションや一部のワープロソフトはOpenType非対応のケースがあります。心配であればフォントを導入する前に動作環境を調べておくと安心です。

Webフォント

「Webフォント」はWebサーバーやクラウド上に置かれたフォントを読み込んで使用する仕組みを指します。主にWebサイトやブログなどのブラウザ上のテキストに使われており、ソースコードにWebフォントを読み込む記述を追加することで利用できます。主なメリットはユーザー側の閲覧環境や端末の種類による影響を受けずに、バリエーションに富んだフォントを表示できることです。デメリットはフォントの読み込みに若干のタイムラグが発生することです。

フォントの分類と選び方

フォントの大分類として日本語用の「和文フォント」と、欧米諸国の言語用の「欧文フォント」があります。次の項目では代表的なフォントや選ぶ際のポイントを解説していきます。

和文フォント

「和文フォント」は大きく分けて「明朝体」「ゴシック体」「デザイン書体」に分類されます。

明朝体

明朝体は情緒的で上品な印象を持つフォントです。ストロークの端に「うろこ」や「ひげ」などがついているのが特徴で、線の太さに強弱があり曲線的で繊細なフォルムをしています。

小さく印刷しても可読性が高いことから小説やエッセイ、新聞などの本文に使われています。語りかけるようなメッセージや詩、ストーリー調の文章とも相性が良いでしょう。高級で格式高いイメージを与えたいときにも適しています。上品で優雅な印象もあるため女性向けの商材にもよく使われています。

ゴシック体（角ゴシック体・丸ゴシック体）

ゴシック体は機能的でカジュアルな印象を持つフォントです。明朝体と違って「うろこ」や「ひげ」などが無く、線の太さがほぼ均一なのが特徴です。

遠目から見ても視認性が高いことから、駅の標識やプレゼンテーション用のスライドなどに使われています。仕様書や業務マニュアルなど機能の説明や情報を整理する際にも適しているでしょう。また親しみやすくフランクな印象を出したければ、明朝体よりもゴシック体が向いています。

ゴシック体をさらに分類すると「角ゴシック体」と「丸ゴシック体」の２つに分かれます。丸ゴシック体は先端が丸みを帯びているのが特徴です。初心者への手引きや子ども向けの商材など優しく柔らかい雰囲気にしたいときに適しています。

ウエイトが太めの角ゴシック体は無骨で力強い印象があり、男性向けの商材によく使われています。

デザイン書体

「デザイン書体」の解釈は様々ですが、ここでは「明朝体やゴシック体といった各カテゴリに分類しにくく、個性的で創意工夫が凝らされたフォント」として紹介します。手書き風のフォントもデザイン書体に含まれます。

デザイン書体はインパクトが強いため、良くも悪くも全体の印象をガラっと変えることができます。例えばゲームのUIにカクカクしたデジタル感のあるフォントを使ったり、ラーメン屋のポスターに和風の毛筆フォントを使うなど、適切な場所に使用することでデザインを手っ取り早く魅力的に見せることができます。その一方で公的な資料や本文、手堅く真面目なイメージを与えたいときには向きません。使いどころが難しいため、慣れないうちは無理に使おうとせずにゴシック体か明朝体を選んでおきましょう。

その他、和文フォントの中には古くから伝わる毛筆書きのフォントも存在します。行書体、楷書体、隷書体はその一例です。

欧文フォント

欧文フォントにも軽く触れておきます。

代表的なものに「セリフ（ローマン）」「サンセリフ」「スクリプト」の３種類があります。「セリフ」はストロークの端にある装飾を指し、明朝体でいうところの「うろこ」や「ひげ」にあたります。「サン」はフランス語で「無い」という意味で、「サンセリフ」はセリフのない書体を指します。「スクリプト」はいわゆる筆記体です。

英単語や数字は和文フォントよりも欧文フォントの方が相性が良いため、組み合わせて使うと見た目がしっくりきます。

フォント&テキストの扱い方のNG例

テキストを読んでもらうバナー広告やスライドにおいて、フォントの扱い方は肝心です。ここからは応用編として、ついやってしまいがちなNG例を画像を交えながら解説していきます。

可読性や視認性が悪い

細めのフォントや癖のあるフォントは可読性が低くなりがちです。特に一部のデザイン書体は個性が強い分癖も強いため、文字が識別できなかったり誤読される恐れがあります。読ませたいテキストには読みやすいフォントを選ぶことが鉄則です。

フォントの種類が多すぎる

１つのスペースに様々なフォントを混在させるとまとまりがなくなります。使用フォントは多くても３種類程度に留めると統一感を保つことができます。フォントの種類が少なく単調に感じるときはウエイトやジャンプ率で変化をつけてみるのも１つの手です。

例外として、あえて様々なフォントを使ってキャラクター性や視覚的な面白さを表現したデザインも存在します。

フォントの特性や機能と異なる使い方をしている

例えばプレゼンテーション用のスライドに細い明朝体を使ったり、お礼状などのメッセージに太いゴシック体を使うことは適切とは言えません。それぞれのフォントの特性や機能を生かした使い方を心がけてください。

ターゲットや商材との相性が良くない

フォント選びはターゲットや商材との相性も重要です。子どもを対象にした広告で明朝体を使ったり、外資系の広告に丸ゴシック体を使うなど、フォントが持つ印象とターゲットに与えたい印象が食い違わないように気をつけてください。素材やデザインと組み合わせたときにマッチしているかどうかも大切です。

行間や文字詰めが不適切

流し込みの長文テキストは行間が狭いと読みにくく感じます。テキストサイズを100%とすると、だいたい行間を50〜80%程空けると読みやすくなります。見出しなどの１、２行程度のテキストであれば、必ずしも行間を広く取る必要はありません。

テキストの配置や改行にも気を配る

テキストが四角に散らばっていたり、揃え方がバラバラだったりすると、目線が定まらず情報を瞬時に理解しにくくなります。読む順番や情報の優先順位を意識した配置を心がけましょう。

デザインやレイアウトの知識の１つに「Zの法則」と「Fの法則」があります。横書きのテキストは左から右に読んでいくため、左上を起点として右下に向かっていくような配置にすると自然な流れで読ませることができます。

また見出しはなるべく単語の途中で改行しないようにしましょう。テキストが長いときはテキストボックスの横幅を狭くすると読みやすくなります。

バナー広告やスライドのクオリティを上げたい方は以下の記事もお読みいただくと参考になります。

【事例付き】バナー広告のデザインがイケてないときに見直したい4つの基本

【こんな配色はNG】いつもの業務からバナー広告まで使える配色の基本を事例付きで紹介

フォントを増やす方法

ここまで読んだところで「もっと色々なフォントを試してみたい」「今持っているフォントだけだと物足りない」と思った方もいるのではないでしょうか。そんな方に向けてフォントを増やす手段をご紹介します。

Google Fonts

Googleが提供するWebフォントサービスです。ダウンロード可能なのでデバイスフォントとしても使用することができます。和文フォントの取り扱いは少なめですが、「Noto Sans Japanese」や「はんなり明朝」などの魅力的で使いやすいフォントを無料で使用することができます。

フリーフォント

個性を出したいなら無料で入手できるフリーフォントもオススメです。デメリットは収録文字数が少ないフォントが多く、あらゆる文章をカバーしきれないことです。またフリーフォントは広告などの商用目的での使用を禁じているケースもありますので、必ずご自身で利用規約に目を通してから使うようにしてください。

【個人利用可】筆者オススメのフリーフォント提供サイト

フォントな

FONT FREE　※商用利用NGのフォントもあるため注意

サブスクリプション方式のフォントサービス

デザインやフォントにこだわりたい方なら、モリサワやFontworks、Adobeが提供している有料のサブスクリプション方式のサービスも視野に入れてみてください。それなりに値は張りますが、高品質で多種多様なフォントを利用することができます。

モリサワ

デバイスフォント：モリサワパスポート

Webフォント：TypeSqure

Fontworks

デバイスフォント：フォントワークスLETS,mojimo

Webフォント：FONTPLUS

Adobe Fonts

Adobe Creative Cloudの契約者であれば追加料金なしで使用できます。

デバイスフォントだけでなくWebフォントとしても利用可能。

※ただし、受注制作側のAdobeライセンスを使ってクライアントのサイトにWebフォントを適用することはできません。個人サイトなら個人、法人サイトなら法人側が取得したAdobeライセンスを使用する必要があります。

フォントを使ったデータを共有するときの注意点

例えば新たにインストールした「ヒラギノ角ゴ」を使ってPowerPointのスライドを作成し、PPTX形式のファイルを先方に送ったとします。このファイルを先方側のパソコンで開くと、フォントが別のものに置き換わり正しく表示されないといった不具合が生じます。

この現象を防ぐには先方側のパソコンにも「ヒラギノ角ゴ」をインストールするか、最初から双方のパソコンに入っているフォントを使ってスライドを作成する必要があります。PowerPointに限らず、別のパソコンでデータの再編集をするときは注意してください。

JPEGやPDFなどの画像形式にして共有する分には問題ありません。

余談ですが、Illustratorなどのベクター形式のソフトにはフォントをアウトライン化する機能が備わっています。アウトライン化とはテキストの輪郭を縁どって図形化することです。これによりテキストの再編集はできなくなるものの、フォントがインストールされていないパソコン環境でデータを開いても正しい形でフォントを表示させることができます。