新人デザイナー必見!タイポグラフィーについて

1000px-Typography

はじめに

「タイポグラフィ」とは、すごく簡単に言うと、「文字によるデザイン」のことです。
WEBサイトを閲覧していて、「文字を読まない」ということはほぼありません。
ポスターなどのあらゆる印刷物に書いてある文字も、ただ並べられているだけでなく、伝えたい情報を意識して配置されています。

文字によるデザイン=タイポグラフィーは、Webサイトや印刷物にとって、無くてはならない役割を担っているのです。
「WEBデザインの95%はタイポグラフィである」と言われるほど、特にWEBサイトにとっては重要な要素ですので、ぜひ覚えておいてください。


基本的なルール

タイポグラフィーは、デザインの基本中の基本ですが、
とても奥が深いものです。
優れたタイポグラフィーは、相手に伝える事の出来る情報量とその濃度に大きな差が出ます。

これから紹介するいくつかの基本的なルールを守っていれば、
デザイナーはもちろんですが、たとえ非デザイナーの方でも、
一味違う、美しいタイポグラフィーデザインが出来ると思います。

様々な場面で役に立ちますので、ぜひ覚えておきましょう!

1.目的を意識する

タイポグラフィによって情報を伝える方法は大きく分けて、「文字を見せる」「文字を読ませる」という2種類があります。
また、見せる文字、読ませる文字の中でも、階層を意識して、使い分けを行う事が大切です。
左図のように、全く同じではどこに注目すればよいか分かりにくいため、右図のように、役割を意識して、大きさなどの「差」をつけます。
タイポグラフィーについて.001

1-1.文字を見せる

文字にはサイズ、カラー、フォント、ウェイト(文字の太さ)など、デザインすべき要素が数多く含まれています。
たとえ同じ文言でもデザインによって伝えられるイメージは千差万別です。

このような「見せる文字」は、しばしばキャッチコピーやロゴに用いられ、イメージを伝えるための重要な役割を担ってきました。
これらの要素の組み合わせを意識することによって、より目的に合わせたイメージを強く訴求することが可能です。
タイポグラフィーについて.006

1-2.文字を読ませる

読ませる文字は、読みやすさ(視認性・可読性・判読性)が重要です。
読みにくいテキストは一瞬で人の興味を失わせます。
文字の役割として「読ませる文字」であると決めた場合には、サイズ、コントラスト、文字間、行間を意識し、また、スタンダードな形のフォントを用いるなど、なるべく読みやすい文章を心掛けましょう。

タイポグラフィーについて.007

2.文章を揃える

基本的には要素は揃えて配置します。
パッと見た際に一本の線が意識できるように、要素が配置されていると良いとされています。
(あえて揃えていないデザインもありますが、扱いが難しいです。)

タイポグラフィーについて.008

一本の線で文字を揃えるといっても揃え方は必ずしも垂直な線でなければならないわけではありません。
基準になる線が意識できるデザインなら、自然と注目すべき点に目が向けられます。
以下にいくつかの例を紹介します。

タイポグラフィーについて.009

3.文字間・大きさを調整する

どんな文章の場合もただ打ち込む(ベタ組)だけでなく、
字間、行間や大きさの調整などを行うと、
より訴求力の高いものになります。
(私もあまり上手ではないので気を付けてます…)

タイポグラフィーについて.010

3-1.文字間の調整(カーニング)

文字の間隔を詰めたり離したり調整することを「カーニング」といいます。
このカーニングは地味な作業ですが、文字をレイアウトする上で、とっても重要なので、意識して行ってみてください。

上の文章は打ち込んだだけで何の調整もしていません。(ベタ組)
しかし、そのままでは文字同士の間隔がバラバラに見えます。
真ん中の文章では間隔が広いと感じた箇所に色を付けてみました。
色のついた部分を調整したものが一番下の文章です。
一番上の文章よりも、自然に見えると思います。

タイポグラフィーについて.011

