【プロが添削】人を惹きつけるギフトバナーのデザインとは?5つの事例をもとにポイントを解説

【プロが添削】人を惹きつけるギフトバナーのデザインとは?5つの事例をもとにポイントを解説

バレンタインや誕生日など、ギフトシーズンのWebサイトに欠かせないのが「ギフトバナー」。

商品やブランドの魅力を伝え、ユーザーの心をつかむためには、「訴求力」と「ブランドイメージの表現」が重要になります。

しかし、「どうすればもっと魅力的に見えるんだろう?」「情報がうまくまとまらない…」と悩むデザイナーの方も多いのではないでしょうか。

本記事では、プロのWebデザイナーが実際のバナーを添削した事例をもとに、人を惹きつけるギフトバナーを作るポイントを解説します。

■動画で内容を確認したい方はこちら!
ももさん
【講師プロフィール】
ももさん(@momo_web24
デザイン会社社長。WebアプリのUI/UX設計からHP、ロゴ作成まで幅広くWeb制作に携わっている。デイトラWebデザインコースのメンター。

今回ブラッシュアップするデザイン課題の内容

今回ご紹介するのは、オンラインスクール「デイトラ」の人気企画「ウィークリーデザイン」に投稿されたバナーデザインのブラッシュアップ事例です。

お題の内容は次のとおりです。

お題 バレンタインチョコギフトのバナー
概要 チョコメーカー「デイチョコ」の「ハートフルチョコレートギフトセット」のバナー
載せたい内容 ・大切な人と楽しむ、特別なバレンタインチョコ
・今だけ限定!3個以上の購入で10%オフ
ターゲット 20~30代の男女カップル
配信先・掲載先 ディスプレイ広告
サイズ 300px × 250px

ウィークリーデザインとは?
毎週X上で出されるデザイン課題に沿ってバナーを作成し、Xで投稿するデイトラWebデザインコースの人気企画。デイトラを受講していなくても参加できる。

プロが添削!ギフトバナーの改善事例とポイントの解説

ここからは実際に投稿されたギフトバナーのうち、添削した5作品の改善ポイントを解説します。

ビフォーアフターの画像で比較しながら見ていきましょう。

事例1:大人っぽいデザインを改善!シャープなあしらいで高級感を演出

こちらのバナーは、濃い赤を基調とした配色で、大人っぽい雰囲気が素敵なデザインです。お得情報も目立つ位置に配置されています。

ただ、一番見せたいはずの商品画像が見切れてしまっている点や、ボタンのあしらいが全体のトーンと少しずれている点が課題でした。

改善したポイント
・商品をすべて見せる
訴求の主役である商品は、見切れないようにしっかり見せました。

・情報の語順を整理
「3個買うと10%OFF」のように、ユーザーが直感的に理解できる語順にしています。

・あしらいをシャープに
 大人っぽい雰囲気に合わせ、ボタンの矢印を丸みのあるものからシャープな三角に変更しました。

・文字の背景に高級感をプラス
Valentineの文字を大きくし、背景にうっすらとグラデーションをかけることで、奥行きと高級感を演出しています。

ももさん
商品画像の解像度が低く、ぼやけているのも気になりました。
今回は課題なので仕方ない部分もありますが、実務では解像度の高さも気をつけるようにしましょう!

事例2:おしゃれなデザインを改善!テクスチャを加えて世界観を深める

こちらのバナーは、おしゃれな明朝体フォントが効いていて、「今だけ限定」の訴求もしっかり目立っています。

ただ、白い円が少し浮いて見え、全体がベタ塗りで少しのっぺりとした印象になってしまっているのが惜しいポイントでした。

改善したポイント
・テクスチャで世界観を表現
円の中にチョコレートのテクスチャをマスク合成し、商品との一体感を出しています。

・視認性を確保
マスク合成した画像はテクスチャの色味を調整し、上に乗る文字がしっかり読めるように配慮しました。

・背景に奥行きを出す
全体の背景にもごくわずかなグラデーションを加え、単調な印象をなくす工夫をしています。

ももさん
全体の背景やベタになっているところを何か工夫できないかと考えてみると、また印象が変わってきます。
自分でデザインを見返すときに意識してみてください!

事例3:インパクトのあるデザインを改善!「傾き」をそろえてバランスを整える

こちらはピンクとチョコレートの色が目を引く、インパクトのあるバナーです。写真を大きく配置している点も良いですね。

改善点としてあげられるのは、あしらいの角度です。なんとなく配置するのではなく、デザインの中の「ライン」を意識すると、さらに洗練された印象になります。

改善したポイント
・商品名の角度を商品とそろえる
「Heartful chocolate gift set」という商品名の傾きを、チョコレートの箱のラインに合わせて調整し、デザインに安定感を持たせています。

・円を大胆に大きくする
割引率を示すあしらいの円を大きくし、余白を生み出すことで、窮屈な印象をなくしました。商品画像の見える部分を増やす効果もあります。

・数字と記号の大きさを調整する
「%」の記号を少し小さくし、メインの数字「10」と高さを揃えることで、よりまとまって見えるようにしました。

ももさん
できれば商品は見きれないようにして全体を見せたいのですが、今回はあえてこのデザインにしているのだろうと思いました。
そのため、画像のサイズをさらに大きくしてはみ立たせる形で調整しています!

事例4:楽しい雰囲気のデザインを改善!「文字詰め」でプロのクオリティに

チョコレートがごろごろと配置され、楽しい雰囲気が伝わるデザインです。滑らかなチョコの曲線あしらいも素敵です。

ただ、背景のあしらいが少し強すぎて商品名が見えづらい点や、文字と文字の間隔が広くまとまりがない点が課題でした。

改善したポイント
・背景のあしらいは薄く
あくまで主役は商品やキャッチコピーです。背景のカリグラフィーは「なんとなくわかる」程度に薄くしました。

・文字間を詰める(カーニングする)
「ー」「!」などの記号は、前後の文字との間隔が不自然に空きがちです。一文字ずつ手動で調整するとクオリティが格段に上がります。

ももさん
あしらいの濃さの調整については少し細かいですが、こういうところにこだわっていけるとよりクオリティが上がります!

事例5:シンプルなデザインを改善!対角線構図でインパクトを出す

ピンクと緑の配色がおしゃれなデザインです。

Instagramの投稿画像などでは素敵ですが、多くのバナーと並ぶディスプレイ広告では、商品が小さく少しインパクトに欠ける可能性があります。

改善したポイント
・商品を大きくしてインパクトを出す
バナー広告ではまず視線を集めることが重要です。商品を大胆に大きく配置してインパクトを出しています。

・素材を対角線上に配置する
商品とリボンなどのあしらいを「対角線上」に置くことで、視覚的なバランスが取れ、画面に動きが生まれます。

・寂しい空間に素材を追加
全体の雰囲気を壊さない素材を追加し、情報の優先度をつけつつ賑やかさをプラスしました。

ももさん
ディスプレイ広告にしては少し商品が小さいので、もう少しインパクトがほしいと感じました!
媒体に合わせてデザインを調整できると良いですね。

まとめ:ポイントを押さえて心に響くギフトバナーを作ろう!

ギフトバナーは、ただ装飾を重ねるだけではなく、見る人の心に響く「見せ方」や「伝え方」が求められます。

商品をしっかり主役に据え、ブランドの世界観を表現し、背景や細部までこだわることで、バナーの訴求力は大きく変わります。

デザインに迷ったときは、商品の見せ方や色・フォントの統一、背景や文字の細かな調整などを意識してみましょう。

なお、当メディアでは他にもバナー添削の事例を紹介していますので、ぜひ参考にしてみてください。

未経験からWebデザイナーを目指すならデイトラがおすすめ!

東京フリーランスは、Webデザインを仕事にする本格スキルを学べる”デイトラ”を運営しています。

デイトラWebデザインコースでは、「理論」「言語化」「実践」を積み重ねてデザインスキルを習得できるカリキュラムが揃っています!

デザインの学習で難しいのは、自分が作ったものが良い作品なのかが判断できないこと。その悩みを解決するために、デイトラWebデザインコースには現役デザイナーから直接指導が受けられる添削課題があります。

独学では得られないプロの着眼点を知れるので、デザインスキルをぐんぐんレベルアップできますよ。

 

▲プロによる添削でデザインスキルを上げられる!

また、デイトラWebデザインコースは、随時教材をアップデート!一度受講したら追加された講座も無料で閲覧できるので、デザインスキルもどんどんアップデートし続けられる最高の学習環境を提供しています。

未経験からWebデザイナーを目指す方は、ぜひデイトラWebデザインコースをチェックしてみてください!

【Webスキル診断】“あなたに合ったスキル”を60秒で診断しよう!

CTA-IMAGE 「フリーランスになりたいけど、どんなスキルを身につければいいかわからない」という悩みを解決すべく、東京フリーランスでは【Webスキル診断】をLINEで無料実施中です! Web制作・Webデザイン・アプリ開発・動画編集など「自分に合った理想の働き方は何か」を見極めていただけます。

フリーランス全般カテゴリの最新記事