文字を打つだけならデザインじゃない
都内のwebデザイン会社に中途入社した時、チームリーダーに何度も言われた。
フォントを決めて、色を変えて、サイズを変えて、自分の中では「デザイン」をしたと思っているのに、リーダーは「これって文字打ってるだけだよね？これはデザインじゃないよ。デザインしてきて。」と言う。
たった数か月の学校の授業では教えてもらえない、けれど今の私の基礎になった、文字を打つだけにしないためのデザインを紹介したい。
1. フォント、色、サイズ
これはだれでも思い浮かぶしやっていることだと思う。
フリーフォントはネットにごろごろ落ちているし、ちょっと個性のあるフォントを選べばきっとそれっぽいものが作れる。
とりあえず文字は打てた。まさに打っただけという感じ。
2. ジャンプ率
ジャンプ率とは文字のかたまりのサイズの比率のこと。
そのテキストの中で一番見せたい言葉なにか。次に見せたいことはなにか。
人間は無意識に目につく文字だけ見て情報を得る。判断する。
目立つ文字を見て、興味を持てば全部読む。だから、全部の文字を目立たせてはいけない。
必ずしも大きな文字が目立つとは限らないけれど、まずはかたまりごとにサイズを変えるのがてっとりばやい。
どっちがメインでどっちがサブタイトルなのかがパッと見てわかるようになった。
3. 個々の文字サイズ
かたまりごとのサイズを整えるところまではやっている方も多いはず。
けれどここからさらに個々のサイズを整える。
一番見せたい単語だけを残して、重要ではない接続詞は80～90%くらいのサイズにする。
もっと言うと、！や？はほかの文字とのバランス考えると高さだけ120%くらいにしたほうがいい場合がある。そうすると若干上や下にずれるので、文字の水平の高さも整える。
読ませたい単語が少し浮かび上がってきた。
4. 文字間（Letter spacing）と行間（Line height）
文字の縦横の間隔は、広くとれば余裕のあるおしゃれなデザインになる。
かといってあまり広すぎると読みにくい。
長い文章は特に間隔は広くしないことが多いけれど、タイトルテキストなら調整は必須。
さらに言えば、横の文字間はフォントによって結構変わるので、一個一個の文字間隔を整えること。特にカタカナの間隔は広くなったりばらけやすいので一つ一つの間隔を個別でカチカチ整えていく。
文字に少し余裕が出た。
気になる人はもっと文字間を細かく調整すると思う。でも知らない人は何も気にならない。気になるようになれるかが大事。
デザインはここからはじまる
ここまでできて初めて、文字がそれとなく整う。
ここから色や文字のサイズ、またかたまりごとのフォント、背景、アクセントをつけるためのデザインなどを加えていく。
文字を傾けたり、要素を足してみたり、太字をうまく活用したり、やれることはたくさんある。でもそれはあくまでも基本が整っていることが前提。
まずは文字を「打つだけ」にしないこと。一つ一つの文字を気にすること。基本を吹っ飛ばして応用に進まないでほしい。
今回はこんな感じで完成。
ありがとうございました。