超初心者のための文字組入門（追記あり） #moji_for_webya

このエントリは#LOVEFONT Advent Calendar 2014 への参加エントリです。好きなフォントについて語るブログ・アドベントカレンダーではあるのですが、失礼して「フォントの使い方」に解釈を広げてお送りいたします。

このエントリを書く理由

JUSO Coworkingで9月から11月にかけて、私が企画し開催した「ウェブ世代のデザイナーのための文字組入門 第一回・Illustrator / Photoshop 文字組一日集中入門」。「文字組みに関する知識ゼロのウェブデザイナーであっても受講でき、理解できる基礎講座を開きたい」という願いから、組版屋の大石十三夫氏（はあどわあく・なんでやねんDTP）を講師としてお迎えし、実現したものでした。

この講座を開催した理由はいろいろありますが、ひとつは文字組みを知らぬままデザイナーになってしまった私が勉強してみたいから、ということでした。文字組みはデザイナーの基礎のキであると多くの先輩方は言うけれど、ウェブサイトの本文は（現在のCSSでは）細かく文字組みをすることはできず、ウェブデザイナーとして就職した会社員時代にも誰にも教わることはありませんでした。だから一度は教わってみたい。どうせ教わるならみんなで聞こう。そう思って大石さんにお話をもちかけたのが始まりでした。

同じ想いを抱えているウェブデザイナーは多かったようで、この講座はあっという間に満席となり、同一内容の追加講義を4回も重ね、延べ60人ほど方にお越しいただくことができました。

スタッフをしながらでしたのですべてを聞けたわけではありませんが、立場を利用して都合4回もこの講座を聴けた私が詳しく内容をブログにまとめなければ、と思いながら1ヶ月がたってしまいました。折しもこのアドベントカレンダーが回ってきましたので、これをきっかけにさせていただき、大石さんから聞いた話を元に、Illustratorにおける文字組みの基礎的な知識をおそるおそる、ではありますがまとめたいと思います。

とはいえ計6時間の講座ですので、2回に分けてまとめようと思っています。前半はIllustratorにおける文字ツメについて。

文字を組む――ベタ組みとツメ組み、それらの選択について

日本語の活字は正方形の仮想ボディの中に字形が収まる形で作られています。すべての日本語の文字は正方形の中に収まる形で調整されていることは、国語教育の字の書き取りで皆さんよくご存知のことと思います。和文の活字はこの正方形の活字をくっつけて並べる（組む）ことで、行を構成していました。

正方形の仮想ボディはそのままに、活字と活字をぴったり合わせて行を構成するように組むことを「ベタ組み」と呼びます。一般的に日本語の活字はこの「ベタ組み」で組んだ時に読みやすくなるように調整されています。

対して、仮想ボディではなく字面（文字そのものの占める大きさ）の幅（または高さ）を元に文字間をツメるような組み方のことを「ツメ組み」と呼びます。一般的に文字をデザインの一要素として捉え、読みやすさよりも見栄えを重視して組みたい場合に用いられます。

ここで注意すべきは「読みやすさ」や「見栄え」というのはその文字が使われている箇所や大きさなどによって大きく変わるということです。「小説を読むとき」と「広告の大見出しを読むとき」では、読み手の文字への対し方が変わることは想像できるでしょうか。したがって、ふさわしい文字の組み方は大きく変わってくるのです。「フライヤーの本文を読むとき」や「カタログの商品スペックを読むとき」など、読み手の文字に対するシチュエーションは様々であり、文字を組む人は絶えず文字の読み手の文脈を想定しながら、文字組みをプランニングする必要があります。上記の説明において「一般的に」を強調したのは、手法の使い分けとその動機が絶対のものではないことを示したかったからです。

ベタ組み

おもにベタ組みで読みやすいように想定されているシチュエーションは「書籍や雑誌記事の本文」です。小説など文字がコンテンツの大半を占めるような場合にふさわしい文字組みを簡単に実現するために活字は設計されてきました。「なにも考えずに活字を隙間なく並べて行を作れば、おおよそ（あくまでおおよそ）読みやすい文字組みを表現できる」ことを狙って活字はデザインされてきたわけです。

たとえば、と読点を打てば、その後ろには半角程度のアキが生じます。これが読み手に小さな一呼吸を感じさせ、読むリズムを整えてくれます。これがないと長文を読むときになんとも言えない息苦しさ・読みにくさを感じるのではないかと思います。

ですからたまに聞くようなベタ組みは素人のすること、というような言説は誤解であり大きな間違いです。おもにデザイン分野では文字がデザインの一要素として捉えられ（タイポグラフィ）見出しやキャッチコピーを中心にツメ組みが積極的に用いられていますが、ある程度長い文章においては、それが逆に可読性を下げることにもなりうるわけですから。

日本語文字だけでベタ組みをすると、行頭と行末のラインはぴったりと揃うはずです。全ての文字が正方形の仮想ボディにおさまっており、その仮想ボディが隙間なく並んでいるわけですから、当然の結果、と思うでしょう。日本語は普通に組めば行頭と行末が揃うものだし、それが美しいという感覚は素人の私でも持っている感覚だと思います。

