バナー制作において、キャッチコピーなどのテキスト情報を工夫し、どのようにデザインするのかを考えることはとても重要ですが、「今ひとつ野暮ったさが抜けない……」「テキストがのっぺりしていてインパクトに欠ける……」といったように、見せ方に頭を悩ませた経験はないでしょうか？そんなあなたに役立つのがタイポグラフィの知識です。
「タイポグラフィ」と聞くと文字を一からデザインして作ること、いわゆる「作字」を連想される方もいるかもしれませんが、実際はもっと広い意味としてとらえられています。
タイポグラフィの知識は、重要な要素を目立たせてインパクトをつけたり、テキストの視認性や可読性を上げたいときにも活用することができます。アーティスティックなグラフィックデザインのみならず、バナーやファーストビュー制作にも十分に取り入れることができます。
本記事ではタイポグラフィの概要からバナー制作に使えるタイポグラフィのポイントまでご紹介していきます。
フォントに関する基礎的な知識を知りたい方は、まずはこちらの記事からお読みください。
目次
タイポグラフィとは？
「タイポグラフィ」とは「文字の可読性や視認性を保ち、整えて美しく見せるための手法」全般を指します。たとえば文字間や行間などのスペース、書式やフォント、レイアウトや組み合わせ方などが含まれます。
元をたどると活版印刷（※）が主力だった時代に使われていた印刷業界の用語ですが、近代においてはWebフォントの使用が主流であるため、Webフォントも含めて使われるようになりました。
※活版印刷：金属や木製の活字を組み合わせた活版にインキをつけて印刷する古典的な印刷方法。
まず前提として、Webフォントにはトラッキング（文字と文字の間のスペース）やベースラインなどの設定が個々に定められており、加えて日本では漢字、ひらがな、カタカナ、数字、ローマ字などの様々な文字が混在して使われています。
実はこのようなWebフォントや文字固有の違いにより、テキストをベタ打ちしたときに綺麗にそろわなかったり、まとまりがない印象になってしまうことがあるのです。
タイポグラフィは、文字まわりを細かく整えることでこれらの問題を解消し、視認性や可読性をUPさせる効果があります。さらに高度になると文字に動きをつけたり加工を施すことで、ユーザーを惹きつける華やかなデザインにすることができます。
【レベル別】タイポグラフィのポイント
フォント選びから文字の加工まで、バナー制作にも取り入れやすいタイポグラフィのコツを難易度のやさしい順番に解説していきます。それでは早速レベル0から見ていきましょう。
※全て架空のバナーです。
※バナーの下部にフォント名とフォントの提供元を書いていますが、現時点でダウンロード可能なものであり、今後使用できなくなる可能性があります。
レベル0：前提としてフォント選びが超重要
まず最も重要なのが、フォント選びです。
上のバナーを見ていただくと、シンプルな細めのゴシック体から、レトロな雰囲気のあるデザイン書体に差し替えたことで、コピーの印象が大きく変化したことがわかります。
ただし、キャッチコピーが読めないレベルでフォントの癖が強いと、広告のメッセージそのものが伝わらなくなってしまうため、なるべく癖が少なめで読みやすいフォントを選ぶようにしましょう。
レベル1：ジャンプ率をつける
ジャンプ率とはテキストサイズの比率の差のことを指します。優先的に見せたいものは大きく、あまり情報としては重要ではない助詞や単位（「％」「円」など）を小さくするなどしてメリハリをつけることができます。
例えば目立たせたい単語を2倍サイズに大きくしてみるなど、ジャンプ率をつけるときは思い切り差をつけることが大事です。
読ませたい文章や長文の場合は、あまりサイズに強弱をつけない方がスッと頭に入ってくると思います。テキスト情報に優先度をつけたいとき、特に目立たせたい単語があるときにはこの手法を活用してみてください。
文字を強調する方法は「ジャンプ率をつける」以外にも様々な手段があります。
以下の記事も文字を強調したいときに役立つのでぜひお読みください。
レベル2：とにかくそろえる
「上下左右に透明な線が配置されている」と想像しながら、とにかくそろえることを意識しましょう。
ベースラインをそろえる
コピーはベースライン（文字の下部を通過する仮想的な線）がそろっていると綺麗に見えます。フォントやサイズが一緒でも上下が微妙にずれていることがあるので、下に透明な線が敷かれていることを意識しながら整えていきましょう。特に括弧や句読点、「？」「！」などの記号や小文字などはズレやすいので注意です。
両端や周囲の余白をそろえる
複数行の文章の端をそろえたり、余白を均等にすることでまとまり感が出て綺麗に見えます。
以下の記事内の「整列」の項目も合わせてお読みいただくと参考になります。
レベル3：文字間・行間を極める
文字間（トラッキング・カーニング）
文字と文字のスペースを均等にします。注意したいのが設定上は均等であっても、文字の種類や形状によってはスペースが広く（または狭く）見える場合が多々あることです。タイポグラフィにおいては設定よりも実際に目視したときのバランス感覚を優先することが大切になってきます。
たとえば括弧などの記号、仮名文字などは文字自体の幅が漢字と比べてコンパクトなので、並べたときに相対的に余白が広く見えやすいです。
行間
テキストのサイズを100%基準とした場合、文章が2、3行くらいのときは行間が20%程度でも読みにくくないのですが、文章が長いときは行間を50〜80%程度に調整すると良いでしょう。
文字間や行間が空きすぎると間延びした印象になり、狭すぎると緊迫感が出ます。この2点はどちらか片方ができていればOKではなく1つのセットとして考え、両方のバランスを見ながら整えていきましょう。
下のバナーを見ていただくとわかるように、文字間や行間を丁寧に整えるだけでコピーがスッと読みやすくなります。
レベル4：複数のフォントを組み合わせる
複数のフォントを組み合わせることでさらにリッチなデザインにすることができます。例えば英単語や数字は和文フォントよりも欧文フォントの方が相性が良いケースが多いです。
明朝体とゴシック体を組み合わせたり、特定の文字だけ癖が強いときに似たような別のフォントに代用すると読みやすくすることができます。たとえば下のバナーは和の雰囲気を強めるために「紫陽花（あじさい）」や「鎌倉」だけ明朝体に変更しています。
レベル5：動きをつける
レベル2でお伝えした「とにかくそろえる」ことを理解している前提で、今度はあえて調和を破ることにもチャレンジしてみましょう。全体を大きくななめに配置してみたり、すべての文字を垂直並行に並べずに少しだけ傾けてみるなど、ちょっとした動きをつけることで躍動感が出ます。
文章全体を湾曲させてみたり、文字を上下にずらすなどしてバランスよく配置するのもよく見る手法です。
レベル6：文字を加工する
ここまでくると少し難易度は高くなりますが、フォントの一部を加工すると一気に洗練された印象になります。たとえばまわりに影をつけたり、文字を縁取りにするなどの手法は比較的簡単に取り入れることができます。
一部の色を変えてみたり、少しだけ形状を変化させるなどの加工も効果的です。ひと手間かかりますが、オリジナリティのあるフォントを作ることができます。
タイポグラフィの参考として、個人的におすすめなのが本の装丁です。陳列された数多くの書籍の中でお客さんに手に取ってもらう必要があるため、タイポグラフィにこだわった魅力的なデザインが多く、フォントの使い方やデザインの見せ方としても非常に勉強になります。今度本屋さんに立ち寄った際にはぜひ本の装丁に注目してみてください。
アナグラムの社員が執筆した「BtoBマーケティング“打ち手”大全（インプレス社）」。
「大全」のタイポグラフィが斬新です。
まとめ
ご紹介した内容は「Adobe Photoshop」のような専門的なツールの方がやりやすいのですが、Canvaのような初心者向けのツールでも文字の加工を行うことができます。以下の記事も参考になりますのでぜひお読みください。
タイポグラフィはこだわりがいのある奥深い世界ですが、独創性が強すぎてコピーが読めないバナーではクリック率が悪化してしまうかもしれません。獲得を目的としたバナーにおいては「ユーザーに伝えること」が最も大切だということは忘れないでくださいね。
また早いサイクルでテストしていく運用型広告の現場においては、更新性が高く複製して作りやすいデザインが求められるケースもあります。制作物の目的やニーズに応じて、タイポグラフィの知識を上手に取り入れていきたいですね。
Kaori Naito
マーケティングや運用広告に興味を持ち、2021年２月よりアナグラムに入社。ディスプレイ広告やLP制作などを担当。“数字を追えるデザイナー”になるべく奮闘中。前職は観光土産やキャラクターグッズ、求人広告のデザイナー。散歩しながらレトロな喫茶店を探すのが趣味。
