Webサイトを閲覧していて、文字を読まないということは滅多にありません。情報アーキテクチャの先駆者として世界的に有名なInformation Architectsは、「Web Design is 95% Typograpy」という記事で、「Webデザインの95%はタイポグラフィである」と述べています。 私たちの行動は文字によって喚起されます。例えば、オンラインショッピングをするときに、商品のイメージだけで購入することはほとんどないのではないでしょうか。価格をはじめ、特徴や仕様、レビューなど、文字が伝える情報を咀嚼して購買を決定しているはずです。オンラインショップは実店舗とは違い、商品を手にとって確認することができませんから、文字から伝わる情報がより重要性を増すのです。 これらは、タイポグラフィのデザインがWebデザインにとって無くてはならない役割を担っている証拠だと言えるでしょう。
それでは、Webデザイナーがタイポグラフィを用いて最適なコミュニケーションをするためには、どのようにすればよいのでしょうか？
Webタイポグラフィの役割
タイポグラフィによって情報を伝える方法は、「文字を見せる」ことと「文字を読ませる」ことの2つに大別されます。
文字を見せる
タイポグラフィには、サイズ、カラー、フォント、ウェイト（文字の太さ）など、デザインすべき要素が数多く含まれています。 例えば、線の太いゴシック体は男性的な印象を与え、逆に線の細い明朝体は女性的な印象を与えるなど、たとえ同じ文言を用いたとしても伝えられるイメージは千差万別です。
このような「見せる文字」は、しばしばキャッチコピーやロゴテキストに用いられ、ブランドイメージを伝えるための重要な役割を担ってきました。 これらの要素をうまく組み合わせることが、デザインクオリティを研ぎ澄ませ、ひいてはブランドイメージを向上させることに繋がります。
文字を読ませる
イメージを伝える「見せる文字」とは逆に、本文や脚注などの文章に用いられる「読ませる文字」は、情報を正確に伝える必要があるため、可読性・視認性に優れていなければなりません。 WebデザインではDTPとは違い、OSが出力するデバイスフォントを用います。これらのフォントはカーニングなどによる可読性の調整こそ困難ですが、CSSを用いた簡単な指定だけでも、文章の読みやすさを大幅に向上させることが可能です。 このような「読ませる文字」は、情報の受け取りやすさに大きく影響します。それはすなわち、ユーザビリティ・アクセシビリティに配慮することと同義なのです。
「見せる文字」なのか、それとも「読ませる文字」なのか、タイポグラフィの役割を考え、それぞれに最適なデザインをすることは、Webデザイナーにとって必要不可欠なスキルです。では、具体的にどのようにしてタイポグラフィをデザインすればよいのでしょうか？もちろんデザインに正解はありませんが、タイポグラフィにはルールとも言えるいくつかのセオリーが存在します。次の項目では、Webデザイナーが必ず身に付けたい、基本的なTipsをご紹介します。
Webタイポグラフィのクオリティを上げる基本的な5つのTips
これらのTipsは文字を見せる場合にも、文字を読ませる場合にも使える重要なテクニックです。タイポグラフィのセオリーはこの他にも数多く存在しますが、ここでは代表的な例をご紹介します。
1. 文字間を詰める
漢字、カタカナ、ひらがな、アルファベットなど、全ての文字はそれぞれの左右に異なる空白を持っています。そのため、グラフィックソフトでテキストを打ち込んだだけでは、文字間の空白がバラバラなため、乱雑な印象を与えてしまいます。このような場合は「文字詰め（カーニング）」を行い、それぞれの空白を調整しましょう。例えば、「クレジットカード」という文言の場合、「ッ」の左右や「ト」の左が大きく空いているため、これらを調整すると整った印象を与えることができます。
2. 大きさ・位置を揃える
同じフォント・同じ種類のテキストでも、文字の種類によって大きさや位置は大きく異なります。一般的に、漢字はひらがな・カタカナよりも大きく、逆にアルファベットはひらがな・カタカナよりも小さいとされています。特に和文と欧文で違ったフォントを用いる「混植」を行う際は、それぞれの大きさ・位置がバラバラにならないように、バランスを整えるようにしましょう。 上記の例では、欧文のサイズを大きくする他に、「！」のような「約物」と呼ばれる記号のバランスも整えています。
3. 動きを持たせる
上記で紹介した文字を揃えるテクニックとは逆に、大きさや位置を不揃いにして動きを出すことによって、特定の情報を強調する方法もあります。例えば、「円」や「年・月・日」などといった単位を表す文字については、サイズを小さくすることで、より重要な情報である数値の部分を強調することができます。同様に「を」や「から」といった助詞となる文字を小さくする方法も、情報の意味を強調する有効な手法として、広く用いられています。
4. 文字を変形させる
文字の縦横比を変えることで、本来持っていた印象を大きく変えることができます。例えば、「長体」と呼ばれる横幅を狭くした文字はすっきりとした印象を与え、逆に「平体」と呼ばれる縦幅を狭くした文字はどっしりとした印象を与えます。これらのテクニックは文字の印象を変えるだけでなく、限られたスペースに多くの情報を掲載するためにも有効です。また、「斜体」と呼ばれる文字を傾ける手法も、スタイリッシュな印象を与えるためにしばしば用いられます。
5. 行間と行長を調整する
複数行にわたる文章については、行間と行長を調整することが、文章の読みやすさを大きく左右します。一般的に、行間については150〜190％の値が読みやすいとされ、行長については最長で30〜40文字、最短で13〜15文字程度が読みやすいとされています。これらの基準値は、サイズやフォントといった様々な条件によって最適な値が変わるため、状況に応じた判断が必要となるでしょう。例えば、行長が長い場合は行間を広めに、逆に行長が短い場合は行間を狭めにすると読みやすくなります。
これらのセオリーを知っていると知っていないとでは、Webデザインのクオリティに大きな隔たりが生じます。Webデザイナーのプロとアマチュアの違いは、ここにあると言っても過言ではありません。逆を言えば、たったこれだけのセオリーを意識するだけで、一定以上のクオリティを保ったタイポグラフィをデザインをすることが可能だということです。
Webタイポグラフィのスキルを向上させるために今すぐできること
まずは様々な事例を見て、タイポグラフィから得られる情報に違いがあることを学びましょう。例えば、FICCのベストプラクティスであるシックとレリッシュのブランドサイトでは、「ゴシックMB101」という同じフォントを用いているにも関わらず、ウェイトやカーニングが大きく異なるため、全く違った印象を与えていることがわかります。 このように、ターゲットユーザーの違うWebサイトを見比べてもいいですし、straightline bookmarkやS5-StyleのようなWebデザインギャラリーサイトのタグ機能を利用して、同じジャンルのWebサイトを見比べてみても面白いでしょう。 そのときは、上記で紹介したTipsを意識するようにしてみてください。そこで気付いたことがあれば、忘れないうちにメモを取ってください。これらを繰り返し行うことで、デザインの引き出しが増え、タイポグラフィを見る目が養われるはずです。
普段Webサイトを閲覧する際に、少し意識を変えてみるだけでも構いません。たくさんの優れたタイポグラフィに触れることが、あなたのタイポグラフィスキルを向上させる第一歩となるのです。
□ ターゲットユーザーの違うWebサイトを見比べて、タイポグラフィの違いをメモにまとめる
□ 同じジャンルのWebサイトを見比べて、タイポグラフィの違いをメモにまとめる
□ 普段Webサイトを閲覧するときにも、タイポグラフィを意識して見るようにする