ノンデザイナーによる、タイポグラフィ再考察っ

ノンデザイナーによる、
タイポグラフィ再考察っ

私たちの街にあふれているありとあらゆるデザインされたものたち。その多くのデザインは文字や文章による情報との組み合わせによってデザインが成立していることにしばしば気がつく。その文字からくるイメージとシンクロし、デザインの完成を私たちは体感しているとも言えるのではないだろうかーっ!!!、、、んっがんんっ!!!!!

タイポグラフィの役割

先のページで学んだ概念をふまえて、具体的にWEB上でのタイポグラフィの役割を見てゆきましょう。

タイポグラフィによって情報を伝える方法は、

「文字を見せる」と「文字を読ませる」

この2つに大別されるといえます。

タイポグラフィのキモ

文字を見せる

タイポグラフィには、サイズ、カラー、フォント、ウェイト(文字の太さ)など、デザインすべき要素が数多く含まれていますよね。 たとえば、線の太いゴシック体は男性的な印象を与えますし、逆に線の細い明朝体は女性的な印象を与える。たとえ同じ文言を用いたとしても伝えられるイメージは千差万別となります。ここが、キモですよね!すごくわくわくしてきます!ワクワクテカテカ!

このような「見せる文字」は、しばしばキャッチコピーやロゴテキストに用いられ、ブランドイメージを伝えるための重要な役割を担ってきました。 これらの要素をうまく組み合わせることが、デザインクオリティを鋭くさせるとともに、しいてはブランドイメージを向上させることに繋がってゆくのです。

文字を読ませる

イメージを伝える「見せる文字」とは反対に、本文や脚注などの文章に用いられる「読ませる文字」は、情報を正確に伝える必要があるため、可読性・視認性に優れていなければなりませんよね。 WEBデザインでは、DTPとの違いとして、OSが出力するデバイスフォントを使います。これらのフォントはカーニング(文字詰め)などによる可読性の調整こそ難しいのですが、CSSを用いた簡単な指定だけでも、文章の読みやすさを大幅にアップすることが可能です。「読ませる文字」は、情報の受け取りやすさに直接影響しますので、それはすなわち、ユーザビリティ・アクセシビリティに配慮することと同義なのです。

「見せる文字」なのか、それとも「読ませる文字」なのか、それぞれのタイポグラフィの役割を考え、最適なデザインをすることは、WEBデザイナーにとって必要不可欠なスキルといえるのです。では、具体的にどんなタイポグラフィをデザインすればよいのでしょうか?

もちろんデザインには正解はありませんので、タイポグラフィのルールとも言えるセオリーがいくつか存在します。先ずはWEBデザイナーが必ず身に付けたい、基本的なTipsを。

クオリティを上げる基本的な5ヶ条

文字を見せる場合にも、文字を読ませる場合にも使える大切なテクニックです。タイポグラフィのセオリーはこの他にも数多く存在しますが、先ずは代表的な例。

1. 文字間を詰める
漢字、カタカナ、ひらがな、アルファベットなど、全ての文字はそれぞれの左右に異なる空白を持っています。そのため、グラフィックソフトでテキストを打ち込んだだけでは、文字間の空白がバラバラなため、乱雑な印象を与えてしまいます。このような場合は「文字詰め(カーニング)」を行い、それぞれの空白を調整しましょう。 たとえば、「ビスケット」という文言の場合、「ッ」の左右や「ト」の左が大きく空いているため、これらを調整すると整った印象を与えることができます。
2. 大きさ・位置を揃える
同じフォント・同じ種類のテキストでも、文字の種類によって大きさや位置は大きく変わってきます。一般的には、漢字はひらがな・カタカナよりも大きく、逆にアルファベットはひらがな・カタカナよりも小さいとされています。特に和文と欧文で違ったフォントを用いる「混植」を行う場合、それぞれの大きさ・位置がバラバラにならないように、バランスを整えるよう意識しましょう。 欧文のサイズを大きくする他に、「!」のような「約物」と呼ばれる記号のバランスもしっかり整えます。
3. 動きを持たせる
文字を揃えるテクニックとは反対に、大きさや位置を不揃いにして動きを出すことによって、特定の情報を強調する方法があります。例えば、「円」や「年・月・日」などといった単位を表す文字については、サイズを小さくすることで、より重要な情報である「数値」の部分を強調することができますね。おなじく「を」や「から」といった助詞となる文字を小さくする方法も、情報の意味を強調する有効な手法として、広く用いられています。
4. 文字を変形させる
文字の縦横比を変えることで、本来持っていた印象を大きく変える。たとえば、「長体」と呼ばれる横幅を狭くした文字はすっきりとした印象を与え、反対に「平体」と呼ばれる縦幅を狭くした文字はどっしりとした印象を与えることができます。これらのテクニックは文字の印象を変えるだけでなく、限られたスペースに多くの情報を掲載するためにも有効です。また、「斜体」と呼ばれる文字を傾ける手法も、スタイリッシュな印象を与えるためしばしば用いられているのを見かけますよね。
5. 行間と行長を調整する
複数行にわたる文章については、行間と行長を調整することが、文章の読みやすさを大きく左右します。一般的に、行間については150〜190%の値が読みやすいとされ、行長については最長で30〜40文字、最短で13〜15文字程度が読みやすいとされています。これらの基準値は、サイズやフォントといった様々な条件によって最適な値が変わるため、状況に応じた判断が必要となるでしょう。たとえば行長が長い場合は行間を広くし、行長が短い場合は行間を狭くすると読みやすくなります。

このセオリーをふまえることで、WEBデザインのクオリティは一気に向上します。WEBデザイナーのプロとアマチュアの違いは、ここにあると言っても過言ではありません。むしろ、たったこれだけのセオリーを意識するだけで、一定以上のクオリティを保ったタイポグラフィをデザインをすることが可能といえるでしょう。

さあ!タイポだタイポだ!レッツラゴ--!