2015.11.04
Webデザイナーが知っておきたい美しく表現力のあるタイポグラフィの基本原則
あなたはタイポグラフィがウェブサイトの可読性・アクセシビリティ・ユーザビリティ、そしてデザインに大きく影響することをご存知でしょうか？美しく読みやすいウェブサイト制作が理想ですが、それってなかなか難しいですよね。
では一体、どのようにすれば「美しく読みやすいウェブサイト」を作ることができるのでしょうか？それはデザインの基本である「タイポグラフィ」を徹底して学ぶことです。特にお客さまと直接会話することのできないウェブサイトでは、コミュニケーションにすべて「文字」が用いられ、基本的にどんな場面でも文字は登場するので、見た目にも大きく影響するからです。事実Web Design is 95% Typographyという記事によると「ウェブデザインの95%はタイポグラフィ」とも言われるほどです。
ですから元々印刷物に対して使われていたタイポグラフィですが、我々ウェブデザイナーもしっかりとその基本原則を知っておかなければ美しく読みやすいウェブサイト制作をすることはできません。
そこで今回は「タイポグラフィの基本原則といますぐ使える12の小技」をご紹介します！
そもそもタイポグラフィとは？
そもそも一体、タイポグラフィとは何のことでしょうか？タイポグラフィとは「書体・文字サイズ・ウエイト・行間・文字色」など文字における様々な属性を調整することで、「美しく読みやすい」文字組みを実現する技法のことです。元々は印刷物に対して使われる言葉でしたが、現在ではグラフィックデザインやウェブデザインにも使われています。
なぜタイポグラフィが重要なのか？
では一体なぜ、ウェブデザインにおいてタイポグラフィが重要なのでしょうか？それは「直接会話することのできないウェブサイトでは、お客さまとのコミュニケーションにすべて「文字」が用いられる」からです。事実タイポグラフィは可読性・アクセシビリティ・ユーザビリティに影響し、最終的には直帰率やページ遷移率にも影響します。ですからタイポグラフィは「機能的で美しく読みやすいウェブサイト」には必須の技術なのです。
タイポグラフィの基本原則
ではまず早速、タイポグラフィの基本原則についてご紹介します！タイポグラフィの基本原則を知ることは「美しく読みやすいウェブサイト」制作には必須であり、デザイナーとして心得ておかなければならないからです。タイポグラフィの基本原則はちょっと地味なものが多いのですが、タイポグラフィは「これが正解！」というような完璧なテンプレートはないので、基本原則を知ることで、様々な場面で活かせるようにしましょう！
フォント(書体)
初めに「フォント(書体)」について改めて確認してみましょう！まずフォントと書体というのは同じ意味で表現されることもありますが、実は異なるものです。すごく簡潔にいうとフォントは「デジタル化した書体のデータ」をさします。
そして私たちが使用するフォントは主に「和文フォント(日本語)」と「欧文フォント(英語)」に分かれます。和文フォントは「明朝体・ゴシック体・手書き文字・筆記体」に分けられ、欧文フォントは「セリフ・サンセリフ・手書き文字・筆記体」に分けられます。
明朝体やセリフは「うろこ」と呼ばれている飾りがあり、基本的に横線より縦線のほうが太めなのが特徴です。ゴシック体やサンセリフはこの「うろこ」がなく、横線と縦線の幅に違いはありません。(※セリフは「うろこ」という意味でサンは「ない」という意味)つまり厳密にいうと違うのですが、まずは「明朝体=セリフ」「ゴシック体=サンセリフ」とイメージしておくと覚えやすいかもしれません。
さらにセリフは「オールド・モダン・スラブ」などに分かれ、サンセリフは「グロテスク・リアリスト・ヒューマニスト・ジオメトリック」に分けることができますがこれはまた別の機会にご紹介したいと思います！(例としてデザイナーの方であれば一度は聞いたことがある「Helvetica(ヘルベチカ)」はリアリスト、「Futura(フツラ)」はジオメトリックに分けられます)
フォントの選び方
続いては「フォントの選び方」です！さきほどセリフやサンセリフなどフォントの種類についてご紹介しましたが、それはどのように使い分ければ良いのでしょうか？一般的に「堅実性・信頼性・高級感」を伝えたい場合は明朝体やセリフを、「モダン・親しみやすい・力強い」といった印象を伝えたい場合はゴシック体やサンセリフを使用します。フォントを選ぶ基準については図でご覧いただいたほうが分かりやすいので、下記をご覧ください！
フォントの構成
続いては「フォントの構成」です！フォントの構成といわれてもちょっと分かりづらいと思いますが、これを理解しておくと「どうしてそのように文字を組むのか」ということが洞察できるようになり、自分なりに応用を利かせたタイポグラフィが出来るようになります。和文フォントと欧文フォントで構成が異なるので覚えるのが結構面倒ですが、覚えておいて絶対に損はないのでぜひ覚えておきましょう！
和文フォント
和文フォントは正方形の枠で囲まれておりこれを「仮想ボディ」といいます。そしてその中にある文字を「字面(じづら)」といい、その枠を「字面枠」といいます。なぜこのような構成になっているのかというと、和文フォント(日本語)は縦方向にも横方向にも文字を組むことができますよね。文字をただ打っただけの状態でも、文字が読みやすくなるように仮想ボディなどで余白をとってあります。
欧文フォント
欧文フォントの大文字や小文字の並び線を「ベースライン」といい、大文字の上端を「キャップライン」、小文字の”x”の高さを「エックス・ハイト」、このエックス・ハイトを超える小文字の上端を「アセンダーライン」、ベースラインより下に突き出る小文字の下端を「ディセンダーライン」といいます。欧文フォントは横方向のみに文字を組むため、和文フォントのような仮想ボディは存在しません。
いますぐ使える12の小技
続いて「いますぐ使える12の小技」をご紹介します！フォントの種類や構成が理解できても、それらをどうやって活用するかは本当に難しいですよね。そこで良くタイポグラフィにおいて扱われる小技をご紹介します！
フォントは3つ以上使わない
フォントは3つ以上使わないようにしましょう！フォントを使いすぎると統一感がなくなるため美しくなく、また文章も読みづらくなってしまうからです。私はウェブデザインを習い始めたころ、色んなフォントを使ってみたく、時には7個くらいのフォントを使っていたときもありました(笑)美しく読みやすいウェブサイトのためにもフォントは3つ以内にしましょう。
ヒエラルキーに注意しよう
ヒエラルキーとは階層構造という意味で、きちんと見出しと文章を分けましょう！ということです。上記画像の左側のように、ただ文字が並んでいるだけだととても分かりづらいですし、見た目もゴチャゴチャしてみえるからです。しかし右側のようにきちんと見出しと文章が分かれていれば可読性も良いので、コンテンツをすんなり理解できますし、見た目もすっきりしています。
気をつけたいことは見出しは「本文より少し大きめ」ではだめです。しっかりとした階層構造を作るには、見出しの文字は本文より明らかに大きくし、フォントウエイトやカラーなどの要素をしっかり調整して「見出しだとはっきり認識できる」デザインにしましょう。※ウェブサイトのトーンやテイストによっては見出しが控えめな場合もあります。
文字サイズは14pt以上に
本文の文字サイズは14pt以上にしましょう！14ptというサイズは見た目の洗練さを損なわず、且つ読みやすいフォントサイズだからです。よくタイポグラフィに関する記事で「12pt」といわれていますが、現在のウェブサイトにおいてはアクセシビリティの観点から14pt以上が望ましいといわれているため、14pt以上を意識しましょう。
文字の行間を空ける
文字の行間は「150%～200%」ほど空けるようにしましょう！文字を打っただけの状態だと和文フォントは仮想ボディによって詰められるためとても窮屈になってしまい見た目もごちゃごちゃして見えますし、可読性も低くなってしまうからです。ですから行間を150%～200%にすることで余白が出来るので見た目もすっきりし、可読性も圧倒的に向上します。
長文は左寄せに
文章は基本的に左寄せにしましょう！人は左側から視線移動を始めるので文章を左寄せにすることで可読性が向上し、見た目もすっきりするからです。このとき文章の右側のツラがばらばらになってしまいますが、気にする必要はありません。
混植
混植とは和文フォントと欧文フォントを混在させることをいい、タイポグラフィにおける最も基本的な技法のひとつです。もっと具体的にいうと日本語は「和文フォント」で、英数字は「欧文フォント」を使用するということです。
ほとんどのデザイナーはこれを基本として文字組みをしているといっても過言ではありません。その理由は、和文フォントの英数字は仮想ボディを用いて構成されているため、字面の狭い英数字が不自然になってしまうからです。ですから、英数字に関しては欧文フォントを使用することで見た目も美しくなり、可読性も向上します。
ただ一つ、気をつけなければならないのがその「組み合わせ」です。和文フォントと欧文フォントを組み合わせても違和感のないような組み合わせにする必要があるからです。特にルールがあるわけではないのですが「骨格やウエイトが似ている/エックス･ハイトが高い/a-z length(aからzまで文字を並べたときの長さ)が長い」フォントの組み合わせが良いとされています。
よく言われるのがゴシック体に組み合わせるのは「Arial/Helvetica」、明朝体には「Garamond/Times」の組み合わせが合うとされています。正直パターンは無限なので、これを元にあなたなりに合う組み合わせを見つけてみてください！ウェブサイト上の通常のテキストにはCSSの「font-family」で「欧文フォントを指定した後に和文フォントを指定」すれば混植が可能です。また、和文フォントと欧文フォントは同じポイントでもサイズが若干異なりますので、サイズをしっかり揃えて下さい。
文字詰め(カーニング)
文字間を適切に調整することをカーニングといい、混植と並んでタイポグラフィにおいて最も基本的な技法のひとつです。文字は打っただけだと「仮想ボディ」を隙間なくならべる「ベタ詰め」になります。
漢字は基本的に字面の幅が同じなので調整する必要がありませんが、ひらがなやカタカナは文字によって字面幅が大きく異なります。よってベタ詰めでは文字間が均一でなくなるので、見た目がバラけて見えるのでデザイン的にも可読性の観点からも望ましいものではないからです。
例えば、下記をご覧ください。
上記の上側の文字組みはカーニングを施していませんので文字間がばらばらですが、下側の文字組みは文字間が綺麗に整っています。正直可読性にそこまで大きな差はありませんが、ウェブデザインにおいて「なんかパッとしないなぁ」というときは、このカーニングの詰めが甘いときが多いかもしれません。こういう細かいところまで魂を入れ込むのがデザイナーなのかもしれませんね。
またひらがなやカタカナはカーニングを施していても、括弧などの記号は忘れてしまいがちなので、よく見てみましょう！カーニングを施すことは美しい文字組みの基本なので、ぜひ徹底しましょう！(私はたまに忘れてることがあります…)ちなみに、Photoshopを使用すればカーニングを自動的に調整してくれますが、最終的にはあなたご自身の手で最終調整をしてみてください。
ちなみにhttp://type.method.ac/はカーニングを揃えるゲームが出来るサイトなので、ゲーム感覚で楽しく学べますよ！
助詞や単位は小さめに
タイトルや見出しを文字組みするときは、重要な文字や単語は大き目にし、「は」や「の」などの助詞、または単位などは一回り小さくしましょう！そうすることで文章にメリハリができ、伝えたいことをダイレクトに伝えることができる(見出しの発言力が増す)からです。
基本的には文字を中央寄せにするときはベースラインを中央に、左寄せや右寄せにするときはベースラインを下に揃えるようにしましょう。決してそのようなルールがあるわけではないのですが、ある意味王道？な手法です。左寄せにするときでもベースラインを中央に取る場合もありますが、とりあえず文字にメリハリをつけたときは「助詞や単位は小さめにし、ベースラインを調整する」と覚えておいてください。
整列させるように配置
助詞や単位などを一回り小さくしたときは余白ができるので、その空白を上手く活用して文字組みを整列させましょう！そうすることで文字組み全体が整列され、美しく読みやすいタイポグラフィになるからです。例えば、よく見るパターンとしては「%の下にOFFの文字を入れ込む」や「余白にサブキャッチコピーを入れ込む」などです。
ただ一つ、気をつけなければならないのが「余白に入れ込む文字」です。基本的に重要となる文言は余白に入れ込まずしっかりと目立たせましょう。また余白に入れ込んだ際は、文字組み全体が四角の枠で囲めるような綺麗な輪郭になることを心がけましょう。空白を上手く活用することで一部の文字が「浮く」ことも防げますし、見た目も美しくなりますので、ぜひ様々なパターンで挑戦してみましょう！
文字を変形させる
文字の中でも「状況や気持ち」に関する文字組みは適切に変形させて、文字に「表情」を加えてあげましょう！そうすることでよりコンテンツに表情ができ、そのサイトのコンセプトを強く伝えることができるからです。例えば、よく見るパターンとしては「ふわふわ」や「緊張感」など「状況や気持ち」に関するパターンが多いです。
ちくご観光案内所｜福岡県南部 筑後地方15市町村の観光ガイド
SUPER GT.net | SUPER GT OFFICIAL WEBSITE
慣れている方であればそうでもないと思いますが、このふわふわ「感」や緊張「感」をタイポグラフィで表現するのはとても難しいです(汗)私はまだまだ全然スムーズに作れず、試行錯誤を繰り返さなければ完成しません…。ですから特にこういった表現が施されている「広告・ポスターデザイン」をウェブ上で色々見て研究するのがおすすめです！参考になる表現やレイアウトが多々ありますので、ぜひ見てみてください！
括弧は細いウエイトにする
括弧は細いウエイトにしすっきりとした読みやすい文章にしましょう！括弧を細くすることで文章がとてもすっきり見え、また括弧内の単語を目立たせることができるからです。この技法は、「読みやすい資料作り」などでも取り上げられることもあり、またポスターなどの印刷物ではこのルールを守るのが基本となっています。
スクリプトフォントは大文字を大きめに
スクリプトフォントは初めの大文字を大きめにしましょう！大文字を大きめにすることでそのエレガントさをよりダイレクトに伝えることができるようになるからです。バランスを考えた上で思い切った文字組みは、ゴージャスに見えますよね。
まとめ
いかがでしたか？お客さまと直接会話することのできないウェブサイトでは、コミュニケーションにすべて「文字」が用いられ、基本的にどんな場面でも文字は登場するので、美しく読みやすいウェブサイト制作にはタイポグラフィが必須となります。ウェブサイトにデザインという秩序を与え、情報を的確に伝えることが我々ウェブデザイナーの役割ですのでまずはタイポグラフィを徹底して学び、デザインに機能性を加えてあげましょう！