はじめてのデザイン[4]タイポグラフィ

1.タイポグラフィについて

①タイポグラフィとは

元々は印刷物における文字の体裁（書体/大きさ/行間/配列など）を整える
活版印刷術のことを「タイポグラフィ」と呼んでいたが、現在はその定義が
印刷物のみに限らず、文字に関するもの全般に広がっている。

大きく分けると2通りの意味で使われることが多い。
・文字を読みやすく、美しく並べること。
・文字をデザインして扱うこと。

特に「文字を読みやすく、美しく並べること」に関しては、
デザイン業務以外のビジネス書類作成やプレゼン資料の
作成などにも役に立つ。

②文字を読みやすく、美しく並べる

「タイポグラフィ」1つ目の意味は、文字の体裁を整えることを指す。
同じ文章が書いてあったとしても、フォントや大きさ、配置方法によって
文章の読みやすさが大きく変わる。
制作物にあったイメージのフォント選び、適切な太さと大きさにする。

行の間隔や文字同士の間隔にも注意が必要。

文字の下のラインや行の始まりなどの位置を揃えると美しく整って見える。

③文字をデザインとして扱う

「タイポグラフィ」２つ目の意味は、文字そのものをデザイン要素として
捉え、文字が主体のアーティスティックな表現のことを指す。

文字というよりイラストのような見え方のものも多い。

④まとめ

タイポグラフィについて一言で説明するのは難しいが、敢えて言うなら
「文字を効果的に扱う技法」の総称と言える。
Webページ、印刷物どちらの場合でも文字から伝わる情報は重要。
サービスや商品の良さを伝えるためにも、タイポグラフィについて学び
文字を効果的に扱えるようにする。

2.文字の種類と基本的なフォント

①書体の種類

フォントには日本語用の和文フォントと英語用の欧文フォントがある。
和文フォントをさらに「明朝体」「ゴシック体」
欧文フォントを「セリフ」「サンセリフ」などに分類できる。

和文フォント（明朝体とゴシック体）
和文（日本語の文字）は、大きく分けて「明朝体」と「ゴシック体」に
分類される。
明朝体　　：縦線に比べて横線が細く、横線の右端や曲がり角の右肩に
　　　 　　「うろこ（三角形の山）」がある書体。
ゴシック体：線の太さが一定で、うろこがほとんどない書体。
　　　　　　視認性がよく小さくても読みやすいため、デバイス上で
　　　　　　よく使われる
他にも、筆文字をつなげず切り離し、筆文字の特徴である
「入り/抜き/とめ」がはっきりした「楷書体」、
店頭などで見る商品名やキャッチコピーなどが書かれた
ポップ広告などに使われる「ポップ体」などがある。

欧文フォント（セリフ、サンセリフ）
欧文（アルファベット）は、大きく分けて「セリフ（serif）」と
「サンセリフ（sans-serif）」に分類される。
セリフ（serif）　　　　  ：文字のストロークの端にある小さな飾りのこと
　　　　　　　　　　　     セリフのある書体が「セリフ体」
サンセリフ（sans-serif） ：「セリフ」がない書体。「sans=無い」
　　　　　　　　　　　　  という意味。線の太さが一定で飾りが無い。
他にも、筆記体や手書き文字の要素を含んだ「スクリプト体」などがある。

②代表的なフォント

明朝体フォント
・ヒラギノ明朝
・游明朝

ゴシック体フォント
・ヒラギノ角ゴ
・メイリオ

セリフ体フォント
・Garamond（ギャラモン、ガラモンド）
・Times New Roman（タイムズ・ニュー・ローマン）

サンセリフ体フォント
・Arial（エイリアル）
・Helvetica（ヘルベチカ）

③まとめ

一般に、「明朝体」「ゴシック体」「セリフ体」「サンセリフ体」などの
「〇〇体」という書き方の場合、文字の形の様式やその分類を表す。
游明朝やヒラギノ明朝は、明朝体というカテゴリーに分類される
フォント（製品）である、という言い方が出来る。

3.フォントの選び方

①「視認性」と「可読性」と「判読性」

まず文字や文章の読みやすさ、「視認性」「可読性」「判読性」という
３つの要素が関係している。

・視認性：パッと見た時に文字として認識しやすいかどうか
・可読性：文字の読みやすさ（長い文章でもスラスラ読めるかどうか）
・判読性：似た文字の区別のしやすさ（誤読が少ないかどうか）

書体（フォント）の種類や文字サイズ/行間/字間を調節することで、
読みやすい文章、目立つ見出し、読み間違えにくい文字などの
見た目にできる。

ただし視認性を高めると可読性が低くなることもあるため、制作する
ものの目的やデザイン意図をしっかりと考えた上でどの要素を
優先させるかを決めていく。

プレゼンなどのスライド資料は視認性と判読性を、ビジネス書類や
新聞/小説などの文書は可読性を重視して制作するといい。

②フォント選択の基本ルールは「シンプルな書体を選ぶ」