しかし多くの場合、実際に日本語をタイピングしても、行頭は揃っていても行末は揃ってくれません。これはなぜでしょうか。

ひとつは、多くの場合日本語の文章には数字や英字が混じってくることが多いからです。これらは日本語と違って文字種によって異なる幅の仮想ボディを持っている（これをプロポーショナルである、と表現します）ため、行によって半端が出てしまい、行末が合わなくなるのです。英数字には全角のもの（つまり日本語同様正方形の仮想ボディをもつもの）も存在しますが、全角英数字はあまりに字面が大きくアルファベットやアラビア数字としてふさわしい美観を備えたものではありません。

しかしそれでも、行頭行末はぴっちり揃えたい……。組版の先人たちはそう思い活字を組みました。行頭行末は無理矢理にでも揃え（ジャスティファイ）、やむなく生じた半端はどこか別の、より見栄えが悪くならない箇所で処理しよう……。この「見栄えが悪くならない箇所」というのがまた難しく、シチュエーション別に様々な文字組みのノウハウが発明され、受け継がれてきました。

文章をジャスティファイした時に、生じている半端をどこで処理するか。これを一定のルールに従って自動化する仕組みがIllustratorには備わっています。「文字組みアキ量設定」というものです。これについては後日の記事で書く予定です。

Illustratorにおいてベタ組みをしたい場合は、カーニングを「和文等幅」にするといいでしょう。これで和文はベタ組み、混植された欧文についてはメトリクスカーニング（詳しくは後述）する、という設定になります。

ツメ組み

私たちウェブデザイナーはこのツメ組みに取り組むことの方が多いかもしれません。見出しやキャッチコピー、あるいはデザインの一要素として用いられる本文やリード文において用いられることが多いのがツメ組みです。

日本語は漢字と仮名という異なった要素から構成されています。仮名は漢字より字面が小さくまた大きさも不均一であるため、大きく文字を使う場合などに、ベタ組みでは字間の不均一が目立ち、美観を損なう場合が多くあります。そのため、字面を基準として文字をツメ、字間をできるだけ均一に見せるようになりました。これがツメ組みです。

Illustratorでは文字パネルの「カーニング」を用いて、一字一字の字間を調整することが可能です。しかし、これをある程度以上の長文で一文字一文字行うことは、文字組みの管理の面から考えても得策ではありません。

そこで。IllustratorはInDesignから引き継がれたと同様の挙動をもつ自動カーニング機能を備えています。自動カーニング機能にもいくつか種類があるので、それぞれの特性をご紹介します。

1. 自動（メトリクス）（2014年12月9日に内容を修正・追加しました）

Illustratorにおいては「自動」という呼称になっていますが、これはInDesignにおける「メトリクス」に相当する機能です。メトリクス・カーニングは

• 字面に応じて仮想ボディの幅を調整し（プロポーショナル組み）
• かつ文字と文字の組み合わせに応じてフォントに内蔵設定されたカーニング（ペアカーニング）を加味する

ことでツメ組みを実現するものです。

フォントとは文字を表現するためのデータであり、そこには字形ももちろん含まれていますが、ペアカーニング情報やプロポーショナル情報などの多くのパラメータや文字コードなども含んでいます。

ペアカーニング情報

文字に含まれる情報のうち、字の組み合わせ（ペアリング）に応じてツメるための情報です。OpenTypeフォントの仕様によれば「karn」というパラメーターがこれに当たります。

プロポーショナル情報

文字に含まれる情報のうち、字幅に合わせて文字（グリフ）の位置を調整するものです。OpenTypeフォントの仕様によれば、横組みの場合「palt」、縦組みの場合は「vpal」というパラメータがこれに当たります。

メトリクスはプロポーショナル情報（paltまたはvpal）で字幅を整え、合わせてペアカーニング情報（kern）を用いてツメ組みを行う指定、というわけです。

なお、この「自動（メトリクス）」を用いる場合、フォントは必ずOpenTypeのものを利用し「OpenType」タブの「プロポーショナルメトリクス」をONにしてください。
これを設定していないと、自動（メトリクス）でツメた上から手ヅメで調整を加えた際に、前後の文字のプロポーショナル設定値が外れ、意図しない部分の文字間が動いてしまいます。これをさらに上から調整するなどすると、もう文字ツメを管理することができません。

詳しくは下記の記事を御覧ください。

• メトリクスには「プロポーショナルメトリクス」の併用が必須 – なんでやねんDTP
• メトリクスには「プロポーショナルメトリクス」の併用が必須_再 – なんでやねんDTP
• 「ウェブ時代のデザイナーのための文字組入門 」に参加してきました | デザイナーのイラストノート

【モリサワのフォントには、ほとんどペアカーニング情報が含まれていない（2014年12月現在）】

誠に残念なことに、現時点でモリサワのほとんどのフォントにはペアカーニング情報が含まれておらず、したがって自動（メトリクス）カーニングを用いることはできません「自動（メトリクス）」カーニングを指定してもペアカーニングは効きません。自動（メトリクス）の挙動は小塚ゴシックなどモリサワフォント以外のフォントを利用して確認して下さい。

