タイポグラフィの観察方法とは?身の回りの文字からデザインの目を養う練習法

タイポグラフィの観察の基本

まずは「文字を観察する」とはどういうことか、そして何に注目して見ればよいかを押さえましょう。

文字を観察するとは

文字を観察するとは、Webサイト・バナー・雑誌・広告・看板などの文字を意識して見て、「なぜ読みやすいのか」「なぜ目立つのか」を考える習慣のことです。

タイポグラフィ(文字の大きさ・太さ・間隔・配置などを整えて、情報を伝わりやすくする技術)を身につけるうえで、観察は出発点になる練習です。

ひと言でいえば、タイポグラフィは「文字を読みやすく、伝わりやすく見せるための調整」のことです。フォントを選ぶことだけでなく、文字を大きくしたり小さくしたりして強弱をつける、文字と文字の間を詰めたり空けたりするといった、文字まわりの調整全般を指します(詳しくはタイポグラフィとは?で解説しています)。

用語やルールを先に覚えても、実際のデザインを見る目が育っていないと、自分の作品のどこが良くてどこが悪いのか判断できないからです。

観察を続けると「文字を見る解像度」が上がり、これまで気づかなかった書体や間隔の違いが自然と目に入るようになります。

観察するときの6つの視点

ただ眺めるだけでは「なんとなく良い」で終わってしまうので、見るポイントを決めておくことが大切です。

まずは次の6つの視点で、1つのデザインを順番にチェックしてみましょう。

視点	自分に問いかけること
読む順番	最初に目に入った文字はどれか、次はどれか
書体	明朝体(線に強弱がある書体)か、ゴシック体(線の太さがほぼ均一な書体)か、それはどんな印象か
サイズの差	見出しと本文で、大きさはどれくらい違うか
太さ	太字はどこに使われているか、何段階あるか
間隔	字間(文字と文字の間)や行間(行と行の間)は広いか狭いか
配置	左揃え・中央揃えのどちらか、余白はどこにどれくらいあるか

それぞれの視点の詳しい考え方は、次の記事で解説しています。記事名に出てくる用語も、ひと言で意味を添えておきます。

• 書体:フォントと書体
• サイズの差:ジャンプ率(見出しなどの大きな文字と、本文の文字の大きさの比率。差が大きいほど勢いのある印象、小さいほど落ち着いた印象になります)
• 太さ:ウェイト(文字の太さのこと。Light・Regular・Boldのように段階があります)
• 間隔(字間):カーニングとトラッキング(どちらも字間を詰めたり空けたりする調整。特定の文字の組み合わせだけを調整するのがカーニング、文字列全体を均等に調整するのがトラッキングです)
• 間隔(行間):行間と行長(行長は1行あたりの長さのこと。長すぎると、次の行に移るときにどこを読んでいたか見失いやすくなります)

観察の見本:1枚のバナーを分解してみる

実際に、次のバナーの見本を6つの視点で観察してみましょう。

同じバナーを見た感想でも、書き方によって次に活かせる情報量がまったく違います。

左のメモは感想だけなので、次に自分がバナーを作るときに何をすればよいかが分かりません。

右のメモは「大きさの差」「字間」「太さ」「揃え方」に分解しているので、そのまま自分のデザインで試せるヒントになっています。

なお、右のメモにある「飾りとして見せている」とは、文字を「読ませる情報」ではなく「雰囲気づくりの部品」として使っているという意味です。このバナーで一番伝えたいのは「最大50%OFF」で、小さな英字の「SUMMER SALE」は、字間を広げてゆったり並べることで、夏のセールらしい華やかさを添える役割をしています。文字はすべてしっかり読ませるものとは限らず、こうした脇役の文字があることにも気づけると、観察の幅が広がります。

タイポグラフィの観察を習慣にする練習法

ここからは、観察を毎日の習慣にして、自分のデザインに活かすまでの練習の手順を紹介します。

ステップ1:気になったデザインを集める

まずは「読みやすい」「目を引く」と感じたWebサイトやバナー、ポスターなどを見つけたら、スクリーンショットや写真で集めておきましょう。

その場で気づいても、記録しておかないと後で比べたり見返したりできないからです。

集めた画像は他の人が作った作品なので、自分の学習用にとどめ、SNSやブログにそのまま公開しないように注意しましょう。

ステップ2:最初に目に入る文字から順番をたどる

集めたデザインを見るときは、最初に目に入った文字を確認し、そこから自分の視線がどう動いたかをたどってみましょう。

読む順番は、デザイナーが文字の大きさや太さ、配置で意図的に作っていることが多く、その工夫を読み解く入口になるからです。

視線の動き方のパターンについては、視線誘導とは?で解説しています。

ステップ3:理由を要素に分解して言葉にする

「読みやすい」「目立つ」と感じた理由を、先ほどの6つの視点に当てはめて、短いメモに書き出します。

頭の中で思うだけでは曖昧なままですが、言葉にすると「見出しが本文の約2倍の大きさ」「行間が広め」のように、再現できる形になるからです。

最初はすべての視点を埋めなくてもかまわないので、1つのデザインにつき2〜3個の気づきを書くところから始めましょう。

