文字組みの基礎を解説！しっかり理解して美しいデザインへ！

デザイン作業をおこなう機会がある方の中には、文字組みをあまり意識していないという方もいらっしゃるのではないでしょうか。デザインの美しさ、フォント選びももちろん重要ですが、基礎に則って文字組みをおこなうことはデザインを行ううえでとても重要です。気をつけるポイントは多数ありますが、最低限のことだけでも注意すれば、今より格段に文字を美しく見せることができます。

今回は、必ず知っておきたい文字組みの基礎ルール、カーニング、字送り、文字詰めの違いについてご紹介します。
これまで文字組みに真剣に取り組んでこなかった、という方はこれを機に是非意識してみてください。

▼ディレクターとデザイナーで読みたい資料

マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

文字組みの基礎テクニック

1.「横書き」と「縦書き」を覚える

デザインのレイアウトによっては、文章を縦に配置する場合と横に配置する両方の場合があると思います。
Webサイトのデザインやデジタル系のバナーだと、横に文章を揃えることが多いですが、ポスターやリーフレットなどの印刷物の場合はその限りではありません。
制作物と文章量によって、どちらの方が読みやすい構成が作れるか意識しながら、文章の向きは決定しましょう。文字を読む順番・流れに注意する
デザイン性に気を取られて意外と見落としてしまうのは、文章を読むときの視線の流れです。
一般的に横書きのときは、左上から右へ読んできます。
縦書きのときは、右上から左へ読んでいきます。
稀に縦書きと横書きが混同したレイアウトの場合、配置によっては読みにくい上にわかりにくい構成になってしまうので、意図的にしない限り基本的に文章の向きは統一しておいたほうが無難です。

2.「行間」と「行長」、「文字サイズ」のバランスを確認

文章の読みやすさで特に注意してほしいのが、「文字サイズと行間のバランス」です。
カーニングのときに学んだように、文字は打ちっぱなしでは読みにくかったりバランスが実は撮れていなかったりします。
○文字サイズの単位は（pt）、Webと印刷での大きさの差に注意。
illustratorなどの文字パネルでは、文字のサイズは「ポイント（pt）」で表されます。
1ptの大きさは「１pt＝約0,3mm」です。
印刷物なら6〜7ポイント、WEB媒体なら12〜15ポイントが読みやすい文字サイズの最低ラインです。
一般的な指標ではありますが、この常識を知っているのと知らないのでは、見直すポイントが変わってきます。

3.文章の「禁則設定」を見直す

禁則処理とは、文章の「、」や「。」などの約物（やくもの）が行の頭や改行前に収まるように処理することです。
主な設定方法は「段落タブ」を選択して、パネルメニューから「オプション表示」を有効にします。
特にこだわりがない場合は、以下のように設定しておけばいいでしょう。
※ハイフネーションは欧文の列の見た目を整える設定です。

4.ひらがな、カタカナは原則詰める

http://stocker.jp/diary/typographic/

ノンデザイナーであれば、あまり気にしないのが文字の間の余白ですが、実は文字の形式に応じて調整する必要があります。
漢字の場合は、文字間を調整することなくベタ組みしても問題ないことが多いですが、ひらがな、カタカナの場合には原則、詰め、隣り合う文字との余白を少なくします。
理由は、漢字に比べ、ひらがなやカタカナの余白が大きいためです。

漢字と並べた時に余白がある分、間延びしたように見えてしまいます。
特に、タイトルを書く際、短い文章を大きく表示する際に違和感が目立ってしまいがちですので注意が必要です。

5.記号は適度に詰める

http://stocker.jp/diary/typographic/

忘れがちな記号も適度な感覚に詰めることで、よりプロっぽいデザインに仕上がります。
、・「」。といった記号はひらがな・カタカナ同様に横に余白が生じてしまいますので文字間の調整が必要です。
タイトル、見出しで大きく扱う際、隙間があると特に悪目立ちしますので、全体のバランスを見ながら適切な余白に整えます。

6.助詞は一回り小さくする

http://www.actzero.jp/developer/report-2711.html

