超初心者のためのIllustrator文字ツメ入門(追記あり) #moji_for_webya

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

このエントリを書く理由

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

ウェブ時代のデザイナーのための文字組入門 第一回 「Illustrator / Photoshop文字組 一日集中入門」

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

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

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

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

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

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

金属活字と仮想ボディ・字面。
金属活字と仮想ボディ・字面(写真はWikimediaより・katorisi http://commons.wikimedia.org/wiki/File:Japanese_printing_type_2,Japan.JPG)

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

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

上がベタ組みの例。下がツメ組みの例。
上がベタ組みの例。下がツメ組みの例。
仮想ボディを当てた場合。ベタ組みは仮想ボディを隙間なく並べたものになっている。
仮想ボディを当てた場合。ベタ組みは仮想ボディを隙間なく並べたものになっている。

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

ベタ組み

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

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

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

極端なツメ組みの例。ぱっと見には字が詰まっていて気持ちいい人いるが、内容を読もうとすると読みにくい
極端なツメ組みの例。ぱっと見には字が詰まっていて気持ちいい人もいるが、内容を読もうとすると読みにくい(小塚明朝 Pr6N・メトリクス(自動)+トラッキング-50)
こちらは同じ文章をベタ組みにしたもの(小塚明朝 Pr6N・和文等幅)
こちらは同じ文章をベタ組みにしたもの。見た目、漢字と仮名による不均一な感じがあるが、読みやすいのはこちらではないだろうか(小塚明朝 Pr6N・和文等幅)

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

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

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

その他にも、ベタ組みでも行末が揃わなくなる要因はたくさんあります。
行頭・行末の禁則ルールの影響(たとえば、閉じるカギ括弧を行頭においてはならない、などのルール)や、カギ括弧が連続した時に一つ目のカギ括弧と二つ目のカギ括弧の間が空きすぎるという理由でこれを例外的にツメる場合にできる半端などです。
日本語文字のみのベタ組み。行末がぴったり合っている。
日本語文字のみのベタ組み。行末がぴったり合っている。
約物(記号類)と欧文を混ぜた。行末が揃わなくなる
約物(記号類)と欧文を混ぜた。行末が揃わなくなる
括弧の連続部分をツメた。また「小さいヤ」と「ー」は行頭に出さない設定(強い禁則)にしているため、ふたつめの「ニャー」が三行目に送られ、結果二行目の右に大きなアキが生じている
さらに括弧の連続部分をツメた。また「小さいヤ」と「ー」は行頭に出さない設定(強い禁則)にしているため、ふたつめの「ニャー」が三行目に送られ、結果二行目の右に大きなアキが生じている

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

先ほどの文章を行頭行末揃え(ジャスティファイ)した例。
先ほどの文章を行頭行末揃え(ジャスティファイ)した例。

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

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

ツメ組み

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

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

タイトルや見出しを想定して強くツメた例(小塚明朝 Pr6N・メトリクス(自動)・トラッキング-50)
タイトルや見出しを想定して強くツメた例(小塚明朝 Pr6N・メトリクス(自動)・トラッキング-50)

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

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

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

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

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

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

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

ペアカーニング情報

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

プロポーショナル情報

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

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

フォントは字形だけでなく、文字組みに関わる各種の情報も内蔵している
フォントは字形だけでなく、文字組みに関わる各種の情報も内蔵している

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

「自動」でツメルときは、必ず「プロポーショナルメトリクス」を併せてONに
「自動」でツメルときは、必ず「プロポーショナルメトリクス」を併せてONに

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

【モリサワのフォントには、ほとんどペアカーニング情報が含まれていない(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%)」と、仮想ボディに対する割合のアキを加えます。

トラッキング・アキを挿入のスペーシングのイメージ。基準は仮想ボディ
トラッキング・アキを挿入のスペーシングのイメージ。基準は仮想ボディ

文字ツメ

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

文字ツメのスペーシングのイメージ。仮想ボディと字面の間のスペースを元に、何%ツメルかを1文字毎に指定できる
文字ツメのスペーシングのイメージ。仮想ボディと字面の間のスペースを元に、何%ツメルかを1文字毎に指定できる

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

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

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

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

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

「、大」が「犬」の漢字に見える例
犬?

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

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

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

#LOVEFONT Advent Calendar 2014 

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

深沢 幸治郎
このブログ主の夫のほう。大阪を中心に活動するウェブデザイナー。水交デザインオフィス代表。JUSO Coworking運営。趣味でハウス・ディスコDJ / デレマスP。共著書『世界一わかりやすいWordPress 導入とサイト制作の教科書』発売中です。

6 Replies to “超初心者のためのIllustrator文字ツメ入門(追記あり) #moji_for_webya”

  1. ありがとうございます。
    お忙しい中、しっかりと理解してくださっていて、うれしい限りです。
    が、少し誤解を与えそうな部分に補足を加えておきます。
    —–
    >IllustratorはInDesignから引き継がれた、自動カーニング機能を備えています。
    ※引き継がれたどうかはわかりませんが、挙動としてはほぼ同じです。
    >したがって自動(メトリクス)カーニングを用いることはできません。
    ※用いることはできますが、設定のない(ペア)カーニングは効かないということです。
    >仮想ボディに対する割合のアキを、仮想ボディの後ろに加えます。
    ※マイナスも可能ですので、「加減」がより正確かと思います。
    >文字ツメの図
    ※(文字毎に設定可能なので)本来は1文字毎の字面と仮想ボディとのアキ(左右のサイドベアリング)を%に応じてツメることになります。
    —–
    続き、できれば来年にでもやりましょうね。

  2. 追伸です…
    >自動(メトリクス)の挙動は小塚ゴシックなどモリサワフォント以外のフォントを利用して確認して下さい。
    ※これは適切で親切な記述ですね。
    —–
    以下ご参考まで
    https://twitter.com/works014/status/525465630888050688
    https://twitter.com/works014/status/525465676752777216
    https://twitter.com/works014/status/525465781560025088

  3. もひとつ…
    さらに加えて、拙ブログ関連頁へのリンクを…
    —カーニング各種のおさらい
    http://d.hatena.ne.jp/works014/20121117
    「カーニング」と「文字ツメ」とフォント内部の情報
    http://d.hatena.ne.jp/works014/20121125

  4. 深沢 幸治郎 深沢 幸治郎 より: 返信

    works014(大石)様

    ご指摘ありがとうございます。早速直しておきました。「文字ツメ」に関しては誤解がありましたね。引き続き、もしも誤解を与えそうな点があればよろしくお願いいたします。

    ぜひ、続きは来年に。楽しみにしていらっしゃる方もたくさんいると思います。

  5. すいません、もうひとつ追加です……
    「日本語組版関連の説明」ということで当日も言及はしませんでしたが、いらぬ誤解を招く可能性がありますので、【「オプティカル」は「欧文」については基本的には避けたほうがいい】旨の記述を追加していただければ、ベターだと思います。
    ※FBの方で欧文に詳しい方から言及がありましたのでよろしくご配慮ください。
    https://www.facebook.com/tomio.ohishi/posts/725462367549462?comment_id=725477930881239&notif_t=comment_mention

  6. […] 超初心者のためのIllustrator文字ツメ入門(追記あり) #LOVEFONT #moji_for_webya -Suikolog […]

コメントを残す