デザインのこと、日常のこと―ワカイ日報III

書籍、雑誌、チラシ、WEBサイトなど、さまざまな媒体での本文の役割は、内容を伝えることだ。そこにはひっかかるもの―ノイズが無いほうがいい。過度な装飾や個性は、ノイズになる。本文だけでなく、デザイン全体にも言える。

もう少し具体的に言うと、読者に「なんか読みにくいな」と感じさせてはいけないし、「きれいにデザインしてあるな」とすら思わせないほうがいいということだ。あくまで主役は文章の内容である。
本文のフォント、文字サイズ、色、行間、段組、見出しなどなど、細部まで調整することによって、読者はそれを感じなくなる。

さて、実はノイズには、2種類ある。

ひとつは、意図せずに生じてしまったもの。もうひとつは、意図したことで、ノイズになってしまうものだ。

意図せずに生じたものは、経験を積めば減らすことができる。フォントの選び方や行長、マージンなどなど。感覚とロジックを身につけよう。

意図したことで生じるものとは、過度な装飾や個性（を出そうとすること）だ。「普通だとつまらない」とばかりに、奇をてらったフォントを使用したり、太字、赤字、下線その他の装飾をむやみに使ったりしてはいけない。それは、読みにくくなるだけだ。伝えようとするばかりに、結果として、伝わらないデザインとなってしまう。
牛肉本来の味を伝えたいのに、調味料を使いすぎてはいけないのだ。（逆に言えば、牛肉が粗悪品なら、調味料でごまかすしかない）

無味無臭にするためにどうすればよいかは、偉大な先人たちが試行錯誤して残してくれているので、それをひとつずつ身に付けて行くのが近道だね。

田んぼの田。
この字をモリサワ：新ゴ Boldのフォントで表示してみると、見慣れた「田」が出てくる。実は、この田の文字を構成する正方形はひとつとして同じ形は無い。

上画像の赤色の矩形（くけい：長方形のこと）は、すべて同サイズだ。田んぼの各矩形（稲を植える部分）が、微妙にサイズが異なっているのがわかる。また、水色は正方形で、田の字の横線は縦よりも横のほうが若干長いとわかる。さらに、緑色の矩形に着目すると、田の字の真ん中の垂線が最も細く、右が一番太いことがわかる。

これは、フォントベンダー（フォントの会社）のモリサワが手を抜いてこうなってしまったわけではなく、人の錯視を考慮し、緻密に調整された結果だ。

この錯視にはさまざまなケースがある。

上の画像は、Helvetica  BoldのKとXだが、それぞれのパーツが直線ではなく、交差する点で若干細くなっている。

また、下の画像は、左が純粋な半円とそれにつづく直線だが、矢印の部分が微妙にとがっているように感じられる。
右が直線をやや膨らませて調整したものだ。こちらのほうが自然に見える。

これらの調整は、感覚に頼るしかない。
整列ツールを使ったり、グリッドに揃えたりして機械的に調整した後に、バランスが悪いと感じたならば、その感覚を信じて調整する必要があるのだ。

この微妙なニュアンスは、今回のようにフォントを分解してみると参考になる。そして、それがロゴ・マークなどを作るときに生きてくるだろう。

行送りとは、行の頭と次の行の間のことで、行間とは、行と行の間のこと。文字の大きさを含まないかの違いだ。

行間を広めにすれば、ゆったりとするが、広すぎてもおかしい。

最適な行間は、行の長さ、つまり一行の文字数によって変わる。

行間は行長の3%という理論がある。それで考えてみると、

1行15文字の場合は100％×15文字×3%＝45%　（行送り145%）

1行20文字の場合は100％×20文字×3%＝60%　（行送り160%）

1行30文字の場合は100％×30文字×3%＝90%　（行送り190%）

このようになる。15文字以下や30文字以上（縦書き書籍は50字以上）は読みにくいので除外。1行の文字数は20文字前後が読みやすいが、縦組みではもう少し長くても問題ない。

行間は厳密に3%と言うよりも、見た感じで設定する。制作物の雰囲気にもよるし、文字サイズにも影響される。文字サイズが大きいほど、行間は狭くしたほうがバランスがいい。

一連の誌面のなかでは行間を統一するようにしたい。雑誌などはレイアウトに動きがあるので1行の文字数は変わることもあるが、なるべく近い文字数にしておいたほうがよい。

余談：
2000年前後のWEBサイトは、スタイルシートが普及していなかったので、行間0%で非常に読みにくかったが、現在の芸能人ブログのようなやたらと改行し、行間をあけるのもまた読みにくいと思う。ネット特有の文化とも言えるが。

カーニング（文字詰め）は文字と文字の間を調整してバランスを整えることで、グラフィックデザインにおいて必要不可欠だ。文字を美しく効果的にレイアウトすることをタイポグラフィと言い、フォントの良し悪しもさることながら、文字の間隔次第でぐっと美しくなる。

