タイポグラフィとは？読みやすく美しい文字にする基本テクニック15選
タイポグラフィとは、文章を読みやすく見せるデザインの手法と、文字で1つのデザインを作る手法の2つの意味合いを持っています。
デザインでは、タイポグラフィが重要な役割を担います。例えば、高級ブランドなどの素敵な写真がメインの広告やポスターであっても、そこには必ず文字が存在しますよね。どんなに綺麗な写真や目を引くキャッチコピーを使っていても、文字が読みにくかったり美しくなければ全て台無しになってしまいます。
本記事では、デザインを学んでいく上で重要なタイポグラフィについて、初心者向けに分かりやすく解説するとともに、すぐ真似できるタイポグラフィの基本テクニックを20個紹介していきますので、ぜひ参考にしてみてください。
＜目次＞
1. タイポグラフィとは
タイポグラフィとは、もともと活版印刷の技術でしたが、時代の変化とともに今では下記2つのような意味合いで使われています。
- 読みやすいフォント（文字の種類）で適切な位置に文字をレイアウトしていくこと
- 文字で1つのデザインを作ること
私たちが普段何気なく見ている本やWebサイトも、全てタイポグラフィによってスラスラと読めるように考えられて文字が配置されており、広告で自然と目に入ってくる文字も計算されたタイポグラフィによるものなのです。
タイポグラフィと聞くと、美しくデザイン性の高いものがイメージされるかもしれませんが、違和感や引っかかりがなくスラスラと文章を読めるタイポグラフィも、デザイナーの中では高く評価されています。
文字を読みやすくする
当サイトではゴシック体を基本に使い、本文と見出しでフォントサイズや色を変えたりしています。サイト内の文字を意識してご覧いただくとお気づきになるかと思いますが、文字の読みやすさとはフォントの種類やサイズだけでなく、文字の行間や見出しの配置、余白も大きく影響してくるのです。
例えば、見出しの間に余白が一切なく、1ページが全て文字で埋まった論文のようなWebサイトは、とても読みづらいですよね。人が読みやすいと感じるWebサイトは全て考え抜かれたタイポグラフィで構成されており、逆に読みづらいと感じるサイトはタイポグラフィをきちんと意識できていない場合が多いでしょう。
美しくレイアウトする
美しいレイアウトと言われるとなんだかとても難しそうに聞こえますが、文字のレイアウトにはいくつかの基本パターンがあります。
例えば、雑誌の表紙なら、カタログなら、Webサイトならと、それぞれに定番のレイアウトがあります。どのような場所で、どのような用途で見られるのかに応じて、美しいレイアウトの定番パターンがあるのです。
最初のうちは、基本形のレイアウトを覚え、真似することから始めてみると、美しいレイアウトが少しずつ習得できることでしょう。
文字をデザインとして扱う
最初にタイポグラフィには2つの意味合いがあるとお伝えしましたが、文字を読みやすくするだけでなく文字を1つのデザインとして創作するのもタイポグラフィの1つです。
「文字をデザインする」と言われてもピンとこない方は、文字を使ったロゴや道路標識をイメージしてみてください。
読みやすい文字レイアウトのタイポグラフィと違い、文字をデザインするタイポグラフィは本業のデザイナーでも難しいものなので、まずは多くのデザインを見ることから始めていきましょう。そしてデザインはただ見るだけでなく、フォントや色使い、どの部分に惹かれたのかを分析して少しずつ自分のものにしていくのです。
2. タイポグラフィの基本テクニック
それでは、タイポグラフィックの基本テクニックについて紹介していきます。タイポグラフィは奥が深いので、学ばなければならないことがたくさんあります。
まずは、「やってはいけないこととは何か？」「真似すべきことは何か？」を抑えましょう。こちらで紹介する基本テクニックを参考にしてみてください。
Webデザインにおけるタイポグラフィ
タイポグラフィは、どのような媒体のデザインにおいても重要ですが、Webデザインの場合は、できることが限られます。見ているユーザーの閲覧環境によって、指定したフォントが表示できないこともあるからです。もし、Webサイトで、タイポグラフィにこだわりたい場合は、画像データにして掲載するなども考慮しましょう。このようなWebサイトのグラフィックのデザインは、Webデザイナーが行うことも、グラフィックデザイナーが行うこともあります。
ただし、SEOの観点からは画像よりもWebフォントを使用することが増えてきています。Webデザイン製作の際には、様々な視点を意識しながらのデザインが必要です。
フォント種類は多くて3つまで
多くのフォントが混在するデザインは統一感がなく、パッと見たときに違和感を感じる可能性が高いです。また、統一感がないと見栄えが悪いだけでなく、読者が読むのにとても疲れてしまいます。そのため、基本的に1つのデザインの中に、いろいろなフォントを詰め込むことはおすすめしません。
もし、どうしても複数のフォントを使ってデザインしたいのであれば、基本のフォントは1種類にし、アクセントとして別のフォントを使用するなど、バランスを調整しましょう。
多くのフォントを使って美しいデザインにすることも可能ですが、レイアウトの難易度があがるので、まずは1〜2種類のフォントでデザインしてみることをおすすめします。
フォントの組み合わせには相性がある
フォントには相性の良い組み合わせと、相性の悪い組み合わせが存在します。
相性の良いフォントの組み合わせはプロのデザイナーでも選ぶのが難しいのですが、初心者はまず下記2点に気をつけていきましょう。
- 似ているフォントを混ぜて使わない
- 同じフォントファミリを使う
似ているフォントを使うと、読者は似ているのに何か違うと違和感を感じ、文章を読みながら混乱してしまいます。一般的に同様のデザインで制作されたフォントは、同じフォントファミリに属しています。フォントの組み合わせに自信のない初心者は、まず同じフォントファミリで合わせてみましょう。
それ以外には「素敵だな」と感じるデザインを見つけたら、フォントの組み合わせを調べてみるのもスキルアップの近道です。
フォントサイズやウェイトを調整する
全てが同じフォントサイズだと、どこが重要なのかパッと見た時にわかりません。そのため、見出しやキャッチコピーなど、目立たせたい部分は大きめのフォントサイズを使用しましょう。
重要部分を目立たせる方法は、サイズを大きくする以外にも、ウェイト（文字の太さ）を太くしたり、下線を引くなどの方法もあります。
それとは対照的に、重要度の低い部分はフォントサイズをあえて小さくするのも1つのテクニックです。そうすることで、他の部分とのメリハリがつき、スッキリと美しいタイポグラフィになります。
文字を小さくする以外にも色を少し薄くする方法もあります。補足事項など、重要ではないけれど掲載しておきたい情報に使用すると良いでしょう。
フォントイメージを覚える
フォントには様々な種類がありますが、まずは、「明朝体・ゴシック体・丸ゴシック体」の3つを抑えておきましょう。
- 明朝体：高級感、上品、真面目
- ゴシック体：カジュアル、目立つ、親近感
- 丸ゴシック体：可愛らしい、優しい
女性向けで大人っぽさを出したい時は明朝体、とにかく目立たせたい時はゴシック体、優しさを出したい時は丸ゴシック体といったイメージです。
ポップ体や手書き風、アニメ風などのやや特殊なフォントは、プロでも扱いが難しいものです。ポスターや広告などのキャッチコピーとして使用するのは良いですが、人に読ませたい長めの文章には不向きなのも覚えておきましょう。
色が与える印象をおさえ、適切な配色を行う
普段何気なく選んでいる色ですが、どの色がどのような印象を与えるのかを理解した上で、イメージに合った色を選ぶようにしましょう。
- 白：純粋、清潔、平和
- 黒：高級感、重圧感、威厳
- グレー：落ち着き、大人、スタイリッシュ
- 赤：情熱、興奮、積極的
- 青：知的、爽快感、誠実
- 緑：リラックス、健康、信頼
- 黄：元気、カジュアル、注意
- ピンク：可愛い、愛情、優しさ
- 紫：上品、妖艶、神秘
- オレンジ：活発、明るさ、親しみ
色を使い過ぎない
デザイン初心者がやりがちなのが、色の使い過ぎです。多数の色が使われていると読者の視点はあちこちへ行ってしまい、どこが重要なのかが伝わりません。
独創的な配色で、すばらしいデザインが生み出されることもありますが、基本的には3色程度（ベースカラー・アクセントカラー・サブカラー）でデザインをすると、まとまりがよいでしょう。
先述したとおり、フォントの種類、サイズ、ウェイトで強弱をつけることも意識すれば、複数の色を使わなくても、イメージを伝えることができるはずです。
過剰な装飾はしない
ここまでフォントの種類や色を使い過ぎないよう説明してきましたが、過度な装飾もおすすめしません。
なぜなら、過度な装飾は文章を読むときの妨げになるからです。
派手なデザインや個性的なフォントも、集中して読んでもらいたい文章には不向きなので、使う時はタイトルや見出し部分のみに使うようにしましょう。
美しいタイポグラフィとは、デザイン性よりも読みやすさが第一です。
色や枠を使ってエリア分け
読みやすいタイポグラフィのためには過度な色使いや装飾をしないほうが良いと言いますが、とても重要でどうしても伝えたい特別な部分は、装飾を行うこともあります
そのようなときは、文字に背景色を付けたり、枠を使って特別なエリアを作ることで、自然な形に目立たせることもできます。
例えば、引用部分はどこからどこまでが引用なのかすぐわかるように背景をグレーにすることも多いですし、ネットショッピングサイトの「購入ボタン」や「申込み」の部分は、目立つように色がついているのが良い例です。
余白を作る
初心者は空いている余白を「スペースが空いてるから埋めなければ！」と必死になくそうとしがちです。しかし、洗礼された美しいデザインを思い浮かべてみてください。すると、余白の重要性に気づくことができるでしょう。
余白とはただ単にスペースが空いているわけでなく、重要な部分に目を向けるため、そして読者に読みやすいと感じてもらうために、あえて空けているものなのです。
タイポグラフィにおいても、文字そのものだけではなく、余白のとり方が重要になってきます。
反復で統一感を出す
反復とは同じデザインを繰り返すことで、ページや作品の統一感を出す1つのテクニックです。タイポグラフィにおいて反復するものは、主にフォント・色・サイズ・配置などで、同じデザインが繰り返されることによりユーザーの読みやすさがアップします。
また、反復は何度も同じものを繰り返すことで読者の中にイメージが作られ、リズム感良く読むことができるので、速読性も期待できると言えるでしょう。当ページも見出しと本文を繰り返しており、文章の構成を分かりやすくしています。
このような文字組みも、タイポグラフィの一環と言えます。
関連性の高い情報は近づける
関連性の高い情報を近づけることで、読みやすいデザインが実現できます。
例えば、飲食店のメニュー表を思い浮かべてみてください。
メニューにはメイン料理・サイドメニュー・ドリンク・デザートなど、それぞれジャンルごとにまとめられていますよね。また商品名は、必ず写真のすぐ近くに配置されているはずです。美しいタイポグラフィのためには余白や行間を意識しましょうとお伝えましたが、関連性の高い情報は近づけることで、見やすいデザインになります。
見栄えが良いからと言って、写真とメニューの文字の間に余白を取りすぎると、「この写真は、どの料理？」とわかりにくくなってしまいます。関連性の高い情報は近づけるように気をつけましょう。
文字をイメージしてから書く
ここまでたくさんのテクニックを紹介してきましたが、どのフォントを使い、どのような装飾をすればいいのかわからないという方も多いでしょう。そんな時は文字のデザインをする前に、伝えたいイメージをハッキリとさせておきます。イメージは、文字を声に出して読んでみると分かりやすいです。
例えば「安いよー」は大きく目立つイメージ、「カッコかわいい大人女子」は高級感に女性らしさもプラス、「夢をかなえよう」は力強く。先にイメージができてしまえば後は具現化するだけなので、ぐっとデザインがしやすくなります。
漢字を使い過ぎず、あえて平仮名を使う
難しい漢字や堅苦しい漢字を、あえて平仮名にして表現することで、やわらかい印象を与え、わかりやすくなることがあります。漢字をひらがなに変換することは「ひらく」といいます。特に文字が多い場合は、あえて漢字を平仮名に「ひらく」ことで、やわらかく読みやすいデザインが完成します。
文字の一部を変形させてみる
少し上級のテクニックとして、自分で文字を作るという手法もあります。とはいえ、作字に挑戦しようと思っても何からやればいいかわからないという方は、まず既存のフォントを少し変化させてみましょう。
例えば「花」という漢字にイラストの花を足してみたり、「守」という漢字のうかんむり部分を別のフォントのものと入れ替えてみたりなどです。作字をゼロから始めようとすると初心者はつまづきやすいので、このように既存のものに手を加えることから始めてみてはいかがでしょうか。
3. まとめ
タイポグラフィはとても奥が深く、ここにあげたテクニック以外にも多数のテクニックが存在します。最初は、装飾をし過ぎず、読みやすいデザインを心がけることから始まるといえます。まずは、読者のことを考え、読みやすい・伝わりやすいデザインを意識しましょう。
そして、たくさんのデザインを見て、好きだと思うデザインがあれば「どうしてこのデザインが良いと感じたのか」「どんなフォントを使っていて、色の組み合わせは？」など、ここであげたテクニックに基づいて、分析してみてはいかがでしょうか。