最近、モリサワはようやくペアカーニング情報をもつフォントをリリースしました。2014年版MORISAWA PASSORTから収録された「AP-OTF 凸版文久明朝」がそれです。今後モリサワは新ゴやリュウミンなどの主力フォントについても、ペアカーニングをもつAP-OTFフォントを従来版と併せてリリースする予定です。

AP OTFフォントとペアカーニングについて | フォント製品 | 株式会社モリサワ

2. オプティカル

IllustratorやInDesign独自の機能です。フォントに内蔵された情報を参照せず、文字の大きさをソフトウェアレベルで読み取り、これを元にカーニングを加えることでツメ組みを実現します。

ですから大半のモリサワのフォントなどペアカーニング情報を含まないフォントやOpenTypeでないフォントであっても利用することができる、というのが大きな特徴です。また、フォントメーカーが設定した、フォント内蔵のカーニング情報より美しく詰まることもたまにあるのだとか。

ただし弱点もいくつか。まず縦組みには効かないこと。そして行頭行末揃えに関しても不具合を抱えており、ほぼできないということです。
詳しくは下記の記事を御覧ください。

Illustratorでの箱組にオプティカルカーニングは不適 – なんでやねんDTP

【追記】オプティカルは特に欧文書体では、できるだけ避けるべし、というお話

Yoshino Akira（@akira1975）さまから以下のとおりご指摘を賜りましたので追記します。

欧文については、書体デザイナーが苦労してスペーシングとカーニングを設定して、書体を作ります。基本的には、それを使って組む、デフォルトの状態（メトリクスを使う）が、オプティカルよりちゃんと組める、理想の状態とされます。ですので、オプティカルを使われるのを書体デザイナーは嫌がります。
もちろん、スペーシングやカーニングは万能ではないので、見出しなどで気になる字間があれば、手詰めする必要はあるでしょうけれど。

ということで、特に欧文については原則オプティカル・カーニングを用いるべきではない、ということでした。原則に対する例外については

スペーシングの設定がひどい欧文書体や、カーニング・データがなかったり乏しかったりする欧文書体には、オプティカルを使ってもしょうがないときもありますけどね。（オプティカルを使ったら余計に悪くなる場合もあるので、その際はやめたほうがいいですが）ただ、そもそもそんな欧文書体は使うべきじゃないのですけど。

とのことです。ひとつ勉強になりました。ご指摘ありがとうございました！

3. 和文等幅

「ベタ組み」の項で述べたとおり、和文に関してはベタ組み、欧文に関しては自動（メトリクス）を適用するという設定です。

トラッキング、文字ツメ、アキを挿入の違い

Illustratorの文字パレットには他にも文字をツメたりアケたりするためのパラメータが存在しています。
これらはどういった挙動を示すのか、詳しく見てみましょう。

トラッキング

仮想ボディに対する割合のアキを、仮想ボディの後ろに対して加えます加減します。

アキを挿入

文字の前後（任意に指定可能）に、「八分（12.5%）」「四分（25%）」「二分（50%）」「二分四分(75%)」「全角（100%）」と、仮想ボディに対する割合のアキを加えます。

文字ツメ

字面と字面の間のスペースを読み取り、そのスペースに対する割合を元にツメていきます。
その文字が持つ仮想ボディと字面の間のスペース（サイドベアリング、と言います）を読み取り、そのスペースに対する割合を元にツメていきます。

「トラッキング」と「アキを挿入」の違い

どちらも仮想ボディに対する割合のアキを加える点では共通していますが「文字組みアキ量設定（別記事にて解説する予定）」におけるアキを上書きするか否かの差があります。
「アキを挿入」は「文字組みアキ量設定」を上書きしますが、「トラッキング」はこれを上書きせず、アキ量設定のアキに加算する形で、さらにアキを加えます。

結局どうツメれば正解なんですか？

こういう質問が参加者から出ました。「人によるよね」と大石さんは応えました。
どんなに合理的な組み方のルールを定めても、たとえば下の図のように「、大」が「犬」に見えちゃう場合がある。これに気づかず対応しないのはどう考えてもよくないことだ、と。

本文ならベタ組み、見出しならツメ組み、だなんて機械的に決定するものでもないし、結局読み手がどういう文脈の中で文字を読み意味を汲み取るのか。そこを想像することに尽きるのだろうと私は思います。文字組みの美醜の感覚は人によって異なりますが、ルールに一貫性がないことや、決めたルールに縛られるあまりに読みにくい状況が生じたときに、これに個別に対応できていないのは明らかにいけないことだと私は解釈しています。

次回は「文字組みアキ量設定」について

次回は、このエントリでも少しだけふれた「文字組みアキ量設定」について書く予定です。ええ、いつになるかは分かりませんが…なんとか年内には…ええ…

#LOVEFONTアドベントカレンダーはまだまだ続きますよ！

#LOVEFONT Advent Calendar 2014 

さまざまなデザイナーさんがフォントについて愛をささやくエントリを上げてくださいます！ ぜひフォント大好きなアナタ、追ってみてください！