くせのあるフォントは目を引くことが出来る。しかし、読み間違いが
多くなったり、内容に集中できなくなるなどのデメリットがある。

デザインのアクセントに使用するにはおすすめだが、デザイン全体に
使用するフォントはくせの少ないベーシックなフォントから選ぶ。

フォントに関する書籍などを見ていると、よく登場する定番フォントが
存在する。初心者は定番フォントを積極的に使っていく。

③可読性を上げるなら細い文字

細い文字といえば明朝体やセリフ体。

明朝体は可読性が高く教科書の文章でもよく使われる。
太い文字で文章量が多いと紙面が黒々して可読性が下がり、
目に大きな負担がかかるため、長い文章（読む文章）には
線が細い書体である明朝体が好まれる。

同じ明朝体でも、線が太い明朝体になると可読性が下がるため注意。

ゴシック体でも細めのゴシック体であれば、紙面が黒々せず可読性が高い。

Web上で見る文章に関しては、文章量が多くても明朝体だと小さな文字が
綺麗に表示できないため、視認性の高いゴシック体が使用される。

欧文（アルファベット）でも同じことが言える。

④視認性を上げたいなら太い文字

太い文字といえばゴシック体やサンセリフ体。

ゴシック体は線の太さが均一で、はねや払いが少ないシンプルな書体のため
遠くからでもしっかりと字が認識できる。

キャッチコピーや要点、ポスターやプレゼン用のスライド資料など、
「読ませる」というよりは「見てもらう」という意味合いの強い要素には
ゴシック体を使う。

明朝体に比べてゴシック体は、小さな文字でも読みやすいため注釈などの
小さな文字で視認性を確保しなければならない時にもよく使用される。

⑤判読性の高いフォント

判読性を高めたい場合、気を付ける点
・O（英語のオー）と０（数字のゼロ）
・I（英語の大文字アイ）とｌ（英語の小文字エル）
・゛（濁点）と゜（半濁点）
などの区別。

一般的にゴシック体やサンセリフ体は線の太さが均一で、記号のような
印象を与える。そのためフォントにもよるが判読性が低くなりがち。

フォントの中にはUDフォントというユニバーサルデザインに対応した
フォントがある。同じ新ゴフォントだが、紛らわしい文字が分かりやすく
濁点や半濁点も大きめにデザインされている。

判読性を高めるには、ゴシック系よりも文字に強弱がある明朝系や
UDフォントを使う。

⑥フォントの持つイメージ

明朝体は美しく洗練されたイメージ、
ゴシック体はフォーマルでしっかりとしたイメージを持っている。

フォントが持つイメージが制作するデザインに合っているかどうかも
フォント選びには重要な要素になる。

デザインに高級感を持たせたいなら「明朝体」
繊細さを持つ明朝体は、「高級感」「大人」「女性的」「和」といった
イメージを与える。筆使いを感じさせるトメハネはらいなどもあるため
和のテイストにもよく合う。

モダンなイメージにしたいなら「ゴシック体」
線の太さが均一で安定感のあるゴシック体は、「モダン」「信頼」
「力強さ」といったイメージを与える。ターゲットを老若男女選ばず
使えるので汎用性が高い。

クラシカルな雰囲気にするなら「セリフ体」
印刷技術が生まれる前の手書き文字の風合いを表現するセリフ体は、
「伝統」「クラシカル」「格調」といったイメージを与える。
装飾性が高くエレガントで上品な印象を持たせることが出来る。

シンプルな中にも新しさをイメージしたいなら「サンセリフ体」
幾何学的な円形や四角形に見えるようにデザインされているサンセリフ体は
「シンプル」「新鮮」「カジュアル」といったイメージを与える。

⑦まとめ

フォント選びで一番大切なポイントは、デザインの目的に合ったフォントを
ちゃんと選べているかどうか。
長い文章に使うフォントは可読性の高いもの、目立たせたい場所に使う
フォントはパッと目を惹きつける視認性の高いものが適している。
選んだ理由をちゃんと説明できるようにしておく。

4.文字組みの基本的なテクニック

①仮想ボディと字面

和文書体は、「仮想ボディ」といわれる正方形の中に収まる形で作られて
いる。仮想ボディはマス目のような枠で、漢字/ひらがな/カタカナの全てが
この枠の中に入るようにデザインされている。

文字は仮想ボディいっぱいに収まっているのではなく、「字面」と言われる
一回り小さい枠の中に入っている。

同じサイズの文字であれば、仮想ボディのサイズは変わらないが、字面は
文字によって異なる。特に漢字とひらがな/カタカナでは大きく差がある。

②文字の間隔（アキ）を調整する

文字と文字の間隔（アキ）が等しく見えるように調整することを
「カーニング」という。
フォントをそのまま使用すると（ベタ組み）文字の持つ余白サイズによって
文字と文字の間隔がバラバラになってしまう。

文字と文字の間隔を調整して、余白が同じくらいになるよう調整すると
文字が美しく見える。

