文字詰めでデザイン内テキストの見栄えを整える個人的作業フロー
このブログではPythonやJavascriptなど、ほとんどプログラミングの事しか話していませんが、実は私は今の会社にデザイナー志望で入社しているので、少しデザイン方面の記事も書いていきたいと思います。
そんな訳で、今回はデザインの文字詰めの話となります。私はデザイン系の学生時代に授業でひたすら練習させられたのですが、入社したばかりの新人デザイナーの中には文字詰めを知らない人も多かったようなので、文字詰めについて紹介したいと思います。
はじめに：文字詰めとは？
文字詰めの概要に関しては、すでに先人達がわかりやすい記事を書いているので、そうした記事を紹介したいと思います。
そのため、今回の記事では普段私が文字詰めをどのようなフローで進めているのか、についてご紹介したいと思います。
なお、文字詰めという作業はデザイナーの技量や経験によってクオリティが大きく異なります。（素人目だと違いが分かり辛いのですが）私個人としては文字詰めがあまり得意ではないと自覚しているのですが、今回は新人デザイナーの方に教えることを前提に、僕が日々の業務で行なっている文字詰めの手法をご紹介したいと思います。
個人的な文字詰めのフロー
私が普段、バナー制作などのデザインを作る際は、下記のような流れで作業を進めています。今回はキャンペーンバナーによくありそうなテキストを想定して、文字詰めしてみました。
一覧化すると、テキストを入れるだけでも色々と調整を入れていることがわかると思います。続けて、各工程でやっていることを細かく解説していきましょう。
1. 調整なし
テキストツールでただテキストを配置した状態です。
2. カーニングオプションを「オプティカル」に
カーニングオプションを操作すると、文字同士の空き具合を調整することができます。その設定方法の中にある「オプティカル」を使うと、Photoshop側で自動判断して文字間を調整してくれます。
Photoshopでの操作方法は下記のブログの紹介が非常にわかりやすいため、こちらを紹介します。
最低限の調整としてはこれで十分です。しかし、バナーのメインになる要素などは自動調整だけでは綺麗にならないため、この後に手動で調整をかけていきます。
3. 記号と数字をHelveticaに変更し、文字間を少し空ける
ここでは記号と数字を「Helvetica」という英字の書体に変更しています。基本的に英数字・記号は日本語フォントではなく英字フォントを使う方が、デザインの選択肢も多く、綺麗な見た目になりやすいです。
英字フォントを選ぶときは、日本語フォントの太さや形なども意識して、違和感がないものを組み合わせましょう。
4.「ヤ」「ー」「還元」のサイズをやや小さく調整
小さい「ヤ」などの拗音（ようおん）や小さい「ツ」などの促音（そくおん）、また「ー」などの長音（ちょうおん）などは、少しだけ（メインテキストの85〜90%程度）フォントサイズを小さくすると、テキストの可読性が高まります。
これ以外にも「、」「。」などの句読点、カギ括弧なども、特に強調する理由がなければ、フォントサイズを小さくしたほうが良いでしょう。
促音や拗音に関して、より知識を深めたい方は、こちらの記事などを読んでみると良いと思います。
5. 全体的な文字間の調整＋「％」を小さく調整
あとは個人的な感覚に基づき、全体の文字間を手動調整しています。デザインは数値だけ見て行う作業ではないので、この段階では、画面デザインを見ながら、全体バランスに違和感が無くなるまで調整します。
この作業は必須では無いものの、もし自分がデザイン全体を見た時に違和感を感じるなら、その部分を調整してから提出すべきです。
完成！
最後に、一番上と最後の文字で比較してみましょう。
見比べると、まったく別物ですね。バナーには様々な要素が入っていますが、文字だけを見てもこれだけの調整を行なって作成しています。
文字詰めする時に気をつけていること
文字詰めで一番難しいのは「文字同士の間隔をどれくらい空けるか？」だと思いますが、個人的には「1単語の文字間隔は極力揃える」ようにしています。
4と5の文字間に色を置いてみると、5の方はそれぞれの文字間がほとんど均等な間隔になっていることが見えてきます。
基本的には文字同士の間隔が揃っていた方が、見た目のバランスが整っているという印象を持ちやすいため、間隔を揃えるようにしていますが、バランス間隔は人によって違いがあって当然なので、最終的には制作時間と相談しつつ、自分が納得いく状態となっていれば問題ないです。
余談ですが、過去に有名なデザイナーの講演を聞いた際に、そのデザイナーの方は練習のために「良いと思った人の作品を毎日模写し、同じ文字間をPhotoshopで再現できるまで何度も続けた」と話していました。
ネット上には先人達の素晴らしいクリエイティブがたくさん見られるので、それらのデザインを見て、自分がそれと同じ物を作れるように、日々手を動かし続けることが大事なのかもしれません。
まとめ
文字の扱いというのは非常に難しく、特に新人デザイナーだと苦労するかもしれないですが、文字間を上手に扱えるようになると、クリエイティブが非常に洗練されたものとなるので、色々なクリエイティブを見て、感覚を鍛えていきましょう。
