わたしはどう読んでいるのか？ーーー 視覚コミュニケーション

みなみなさま、ごきげんさま。

先週から台風がダブルで来たり地震があったり何卒ご安全にを心がけて行動する日々が続いていますが、ご無事であることを祈りつついかがお過ごしでしょうか。

この文章もそうですが、視覚コミュニケーションとして文字が重要な要素として人間は活用しています。

15世紀にグーテンベルクさんが活版印刷の発明して以来、多くの人に文字を介してコミュニケーションとして重宝されています。もちろんそれ以前も手書きの文字として十分に重宝されていました。

今回、話していくのは、
タイポグラフィ（Type Graphy）
「活字（Type）を用い、印刷（Graphy）を行う技術」で発展してきた視覚コミュニケーションです。

15世紀当時は、文字を物理的な型として組み合わせ紙に定着させる技術（活版印刷技術）をそのままタイポグラフィと呼ばれていたことが始まりで、現代では、「文字を用いた視覚的コミュニケーションのデザイン」という意味合い全般をタイポグラフィと呼びます。

ネットなどではもう印刷（Graphy）はされないですが、そこは昔からの名残でしょうか。そもそも印刷する場合も活字でもありません。

活字とは、金属や木でできた文字の型のことです。それを用いてハンコを押すようにその金型や木型にインクをつけ印刷をしていました。

文字や文章を読みやすく、かつ美しく配置・デザインする技術と言い換えることもできますが、コミュニケーションのツールですから、美しいが何を意味しているのか、読みやすいことがコミュニケーションとして一番なのか、逆に読みづらくすることで得られるコミュニケーションも存在するので、

「文字を用いた視覚的コミュニケーションのデザイン」

の方がしっくりきます。

なかなか、奥の深い。正解などデザイナーの数だけあるみたいなことまでいわれるものです。今までは原則や法則に従ってきていたものですが、こちらに関していえば、どうなのでしょう。

基本的には、ゲシュタルトの法則で設計されているのですが、人間の視覚と脳はもう少し複雑に作用されているみたいです。
つまりは目の動きと脳の認識は違います。
そのあたりを説明できればと思います。

そして何より、デザインですから建築家、ルイス・サリヴァン（Louis Sullivan）さんの言葉を借りると、

文章を「読みやすく（Legibility）」「判別しやすく（Readability）」配置する技術です。と紹介されたりもしますが、確かにそうですが、それは機能がそれを求めているから読みやすく判断しやすくするだけのことです。

先にも述べたように、これがお化け屋敷の看板などのタイポグラフィならば、読みづらくおどろおどろしくすることも機能に従った形、タイポグラフィです。

しかし、基本的には「読みやすく判別しやすい」が求められます。

そこでフォントの選択から、文字の大きさ（ジャンプ率）、文字と文字の間隔（カーニングやトラッキング）、行と行の間隔（行送り）、1行の長さ（行幅）などを考慮し組んでいくわけです。

映画などのタイトルや本の表紙、ロゴデザインや広告などでは文字を主役として扱う、機能させる場合もありますから文章のような字組とはまた別の言葉の意味以上の感情、世界観を視覚的に表現する手法もまたタイポグラフィと呼ばれます。

映画のタイトルやロゴをデザインする人は、それはそれで専門のデザイナーがいたりしますから、これまでの話とこれから話すこととは違うといわれると困りますが大きな意味ではタイポグラフィです。

それでは、
広告デザインの機能を主としてタイポグラフィの話を進めたいと思います。

正解などない世界です。いや、終わりなどない世界です。今日の正解は明日の不正解かもしれません。なんて言い訳をまずは書いて進めたいと思います。

「文字を用いた視覚的コミュニケーションのデザイン」ですから、それらを構成する要素があり、それらの要素を選びコントロールするのがデザイナーの役割です。

フォント（書体）の選択から始まり、文字サイズを選択し、文字と文字の間のスペース（文字間隔）や行と行の間のスペース（行間）を調節する。

文章や段落があるものだと左揃え、中央揃え、右揃え、均等配置なども調整がいる。

まずはフォントの選びの話からしましょうか。

