こんにちは、saki（@sar__design）です。
フリーランスwebデザイナーを目指す私のバナトレ記録第9弾、
今回は文字組みについてトレースする中で感じたことをまとめたいと思います〜〜！
サンプル
今回トレースするバナーはこちらです。
↓↓
脱毛の広告バナー。
今脱毛っていろいろあるけど、口コミに支えられて13年ってすごいなー。
技術がある証ですね！
トレースしてみて
トレースしたものがこちらです
↓↓
あ、人が浮いてる・・・位置調整ミスしてます。笑
tool : photoshop
time : 60min
font : うつくし明朝 ヒラギノ明朝Pro
トレースポイント
- リボン、満足度背景のフレームはフリー素材です。
- 「93.3%」にグラデーションとドロップシャドウをうっすら付けて斜体にしてます。
- フレームの中を白くするのは忘れました。白い方が視認性が上がると思います。
文字組みについて
このバナーの文字組がとても勉強になったのでポイントをまとめてみました。
- 「技術とサービスで絶大な支持」→助詞が数pt小さい
- 「93.3%」→小数点以下の「３」が小さい。％も小さい
- 「口コミに支えられて」→「に支えられて」が小さい
- 「13年」→数字が大きい
- 「１３万人のご利用実績」→「13万人」が大きい
どれも数ptの調整なのですが、サンプルの方がぱっと見きれいに見えますね。
共通しているのは「助詞を小さくする」「数字を大きくする」
バナーとして訴求したいところは数pt大きくして強調されているのがわかります。
あと小数点以下は小さくすること、これは今までの意識でなかったので勉強になりました。
確かに大事なのは整数のほうですからね。
それから右下の「口コミに支えられて〜」のところですが、
ここだけヒラギノ明朝を使っているのですが、一直線上に並んでいるように見えなくて、
「ら」だけ1px上にあげてます。
「文字レイヤー」パネルのここから調整できます。
あと文字間詰めるのは相変わらず苦手で、
「ご利用実績」のところがなんか変に間あいちゃってますね・・反省。
次からトレースしたあとの見直しも力いれていきたいと思います！
最後に
文字組みはこのバナーにまとめられてる・・！と思うくらい
色々なポイントが今回で見えてきた気がしてます。
他のバナトレではここまでフォントサイズに拘って調整しているバナーに出会えてなかったと思うので
いい勉強になったと思いました。
この記事を読んでくださるみなさまに、
世の中の文字組みに困る方に（そんな人いるのかな）
少しでも解決のヒントになると嬉しいです！
それでは今日も最後までお読みくださりありがとうございました〜〜！