タイトルや見出しなどで文字を大きく使う場合、特に余白が目立つため
調整する。

カーニングとトラッキング
カーニング　：1文字ずつ文字の間隔を調整する機能
トラッキング：指定した範囲全体の間隔を調整すること

Photoshopの文字パネルにも、それぞれ設定する項目が存在する。

全体の文字間隔を調整する場合は、トラッキングを使うと一気に設定可能。

ひらがな/カタカナは詰める
漢字に比べ、ひらがな/カタカナは文字に余白が多く含まれる。
ひらがな/カタカナ部分の間隔は漢字同士の間隔よりも詰めた方が美しい。

記号も詰める
同じように、「、/。/・/「/（」などの記号にも余白が多く含まれます。
特に「〇〇、（〇〇）」のように記号が連続する部分は注意する。

③行間は初期設定よりもすこし広げる

文章を読みやすくする上で、行間も非常に重要な要素になる。
初期設定のままでは行間が狭すぎる場合が多いため、フォントサイズの
70％前後（0.7文字分）の行間を設定しておくといい。

最適な行間は、1行に入る文字数や全体の行数、文字サイズ、フォントの
種類によっても変わってくる。

自分が実際に読んでみて、変に余白を感じたり、読みにくくなければＯＫ。

④ベースラインを揃える

欧文フォントには、ベースラインという文字が並んだ時にベースとなる
ラインが存在する。

文字によってはこのベースラインからズレて見えるものがあるため
文字の位置を調整してベースラインが揃うようにする。

特に和文と欧文が入り混じる文章の場合は、注意が必要。

⑤まとめ

文字組みは奥が深くただ文字間を詰めたり行間を広げればいいわけではない

行間や字間、サイズなど様々な要素を調整して、文章の意図を分かりやすく
美しく見せるための作業。
・文字と文字の間隔が均等になっているか？
・文章が読みやすくなっているか？
を意識しながら調整していく。

カーニングスキルを磨くことが出来るオンラインゲーム「KernType」などで
練習するのもいい。

5.文字組みをレイアウトする

①文字を読む順番/視線の流れに注意

一般的に文章を読むときの視線の流れは、
横書き：左上から右下へ
縦書き：右上から左下へ

縦書きと横書きが混同したレイアウトの場合、デザインによっては
読み進める順番が分かりにくく、読みづらい構成になるため注意する。
見出しだけに縦書きを使用するなどは問題ないが、ある程度分量のある
文章については、文章の向きを統一したほうがいい。

②１行の文字数を多くしない

人が１行で読み切れる文字量は、約25～35文字前後が限界。
それ以上の文字数になると、次に読む行を見失いやすくなる。

1行の文字数が多いと目線を大きく動かす必要があり、文章を目で
追うだけで疲れてしまう。

文章の読みやすさを高めるためには、文字サイズやレイアウトを工夫して
1行に入る文字数が多くなりすぎないように注意する。
文字数が少なすぎても読みやすさは低下するため注意する。

Webデザインの場合、見る端末によって、画面サイズが大きく変わるため
PC/タブレット/スマートフォンそれぞれの画面、どれで見ても読みやすく
なるようにレイアウトを工夫する必要がある。

③基本の文字揃えは「左揃え」

文字揃え（もじそろえ）は、行の中に文字をどう配置するかのこと。

Webデザインなどでは行頭を一致させる左揃えが最も一般的で、印刷物では
行頭と行末を一致させる両端揃えが一般的です。

中央揃えや右揃えを効果的に使うことが出来る場面はありますが（1文しか
ない場合や１つの図しかない場合）行のスタート位置（文章の左側）が
バラバラになり段落や文章を認識しづらくなるので長い文章に中央揃えや
右揃えは不向き。

④文章にメリハリを持たせる方法

見出しなど、他の要素よりも目立たせたい場合、「色を変える」「太字を
使う」「サイズを変える」「書体を変える」「下線を付ける」などの
方法がある。

「目立たせたい＝色を変える」と考えがちだが、目立たせたい場所が
多くなるほどデザイン全体がごちゃごちゃとした印象になりがち。

文章にメリハリを持たせたい場合は、文字の「サイズを変える」や
「太字を使う」方法を優先した方がまとまりのあるデザインになる。

助詞や単位は小さめにする
文章の中で「の」「も」「て」「に」「を」「は」などの助詞は
文字サイズを小さくし目立たせたい単語を大きくするテクニックもある。

数字＋単位の表記も「％」「円」「g」などの単位部分は文字サイズを
小さくすると数字部分を目立たせることが出来る。

⑤まとめ

Webデザインでも名刺やチラシなどの紙のデザインでも、「文字」は
切っても切り離せない要素になる。

文字組みに関する基本ルールや、レイアウトテクニックは身につける。

今まで何となく文字の配置をしてきた人は、1度視線の動きなどを意識して
考えると読みやすくなったり、美しく見えるようになる。