日本語のフォントだけでも、大手フォントメーカーで1,000〜3,500書体もあります。正確な数字は重複しているフォントもあるのでわかりませんが、これにフリーフォントや企業など独自のフォントを合わせると何千以上という数字には変わりはありません。

そんな数多くの中からこれだというフォント選ぶわけですが、全てのデザイナーが全てのフォントを把握しているわけでもありませんし、全てのフォントを使えるわけでもありません。

フリーフォント以外では予算が必要です。予算という機能の中で判断が必要になってくるわけです。

人間は、たくさんの中から選ぶことが苦手な生き物です。デザイナーも例外ではありませんが、めげずに選ばなくてはなりません。

しかし、安心してください。
数が多いといっても、グループがあります。

フォントには大きく分けて、ゴシック体と明朝体があります。それに筆書体（楷書・行書など）とデザイン書体（ポップ体など）があるという感じでしょうか。

この4種の異なるルールで構成されており、この各々の骨格から派生された微妙に形や角度、線幅などが違うフォントがたくさんあります。微妙にハネが違う、ハラいが違う。太さがカーブがなんて違いです。この微妙な違いでイメージが変わってきたりしますからバカにしたものでもありません。いや誰もバカにはしていません。

つまりは、同じゴシック体と呼ばれる書体の中でも、微妙に形の違うフォントが何種類もあり、それは明朝体でも筆書体、デザイン書体でもいえることです。

簡単にこれらの4種のフォントの説明をします。

ゴシック体とは、
欧文における「サンセリフ体（Sans-serif）」で、縦と横の線の太さがほぼ均等で、文字の端に飾り（ウロコ）がない書体です。
飾り（ウロコ）とは手書きで文字を書くときの始まりに突起のようなものや終わりのハラいやおさえに装飾的なつくりをタイポグラフィでは称してウロコと呼ばれます。

ゴシックの中でも端の角部分が、四角い角いものと丸いものが大きな違いで角（かく）ゴシック体と丸（まる）ゴシック体と呼ばれます。

それぞれのフォントで太さが違ったりつくりが違ったりしていますが、縦と横の線の太さがほぼ均等で、文字の端に飾り（ウロコ）がない書体はゴシック体です。

機能的側面からいうと、
「視認性が高い」遠くから見たときや一瞬だけ目に入ったときでも、文字の形を正確に認識しやすい。
道路標識、駅の名板、字幕、スマートフォンやPCの画面など、瞬時に情報を読み取らせたい場所にはゴシック体が採用されています。

文字の太さが同じなので、文字を小さくしても認識されやすくWebサイトでも採用されやすいでしょうか。見る人のデバイスサイズはまちまちですからね。

角ゴシック体は、現代的・効率的・中立的（特定の感情を乗せない）なトーンの印象を与えるといわれています。「中立的（特定の感情を乗せない）」といわれても、印象に残らないのか。と思ってしまいますが、人工物的なといえばわかりやすいでしょうか。

信頼感・誠実さを伝えられ、ビジネスや公的なものなどにうってつけです。

丸ゴシック体は、親しみやすさ・優しさ、安心感・安全やかわいい・ポップと角ゴシックとはまるで逆の印象を与えます。公的なものに角が丸い書体で文章を書かれると、安心感はあるのか？この安心感は攻撃的ではない高圧的ではない意味合いでの安心感で安全感です。安心はできるが信頼に欠けるので公的なものやビジネスでは使うのは少し難しいでしょうか。

子ども向けのものならば、良さそうですかね。

目的によって、フォントの印象を機能として使わなければなりません。

明朝体（みんちょうたい）とは、
欧文における「ローマン体（Roman）」で、縦線が太く横線が細い、文字の端に三角形の飾り（ウロコ）がある書体です。ウロコ体と呼ばれることもあるとか、聞いたことはありませんが。

毛筆（筆と墨）の独特な筆調を起源としていて、「横線は細く、縦線は太い」という明確なコントラストを持っています。その昔は、印刷物ではない看板などを手書きで書く職人さんはこの明朝体もウロコをつけひと筆書きをしていましたから凄腕です。

歴史的にいえばゴシック体よりも圧倒的にこの明朝体の方が昔から使われている書体です。

機能的な特徴でいえば、長文を読んでも「疲れない」の小説や教科書、新聞、雑誌などに多く使われています。

