0から分かるタイポグラフィの基本+デザインテクニック37

タイポグラフィデザインの基本

今回は以下の4つの項目について、まとめて解説していきたいと思います。

1. タイポグラフィとは?

現在ではタイポグラフィ(typography)の定義はやや曖昧になっており、主に以下の2通りの意味で使われています。

その1:読みやすく、美しく文字を配置すること

タイポグラフィの意味その1

1つめにタイポグラフィは「適切なフォント種類を選び、美しく文字を配置すること」という意味で使われます。

もう少し短く言い換えると「文字をきれいに、読みやすく見せる」設定のことです。厳格なルールが定義されているわけではありませんが、守るべき基本的なポイントはいくつかあります。詳しくは、この記事の2番目のセクションで解説します。

その2:文字をデザイン要素として用いる手法

タイポグラフィーの意味

2つめに、タイポグラフィは「文字を華やかに、アートのようにデザインする手法」を指します。

例えば、下の画像は米国版Googleで「Typography(タイポグラフィ)」と画像検索したときの結果です。

タイポグラフィーをgoogleで検索すると…

あたかも文字をアートのように、魅力的に華やかに表現しているのが分かるかと思います。
最近では「タイポグラフィ」というと、このようなアーティスティックな文字の表現を指すことの方が多いのではないかと思います。このようなタイポグラフィを作るテクニックは3番目のセクションで解説します。
なお、Typographyの画像検索結果にはユニークなデザインのタイポグラフィがたくさんあって面白いのでぜひ一度見てみてください。

2. タイポグラフィの基本ルール23

ここからは文字を美しく見せるタイポグラフィの基本ルールを30個紹介します。これらの項目を押さえるだけでブログにせよ、プレゼンにせよ、冊子やポスターにせよ、グッと読みやすく魅力的なものになるはずです。

2-1. 関連性の高いテキスト同士は近づける

例えば、こちらはAppleのAppleMusicのページです。①Albumという文字、②アルバム名、③その下のリンクテキスト の3つが近い距離に配置されています。

そのため、3つのテキストが1つのアルバムに関する内容であることがひと目見てわかります。

2-2. 関連性の低いものは離す

逆に関連性の低いもの同士は離して配置することで、見る人が情報を探しやすくなります。

上の画像の例のように文字が並ぶページであっても、適切な距離を保つようにレイアウトをすれば、線を使わなくてもスッキリとした見やすいデザインにすることが可能なのです。

2-3. 行のはじまりを揃えて線を作る

行のはじまりを揃える

縦に線を作るように、行頭を揃えることで、文章は美しく読みやすいものになります。

「複数のモノを縦(もしくは横)に配置するときには線を作るように並べる」、これはタイポグラフィに限らず、デザインの基本です。

2-4. 重要な部分ほど大きなフォントサイズに

文字を強調する

重要な部分はフォントサイズを変えたり、下線を引いたりすることで強調します。部分的に差をつけることでメリハリをつけることができます。

2-5. 重要度の低い部分はサイズを小さくor色を薄く

重要性の低い部分はサイズを小さく

重要性の低いテキストはサイズを小さくしたり、色を薄くします。

白の背景には「グレイ」や「半透明の黒」を、濃い背景には半透明の白を使うのがおすすめです。これにより、補足的な情報であることを見る人に伝えることができます。

2-6. 使用するフォント種類を制限する

使用するフォント種類を制限

使用するフォント数を増やしすぎると、統一感が無くなり、散漫なデザインになってしまいます。

とくに、明朝体とゴシック体を同じページで使うと、全体のイメージにズレが生じてしまいます。以下の解説を参考に、明朝体orゴシック体のどちらかを中心に使うようにしましょう。

2-7. 和や洗練された雰囲気を出したいとき=明朝体

茶ッカソン

明朝体とは文字にハネ(飾り)のあるフォントです。な雰囲気や上品さ、大人っぽさを出したいときには明朝体を使うと効果的です。

ただし、1文字1文字にハネがある分、長文で明朝体を使うと、ややクドい(しつこい)見た目となってしまいます。アイキャッチ部分には明朝体を使い、本文にはゴシック体を使う、というのも良いかと思います。

2-8. 先進感や今どき感を出したいとき=ゴシック体

ゴシック体はハネのない文字です。

ゴシック体

無駄のないスマートなデザインにしたいときに使います。

なお、ウェブでは基本的にはゴシック体が使われる傾向があります。そのため、多くの人が読み慣れています。迷ったらゴシック体を使うようにしましょう。

2-9. 行間を適切に

行間は「読みやすさ」を大きく左右するタイポグラフィの重要な要素です。

行間が狭いと読みにくい

行間が狭い文章は、窮屈で非常に読みづらいものになります。

行間が広すぎても読みにくい

一方で行間を広げすぎると間延びした印象を与えることになります。また、上から下へと視線をこまめに動かす必要があるため、目が疲れやすくなります。

適切な行間

デザインにもよりますが、このくらいが適切な行間でしょう。

ウェブデザインの場合、line-heightの値を1.5〜2.0の間にするのがおすすめです。詳しくはこちらの記事を読んでみてください。

