BLOG WORKS

3年前のバナーを今作り直すとどうなるか?

今回はデザインの自己学習として、2016年(約3年前)に作成した架空ECサイトのバナーをリメイクしました。

かつて自分が作成したものを3年越しにレビューするとどういう気付きを得られるか?3年経って自分がデザイナーとしてどういう視点を獲得したか?というところを確認したく、この記事を書くことにしました。

前提条件や制限事項

・構成は大幅に変更しない(あまりにも別物として出来上がると比較できないため)
・写真素材が残っていないため、 写真は選定し直す
・フォント、使用する素材も変更可能
・設置先は食品を取り扱うECサイトで、役割としては特設ページへ誘導するためのバナー。設置エリアはサイドバーのため横幅の変更は不可
・年末年始のイベント(クリスマス・お正月)に合わせてテーマカラーは赤

コンセプト

・元バナーがグリッドを意識した写真配置のため、せっかくのリズムを崩さないよう横幅はそのままに縦幅を拡張し、バナーの形を正方形にしました。正方形にすることで、より商材写真を大きく見せられるようになりました。
・元バナーのボタンとボタンにかかるドロップシャドウが商材を大幅に隠してしまっているため、シャドウを削除し右下に設置し直しました。文字にかかるドロップシャドウも併せて削除することで、今風のフラットなデザインにリメイクしました。あくまで一番見てほしいのは商材写真ですので、 元バナーよりボタンがシンプルになることでより写真に視線を誘導できるようになったかと思われます。
・元バナーはフォントが細くベベルとドロップシャドウがかかっており、遠目だと文字がつぶれて見えてしまいます。そのため、リメイク版では視認性の良い太字の明朝体に変更しました。ベベル効果は削除し、グラデーションに使用する色は少し明るめにすることで、よりゴージャス感のある「金」の印象と強めています。
・メイン文言の「年末年始特選グルメ」は、縦の余白が少なくつぶれて見えるため、バナー全体を正方形に変更したことを活かしつつ、左右と上下の余白を均等にとることでバランスをとるようにしました。

3年で向上したと感じたこと

写真選定・トリミングのセンス

元バナーとリメイクしたバナーを見て、まず真っ先に目につくのは「写真がすっきりまとまっていること」なのかなと思いました。
画像サイズが正方形になり写真面積が大きくなったことも関係しているとは思いますが、写真に統一感があるのは選定画像のバランス(色・サイズ)の良さとトリミングにルールがあること(引きと寄りが交互になっている)が理由ではないかと思います。
また、リメイク後はきちんと1枚ずつ写真にフィルターをかけ、明度や露光量を調整しているため、写真の色味や明るさのばらつきに気を配る視点が身についたかと思います。
この辺りは数をこなし経験から体感的に学んでいったように思います。

余白感覚

元バナーはボタンの三角形や「年末年始特選グルメ」周りのマージンがちょっとキツいです。余白は大きくとることで「余裕」や「ゆとり」が生まれるため、リメイク版で余白を広げることで視認性の向上にもつながったと思います。
余白感覚については昔から苦手な自覚があり、日頃からかなり意識しているところなので、今回のリメイクでも意識して取り組みました。

感想

・大幅に構成を変えてしまうようなリメイクはしない前提で修正しましたが、画像の色味や余白回りを少し変えるだけでもデザインの印象は大きく変わることが分かりました。
・デザインは「センス」を使う仕事のように思われがちですが、この「センス」というものは経験によるロジックや感覚的に身につけた匙加減、塩梅のことを指しているのではないかと今回のリメイクを終えて思いました。
・自分が作ったものを見返すことは意外と少ないため、リメイクは当時の自分の癖や苦手なところと向き合える面白い試みでした。また機会があればぜひやりたいなと思います。