そんな歴史的背景からか、伝統・信頼・高級感・知的・繊細・文学的といった印象を与えるといわれています。

これらのような印象を与えたいとの目的ならば最適です。

長文を読んでも「疲れない」といわれているのに、この文章はゴシック体です。疲れさそうという意図があるわけではありませんが、そして信頼がいらないわけでもありません。知的なイメージも持ってほしいなんてこともあったりしますが、ゴシックも信頼なんてものがメインですから、矛盾しています。

いや、矛盾ではなく重なり合っているところといえばいいでしょうか。ちゃんとはしているが、高級な感じではなくもう少し人工的なものといえばいいのでしょうか。高級と人工が相反していないですが、明朝体は少しテクニカルな面があったりします、簡単にいえば、明朝体を使ったからといって「伝統」「信頼」「高級感」などなどの印象を与えることが容易ではなかったりします、後で詳しく書きますが、字間や行間なども見た目の印象に強く作用してきます。

「疲れにくい」という一点だけならば、明朝体を選ぶべきですが、印象を考えると、判断がデザイナーによってもさまざまです。

ただ私はゴシック体を選び綴っています。

明朝体とゴシック体は、信頼を得られますのでそこでの迷いはありません。公的なものならば、どちらも選んでも正解です。

残りの2つ（筆書体とデザイン書体）は、もっともっと印象が変わります。

筆書体（ひっしょたい）から、見ていきましょう。
毛筆（筆と墨）を使って手書きされた文字の骨格や質感を、そのまま再現した書体です。

書道として受け継がれてきた文字文化をフォント化したものです。

筆文字と親しまれて呼ばれていたりします。書道をお手本としていますから、人の手の温もりなど伝わりやすいでしょうか。

中でも、代表的な特徴ある「楷書（かいしょ）」「行書（ぎょうしょ）」「草書（そうしょ）」の3つの筆文字がありますから紹介したいと思います。

楷書体（かいしょたい）は、書道のお手本のような一角一角丁寧に書かれた筆文字です。

賞状などをつくる際には最適です。熨斗（のし）などの文字にも中心がブレずに厳格さや誠実さが伝わるのでよくつかわれています。

明朝やゴシックのように信頼も与えますが、厳格すぎます。つかうことがあるとすればお正月など和をイメージして欲しいときくらいでしょうか。いや、厳格さが欲しい辞令を書面で出すときなどは最適です。

行書体（ぎょうしょたい）は、楷書を少し速く書くために線と線が自然に繋がったり、角が少し丸みを帯びたりした書体です。

自然な流れの毛筆です、楷書が太筆で書いたとするならば行書体は小筆で書いた感じでしょうか。あくまでイメージです、どちらでも楷書も行書も書くという批判は勘弁してください。

こちらは少しフランクになっていますが、上品さや気品さを持ち合わさている印象が残るといわれています。

しかし、和のテイストが強いので和食や和テイストのものよりになってきます。逆にいえば和を印象付けしたければ、一択です。

草書体（そうしょたい）は、行書をさらに速く、大胆に省略して書かれた書体です。

文字というよりかは暗号です。崩し方に意味があるのですがそれを知っている人しか読めません。

使い道はと聞かれると、いや、暗号として伝わる人には伝えたいときでしょうか。背景に和を出したいときなどに重宝しそうでしょうか。
使えないのに有名というのは貴重なフォントです。
いや、書道界では大いに活躍しているのかもしれません。勉強不足で分かりません。

このほかにも、歌舞伎の看板などに使われる江戸文字の一種の勘亭流（かんていりゅう）や落語の寄席（よせ）の看板などに使われる寄席文字（よせもじ）、小学校の教科書などで使われる教科書体（きょうかしょたい）などもメジャーです。

教科書体は、勉強に最適なといわれていますから使い所はたくさんありそうですが、勘亭流や寄席文字、相撲文字も入れておきましょうか？これらは癖が強すぎでそれでしか使えません。その印象を持たれたければ最適ではあります。お寿司やお祭りなどで使えそうでしょうか。

最後は、デザイン書体、欧文における「ディスプレイ体（display typeface）／デコラティブ体（decorative typeface）」で、特定のテーマや強い個性を表現するために作られた装飾的な書体です。

