デザインの質を上げるコツ！ ～文字詰め編～

こんにちは。デザイン戦略部のくま太郎です。

「わーい！デザインが完成した！！……うーん、でもなんだか散漫な印象。 どこかツメが甘い感じもする…」
そんな時はありませんか？

そのモヤモヤの原因は細部の調整不足かも。
美しさは細部に宿ります。ちょっとした調整でデザインの質がぐんと上がるかもしれません。

デザインの基本！ 文字詰めをチェック

まずは以下をご覧ください。

一見、普通の名刺ですが、よーく見てください。
どこか気になるところはありませんか…？

赤く印をつけた部分、気になりませんか？
隣り合う文字の空きが不自然ですね。目線がつまづき、読んでいて違和感を感じます。
また、見た目にも不安定な印象があります。

このように文字の間隔が不自然に見える原因は、文字を「ベタ打ち」しているからです。
「ベタ打ち」とは、デザインツールのデフォルト設定のまま文字を流し込み、何も調整を施していない状態をいいます。

美しく読みやすい文字組をするために重要なのが「文字詰め」です。
IllustratorやInDesignの「文字パレット」の「カーニング」の数値を変えることで、文字間の詰まり具合を調整することができます。
その調整を「文字詰め（カーニング）」と呼びます。

目視で確認しながらチクチクと文字詰めをしてみましょう。
ショートカットキー「Alt」＋「矢印キー」で簡単に調整できるので、覚えておくと楽です。

※macは「Option 」＋「矢印キー」

文字詰めを実践！ まずは隣り合う文字の間を調整

先ほどの名刺に文字詰めをしてみました。

どこを調整したかわかりますか？ 文字詰め前後で比較してみましょう。

文字間が狭すぎる部分は拡げて、開きすぎている部分は縮めました。

加えて、ハイフンやコロンの上下方向の位置も整えています。これが見落としがちなので注意。

さらに文字の頭揃えを調整

次は、各行の頭文字の位置に注目してください。

へこんでいる文字や、飛び出している文字があり、デコボコして見えませんか。そこも直してみましょう。
直したのがこちら。

縦方向の調整前後で比較。

文字詰め完了！

一番最初に見てもらったベタ打ちの名刺と、完成品を比べてみましょう。

結構位置が変わっているのがわかりますね。
文字間の不自然さがなくなり、それぞれの単語が認識しやすくなっています。おかしな位置で目線が途切れてしまうこともありません。
また、先頭の文字位置が揃ったことで、整然とした印象になりました。縦方向が揃うと、キリッとした緊張感が出ますね。

このように、文字詰めを行うと読みやすさと美しさが格段に向上します。
地味だけど確実にデザインに効く重要な作業です。

WEBデザインでは文字詰めをすることが難しいケースもありますが、最近はCSSで以前よりも高度な文字詰め設定ができるようになってきました。
DTP、WEBといった媒体を問わず、読み手のために文字詰めにも気を配りたいですね。

特に注意すべき文字

ベタ打ちだと間隔が不自然になりやすい、要注意の文字を挙げておきます。

・プロポーションが縦長の文字
　「く」「ト」「I」「１」など

・斜めのラインが含まれる文字
　「A」「W」「X」「Y」など

・記号系
　「。」「、」「：」「～」「－」「・」など
　 ※記号系は左右だけでなく、上下のベースラインの位置も偏るので注意

「これ以上どこを詰めればいいのかわからない～！」となったら

文字色を黒※にして、目を細めてボヤ～っと文字を眺めてみましょう。
画数が多い文字ほど黒く、文字間が詰まって見えます。文字列の色の濃淡を均一にならすイメージで調整します。

※文字色がついていると、色の影響で文字本来のプロポーションが捉えにくくなる場合があります。

または、文字を反転させて図形として見方を変えてみるのも、空間が認識しやすくなるのでおススメ。

カーニングの練習ができるサイトもあるので、ゲーム感覚でチャレンジしてみてください。
スコアが出て楽しいですよ。
https://type.method.ac/

細部にこそ、デザイナーのこだわりが

デザインの質を上げるには、細部にこだわることが重要です。
ロジックを学び、コツをおさえれば、デザインはぐんと良くなります。

普段何気なく目にするポスターや書籍などを、よーく見てみるとデザイナーのこだわりが見えてくるかも。

デザインの質を上げるために出来ることは、他にもまだまだ沢山あります！
続きはまた今度～