2013/10/04

WEBサイトが映える、タイポグラフィの基本ルール

WEBサイトが映える、タイポグラフィの基本ルール

タイポグラフィとは文字デザインの事です。

webサイトを制作する上でタイポグラフィはとても重要です。

綺麗な写真を使って、こだわったjavascriptを組んでいて、内容もとてもいいサイトでも、タイポグラフィの基本ができていないと全体的にチープな印象になってしまいます。

タイポグラフィにはサイト全体のデザインレベル上げる事はもちろん、文字を読みやすくする効果もあります。

今回は最低限覚えてもらいたいタイポグラフィの基本ルールを「タイトルデザイン」「テキストデザイン」に分けて紹介します。

目次

タイトルでは3つ以上のフォントを使わない

3つ以上のフォントを使わない

webサイトなどのタイトルデザインをする際、サイトのイメージに合せてフォントを決めると思います。

その中で目立たせたい文字のフォントを変えて文章を目立たせる事は重要です。

しかし一つの文章で3つ以上のフォントを使うと、全体の統一性がなくなってしまいます。 心地いいリズムで文章を読んでもらうためには、使うフォントは多くても二つまでにしましょう。

カーニングとトラッキング(字詰め)

フォトショップのカーニングとトラッキング

基本的にフォトショップでそのまま入力されただけの文字(ベタ組)は文字間が空き過ぎていますので、カーニングトラッキングで文字間を調節します。

カーニング

カーニング

文字と文字の間を調節する機能です。

フォトショップの文字ツールで調節したい文字の間にカーソルを移動させてAlt+[←]Alt+[→]でカーニングします。

一文字ずつカーニングしていくのが理想ですが、文章が多かったり、慣れるまでの間は自動カーニング機能を使うといいでしょう。
自動カーニングには以下の二つの方法があります。

  • メトリクス ... フォントに入っている文字間情報を元にカーニングを行う
  • オプティカル ... フォトショップが文字の形を判断してカーニングを行う

メトリクスとオプティカル

英語のフォントにはメトリクスのカーニング情報が入っているものも多いですが、日本語のフォントは漢字との組み合わせが膨大なためメトリクスのデータが入っていないものがほとんどです。
(小塚、A-OTFは数少ないメトリクスの対応の日本語フォントです)

トラッキング

トラッキング

トラッキングとは一文字ずつのカーニング比率を保持しつつ文章全体の文字間を調節する機能です。

カーニングとトラッキングは両方とも文字間の調節をする機能ですが、お互い独立した機能なのでそれぞれ調節しましょう。

フォトショップでオススメの文字間調節方法

手動カーニング

  1. 文章全体をオプティカルで自動カーニングする
  2. 一文字ずつカーソルを移動させて文字間を調節する
  3. トラッキングで全体の調節

慣れるまではこの手順でやっていくといいでしょう。

手動カーニングのコツ

手動カーニングのコツはほんの少しの違和感に気づいてそれを修正する事です。

カーニングした後に他の作業を挟んでからもう一度見直したり、拡大縮小したりしながら、一番しっくりくるデザインにしましょう。

括弧や句読点などは文字間が空き過ぎてしまうので特に気を付けてカーニングしましょう。

文字の大きさを変える。

文字の大きさを変える1

主張したい単語は文字サイズを一回り大きくしましょう。

逆に「~の~」や「~が~」などの助詞は小さくすると前後の文字を目立たせる事ができます。

逆にサラっと読んでもらいたい文字は、大きさを揃えましょう。
同じフォントでも全角、半角、英語、数字によって大きさが若干異なる場合もありますので文字ごとに調節しましょう。

小さい「ッ」「ィ」などの大きさも調節すると印象が変わります。

他に、以下のようなケースでも文字の大きさを変えてみましょう。

文字の大きさを変える2

「500円」や「6月27日」のように数字と漢字が並んでいると数字が小さく見えてしまいます。
漢字と数字のサイズに差を付けて目立たせましょう。

ベースラインを調節する

ベースラインを調節する

水平ラインを調節すると、それだけで見栄えがグンとよくなります。

文字の大きさやフォントを変えても文章のベースラインは自動で最適化されません。

フォトショップで文字を選択して[Shift]+[Alt]+[↑][Shift]+[Alt]+[↓]でベースラインを上下させて調節しましょう。

括弧を主張させない

括弧を主張させない

括弧を使う場合、括弧自体に注目させずに、そこに閉じられた文字を引き立たせましょう。
括弧のフォントは一番細いものにして、サイズも一回り小さくします。

ベースラインは上下にちょっとだけ広げて圧迫感をなくします。

カーニングは少し狭目に調節すると行のリズムが崩れません。

タイトルデザインの基本はここまでです。
基本的な調節をしただけでかなり見栄えが良くなります。

次にテキストデザインの基本を説明します。

文章テキストは読みやすくする

文章テキストは読みやすくする

読んでもらいたい文章テキスト、HTMLで出力する文章テキストはcssで読みやすくします。

  • ・font-size ... 12px~15pxぐらい。
  • ・line-height ... 1.3em~1.7emぐらい。
  • ・letter-spacing ... 0.1emぐらい。
  • ・color ... #111~#333ぐらい。※#000は汚く見えるので避ける。
  • ・font-family ... 小さい字はMSゴシックよりメイリオの方が読みやすい。

.text_class{
    font-size: 14px;
    line-height: 1.7em;
    letter-spacing: 0.1em;
    color: #333;
    font-family: "メイリオ";
}

ちょっと調節してあげるだけでぐっと読みやすくなります。
いろいろ試してそのサイトに最も適した、読みやすい形に調節しましょう。

文章テキストのスタイルはサイト内で統一した方がいいでしょう。

テキストエリアの縦横比に迷ったら黄金比、白銀比を使う

黄金比、白銀比

テキストエリアの縦横比はサイト全体のデザインに合うように調節します。

しかし、なかなか決まらないのであれば黄金比(1:1.618)白銀比(1:1.414)を使ってみましょう。

サイト全体のデザインに合わなければ無理に使う事はありませんが、芸術作品にもよく使われる人間の目が美しいと感じる比率なので、迷ったら試してみましょう。

まとめ

タイポグラフィに正解はありません。

最初は今回紹介した基本ルールに則ってデザインしていたとしても、慣れてきたら応用して自分なりのアレンジを加えていくといいでしょう。

広告のタイポグラフィは洗練されたものが多いので参考にしましょう。
いつまでも心に残る・・・印象的な広告コピーまとめ