文字として読みやすさよりも世界観や感情への印象を与える、個性的なフォントです。デザイン書体というよりかはアート書体といった方がわかりやすいでしょうか。

勘亭流や寄席文字は、最低限、読めるようにつくられていますが、デザイン書体は、草書体のように知る人が知るような文字の形で、だけど、その角や丸みなどの形で世界観を構築し、怖いや悲しい、楽しいや嬉しいを表現しています。

怖い書体（溶けるような垂れるような形）を使えば、ホラーものなど簡単にこれは怖いものですと伝えることができます。

他にはレトロなかすれた感じや滲んだ感じの書体などは、古い感じを出したいときには最適です。

よく使われるものとしては、ポップ体もデザイン書体です。お店などの商品の前にひと言添えられる文字として、ゴシック体よりも丸みを帯びさせたような元気、楽しい、親しみやすさの印象を与える場合に使用する書体です。

ピンポイントでは活躍できるのがデザイン書体です。しかし、個性が強すぎで応用が効きませんから気をつけなければ、ごちゃごちゃしたものを目指していないのに賑やかさを通り越してしまうことがよくあります。

手書き風の書体もこのデザイン書体ですが、親しみやすさは伝えられますが信頼という部分ではどうなのでしょうか。手書きではなく手書き風ですからこちらもなかなか個性的な書体です。

デザイン書体はインパクトは抜群です。反面、インパクトだけが伝わりすぎて内容を蔑ろにします。使う場合は細心の注意を払わなければなりません。

フォント選びは、大きく分けてこの4種のグループから選び始めればいいかと思います。

余程の個性が必要でないのならば、明朝とゴシックが対応してくれます。微妙な文字の太さなどが影響しますけれど、標準的な太さのものでまずは試してみるとわかりやすいです。

逆にいえば、ゴシックか明朝で組んでしっくりとこないならば、フォントではなく他の要素が原因かもしれません。これから話す字間や行間、サイズなんて要素かもしれませんし、写真やコピーかもしれません。

以上がフォント（書体）の説明です。
何千もの種類がありますからもっともっと奥の深い話もあるかもしれませんがここではこの辺で次に行きたいと思います。

次は、文字サイズ（Size）、文字の大きさ、見出しと本文の比率（ジャンプ率）なんて話です。

タイポグラフィで文字サイズと言われる場合は、個々の文字の大きさというより、関係し合う文字との大きさの比率（ジャンプ率）を指している場合が多い気がします。

見出しと本文、キャッチコピーとボディーコピー、などの関係性でどれくらいの比率で見出しを大きくすればキャッチを大きくすれば、どういう印象を与えるか。

ジャンプ率が高いと、躍動的・にぎやか・若い・ジュアルなんて印象で、逆に低いと、落ち着き・信頼感・格調高い・知的・大人っぽい感じでしょうか。

広告などでは、ボディーコピーがないものもたくさんありますから、個々の文字の大きさだけでこの躍動感やにぎやかさや、逆に信頼や格調高い感じを出さなければなりませんから、ボディがないがボディを意識して大きさを決めなければなりません。

目立たせたいからと無闇に大きくすると格調が低くなる場合もあります。
大きくするのを躊躇すると躍動感に欠けたりしますから気をつけなければなりません。

基本的に文字の大きさもデザインですから機能に従わなければなりません。

印刷して読みやすい文字の大きさ、本などの長文では8.5pt〜9.5pt（あくまで目安で疲れないとされている）。A4サイズだと10.5pt〜12pt（あくまで目安で手にとって読みやすいとされている）。

つまりは、8.5pt〜12ptくらいが本文の目安で、人が文字を読むときの読みやすさとしての機能です。

印刷の機能では、本文の文字数が多すぎてこのポイントサイズでは入りきらないサイズを小さくしなければならない場合、5ptまでにしなければ、印刷した時に文字が潰れてしまいます、境界線がなくなり滲んだりして読めなくなる（まるでデザイン書体のように）ので、工夫が必要になってしまいす。

コピーライターに文字数を削ってもらうか、名刺などの住所だと削ることもできませんから、レイアウトでなんとかしなければなりません。

Webの場合は、標準が16pxで最低視認性が10pxです。