ステップ4:読みにくいデザインも観察する

良いデザインだけでなく、「読みにくい」「何を伝えたいのか分からない」と感じたデザインも観察の対象にしましょう。

読みにくさの原因を見つける練習は、自分のデザインの問題点に気づく力にそのままつながるからです。

プロが作ったWebサイトや広告は整っているものが多いので、読みにくいデザインは次のような身近なところで探すと見つけやすいです。

• 家電の取扱説明書や契約書など、小さな文字がぎっしり詰まった書類
• ポストに入っていたチラシなど、情報をたくさん詰め込んだ紙もの
• 自分が以前作ったスライドや資料

たとえば「全部の文字が同じ大きさで、どこから読めばいいか分からない」「行が詰まっていて目が疲れる」のように、原因を具体的な要素で説明してみてください。

「文字の色が背景の色に近くて読みにくい」のように、色が原因のこともあります。色と読みやすさの関係は配色と可読性、読みやすさを表す言葉の違いは視認性・可読性・判読性の違いで解説しています。

ステップ5:気づいたことを自分のデザインで試す

観察で見つけた工夫は、次に自分がデザインを作るときに1つだけでも取り入れてみましょう。

実際に手を動かして試すことで、「なぜその工夫が効いているのか」を体で理解でき、知識が自分の引き出しになるからです。

ゼロから新しいデザインを作るのが大変なら、以前作った自分の作品(練習で作ったバナーなど)の文字だけを変えてみる方法がおすすめです。

このとき、変えるのは1か所だけにして、元のデザイン(Before)と変えたあと(After)を並べて見比べましょう。たとえば「見出しを今の2倍の大きさにする」「英字の字間を少し空ける」のように1か所だけ変えると、その工夫でどう見え方が変わったのかがはっきり分かります。

Webサイトはブラウザの開発者ツールで数値を確かめる

Webサイトの文字を観察するときは、ブラウザの開発者ツールを使うと、文字サイズや行間を実際の数値で確かめられます。

目で見た印象と数値を照らし合わせると、「16pxの本文で行の高さは1.8倍くらいだと読みやすい」のように、自分の基準を作れるからです。

Google Chromeなら、気になる文字を右クリックして「検証」を選ぶと開発者ツールが開き、その文字に指定されているCSS(見た目を指定するコード)を確認できます(Chrome DevTools:CSS の表示と変更)。

開発者ツールを開くと、画面の横や下にコードがずらりと並ぶので驚くかもしれませんが、全部を読む必要はありません。Webページの裏側を虫眼鏡でのぞいて、知りたい数値を1つ探すだけ、くらいの気持ちで使えば大丈夫です。

開発者ツールの「Computed(計算済み)」タブでは、font-size(文字サイズ)やline-height(行の高さ)、letter-spacing(字間)などが最終的にどんな値になっているかを一覧で見られます。

最初は「Computed」タブを開き、上の検索欄にfont-sizeと入力して、文字サイズの数値を1つ確かめるところから始めてみましょう。

実践のポイント

観察の練習でつまずきやすい点と、よくある疑問をまとめます。

注意点・よくある間違い

• 「なんとなく良い」で終わらせてしまい、なぜそう感じたのかを要素に分解しないことがあります。
  理由を言葉にしないと、次に自分で同じ工夫を再現できません。
• 良いデザインだけを集めて満足し、読みにくいデザインの原因を考える視点が抜けてしまうことがあります。
  「読みにくい」と感じたときこそ、観察のチャンスだと考えましょう。
• 一度にたくさんのデザインを集めることが目的になり、1つずつ観察する時間が取れなくなることがあります。
  1日1つでよいので、じっくり分解して見るほうが力がつきます。

よくある質問

• Q. 何を観察すればいいか分からない。
  A. まずは毎日使っているWebサービスやアプリ、駅の案内表示、コンビニの商品パッケージなど、身近なものから始めましょう。
  多くの人に向けて作られたものは、読みやすさがよく考えられていることが多く、観察の題材に向いています。
• Q. 書体の名前が分からなくても観察できる?
  A. できます。
  最初は書体名より「明朝体かゴシック体か」「太いか細いか」「どんな印象か」が言えれば十分です。
  書体の分類はフォントと書体の違いで解説しています。
• Q. 観察とあわせて、どんな練習をすればいい?
  A. 観察に慣れてきたら、気になったデザインの文字の大きさや配置をそっくり真似して作ってみる「模写」がおすすめです。
  タイポグラフィ全体の学び方は、タイポグラフィ学習ロードマップにまとめています。

まとめ

タイポグラフィの観察とは、身の回りの文字を意識して見て、「なぜ読みやすいのか」「なぜ目立つのか」を考える練習です。

読む順番・書体・サイズの差・太さ・間隔・配置の6つの視点で分解し、理由を言葉にして自分のデザインで試すことで、知識が使える技術に変わっていきます。

まずは今日目にしたWebサイトやポスターを1つ選び、「最初に目に入った文字」と「その理由」を2〜3行のメモに書き出してみてください。