2-10. ゆったりした印象にしたいときは字間を広げる

時間がゆっくりと流れるような柔らかい印象を出したいときには、字間を広げるのが効果的です。

ただし、字間を広げるのはタイトルやキャッチコピーだけにするのがおすすめです。

2-11. 長文では字間を広げすぎない

長文で字間を広げすぎない

長文で字間を広げると、かなり読みづらいものになってしまいます。これはそれぞれの行のカタマリ感が弱まってしまうからです(縦書きにも見えそうですよね)。読ませたい文章の字間は広げすぎないようにしましょう。

2-12. 長文は左に寄せる

長文は中央寄せにしない

長文は中央寄せにしないことをおすすめします。改行後の数文字が中央寄せになると非常に読みづらく、さらにカッコ悪くなってしまうからです。

基本的に横書きの長文は左寄せにしましょう。

2-13. 多数の色を使いすぎない

多数の色を使わない

多数の色を使いすぎると、どこが重要な部分なのか分からなくなってしまいます。ウェブの場合、どこかがリンクなのか分からなくなってしまいます。

「リンクは青」と役割を決めたら、同じ役割・同じパターンでで色を使い分けるようにしましょう。

2-14. 部分的に背景色を変えてメリハリをつける

部分的に色を変える

テキストのかたまりを複数並べるときには、メリハリをつけるために一部のテキストに背景色をつけるのも効果的です。

ただし、何種類もの色を使うのは禁物です。「デザインのメインカラーは青」と決めたのであれば、青や薄い青で塗りつぶすようにしましょう。また、テキストのまわりにはある程度の余白を確保するようにしましょう。

2-15. 特別な部分は囲み枠や塗りつぶしで表現

特別な部分はデザインを変える

例えば「引用部分」などは他と明確に分けるために背景色を薄くぬりつぶしたり、枠で囲ったりすると良いでしょう。

2-16. 文字色を背景色と同系統にすると綺麗にまとまる

背景色に同系統色を使うと綺麗に見える

少しテクニック的な話ですが、カラフルなテキストの背景を「同系統色の薄い色」で塗ると鮮やかに、綺麗にまとまります。

ただし、読みやすさを損なわないように、文字と背景でしっかりと色に差をつけましょう。

2-17. 文字のメインカラーは黒に

メインカラーは黒に

カラフルな文字は黒に比べると読みづらくなります。また、その色が明るくなり背景色に近づくほど、読みづらさは増します。

全体の大部分を占めるテキストの色は黒にするのがおすすめです。カラフルなテキストは補足情報などで部分的に使いましょう。

2-18. 集中して読んでもらいたい文にユニークなフォントを使わない

メインテキストにユニークなフォントを使わない

手書き文字や派手な装飾のあるフォントは、メインテキストに使うと多くの人にとってかなり読みづらいものになってしまいます 。

これは多くの人が読み慣れていないので当然ですね。ユニークなフォントはタイトルなどに部分的に使い、集中して読んでもらいたいメインテキストには誰もが読み慣れている普通のフォントを使うようにしましょう。

2-19. カラフルな背景色にのせるフォントは太字に

濃い背景色の上にのせる文字は太字に

背景色をカラフルかつ濃い色にするには、フォントは太字にすると読みやすくなります。

また、太字を使うと「力強さ」や「ポップさ」「かわいらしさ」が出て、カラフルな雰囲気にもマッチするのではないかと思います。

2-20. 長文に影をつけない

長文に影をつけない

メインテキストに影をつけているようなブログをたまに見かけますが、読みづらいのでやめましょう。デザイン的にもスタイリッシュさに欠けます。

テキストに影を使うにしても、タイトルやロゴなどの短文に限定します。

2-21. 適切な改行を空ける、改行しすぎない

改行しすぎない

改行をしすぎると文章のまとまりの無い見た目になってしまいます。

一方で改行の無い文章は、非常に読みづらくなります。

改行は適切に

文章の内容に応じて、見る人の苦にならない程度に改行を入れるようにしましょう。

また、何かを簡潔に伝えたいのであれば、「見出し」や「箇条書き」を活用して、ダラダラとした長文にならないように配慮することが大切です。

2-22. 英語フォントと日本語フォントは似たものにする

Webサイトやブログの場合、英語と日本語で別のフォントを指定することが多いのではないかと思います。

英語フォントと日本語フォントは似たものにする

その場合、英語と日本語のフォントが混じっても違和感がないように、同系統のフォントを選ぶようにしましょう。

2-23. ひらがなが続くときは単語を区別できるように工夫する

これはタイポグラフィから少し話がそれますが、読みやすさを保つための重要なポイントなので触れておきます。ひらがなの言葉が続くときには「どこが単語の区切りなのか」一目見て分かるような工夫をしましょう。

例えば…

  • 悪い例:そういえばおもてなしにはどういう意味があるんだろう
  • 対処1:カギカッコを使う そういえばおもてなしにはどういう意味があるんだろう
  • 対処2:クオテーションを使う そういえばおもてなしにはどういう意味があるんだろう
  • 対処3:句読点を使う そういえばおもてなしにはどういう意味があるんだろう

