バナーの制作工程を分けて考える
仕事でバナーをいくつか作ったので、久しぶりに制作の流れと振り返りみたいなものだけ簡単に書いとく。
全部で 12サイズ、上から順番に作っていった。
- テンプレート
- 250×250 ( px )
- 728×90
- 120×600
- 類似サイズ展開
- 200×200
- 468×60
- 160×600
- 300×250
- 336×280
- 横長め、小さめサイズの制作
- 320×100
- 320×50
- 余りの異型の制作
- 240×400
- 300×600
この後、流れを分けて説明。
- 250×250 ( px )
- 728×90
- 120×600
まず 250×250 のサイズのバナーを作る。ここでは、色や文字といった全サイズ共通となるデザイン要素と、正方形サイズのときのレイアウトを確認してもらうのが目的。
正方形サイズでデザインの合意が取れた後は、728×90 の横長、120×600 の縦長バナーを作ってデザインを確認してもらう。
- 200×200
- 468×60
- 160×600
- 300×250
- 336×280
正方形と横長・縦長長方形サイズのバナーが決まったら、縦横比が似ているバナーから他サイズへの展開を始める。
複雑なデザインにしていなければ、上から 3つ目まではさっき作ったサイズの縮小と微調整で済む。
300×250 と 336×280 は正方形に近いといえば近いが、縦に比べて横が長くなるので正方形デザインのままでは左右に大きな空きができてしまう。バナー内の文字やボタンのサイズ調整で済むこともあれば、それだけでは何ともならない場合がある。
- 320×100
- 320×50
320×100 と 320×50 は同じ横幅だが、レイアウトは結構ガラッと変わりやすいのではないだろうか。縦幅が 100px もあれば 2行程の文章を置いてその下にボタンを配置することも不可能ではないが、50px でそれをするのは難しい。
また、これも初めに作った横長バナーの調整で行けそうな気もするが、320×100 は横にそれほど長くないので 728×90 や 468×60 と同じレイアウトは取りにくく、320×50 はバナーサイズが小さいのでそもそも中に置けるコンテンツが限られる。別物と考えたほうが良い。
- 240×400
- 300×600
この手順で進めると、この 2つのサイズが残る。僕は最後に残るこれらにいつも苦しめられてる感じがする。
文字をでかくして要らぬ余白を埋めようとしても、文章が区切りにくかったりして困ることが多いような。300×600 とかは縦幅が十分長いくせに横幅にもゆとりがあってがズルい。
基準となるサイズのバナーを作るときとか、正方形・縦長・横長バナーとは別枠で最初の内に作っておいたほうが良いかもしれない。
こんな感じで何種類かのバナーを作った。Fireworks でやったんだけど、ページで分けてるデザインを分けていたので書き出し作業に疲弊した。
