RACCOON TECH BLOG

株式会社ラクーンホールディングス 技術戦略部より、
tipsやノウハウなど技術的な話題を
発信いたします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

文字詰め完了!

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

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

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

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

特に注意すべき文字

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

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

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

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

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

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

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

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

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

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

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

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

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

関連記事

運営会社:株式会社ラクーンホールディングス(c)2000 RACCOON HOLDINGS, Inc