ptはポイントの表記、1ポイントは 1/72インチ（約0.35ミリ）で世界標準の物理単位。
pxはピクセルの表記、ディスプレイの最小単位（ドット）に基づくサイズ。つまりは最低10ドットです。ピクセルやドットは大きさの単位ではないのでスマホやパソコン側が補正をかけている場合もあります。

このジャンプ率を用いて、
「情報の優先順位（視覚的階層）をコントロールし、読者の視線を論理的に誘導するための最も重要な変数」だともいわれています。

確かに、大きな塊（粗い塊）から人間の眼球は動くような設計になっています。

少し詳しく話すと、
視野の端（周辺視野）に映る大きな塊（粗い塊）をゲシュタルトの法則（近接・類同など）で1つの塊（ブロック）と大雑把な境界線をつくり出し、この「粗いゲシュタルトの塊」のなかで、最もコントラストが強い（目立つ）部分に向けて、確かめるための眼球は動きます。

これをサッケード（眼球ジャンプ）といい、その粗い塊はなんだったのかを確認するわけです。目が物理的に客観的にコントラストの強い（大きな）文字へとジャンプされます。

そこでようやく、文字だと文章だと人間は認識します。この間、0.2秒くらいです。サッケードで鮮明な塊になったことで新たにゲシュタルトが働き文字や文章と構造化するわけです。

しかし、認識したことと認知したことはまた別の話です。

この後、0.25秒からそれが自分にとって重要か否かを判断し、重要ならば認識化に上ります。無関係ならば見ただけいや自覚としては見ていないのと一緒です。

わずか0.05秒の間に瞬時に脳は判断します。ジャンプ率（コントラスト）が大きかろうが大きくなかろうが自分に重要なのかどうなのかが判断材料です。

確かに物理的に視覚は誘導されます。だからと言ってその文字をその通りに読んでいるわけではありません。

つまりは、フォント（書体）のジャンプ率よりもどんな言葉を文章を入れるかが広告では重要になってくるのですが、そうすると、万人に重要な限定や割引などの損得なものが多くなってきます。

デザイナーが文字（書体として）を管理するからといって、言葉（コピー）が違うということで変えるわけには行きません。
なんともいたしがゆしです。

ジャンプ率では情報の優先順位（視覚的階層）をコントロールは個人的にあまり意味のないことだと思いますが、印象は変えられますからフォントの大きさ（Size）はとても重要です。

次は、カーニング（Kerning）とトラッキング（Tracking）です。日本語でいえば、文字と文字の間隔（文字間）を調整することです。
「特定の2文字の隙間を個別にピンポイントで調整する」のがカーニング。
「文章全体や選択した範囲を一括で均等に調整する」のがトラッキング。

文字と文字の間です。

文　字　　と　　文　字　　　の間です。

これで印象が違ってきます。

これを微妙にミリ単位で調整することで印象を変えよう少しでも読みやすくしよう。との試みです。

特に広告などでは、調整されています。

デザイナーが使っているアプリケーションソフトではこの調節が可能で逆に調節ができないものは一文字一文字バラバラにして手作業で調節したりもします。（厳密にはそのようなソフトは使いませんが）

読みやすいとは、
人間がどうモノゴトを見えているのか見ているのかというゲシュタルトの法則などを利用して、このゲシュタルトという文字もカタカタでまとまりがありますが、もう少しシュタの間を近くに寄せて一塊とさせたいのです。もっといえばタルトももう少し間を詰めたい。

気にならないという方がきっと多いはずですが、少しでも読みやすく努めるのだデザイナーです。そしてゲシュタルト感を出したいのもあったりします。どう出すのかは各々のデザイナーにもよります。（自己満足といわれればそれまでですが）

隣同士の文字の調節がカーリングで、キャッチコピーや文章としての全体の文字の間を調整することで、こちら明らかに印象が変わります。

文字間をあければ、高級感、優雅、開放感、洗練、静寂などの印象が持たれます。
文字間を詰めれば、力強さ、緊張感、にぎやか、密度、一体感などの印象が持たれます。

文字組みに関する今までのものを踏まえるて高級感を持って欲しければ、
明朝体で字間をあけ、ジャンプ率を小さくすることで高級な印象が与えられることがわかります。