文章にメリハリがないと感じた時の一つの対策として、助詞を一回り小さくするという方法があります。
助詞とは、「は」「が」のような、単独では使わない、他の語に付属し意味を付加したりする言葉のことです。
例えば、「今日は晴れ」という文章の場合「は」が助詞となりますので、その他の文字よりも少し小さくすると抑揚をつけることができます。

この時、小さくした助詞は左揃えの場合は下寄せ、中央揃えの場合は真ん中揃えにするのが定番です。
また、「ファイト」の「ァ」のような小さい文字についても助詞と同じように小さくすると、さらに美しい見た目に仕上がります。

7.括弧は一番細いフォントにするとスマートになる

http://lab.sonicmoov.com/design/typesetting/

デザイナーでない方は知らない方も多いのが、括弧の取り扱いについてです。
雑誌、広告の大見出しを見るとよく分かりますが、括弧だけが細いことがほとんどです。
括弧に細いフォントを使用すると、スマートで上品な仕上がりになります。

この時、始まりと終わりの括弧のベースラインにも気をつけるとさらに見た目のクオリティを上げることが可能です。
また、括弧に細いフォントを使ってみていまいちだったり、あまり細くない場合には、Photoshopのツールを使って1pxの線で括弧を作るという方法もあります。

8.単位には少し小さいフォントを選ぶ

http://stocker.jp/diary/typographic/

「○○円」といった単位を含む文字を普通に組んだ場合、数字の方が「円」より小さく見えていまいちな見た目になってしまいます。
単位の入った文字列では、単位の箇所のフォントサイズを約1/2から2/3に抑えると、見やすくバランスのいい文字列になります。
この時、ベースラインがずれないように他の文字と合わせて調整が必要です。

逆に、数字だけを極端に大きくして強調するということも可能です。
スーパーの広告が参考になりますので、一度見てみましょう。

9.文字をゆがめない

http://tsutawarudesign.web.fc2.com/yomiyasuku2.html

文字が読みにくくなる原因の一つが、文字がゆがんでいることです。
はっきりとした書体であっても、横や縦に伸ばして本来の縦横比を崩してしまうと読みにくくなってしまいます。

もちろん、見た目の良さにおいてもゆがんでいない文字のほうが美しいのは当然です。
文字のサイズを変える際に、縦横比を保ったままにしないと文字がゆがみますので注意が必要です。

10.英文、和欧混植の文章ではフォントに注意する

http://tsutawarudesign.web.fc2.com/yomiyasuku2.html

日本語文章の中に英文を使う場合には、フォントに気を配る必要があります。
メイリオ、ヒラギノ角ゴといった定番フォントにおいては和欧混植しても美しく見えるようにデザインしてありますが、中には英文を書くと可読性が悪くなるフォントがありますので、面倒ではありますが英文部分のみ欧文フォントを使うのがベターです。

和欧混植に向く日本語フォントである場合にも、英文は欧文フォントのほうが美しく仕上がります。
日本語フォントと欧文フォントを組み合わせる場合には、雰囲気・サイズ・大きさが似ているデザインのフォントを選ぶと違和感のない見た目になります。

11.全角、半角をしっかり区別する

http://whatsdesign.arrow.jp/illustrator04.html

基本的なことですが、案外見落としてしまうのが全角、半角の区別です。
特に、数字・英語・記号・カタカナを使う際に、表記がばらばらになっているということは少なくないので注意が必要です。

全角、半角どちらを使うか予め決めた上で、表記を統一する必要があります。
ちょっとしたことではありますが、表記を揃えると格段に見た目も良くなり、可読性も上がります。

12.ホワイトスペースに考慮する

http://visualliteracy.jp/design/2080.html

文字と文字の前後だけでなく、文章の余白にも注意をすることが重要です。
文字の余白であるホワイトスペースの取り方にはある程度ルールがあり、字間の余白は行間より狭く、行間の余白は段落の間よりも狭い必要があります。
これさえ守れば、きちんとしたホワイトスペースを確保することが出来、読みにくい文章になってしまうことを防ぐことができます。