バナーリサイズしてみた

クリエイターズファクトリーの授業で作成したコーヒーのバナーをリサイズしてみました！

作成したバナーのサイズ、方法、工夫した点をまとめます。

こちらが授業で作成した300×250のバナー。先生の見よう見まねで作りましたがとても素敵なものができました。

これをもとに300×600、160×600、468×60のバナーを作成しました。

作ったものがこちら

バナーサイズによって、情報を絞ったり、あしらいを変えたりとリサイズは楽しい作業でした。

意識したのは目線の流れです。見る人が見やすいように情報を配置することを意識しました。

共通で難しかったのが女性写真の配置。特に縦長のバナーは配置しにくかったです…(-_-;)

ひとつづつ解説します。

まずは160×600のバナーです。

縦長のバナーなのでキャッチフレーズを縦文字にしました。

女性写真をキャッチフレーズの下にもってきましたが、女性の左側に変な余白ができちゃいました…これを埋める術が見つからなかったです。

「詳しくは…」のボタンはわかりやすく大きめに配置しました。

次、300×600のバナーです。

今回のリサイズの中で一番大きなバナーです。

大きなスペースを活用するために文字も写真も大きめにしました。「詳しくは…」も横いっぱいに広げて帯にしました。

女性の写真が無くなったことに気づきましたか…

この中に配置するのが難しくて女性写真は思い切って無しにしました！

次、468×60のバナーです。

横に細長いバナー！左から右に目線が動くように情報を配置しました。

スペースが限られているため、情報を取捨選択しつつリサイズしました。
たとえば「低温焙煎の上品な…」のフレーズは長いため「低温焙煎」にして丸いシェイプの上に配置しました。

右の「今だけお試し…」と「詳しくは…」は整列を意識してぎゅっと四角にまとめてみました。

こんな感じでバナーのリサイズをしてみました。

リサイズはバナーを作るうえで必須だと思うので、これからも練習します。今までしたバナー模写を勝手にリサイズしていくのもいいですね～

読んでくれた方ありがとうございます。

また投稿します！