バナートレース ＃１１｜ガイドいっぱい引いたら新しい気づきができました

こんにちは、sakiです。

1日1バナトレチャレンジの第11弾です。

サンプルバナー

今回トレースするバナーはこちらです。↓↓

「他にはないデザインが見つかる」
とてもいいキャッチコピーですね。

無彩色でシンプルにまとめられた感じもとても好きです。

好きなものをトレースしようと思って選んでみました。

トレースしてみて

トレースしたものです。↓↓

tool : photoshop
time : 30min
font : Athelas ヒラギノ明朝Pro

レイアウトについて考える

シンプルでまとめられたバナーをトレースしていて思うのは
レイアウトがきれいにまとめられているから、ということが一番大きいと感じています。

以前、webデザインを勉強されているとある方のブログで
「バナーをトレースしたときにガイドを引きまくってみたら発見がとてもあった」
と記載があったのをふと思い出し、私もやってみることにしました。

今回はサンプルバナーにガイドをひいてみました。

ちょうど今読み進めている本にグリッドシステムの記載があり、
このバナーにも用いられている手法かなと感じたのでご紹介します。

1. 文字の範囲が決まっていること
2. 「cawaii」と「ファッション通販サイト」の幅が揃っている
3. 「他にはないデザインが見つかる」横も縦も揃っていること
4. 「cawaii」の幅に対して「他にはないデザインが見つかる」が中央揃えになっていること
5. 文字の上下の余白もだいたい同じ

これをみて、トレースしたものの文字位置がずれている箇所は訂正しました。

まとめ

ガイドがあると微妙なずれに気づくことができました。
シンプルで洗練されたイメージのバナーでは、情報を揃えることが特に重要になるかと思います。

1px単位で拘ってのデザイン、特にバナーや名刺などの
小さな範囲に必要な情報を記載しなければいけない媒体のデザインでは大事なことだと感じました。

レイアウトについてここまで気づけることが今までなく、
トレースができれば終わり、を繰り返していたので
今回はとても勉強になりました。

自分で一からデザインしたらグリッドばしばし使いたいと思います！

今日も最後までお読みいただきありがとうございました〜〜＾＾