「Webデザインの95%はタイポグラフィである」という言葉をご存知でしょうか。
Webサイトを訪れればテキストを読まないことはほとんどない、という事実から生まれたタイポグラフィの重要性を表した言葉です。
今回はそんなWebデザインでポイントとなるタイポグラフィの基本原則について紹介していきます。もくじ
◆Webタイポグラフィの役割
タイポグラフィの役割は大きく文字を「見せる」ことと「読ませる」ことの2つです。
・文字を見せる
「見せる」ための文字は多くの場合見出しで使われます。
タイポグラフィには、サイズ・カラー・フォント・太さというように、デザインをするべき要素が多く含まれているため、これらの要素を組み合わせることでより目に留まる文字をデザインします。
例えば線の細い明朝体は女性的な印象を、線の太いゴシック体は男性的な印象を与えるなど、同じ文言を用いたとしても伝わるイメージは様々です。
・文字を読ませる
「読ませる文字」は多くの場合、本文や脚注などのテキストに使用されます。
「見せる文字」とは逆に、情報を正確に伝える目的があるため、可読性・視認性が求められます。
DTPと違い、WebデザインはOSが出力するフォントを使用するため「見せる文字」なのか「読ませる文字」なのか、タイポグラフィの役割を考え、最適なデザインをすることはWebデザイナーにとって必要不可欠なスキルと言えます。
◆Webタイポグラフィのクオリティを上げる基本的なコツ
Webタイポグラフィのクオリティはただがむしゃらに取り組んでいても上がりません。
そこにはルールとも言えるいくつかのセオリーがあり、最低限それらを知っておく必要があります。
ここではその代表的な例をご紹介します。
・文字間を詰める
書類を作るレベルではあまり気にならないかもしれませんが、漢字・カタカナ・ひらがな・アルファベットなど、全ての文字はそれぞれの左右に異なる空白を持っています。
そしてただテキストを打ち込むだけではその空白が調整されることはないため、デザインとしてはバラバラな印象を与えることがあります。
このような場合は「文字詰め」を行い、それぞれの空白を調整する必要があります。
・大きさ、位置を揃える
同様に大きさや位置も文字によって変わります。
一般的に、漢字はひらがな・カタカナよりも大きく、アルファベットはひらがな・カタカナよりも小さいことが多いです。
それぞれの大きさ、位置がバラバラに見えると気持ち悪いので、バランスを整える必要があります。
・動きを持たせる
文字を揃えるテクニックとは逆に、大きさや位置を不揃いにして文字に動きを出すことによって、特定の情報を強調する方法もあります。
「円（￥）」や「年/月/日」といった単位を表す文字を小さくしたり、「を」や「から」といった助詞となる文字を小さくすることで、より目立たせたい情報を強調することができます。
・文字を変形させる
文字の縦横比を変えることで、印象を大きく変えることができます。
横幅を狭くした文字はすっきりとした印象を与え、縦幅を狭くした文字はどっしりとした印象を与えます。
また、文字を傾ければ、スタイリッシュな印象を与えることができます。
・行間と行長を調整する
複数行にわたる文章については、行間と行長を調整することで読みやすさが変わります。
一般的に、行間については150〜190％の値が読みやすいとされ、行長については最長で30〜40文字、最短で13〜15文字程度が読みやすいとされています。
これらの値は、サイズやフォントといった様々な条件によって最適値が変わるため、状況に応じた判断が必要です。
行間は行長が長い場合は広く、行長が短い場合は狭くすることで読みやすくなります。
◆まとめ
Webデザインではとかくグラフィック面に目が行きがちになりますが、タイポグラフィについて注意を払うことにより、ワンランク上のデザインにブラッシュアップすることができます。
Webサイトの訪問者にどのようなイメージを与えたいのか、どの情報を見てほしいかを考えることは、デザインの完成イメージに近づく近道になります。
優れたデザインのWebサイトを参考にしながら、Webデザインにおけるタイポグラフィの基本を元にアイデアを広げてみましょう。