上記以外にも、ひらがなをカタカナに変えてみたり(ねこ⇒ネコ)、半角スペースを空けたりしても良いでしょう。

3. タイポグラフィのテクニックと作り方のコツ14

タイポグラフィーの意味

さて、ここからはアーティスティックで美しいタイポグラフィ・デザインを作るためのテクニックを紹介していきます。

3-1. 数字をデザイン要素として使う

数字をデザイン要素として使う

タイポグラフィで最もおしゃれに見せやすいのが数字です。このように装飾すれば、全体を華やかに見せるだけでなく、見る人の視線を誘導することができます。

数字を効果的に使う

単純に数字のフォントサイズを大きくして配置するだけでも、メリハリのある美しいデザインになります。

3-2. 現実と融合させる

現実に存在する物を文字として使うのもタイポグラフィの1つの手法です。

現実と融合する

ポイントは、文の内容を表すような物を使うということです。例えばこちらの場合、ライブハウスに置かれていそうなネオンライトを使うことで、LIVE MUSIC感を出しています。

こちらはCOOLのOOの部分をメガネで表現しています。おしゃれで目を引きますね。

3-3. アルファベット1文字をシンボリックに配置

アルファベットには形がシンメトリックで美しいものが多いため、シンボリックに大きくのせるだけでも、とても美しいものとなります。

日本語一文字でも良いのですが、形が複雑なものが多いため、シンボル的に使うのはやや難易度が高いのではないかと思います。太字のアルファベット・フォントがこの表現に向いています。

3-4. 写真の上に文字をのせる

こちらは定番の手法ですね。簡単におしゃれに見せることができるため、多くのWebデザインやグラフィックデザインでこの表現が取り入れられています。

ポイントは文字が背景と同化して見えづらくならないように、しっかりと差のあるフォントカラーを選ぶことです。

3-5. 写真の中に文字を組み込む

上と似ていますが、「文字の一部」を「写真内の物体の輪郭」に沿って消すことで、まるで写真の中に組み込まれているように見せることができます。

最近ではこの表現がトレンドのようで、至るところで見かけるようになりました。

3-6. 写真を文字型にする

写真を文字で切り抜くような表現も見る人の目を引くために効果的です。背景の写真には、一部が隠れても何を表しているか分かるようなダイナミックなものを選びましょう。

関連記事

3-7. 曲線に沿ってレイアウトする

文字のレイアウトを工夫することも表現の1つです。例えば、円に沿ったように文字を並べたり、渦巻きのように文字を並べたり、などですね。

3-8. 手書きフォントで楽しい雰囲気を出す

手書きフォントで楽しい雰囲気を演出

手書きフォントを一部に使うことで、楽しい雰囲気や、アクティブな雰囲気を出すことができます。

3-9. 大胆な大きさにする

思い切って文字を特大サイズにすれば、非常にインパクトのあるデザインになります。シンプルで短い単語に対して用いるようにしましょう。

3-10. 文字で何かの形を描く

文字で形を描く

文字をうまく並べて何かの形を描く、というのもタイポグラフィでよく見かけます。比較的カンタンにアーティスティックに見せることのできる手法です。

3-11. リボンを使う

リボンを使う

リボンの上にテキストをのせれば、それだけでかわいらしく見せることができます。

3-12. 何かの形に沿って文字を並べる

何かの形に沿って文字を並べる

イラストや写真の一部のモノに沿って、文字をレイアウトすれば、文字が印象的に見えるだけでなく、そのモノに対しても目が行きやすくなります。

うまく馴染ませるためのポイントは、フォントカラーをそのモノと同系統の色にすることです。

3-13. イラストの中に文字を組み込む

イラストの中に文字を組み込む

イラストの世界観を文字に吹き込みたければ、イラストの一部に組み込むことも効果的です。

手描きのイラストであれば、合わせて手書きフォントを選ぶようにしましょう。

3-14. 背景に絵の具の塗りつぶしを置く

背景に絵の具の塗りつぶしを置く

こちらもよく見かけるタイポグラフィ表現です。簡単にオシャレに、かっこよく見せることができます。ブラシ素材は「ブラシ 素材」などと検索すれば、たくさん簡単に見つかります。

Photoshopの場合はこちら

4. タイポグラフィをもっと学びたい人におすすめの本

最後にタイポグラフィをもっと学びたい人におすすめの本を1冊だけ紹介しておきます。

タイポグラフィの基本ルール

タイポグラフィの基本ルール

「各フォントの成り立ち」からタイポグラフィの「基礎知識」「フォントの選び方」「文字詰め」まで詳しく解説されている本です。実例がたくさんのっているため、楽しく読み進めていくことができます。
ものすごく内容が濃いので、タイポグラフィの知識はこの1冊で十分なのではないかと思います。この本を読んだらあとは実践あるのみ。

関連記事

以下の記事で美しいタイポグラフィのデザイン例をまとめています。きっとインスピレーションが刺激されるはず。


また、本の装丁デザインは魅力的なタイポグラフィ探しにピッタリです。是非こちらの記事も見てみてください。

サルワカ