Webで仕事をする人全員に知っておいてほしい文字詰め・カーニングの基礎知識
仁田坂 淳史 
株式会社ZINEの仁田坂です。編集者ですがデザインするのが好きです。
自己主張しすぎな圧倒的アイキャッチで失礼しました。今日はフォントと文字詰めの話をします。ぼくは雑誌編集者として数年働いた後にWebメディアをつくり起業、みたいな感じで働いてきたんですけれども、編集もデザインけっこう似ている部分が大きいと思っています。文字で読者に伝えるのか、視覚情報でユーザに訴えかけるのか。
結局のところ同じだよなあ、と思ったりします。編集もデザインも一緒くたにして考えたほうが都合いいことが多いです。
で、けっこうWebメディア見てると残念なデザイン、多いんですよね。
Webフォントでタイトル設定してるメディアは気にならないんですけれども、アイキャッチ見ると最悪……みたいなの多い。以前GitHubでアイキャッチ用のテンプレートを公開したもんだから、形だけ真似してデザインがてんでなってないメディアが増えました。ごめんなさい。今日はちゃんと文字組のことに触れます。
Web業界の大御所とかデザインかじってても良さそうな人のデザインが微妙だと非常に残念です。気になって仕方がない。
ドラクエで言うと「メタルキングの剣」に「ぬののふく」を合わせてるようなチグハグさを感じます。気になって仕方がない。
というわけでフォントに自信のない人はぜひこの機会に文字詰めの意識を持ってほしいなあと思ってます。
文字詰めとは何か
文字と文字の間隔を詰めることです。もともとはDTP（Desktop publishing。パソコンで行う出版）で栄えた技術で、文字の間隔を詰めたりアケたりすることで、読者はうれしくなります。
なぜ文字詰めが必要なのか
そもそもなぜ文字詰めするとうれしいのか説明します。
フォントには仮想ボディがある
活字をご存知でしょうか。活版印刷が大好きな方も多いことでしょうが、これが活版で使われる活字です。
日本語の活字和文書体は、文字の全角にあたる正方形の枠内にデザインされています。この枠は、活版印刷に使う活字でいうと活字そのものの大きさである「ボディ」と呼びます。Webで使うフォントは実体がないため「仮想ボディ」と呼んでいます。
日本語の場合、他言語にくらべ文字種・文字数が多いことが影響して、この仮想ボディが大変厄介なんです。
フォントはそのままじゃ読みづらい
フォントには仮想ボディという 枠 みたいなものがあることが分かりました。これが影響し、フォントをそのまま打っただけ（ベタ打ちしただけ）では読みやすくなりません。
たとえばこんな感じ。
どうでしょう。
下のほうががんばろうという気持ちが伝わってきませんか？ そういうことです。
Webのアイキャッチでも紙媒体の表紙でも見出しでも、なんでも同じ。テキストで刻まれたメッセージは気持ちを伝えます。編集者もデザイナーもエンジニアも手段や意図は違えど気持ちを伝えたくて仕事をしています。
つまりフォントの文字組とは、パッと見で読みやすく、気持ちを伝えやすくするためのものです。
フォントには仮想ボディという枠が設定されているせいで、パッと見た感じ読みづらく、そのまんまだとメッセージや思いが伝わりにくいんですね。
大きい文字ほど読みづらい
フォントは読みづらい、と話しましたが、文字の大きさによっても読みづらさは変わります。
文字のサイズが小さい本文ではそれほど気になりませんが、文字が大きいもの、特にタイトルやアイキャッチ内の文字などはとても気になってしまいます。
文字の大きさが小さければベタ打ちでも特に気にならないんですが、文字が大きいとなんとなくデザインされていない感じが出ます。
この「なんとなく」という感覚が非常に大事。
数値で表せない直感とか感覚みたいなものは、読者・ユーザは言語化こそできないものの的確に読み取ります。「なんとなくデザインされてない」ものよりも「なんとなくデザイン」されているもののほうが直感的に「イイ」と感じCVR（Conversion Rate）高くなりますし、離脱率下がります。
コラム: デザインされすぎ、マーケティングされすぎ問題
ユーザに生活にSNSマーケティングが入り込みすぎた昨今、デザインされすぎたり広告意図が入り込みすぎたりしていると逆に引かれてしまいCVR下がるし離脱する、みたいな傾向がありますが、またの機会に解説したいと思います。
仮想ボディがなくても困る
それでは仮想ボディがフォントに設定なければ読みやすい良いのか、というとそうでもありません。
仮想ボディを完全に無視して字面体（フォントの表示ギリギリ）のとおり、極端に字詰めしたケースがこちら。
うーん読みにくい。めっちゃ気になるタイトルなのに、読めなくなってしまいます。なんか素人が作ったのかな？と思わせるデザイン。
仮想ボディとは本文ベタ打ちではかろうじて適当に打ってもなんとなく日本語として読める最低ラインだけれども、見出しはちゃんと整える必要があるのです。
文字を詰めよう
それでは実際に文字を詰めてみましょう。
自動で文字詰めする
PhotoshopやIllustratorなどには細かい作業を行わなくても自動で文字間隔を調整する機能があります。
フォントの種類によってカーニング情報がフォントファイルに埋め込まれていたりそうでなかったり。勝手は違うのですが、
- ウィンドウ > 書式 > OpenType > プロポーショナルメトリクス
にチェックを入れ、カーニングを
- 自動
にすると大体いい感じになります。自動が効かないときはオプティカルを使っても良いのですが、なるべく自動を使いましょう。（IllustratorやPhotoshopやらのバージョンによってメトリクスとか自動が最適とか色々あるんですが詳しく調べてみてください）
手動で微調整しよう
自動カーニングは便利ですが、本職のデザイナーの方は使わない方も多いです。ぼくも自動カーニング使いません。Web媒体であればアイキャッチ、紙媒体は見出しなど重要な要素に関してはすべて手作業で詰めています。
手動で調整したい場合は、Macならoption+← or →、Windowsもalt+← or → 、で調整できます。
どれくらい手詰めすれば良いのか
ではどれくらい手詰め（テヅメ）すれば良いのか。残酷な言い方をしますが慣れです。いい感じに文字が組めるようになるためには修行が必要です。
コツは、数値を見ながら厳密に揃える、というよりは、パッと見た感じを重視したほうがいいと思います。
キチッとしたい理系の方ですとか潔癖症の人には向いていない仕事です。
なぜ数値ではなく実際に見た感じを重視すべきかというと、人間には脳内補正が原因の錯覚・錯視があるからです。
フォントとかデザインの世界ではもう2分に一回くらい錯覚が起こってて数字とか全然アテにならんのですわ。東大寺の大仏が実際は頭めっちゃデカいとか、下から見上げる像はだいだい短足だとか、デザインの世界は数値で割り切れないものがある、ということを覚えておきましょう。
ディスプレイから離れて字詰めしよう
で、可能であれば距離を置いてフォント全体の雰囲気を見るように心がけると良いでしょう。
たとえばデザイン初心者は拡大して調整してしまったりしがちです。初心者絵師が拡大しすぎてパース崩れた絵を描くのと一緒で、全体を見ないと正しいデザインはつかめません。
このように常にディスプレイ全体に表示させながら作業するのがいいと思います。
最終的には薄目で見たり、3メートルくらい離れて確認しましょう。
コラム: 「字間あけ」にするときにはどうすれば良いか
字間あけとは、字と字の間のスペースを空けて組むこと。優しい感じ・ゆったりとした感じを出したい時やサブタイトルなどによく使います。
ちょっと優しい感じ、ていねいにものづくりしている感じが伝わってきませんか？こういう時に字間アケを使います
ベタ組みからいきなり始めるのではなく、しっかり文字詰めした後にトラッキングをかけるとうまくいきます。
自動カーニングと手動カーニング、実際何が違うのか
自動カーニングと何が違うのか、と聞かれるとむずかしいのですが、手で文字を詰めることでデザインにコクが出てくると思います。
参考: コクとは
深津さんに聞いてみてください。→ 乱数にコクを出す方法について
というのはウソで、マジメな話をするとフォントごとのクセとか文字種ごとのクセとかが見抜けるようになるのではないかと思っています。
上が「ヒラギノ角ゴ Std W8」をそのまま組んだもの。下が自動カーニングをかけたものです。さらに下は手で微調整を加えたものです。
自動だとあともう一歩詰めたい、みたいなものがあったりするんですよねー。
カーニングとデザインにもコクを出していきましょう
ツメるポイントまとめ
ここからは手動カーニングで文字詰めを極めたい方向けに、デザイナーはどこを気をつけて文字詰めしているのか触れたいと思います。
ひらがな・カタカナ
ひらがな・カタカナは原則ツメます。
ひらがなやカタカナは、特にWebでは読ませる必要のない単語だったりすることが多いですが、サラッとスムーズに読めるため読者的には気持ちいいポイント。グロースハックに盛んなWeb事業者的には「CTCが上がる」「CTRが上がる」となります。
促音・拗音
小さい文字「っ」「ゃ」「ゅ」「ょ」などの文字も原則ツメます。
約物
約物（やくもの）は基本ツメましょう。
Webだと初めて聞く方も多いと思いますが、句読点・疑問符・括弧（パーレン）などをまとめて約物と呼びます。読み方はヤクブツではなくヤクモノです。
句読点はツメたほうがキレイに見えます。ただ、ツメたほうがキレイに見えるとはいえツメすぎると句読点の意味があんまりないので気をつけましょう。個人的にはどうしても句読点使えない箇所なんかは、本文中には半角アキ（半角スペース）を入れて、アイキャッチは手動で調整してなんとかすることが多いですねー。
まずはベタ打ち。
文字詰めをきっちり。手動カーニングを設定してみました。右側にたくさん余白ができました。
この余白を最大限使って文字を大きくしましょう。文字詰めを適切に行うことで、よりメリハリの効いた、インパクトのあるデザインを行えます。
インド人を右に感出てきた。
全角カギ括弧（全角パーレン、と呼ぶとプロっぽいです）も基本ツメたほうが良いでしょう。
半角使えばいいじゃんって声が聞こえてきそうですが、半角だと上下の高さ・ウェイト（文字の太さ）が揃いませんので基本的にパーレンは全角で使いましょう。
日本語と英語の境目
日本語と英語の境目は詰めましょう。Adobe Illustratorではデフォルトの和文・英文間アキ量が25%に設定されていますが、和文と英文が混在しがちな技術系向けの書籍やWebメディアなどはちょっと詰めると良いでしょう。
一部の欧文「AV」「WA」など
一部の英語の組み合わせでは、やたらと空いて見えることがあります。たとえば「AV」とか「WA」とか。大文字小文字の組み合わせである「Ta」「To」「We」なんかも空いて見えます。「Web」とかですね。
これは錯覚・錯視というより字形上仕方ないので食い込み気味字間にカーニングを設定します。
さらに字詰めしたい人へ
ここまでマスターした方向けへ、さらにこういうところを気をつけられるんじゃないかポイントをまとめようと思ったんですがちょっと力尽きたのでまたこんど書きたいと思います。
まとめ: デザインの好きな編集者を募集します
Webメディアの時代です。雑誌・書籍は特に日本ではしばらく消えることはないと思いますが、電子書籍も台頭しています。ぼくたち株式会社ZINEは出版ベンチャーです。編集も、Webも紙もデザインも全部まとめてやりたいというスタートアップ志向な方、ぼくたちと一緒に21世紀の出版社をつくりませんか？
出版ベンチャー株式会社ZINEでは人を募集しています。……と言いつついま編集者の採用はクローズしているのですが、近日中に採用オープンする予定です。
FacebookやTwitterなどで求人情報公開するのでぜひ今後とも株式会社ZINEをよろしくお願いいたします。
I WANT YOU FOR ZINE INC.
