見出し画像

無料添削デザインスクール #141「チョコレート通販セールバナー」

イライジャ｜WEBデザイナー　デザイン添削おじさん

添削

毎度おなじみになってきた「こばやす」さんのチョコレート課題ですね。
あっさりした印象ですね。

■文字サイズ

バナーを置く場所は分からないのですが、どこに置かれたとしても文字サイズが小さすぎて見えないです。
バナーは制作する時のサイズだと大きいのですが、それはスマホの解像度が2倍くらいあるので、それに合わせて大きく作っています。
実際表示されるのは、最低でも半分の大きさです。
さらにディルプレイの大きさに合わせて小さくなります。

PCではバナーは大きくても横幅300pxほどです。
それらを考慮して作る必要があります。

サイズ感としては、このくらいの大きさが必要です。

■メインが目立たない

一番押し出したい「20％OFF」の文字が繊細な薄い色で置かれているので、あまり目立たなくなっています。
もう少し濃い目で目立つといいです。

全体の雰囲気も大切ですが、雰囲気だけではクリックされないので、しっかりと文字情報も伝える必要があります。

デザイン性と情報性と両立させたいです。
実際のバナーの現状は情報性に偏っていることが多いです。
文字バーン！画像バーン！それだけのバナーも多くデザインよりも情報を優先されます。

ブライドサイトとかだとデザイン重視なので、文字小さめでもいいのですが、費用対効果が最優先されるのがバナーです。

■期間も大きくしてあげる

期間が1カ月とか長い場合はそこまで大きく見せる必要はないのですが、現状だと小さすぎるので大きめに入れてあげるといいです。

バナーの期間は「今月末までやっているからそれまでに来てよ～」という意味合いではありません。

そもそもクリックする率は0.01〜0.2％程度です。
そこからさらに再訪する率は…
一回見に来て、期間はまだあるから考えてからまた来る人は限りなくゼロに近いデータが出ています。

つまり、期間とは「販売期間は有限だから今すぐ買ってね」というアクションを促す要素のひとつです。
親切で入れている部分もありますが、戦略で入れている意味合いの方が大きいです。

■被写体

全体としてきれいにまとまっているのですが、被写体であるチョコレートがチョコだと認識されにくいように見えます。

▲チョコだねぇ。

▲これがチョコなのぉ！

▲え…なに？

バナーは見る時間が短いので、一瞬でチョコだと分かるのが望ましいです。
デザインする中でも時間がかかるのが写真選びです。
分かりやすく、インパクトがあり、バナーとして使いやすい写真はあまりありません。
被写体選びも重要なデザインの一部です。

修正

修正して頂いたのでこちらも添削していきます。

■文字の配置

余分な余白が入っているので、上下で分裂しているように見えます。
バナーは空間をできるだけ有効活用してあげましょう。

単純に上の文字の大きさと配置を調整しました。
キャッチが良ければこれでもいいのですが、情緒的な印象を伝えるキャッチなのでこれだけだと「なんのこっちゃ」なキャッチなので、ここまで大きくする必要はないです。

・チョコの画像を大きく
・20％OFFを大きく
・キャッチを小さく

これだけでも「20％OFF」が大きく見えるので、何かのセールをしているのは分かります。
隣にチョコがあるのでチョコだろうというも分かります。

右上が空いているので、そこにも何か入れることができそうです。

・右上に限定マークを入れる
・文字が見にくいので濃い色にして目立たせる

バランスの調整だけでもここまで大きく変えることができます。
優先順位を決めてあげるだけでも大体のレイアウトは決まってきます。

■細かいところ

「対象商品」
全品じゃないということを言いたいのかと思いますが、なくても大丈夫です。
詳細は本サイトに行ってから見ると思うので。
バナーの役割はセールの説明ではなく、人を振り向かせて興味を持ってもらうことです。
そこまで細かい説明はいらないです。

「MAX」
最大割引額は入れておかないとだめです。
20％OFFはほんの一部の商品で、ほとんどが1％OFFとか…実際にありそうな話ですが…消費者センターに通報される可能性があるので入れましょう。

「期間限定」
これがなくても日付があるだけで期間だと認識されます。
それよりも「冬季限定」とかの方がシズル感が出るので、こっちを入れてあげた方がいいです。

「画像」
分かりやすく全体を入れるよりも、アップにしてカットして大きく見せた方がそのものがよく分かる時があります。
漫画を読むときにコマ割りや写真家の写真構図が参考になるので、たまに気にして見てください。

お題

こちらのバナー課題は、こばやすさん（@kobayas_s）のバナーお題です。
良質なお題がたくさんあるので、お試しください。
自分で課題を考えると大変なので、実務に近いプロが考えたお題を作ると成長も早いです。
WEBデザイナーになりたい方は、トレースよりもお題をお勧めします。

デザイン添削のご依頼はTwitterから！

Twitterで投稿された作品を添削しています。
添削を希望される方はTwitterにハッシュタグ「#デザイン添削希望」を付けて投稿してください。


この記事が気に入ったらサポートをしてみませんか？