前後の文字との間隔が大きくなる文字は大体決まっています。
ひらがな、カタカナなどは、漢字よりも間隔が広くなるので、調整が必要です。
とくに「く」「し」などの縦に長いものは、前後の間隔が長くなります。
また、「、」「。」などの記号は、更に大きく広がります。
漢字でも「日」などの長方形に近いものは、前後の間隔が広がります。
また、組み合わせによって感覚が広く見えたり、狭く見えてしまう場合もあります。
すべての文字を覚えることは大変ですが、ある程度目安を覚えておくと効率的です。

タイポグラフィーについて.012

3-2.文字サイズの調整

数字ではなく、目で見て違和感がないように調整しましょう。
例えば、同じフォントサイズに設定していても文字によっては、サイズが異なって見える場合があります。
そんな時はどちらかに合わせて調整したほうが統一感のある見え方になります。

タイポグラフィーについて.013

3-3.言葉の役割を強調する

先ほどのページでは、文字の揃え方について説明しました。
揃えるだけではなく、意味合いに合わせて調整することも効果的です。
タイプグラフィーを行う際には、言葉の役割や意味を意識して、文字同士に差をつけること(コントラスト)が大切なので、意識してみて下さい。

タイポグラフィーについて.014

3-4.フォントを意識する

フォントはその特徴によりそれぞれ別のイメージを与えます。
1文字ずつ比較すると小さな差異に見えるかもしれませんが、文字がまとまって文章になった場合、その差異によって、同じ文章でも受けるイメージがかなり異なります。

タイポグラフィーについて.015

フォントは文字毎に「ふところ」「重心」など細かく調整されている為、勝手に潰したり、伸ばしたり、傾けたりなど、字の形を変えてしまうことは避けましょう。
微妙にバランスが崩れて、一気に安っぽい印象になってしまいます。

「ふところ」とは画と画が構成している、内側のとじた空間のことです。
ふところが広い書体はおおらかな印象、狭い書体はひきしまった印象を与えます。

「重心」は文字のバランスの中心がどのあたりであるかを表しています。
高めなら緊張感や気品のあるイメージになり、低めなら安定感や親しみやすい印象になります。

参考「モリサワ フォント用語集」
http://www.morisawa.co.jp/culture/dictionary/1968


リンク集

最後にフォントについてよく分かるサイトをまとめました。
ぜひ参考にしてみてください。

基礎編

「タイポグラフィ入門 – 10のやってはいけない事 –」
http://blog.btrax.com/jp/2014/07/01/type1/

「フォントの基本的な選び方」
http://www.ar-ch.org/mt/archives/2012/04/post-6.html

「Webデザイナーなら知っておきたいWebタイポグラフィの基本」
https://www.ficc.jp/blog/web-typography-basic/

「基本的だけど大切なタイポグラフィのシンプルな14のルール」
coliss.com/articles/build-websites/operation/design/simple-rules-for-good-typography.html
「Webデザイナー(私)によるタイポグラフィーレイアウトの注意書き」
http://webdesignrecipes.com/typography-layout-system/

応用編

「PhotoShopVIP カテゴリ:タイポグラフィー」
http://photoshopvip.net/archives/category/inspiration/typography

「Neverまとめ Tag検索:タイポグラフィー」
matome.naver.jp/topic/1Lv5A

「I Love Typography」(英語サイト)
ilovetypography.com/

「Webフォントを利用した大きなタイポグラフィ」
https://blogs.adobe.com/creativestation/web-list-trend-04

雑学編

「亮月製作所」
ryougetsu.net/

「文字の食卓」
www.mojisyoku.jp/top.html

「モリサワ 文字の手帖」
www.morisawa.co.jp/culture/

「LETS フォントストーリー」
www.lets-member.jp/about/feature/

「フォント千夜一夜物語 」
www.jagat.or.jp/past_archives/story/1476.html

こちらのページでも、文字についてよく分かるサイト紹介しています!

文字関連のサイトまとめ
http://saikirin.com/mojisite/


以上でした!
タイポグラフィーは本当に奥が深くて、難しいです。
でもきちんと意識してみると、作業がはかどるし、楽しくなると思います!
皆さんがデザインする際など、少しでも何かの参考になれば嬉しいです!
それではー!!!

Tweet about this on TwitterShare on FacebookShare on Google+