タイポグラフィとは?基本ルールと作り方37

https://saruwakakun.com/design/tips/typography2

今回は、デザインの大切な要素であるタイポグラフィについて解説します。主に以下の4つの項目について初心者の方でもわかるようにまとめて行きます。

 

タイポグラフィとは?

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

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

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

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

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

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

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

あたかも文字をアートのように魅力的に華やかさに表現しているのがわかると思います。

最近では、タイポグラフィというと、このようなアーティスティックな文字の表現を指すことの方が多いのではないかと思います。

このようなタイポグラフィを作るテクニックも紹介していく。

https://www.google.com/search?q=typography&gl=us&hl=en&pws=0&site=webhp&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiPy_a7v4DUAhXDi5QKHXV3C5AQ_AUIBigB&biw=1127&bih=680

 

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.先進感や今どき感をだしたいとき=ゴシック体

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

無駄のないスマートなデザインにしたいときに使います。なおWebでは基本的にはゴシック体が使われる傾向があります。そのため多くの人が読み慣れてします。迷ったらゴシック体を使うようにしましょう。

 

2-9.行間を適切に

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

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

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

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

Webデザインの場合、lie-heightの値を1.5から2の間にするのがおすすめ

 

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

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

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

 

2-11.長文では時間を広げ過ぎない

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

 

2-16.文字色を背景色と同系統にするときれいにまとまる

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

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

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

 

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

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

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

 

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

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

・カギカッコを使う

・クオテーションを使う

・句読点を使う

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

 

3.タイプグラフィの作り方 14のコツ

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

 

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

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

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

 

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

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

ポイントは、文の内容を表すようなものを使うという事です。

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

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

 

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

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

日本語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.背景に絵の具の塗りつぶしを置く

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

 

 

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

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

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

各フォントの成り立ちからタイポグラフィの基礎知識、フォントの選び方、文字詰めまで詳しく解説されている本です。

実例がたくさん載っているため楽しく読み進めていくことができます。

ものすごく内容が濃いので、タイポグラフィの知識はこの1冊で十分なのではないかと思います。この本を読んだら後は実践あるのみ!

コメントを残す

メールアドレスが公開されることはありません。