逆ににぎやかさが欲しければ、字間を詰めゴシックでジャンプ率を高くということです。

これらは基本的な印象ですから、色などが入ってくれば複雑極まりなく組み合わせがあったりして、正解がないといわれるところかもしれません。

料理と同じように好みもあったり、体調によってなんていい出すと、昨日はよかったものがよくないように見えたり、「文字組に終わりがない」ともいわれたりもします。

なんだか終わりのようなまとめのようになっていますが、まだ行送り（Leading / Line-height）があります。

文字数も多くなり長くなってきましたが、行送りがあります。

行と行の間のスペース（行間）（Line Gap）と行送り（Leading / Line-height）同じようで微妙に違います。

行送り（Leading / Line-height）
「ある行の基準線（ベースライン）から、次の行の基準線までの距離」のことで、
行間（Line Gap）
「上の行の文字の下端から、下の行の文字の上端までの純粋な『隙間』の距離」のことです。

基準が違うだけで、「文章における、行と行の間の垂直方向の間隔（行間）を調節すること」には違いはありません。

こちらも字間と同じように広くすれば高級や優雅さがあり狭くすればにぎやかな印象がありますが、しかし広すぎても狭すぎると読みづらい。

大体の1.25倍〜2.0倍くらいでの調節でしょうか。

一行の文字数によってももちろん変わってきますが、この数値の範囲内であれば、許容範囲だと思います。

一行に何文字にすることで読みやすくなるなどの話もあるのですが、こちらも40文字といわれてはいるのですが、文字の大きさや紙面などスペースによって様々で、小説や教科書など本では、確かにそうですが、なんて話をし始めると長くなりそうなので、またの機会にできればと、行の話は駆け足になりましたが。

あ、整列（Alignment）の話をするのを忘れていました。レイアウトの回でも話したのですが、印象的なことは話してはいないので、またいつか話せればと思います。

それではまたの機会に。

最後までお読みいただきありがとうございます。
ここまでお読みいただけたならば、20分程度の暇つぶしの役には立っているはずです。約30kcalも消費していますから、小さめのバナナを1/3本（約35g）、この間に食べていなければダイエット効果もきっとあるはずです。

まとめ

タイポグラフィ（Type Graphy）
「文字を用いた視覚的コミュニケーションのデザイン」
デザインとは、
「Form Follows Fonction.（形は機能に従う。）」

□フォント選定
・ゴシック体「サンセリフ体（Sans-serif）」
「視認性が高い」
角ゴシック体（角が四角い）…現代的・効率的・中立的
丸ゴシック体（角が丸い）…親しみやすさ・優しさ、安心感

・明朝体（みんちょうたい）「ローマン体（Roman）」
長文を読んでも「疲れない」
…伝統・信頼・高級感・知的・繊細・文学的

・筆書体（ひっしょたい）
楷書体（かいしょたい）一角一角丁寧に書かれた筆文字…厳格さや誠実さ
行書体（ぎょうしょたい）楷書を少しくずした書体…上品さや気品さ
草書体（そうしょたい）大胆に省略してた書体…文字として認識しにくい

・デザイン書体「ディスプレイ体 / デコラティブ体」
文字として読みやすさよりも世界観や感情への印象を与える、個性的な書体
ピンポイントでは活躍できる

□文字サイズ（Size）
・文字の大きさ
・関係し合う文字との大きさの比率（ジャンプ率）
ジャンプ率が高い…躍動的、にぎやか、若い、カジュアル
ジャンプ率が低い…落ち着き、信頼感、格調高い、知的、大人っぽい

□カーニング（Kerning）とトラッキング（Tracking）
・カーニング「特定の2文字の隙間を個別にピンポイントで調整すること」
・トラッキング「文章全体や選択した範囲を一括で均等に調整すること」
文字間をあける…高級感、優雅、開放感、洗練、静寂

文字間を詰める…力強さ、緊張感、にぎやか、密度、一体感

□行送り（Leading / Line-height）／  行間（Line Gap）

文章における、行と行の間の垂直方向の間隔（行間）を調節すること
広くすれば高級や優雅さがあり狭くすればにぎやかな印象…大体の1.25倍〜2.0倍くらい

こちらの記事も合わせてお読みいただけると嬉しいです。