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

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

添削

チョコレートの通販かECサイト内でのバナーですね。
落ち着いた色合いで冬らしさとチョコミント感が出ていますね。
特にチョコミントというわけではないと思いますが…

■ 文字が見にくい色合い

【A】文字と背景色が同系の色合いなので見にくくなってしまっています。
背景色を変えるか、文字の色を変えた方がいいです。

今回のバナーではそこまで気にしなくてもいいのですが、公共性の高いものを扱う時に気にした方がいいのが「色覚バリアフリー」です。
あまり聞きなれないと思いますが、色の認識が難しい「色盲」の方でも見えるような色合いにすることです。

一般人でも見にくい色合いというのがあるので、そのあたりも気にしながら作る必要があります。
かといって原色ばかり使うとガチャガチャするので色の選定は慎重に。

■ 同じ要素は近くにする

文字は近くのものに勝手に紐づく性質があり、時にはそれが誤認を生むこともあります。
現状は期限が下に置かれていますが、セールの期間だと普通は思うのですが、商品に紐づいているように見え、商品の賞味期限にも見えます。
何の日付なのか誤認されないためにも、この期間が差している文言などの近くに置くといいです。

離れて置く時には明らかに期間だと分かるような置き方にするのも手です。
こんな陽気に賞味期限を伝えるものも無いので、賞味期限だと誤認することも無いです。

■ モチーフの近い道

【A】20％OFFをリボンで置いていますが、あまりこの使い方をリボンではしないかな…目立ってはいるけど、ここに入れないかな。
「冬季限定」をリボンで入れるのはありかな。

リボンはタイトルなどのシンボルやアイコンなどを置くことが多いですが、このタイプで割引額は書かないかな。

■ 空間の有効活用

文字が上の方に全体が集まっていて【A】のところがスカスカしているのがもったいないです。
バナーは小さいので、できるだけスペースは有効活用したいです。

上に全部の文字が集まっているので、そこから分離して大きく見せれるものがないか、大きく見せる物を取り出すと空間が広くなるので、上の文字も大きく見せることができます。
場所を何度か変えていくと、全体の文字が大きく見せることができ、強弱も付けられる場所が見つかります。

■ 画像の持っている力を使う

ちょうど同じ写真素材があったので、作ってみました。
フォントは変えてません。

良い写真には、その写真が持っている力があります。
チョコレートの写真を切り抜いて使っていましたが、素材を見たところ全体が茶色系で背景にもチョコレート感があったので、そのまま使うのでもいいと思います。

写真が良い時は、それを活用すると自然とチョコレート感が出てきます。
良い素材はそのまま使った方がいいです。

■ 写真を活かすPhotoshopマジック

切り抜いたのは背景画像が足りないからですかね？
我々デザイナーには、神より与えられたありがたい神器…

「Photoshop」があるじゃないか！

お菓子系のバナーを一時期ずっと作っていたことがあり、とにかく背景が足りないことが多く、よくこの加工をしました。
Photoshopは便利なので、足りない背景は「領域を選択」してから「Shift+F5」を押して「コンテンツに応じる」を使うと、勝手に埋めてくれます。
一回でうまくいかないので、変なところは選択範囲で選択してまた同じことを繰り返すと埋めることができます。
少し違和感もありますが、そこはうまいことスタンプツールで加工します。

大きな広告などでは専門職のレタッチャーやCGクリエイター、そもそも写真撮影をちゃんとやるなどしますが、予算のかけられないバナーなど、WEB媒体では自分でどうにか加工することが多いです。

バナーも小さく上に文字を乗せるので、バレることはないです。
雪のイラストも散らしたら分からないです。
バレたとしてもどうということはないです。

あと細かいところで気になったのが、写真がボケている。
加工時にボケてしまったのかと思いますが「スマートオブジェクト」にしてから加工するとボケることが無いのでそれを使いましょう。