今更聞けないデザインテクニック①：文字を見やすく整える

文字詰めについて

文字を詰める！

いつもフリー素材を使ってくだらない画像加工をして楽しんでおります、とっつぁんです。

「今更聞けないデザインテクニック」と題しまして、基礎的なデザインテクニックをまとめていく予定です。今回は「文字を見やすく整える」という事。

まぁデザインって感性の問題で「正解がない」と言えばないのでしょうけどね…

伝えたい事を伝わりやすく！

「文字を見やすく整える」と言っても「ただ何となく見やすければ良い。」という事ではありません。

「伝えたい事を伝わりやすく」という事を考えて調整します。

とりあえず例を挙げて説明してみます。

「文字を詰める」という文章をphotoshopで書いてみました。

フォントってやつは何もしていないとこんな感じです…

どうですか？読みやすいですか？

あ、読みやすい？そうですか…

まぁ実際これが読みにくいかどうかと言われたら「別に読みやすいけど？」って感じですよね、わかります（笑）

なので、普通に仕事してるWEBデザイナーさんとかでも、フォントを入力してそのままバナーのサイズに会うように拡大縮小、色を変えたりドロップシャドウや境界線入れたら完成！

という人も結構いらっしゃいます。

かく言う私もデザイン会社に就職してしばらくは気にした事もありませんでした。

伝わりやすくするにはどうすればいいの？

さて、文章の意味を伝わりやすくデザインするとは具体的にどういうことなのか？

っと言いますと…

「メリハリをつけて伝えたい部分を強調する」ということになります。

デザイナーさんじゃなくても、「要点だけは色を変える」なんて事はやってたりしますよね？

ただし、たまーに「要点だらけじゃねーか！」みたいな文章も見ますけど…

色を変えるのも立派な強調ですが、以下のように、ひらがなの部分のみ小さめにして、漢字の意味を伝わりやすくする、という方法もあります。要点のみ若干大きくする訳です。

文字を詰める

さて散々「文字を詰める」と書いてきましたが、文字を詰めるとはどういう事か？

先に例を挙げるとこういうことです。

字と字の間の空白が狭くなっていますね？

フォントってカーニング（文字と文字の隙間）は一定ではない為、デフォルトだと不自然な間隔で並んでるんですよね。

一番分かりやすいのが句読点「、」「。」ですかね、句読点を入れると妙に間が空いてませんか？

一文字一文字、同じ大きさのキャンパスに文字を保存したものがフォントとなっているので、

「あ」も「、」も空白を含めて大きさは同じだからこういう事が起こるのですが、実際に人間が見るとこの空白部分は不自然な訳です。

句読点は文字の区切りに使うものなので実際はそれほど違和感は無いかもしれませんが、フォントによっては「あれ？なんかここだけ妙に離れてね？」とかなる事もよくあります。

もちろん逆にくっつきすぎている文字を離すこともあります。

英文などはｎとかｍがくっつきすぎると逆に読み難い場合も大いにあるでしょう。

この辺りは数をこなして感性を磨き、カーニングに慣れるしかないですね。

Kern Typeというカーニングの練習が出来るサイトもあります。

カーニング（文字詰め）のやり方

文字を詰める作業は、デザイン作業の中でもかなり素早く見た目を微調整出来なくてはいけません。

文字と文字との間をクリックして…文字パレットを出して…数値を弄って…

というような事を気になる部分に全て施していくのはちょっと現実的ではないです。

なので普通はショートカットキーを使います。

illustratorでもphotoshopでも気になる文字と文字の間にフォーカスを当てた状態（入力可能状態）で…

「Alt ＋ ← or →」

←、→、でフォーカスを移動して文字を調整…また他の気になる部分にフォーカスを移動して文字を調整…って漢字の作業です。

とりあえず作ってみた例

今までの内容のまとめとして、とりあえず作ってみた例です。

デフォルト

どうでしょう？

このフリー素材の子、可愛いですよね？うん。

はい、文字の色はカラフルに変えていますが、大きさや、文字詰めは行っていない状態です。

調整後

では文字の大きさと文字詰めを調整してみましょう。

どうでしょう？見やすくなりましたか？

「基本的に文字を詰め、単語と単語の間は若干余白を取る」というような雰囲気ですね。

文字を調整したおかげで可愛い女の子を前面に持ってくるくらいのスペースができちゃいましたね！

いや～、でもまだちょっと「！」の位置とかおかしくね～？とか思った人は、割と既にセンスがあるんじゃないですかね～？

おまけ

以前に所属していた組織で新人の女の子にこんな感じで適当に教えていたときのお話。

「先輩、フォトショは良いんですけど、イラレだと小さくした文字が真ん中に寄っちゃうんですよね…」

イラレの場合小さい文字は真ん中に寄る

「あ、それね…」

その女の子は仕方なく文字ツールを小分けにしてベースラインを下に揃えていましたが、

もちろん下に寄せる方法はありますよ。

「文字ツール　＞　文字揃え　＞　欧文ベースライン」

イラレの文字揃え

フォトショップも同じように設定できます。