文字はそれぞれ形状が異なるので、隣りあう文字によって空き具合が異なる。
日本語では、とくにカタカナの「ト」は横組みの場合に左のスペースが空いて見える。他にも「イ」「ナ」の後に「ノ」「ム」が続く場合（「ナノ」や「イム」）はベタ組みだと空いて見える。
欧文も同様にいろいろなパターンがあるが、もともと横書き文化なので横書きには強く、リガチャという合成文字（合字）もある。fi、flなどでfのでっぱり（フック：fook）とiの点がfとくっついたりするのがリガチャだ。
ちなみに日本語も縦書きのリガチャがあり、麻呂（麿）がこれにあたる。使うことはほぼ無いだろうが。

日本語フォントも欧文フォントも優良フォントには詰め情報が入っているが、それだけでは完璧ではないのでデザイナーの調整が必要になる。

上画像の１はそのまま打ち込んだだけの状態。２は字間を全体に調整し、３で各文字の間を微調整した。欧文はもともとカーニングがされていてきれいだが、日本語はトの左の隙間が気になる。
日本語（ムスコット）は詰め気味に調整したが、欧文（MUSCOTTO）はやや字間をあけて調整した。
調整方法は用途による。同じフォントでも、詰め方次第で上品にも活発にもなる。

カーニングやリガチャが使えなければ、こういったタイポグラフィはできない。
そこがグラフィックデザイン系のソフトとそうでないソフトの大きな違いだ。

文字を詰めよう。

デザインの基本として、文字を小さめに組むときれいに見える。しかし、小さすぎると読みにくくなる。そこで、可読性を保てる最小文字サイズを知っておくと 何かと都合がいい。基本的にはゴシック体（欧文ははサンセリフ）のほうが可読性は高いので、明朝体（欧文はセリフ）に比べて若干小さくできる。
人によって多少異なるだろうが、自分の中の基準を紹介する。

まず、WEBは基本は12pxで、最小で10px。アンチエイリアスのON・OFFによっても可読性は異なるが、10px以下は使用しない。テキストならブラウザで文字を拡大できるが、画像の場合は、拡大しても読めないのでとくに意識しておきたい。
私がWEB歳とを作るときは、本文は12pt、小さい文字で10ptを基準にしている。

印刷物の場合は、9Q≒6ptが普段使える最小サイズだ。印刷物は近づけば判別できるので、意外と小さいサイズでも読める。7Qくらいまでは使うことがある。
単純に文字サイズだけじゃなく、色にもよる。6pt以下の場合は、K60％などだと、網点で字形が崩れるから、リッチグレーにするか、版ズレが気になる場合はグレーは使わない。
自分の例で言うと、ブラザー印刷の社内報は本文11Q、キャプションや注釈で9Q。名刺の住所などは6pt～5.5ptで使うことが多い（名刺はイラストレーターで作るのでpt）。

WEB、印刷物ともに、場合によってはもっと小さいサイズで使用することもある。読ませるための文字ではなく、グラフィックデザインの一部として使用する場合だ。欧文でごにょごにょっと何か文字が書いてあるとそれっぽく見えるので、装飾的に使うのだ。

当然だが、読ませる文字として使用できる最小文字サイズは、ターゲットユーザーやテイストによって異なる。高齢向けや子供向けなら大きめになる。重要のは、ひとつのプロジェクトに対して一貫したコンセプトを持って決めておくことだ。

身近な印刷物の最小文字サイズを気にしてみると、結構面白い。

—

iPhone 5 発表かと思いきやiPhone 4Sだったね。いろんなメディアがこぞって誤報してたのは滑稽でなかなか笑えた。これもサイバーカスケードなのかね。

さて、今夜はフォントの良し悪しについて。

グラフィックデザインの基本はタイポグラフィであり、それを構成するのが文字であり、文字の形を決めるのがフォントで、フォントにも良し悪しがある。いいフォントは美しく、読みやすい。いいフォントは高価で、安いフォントほど粗悪品であることが多い。

さて、上の画像の「日本語のフォント1」と「日本語のフォント2」の違いがわかるだろうか。どちらかが高価なフォントで、もう一方は高価ではない。少しヒント。一方はMSPゴシックだ。

次に、Futuraというフォント。
上の画像に2つ並べたが、FUTURA1は有料のもので、FUTURA2はフリーフォントだ。
欧文のフォントには有料版とフリー版があるということがある。比較してみると文字詰めや形状が異なるのがわかるだろう。FUTURA2（下：フリー）は、曲線のカーブが野暮ったいね。どの文字も、FUTURA1に比べると、少しずつバランスが悪い。
このように、フォント名だけでは判断できないのだ。

ちなみに、このFuturaは、VolkswagenやLouis Vuittonなどに使われている、有名なフォントだ。
Macには標準で入っている。Macに標準で入っているからと言ってフリーフォントというわけではなく、Macの価格にフォント代が含まれていると考えるほうが正しい。
そもそも、Macのコンセプトがフォントがきれいなコンピューターだからね。

今回紹介した2つの例は、どちらも同じに見えたり、大した違いじゃないと思う人も多いだろう。
しかし、これらのフォントを使ってデザインしたものを見れば、どちらが美しいかはわかるはず。

美しいフォントを使おう。