こんにちは！モリンガです。
以前の記事でもご紹介した通り、GMOみやざきオフィスではデザイナーのスキルアップ施策として「20分バナー」という取り組みを定期的に行っています。
これは、持ち回りで出されるお題に対し、20分間でバナーを制作するというもの。普段の業務ではやらないようなテイストに挑戦でき、瞬発的なデザイン力を鍛える良い機会になっています。
ただ、続けていると自分の苦手が可視化されてきます。
今回は、そんな「負けパターン」に陥ってしまったバナーの改善プロセスを言語化してみました。同じような悩みを抱えている方のヒントになれば嬉しいです！
INDEX
最近ぶつかっている壁
では早速ですが、今回添削をするバナーはこちらの２枚です！
最近、「写真主体×横長」のバナーを作ると、こんな感じでまとまりがなくなりやすいんです…。特に、メインとなる大きな写真に加えて、切り抜いた写真を配置するようなケースで苦戦しがちです。こちらの２枚のバナーも、写真の魅力と伝えたい情報の両方を立てようとして、結果的にどっちつかずな印象になってしまいました。
この2枚のバナーをどうすればもっと良くできるか、そして次回以降で同じパターンに当たった時の予防策も考えていきます。
事例1：ぶどうの販促バナー
【Before】情報や優先順位が散漫
まずはこちらのバナー。新鮮なぶどうの販促がテーマです。
ベースとなる写真の上に、切り抜いたぶどうの写真を重ね、キャッチコピーや価格情報を配置しました。
ですが、なんだか全体的にまとまりがなく、ごちゃっとした印象です。
原因を考えてみたのですが、写真と写真、文字と文字、どちらも優先順位がだいたい同じくらいに見えてしまい、結果として一番伝えたい「ぶどうのみずみずしさ」やお得感が伝わりにくくなったことが原因のように感じます。
それぞれのブロックの主役を決める
原因は、レイアウト上で主役が誰なのかハッキリしていないこと。というわけで「主役」を明確にした2パターンの改善案を考えてみました。
改善案A：切り抜きを主役にするパターン
一つ目は、切り抜き写真を主役にするパターンです。キャッチコピーを中央に配置して視線を集め、他の価格情報などは下にまとめました。そして、主役である切り抜きのぶどうを思い切って拡大。これにより、ぶどうのシズル感が際立ち、何を売りたいバナーなのかが一目で分かるようになりました。
情報を整理し、要素に大小のメリハリをつけることの大切さが分かります。
改善案B：ベースの写真を主役にするパターン
二つ目は、逆にベースの写真を主役にするパターン。この場合、情報過多の原因になっていた切り抜き写真は思い切って削除しました。
その分、文字情報を大きく配置するスペースが生まれ、可読性が格段にアップ！
構図も、画面を左右に2分割するようなシンプルなものにしたため安定感が生まれました。この構図は他のデザインにも応用が効きそうです！
事例2：伊勢海老祭り告知バナー
【Before】要素が多すぎてお互いを打ち消しあってしまう
次はこちらのバナー。豪華な伊勢海老が目を引きますが、和柄の背景、複数のキャッチコピー、そして伊勢海老の写真…と、全ての要素が「我こそは主役だ！」と主張しているような状態で、情報が渋滞しています。お祭りの賑やかな雰囲気は出ていますが、肝心の内容が頭に入ってきません。
「抜け」を作って情報を整理
このバナーは、要素を引き算し、適切に整理するだけで大きく改善できそうです。特に、デザインにおける「抜け（余白）」を作ることで、ごちゃっとした印象を解消できるはずです。
改善案A：「抜け」を意識して余白を調整したパターン
背景の和柄を少し控えめなサイズに調整して、画面に「抜け」を作りました。これだけでかなりスッキリした印象になります。
そして、スペースが空いた分、切り抜きの伊勢海老を大きく配置。文字情報もサイズに強弱をつけながら整理。これで要素同士がケンカすることなく、それぞれの役割を果たせるようになりました。
改善案B：テクスチャを使って情報をまとめるパターン
もう一つの改善案は、和紙のようなテクスチャを中央に敷いて、その上に文字情報をまとめて配置するパターンです。これにより、「抜け」と「可読性」を同時に確保できます。
これで伊勢海老のような縦長の構図になりがちなモチーフでも、左右の空いたスペースに写真を配置するだけで良くなり、バランスが取りやすくなります。
このレイアウトも、他の案件で使えそうな汎用性の高さを感じます！
まとめ：苦手パターンから見えた、デザインの汎用ルール
さて、振り返りをしてみると「写真主体×横長」バナー攻略には、２つのポイントがあることがわかりました。
- 情報の優先順位を決め、主役を明確にすること
- 画面の『抜け』を意識的に作り、要素を整理すること
ただ、当たり前のことかもしれませんが…20分という限られた時間の中で、この判断をいかに迷いなくできるかが勝負の鍵です。
短時間で仕上げるために、「このポイントを最初から大袈裟につける」「自分のレイアウトの引き出しを増やしておいてすぐ取り出せるようにしておく」「最後に数分、引き算の時間を作る」などが予防策としては有効そうです。
そのためにも、短時間でのバナーの制作の経験値を積んでいくべきだなと思いました…！
うまくいかなかったデザインも、こうして振り返り、改善策を考えることで大きな学びに繋がります。これからも20分バナーの取り組みや、他のクリエイターのデザインから学びを得ながら、引き出しを増やしていきたいと思います！
