▼第1回
デザインの基本は「そろえる」ことにあります。出発点といって良いかも知れません。「そろえる」ことにはさまざまな要素があります。ここでは、まず「行をそろえる」ことからお話しをすすめていきましょう。
アプリケーションは、Adobe Illustrator を使用することを前提にしていきます。（スクリーンショットは Illustrator CC 2017 Mac。可読性を最優先に考えたので、ほとんどは拡大しています。若干ぼけているものがあります。ご容赦ください。それにしても CC の UI はどうしちゃったのかなぁ？ 見づらいし、ダサイと思いません？）
| 第1回もくじ | 1.1 すべてのデザインの第一歩「行を揃える」 |
| 1.2 デザイン初心者に共通なこと「千鳥」 | |
| 1.3 ガイドは必要、でも頼りすぎない 1.3.1 ●ガイドの功罪と文字の構造 1.3.2 ●〔ふんぞり返り〕のすすめ |
1.1 すべてのデザインの第一歩「行を揃える」
行の揃え処理は、つぎの４種類があります。このいずれかの「揃え処理方法」で、ていねいに揃えていけば、おのずとデザインはしっかりと締まったものになっていきます。なぜなら、人間は整列されたものを美しいと感じ魅かれ、雑然としたものに嫌悪感を抱く感性をもともと持っているからです。
| １ | 行頭揃え（Illustrator表記は左揃え） |
| ２ | 行末揃え（Illustrator表記は右揃え） |
| ３ | 中心揃え（Illustrator表記は中央揃え） |
| ４ | 均等揃え（Illustrator表記は均等配置） |
（figure1-1）
日本語は、横組み・縦組みの２種類があるため、Illustrator の表記は正確とはいえません。まあ、このアプリケーションの制作拠点はシリコンバレーだから仕方ありませんけど…。
均等揃えは、厳密には４種類あります（①最終行左・上揃え、②最終行中央揃え、③最終行右・下揃え、④両端揃え）。よく使われるのは①と④。なお、均等揃えはテキストボックスでの編集が前提です。
①の用途は長文の文章、④は伝票の品名部分など、特定の文字数に合わせる用途に使用されます。
1.2 デザイン初心者に共通なこと「千鳥」
デザインを志した人は、少なからず「揃え」は意識して作品を作っています。でも、何といっても経験が不足しているため、きれいに見せる方法を知りません。ですので、より効果的に見せるコツを一緒に探っていきましょう。
デザインを始めたばかりのかた（以下、「デザイン初心者」と略させてください）は、前後（上下）を揃えることに必ずこだわります（こだわるというより、囚われちゃうのかな）。たとえば、見出しと文章がある場合、図のような配置をしがちです。つまり、文章の長さに見出しを無理やり揃えてしまいます。見出しが複数行ある場合、順番にスペースで右に押し出して、文章の行末までもってくるんですね。
（figure1-2）
この、順番に文字を下げて、斜めの状態にすることを「千鳥（ちどり）」と呼んでいます。もともと新聞の見出しに使われている伝統的な「揃え？」手法です。この名称は千鳥という鳥の、両足を揃えて立たない習性からきているようです。
新聞って、お世辞にもデザインが洗練されているとはいえませんよね。その大きな理由のひとつが、この「千鳥」だと私は思っています。「千鳥」の最大の欠点、それは、どこも揃っていないことです。
デザインの揃えには、短歌や俳句を表現する場合など、よほどのしっかりした理由がない限り、「千鳥」は使うべきではありません。
（figure1-3）
新聞の切り抜きは、読売新聞：2017年4月29日付
新聞の見出しは、基本的にすべて “千鳥” の組みかたになっている。横組みは、中心揃えが多いようである。
1.3 ガイドは必要、でも頼りすぎない
Illustrator や Photoshop の優れた機能として、ガイドがあります。これは揃えを行う上で便利ですが、これに頼りすぎると、逆にデザインを壊す原因になります。
1.3.1 ●ガイドの功罪と文字の構造
たとえば、大見出しと小見出し、そして本文の３種類を行頭揃えにする場合、ガイドのとおり揃えると図のようになります。ガイドが見えているうちは揃って見えますが、ガイドを消すと大きい文字列ほど右側に寄っていることがわかります。
なぜこのようなことが起こるのか、それは、フォントの構造にあります。
和文フォントは、一番外側の四角（文字サイズのもとになる輪郭「ボディ（仮想ボディ）」：当サイトでは単純に「ボディ」と呼びます。理由は下のほうに書きました）より少し小さめの四角（字面枠〈じづらわく〉）の中にフォント自体の字面（じづら）がいっぱいに収まっています。
文字サイズが大きくなればなるほど、それに比例してボディと字面枠の距離が大きくなるので、その分右側に寄って見えることになります。
（figure1-4）
左図 ガイドあり：ガイドがあると、何となく左側が揃って見える。
中図 ガイドなし：ガイドをはずした瞬間、上の２行が右に寄って見える。特に「文」の字が著しい。
これは、ガイドが、文字の左側の空間との壁になっていたためで、はずすと文字の左側の空間（ホワイトスペース）が「文」の左側の広い空間に流れ込み、右側に押し出す。目の錯覚である。
右図 修正後ガイドを消去：１行目と２行目を左側にずらす。
ずらす量は、数値では表すことができない。あくまで見た目で判断するしかない。
「適切」な感覚を要求される難易度の高い作業である。薄い点線を入れてある。結構ずらしたのがわかるだろうか。
1.3.2 ●〔ふんぞり返り〕のすすめ
ガイドで一度そろえた後、ガイドを消し（表示＞ガイド＞ガイドを隠す）ます。さらに、椅子を引いて〔ふんぞり返って〕ください。これは目線を画面から遠ざける（いつもより30～50cm）大事な行為です。こうすると、普段の目線では気付けないものが見えるようになります。ただし、周りには「態度が悪いわけじゃないよ」と、いっておいたほうがいいかな？
見出しの文字列が右にずれて見えることがはっきりしましたね。では、その分左に移動させましょう。文字によっては目の錯覚で、信じられないくらい右に寄って見える場合もあります。
（figure1-4）では、「文」の文字が先頭にきています。この文字は、左側に広い空間あります。このような〔スカスカ〕な文字は「国」などのように、しっかり左側がある文字より、さらに右側にずれて見えるのです。このように文字によって微調整の値が変わってくるので、「適切」に処理する感覚を磨くことが大切です。
「仮想」という言葉をIT用語辞典で引いて見ると、「実際には無いが、仮にあるものと考えて見ること。仮に想定すること。」とあります。
じゃあ、デジタルフォント（ここではあえて正確にデジタルフォントと呼びます）は正方形という「実体」がないのかというと、そうではありません。明確にあります。目に見えないだけです。
これは1000emという実体のある数値であらわすことができます。すべての和文のグリフ（字形）はこの「1000em」の正方形のなかに存在しています。これは、「活字」と同じです。実体があるのですから呼び名は「ボディ」でよいのです。
この「仮想ボディ」という呼び名は、もう取り返しがつかないくらい流布してしまって、当たり前になってしまいました。このサイトでは、ささやかな抵抗をし、間違った概念を正していきたいと思います。
でも、「ボディ」だけで通じなくても怖いので、章あるいは節の始めに出てくる場合のみ「ボディ（仮想ボディ）」という書き方をします。あしからず。（何という軟弱さ…）
上記の「仮想ボディ」に対する考えかたは、丸山邦明さんのブログサイト（ものかの）で、実に論理的に説明されています。ご一読をおすすめします。
● ● ●
次回（第２回）は、フォント（特に和文フォント）の構造についてお話しします。予告下ページャ［２］のクリックを。
| 第2回予告 | 1.4 決して遠回りではない「文字を知る」こと |
| 1.5 文字形状（グリフ）の構造を知る |
この記事へのコメントはありません。