【第3回】 バナー課題レビュー会 | デザインのWA!（PSDおまけ付き）
こんにちは！unique box の shima です！
「デザインのWA!」は、LINEオープンチャットを使用して、みんなでWEBサイト制作の勉強をしたり、情報を共有し合ったりする仲間作りのコミュニティです！
\\ 第３回 バナー課題レビュー会を、7/24(土)に開催しました //
参加者募集中です！記事の一番下に参加URLを入れてますので興味のある方は是非参加してください〜☆！
３回目のデザインお題は、「ビール」「コーヒー」のバナーデザインです！
ターゲットは「女性・男性」限らず、
年齢や、職業、ライフスタイルなどなど自由に考えていただきました！
早速、みなさんのデザインをご覧ください！
１. エビスのプレミアムな夏
chachaさん
＜ターゲット＞ ビールが好きな人（男女）
＜構成＞ ジャンプ率を意識したバナーを作成したい！という想いから、ジャンプ率のあるバナー。
レビュー内容
ジャンプ率を意識するあまり情報量が多くなってしまい、天地左右に余白がない窮屈なデザインになっている。
________________
アドバイス
・余白を意識しましょう！
・見せたい商品をひき立たせるデザインにしましょう！
修正イメージ
２. KALDI コクと香りに感動。
chachaさん
＜ターゲット＞コーヒー選びにこだわりのある人（男女）
＜構成＞商品レビューを見て「コク」や「香り」にユーザーの需要があることを調査し、コーヒーにこだわりを持っているコアコーヒーユーザーをターゲットにした案。
レビュー内容
ジャンプ率を意識するあまり情報量が多くなってしまい、天地左右に余白がない窮屈なデザインになっている。
________________
アドバイス
・「コク」と「香り」の重厚感をフォント（明朝系）で表現しましょう！
・背景は白ベースで綺麗ですが、ターゲットであるコーヒーにこだわりを持ったユーザーに向けた「コク」や「香り」を感じる背景を選定しましょう！
・平面的なデザインになってしまっているので、素材探しは大変ですが、全体のクオリティに左右しますので、奥行きのあるデザインを目指しましょう！
修正イメージ
３. EBISU 春夏にふさわしい、エビスのホワイト。
chachaさん
＜ターゲット＞ 20-50代女性
＜構成＞ 華やかフルーティー。華やかさを表現するため花を散りばめた。
春夏にふさわしい スッキリした味 ワイングラスのような形状のグラス
レビュー内容
・春らしさを感じる綺麗なデザインです！
・コピーの入れ方も商品のバランスもすごく良いです！！
・花とテキストをピンクにしているので統一感があります
________________
アドバイス
・鏡面反射を入れて立体感を出しましょう！
・全体がピンク色なので、薄い青グレーを背景に敷くことで空間をイメージしやすく、奥行きのあるデザインに仕上がります。
修正イメージ
４. スタバ ピーチフラペチーノ
natsuさん
＜ターゲット＞ スタバの新作好きの女子
＜目的＞商品認知
＜構成＞ 新しい商品の紹介テーマ：スタバ女子に刺さるように可愛いいデザインにしました。夏の商品なので、背景を水彩、色を赤(ピンク)、青、黄にしました。
レビュー内容
・「新作好きの女子」がターゲットで、スタバの目新しさを感じました！
・商品の配置や配色もすごくバランスが良いですね！
・背景のピーチは実際の画像ではなくイラストになっているので柔らかい印象で良いですね。
・ロゴの周りを整理していて見やすくなっています！
５. HUERCA SUMMER BEER
ちゃんあい@Webデザイン独学記録さん
＜ターゲット＞ 20-30代女性
＜意図＞ ビール広告のテイストを排除して、ジュースのような可愛らしいデザインで女性受けを狙いました。種類がいくつかあることを伝えるために左下に他のビールを配置。合計4種のデザイン展開で、それぞれのビールの特徴に合わせて配色やあしらいを変えることを想定。
＜配色＞ 夏らしい青とオレンジをベースにしました。明度が強すぎると幼くなってしまい、弱すぎると重たい雰囲気になるので、その中間くらいの色を選びました。 ＜あしらい＞ 花火大会などのお祭りのお供に、という意図で花火をあしらいました。下の水玉は花火の丸の反復と、ビールの泡を意識しました。
＜こだわり＞ 「summer beer」は花火が上がっているようなイメージにして、夏のビールという印象づけを狙いました。
レビュー内容
・花火のあしらいで「夏の定番化」を狙う点がすごく面白いです！
・文字の大小関係や商品の目立たせ方も工夫がすごくされている。
・余白もいっぱいあってスッキリしたデザイン！
アドバイス1 ユーザーの目の導線を意識しましょう！
人はZ型もしくは、F型の順番に目線が移動します。情報の順序もこれに習うとキレイな配置と、ユーザーの読みやすさ、理解しやすさに繋がります！
１タイトル
２メインの新商品と、新商品の特徴
３商品バリエーション
４商品名
この順番にそれぞれを "位置付け" してあげると３番の商品バリエーションは右下に移動してあげるのがいいです！
アドバイス2 情報のグループ化
１タイトル
２メインの新商品と、新商品の特徴
３商品バリエーションと商品名
「HUERCA」と「夏に飲みたくなる一杯」と「商品バリエーション」は、同じカテゴリにまとめることができます！同じ情報は同じ場所にまとめて一目見てユーザーが理解しやすい構成にしましょう！
アドバイス3 配色の「明度差」と「相性」
「配色」
ターゲットの性別を女性に絞っていましたが、青色は男性的なイメージです。青にしたい場合は、淡い青色をメインに使用し、オレンジと茶色系の色でおしゃれな印象の配色にしてあげると良いです！
「明度差」
同じ明度を使用すると色の差が出ないので、明度に差がある色同士を組み合わせて花火をしっかり見せましょう！今回のコンセプトは「夏といえばこれ」なので、花火はうっすら見えているというよりかは、しっかり見せてあげたほうがパッと見てユーザーは理解することができます。
「色の相性」
オレンジと青色は補色関係にあるので色の相性が非常に悪いです。目立たせたい情報に補色を使用し、強調させるという方法はありますが、背景色で補色を使用すると全体の色のバランスが壊れてしまうので調整しましょう！
アドバイス4 あしらい
バナーは少ないスペースの中でいかに情報を伝えれるかが鍵になりますので、あしらいが多くなると情報が混雑してしまいます！なるべく一つに絞りましょう！WEBサイトやLPのデザインの場合はコンテンツごとに切り替わるので、あしらいが多種になってもいいと思います！
修正イメージ
６. CAFE BASE
noaさん
＜ターゲット＞ 30-40代
＜目的＞店舗での購入が目的
＜構成＞ 自宅で牛乳と割って作るコーヒー
レビュー内容
・あしらいやフォント使いも良いバランスです！調整した背景で親しみやすさも出ていると思います！
________________
アドバイス
・店舗での購入を目的としているので「店頭にて発売中！」などの文言があれば、なおよかったです！
７. 蔦屋書店 すべてのデザイナーのために。
＜ターゲット＞ デザイナー
＜目的＞蔦屋書店への来店
＜構成＞ スタバでMacbookを開いて、デザインの仕事をするというデザイナーにとってのかっこいい姿をいろんな人へ試してもらいたいという仕事のフリースタイル化を認知させ店舗へ誘導するバナー。バナーの遷移先は蔦屋書店のHPで特設サイトとしてコンセプトムービーなどを用いたデザイナーに使ってもらいたい意図をこめたサイトに遷移。
第3回バナーレビュー会は、以上です！
バナーに対する目線や、作り方、作り込みが少しずつレベルアップしていて嬉しいです！
みんなの個性や企画性が色々見えていい機会でした！今回のレビューは女性がターゲットでしたので、みんなの意見も聞けてよかったです！
就職活動や、転職活動などに是非活用していただきたいです！
第4回のお知らせ
次回は２種類あって、、「ドラえもんの秘密道具」か「オリンピック」のバナー制作課題です！
衣食住をコンプリートしたので、"未来" と"現在"のバナーを作成していただきたいと思っています。ご参加お待ちしています！詳細は下記となります。
参加者募集中！
LINEオープンチャットを使用して、みんなでWEBサイト制作の勉強をしたり、情報を共有し合ったりする仲間作りのコミュニティです（参加無料）！今は感染拡大防止のためzoomオンラインのみ開催しています。
学生さん、スキルアップしたい人、転職活動中の人、いろんな方に参加していただきたけると嬉しいです。
参加対象者
・WEBデザイナーを目指している人
・WEBデザイナー
・フロントエンドの方
その他の方は要ご相談ください〜
やってみたい！現役デザイナーの人にアドバイスもらいたい！コミュニティに参加したい！という方は是非お待ちしています✨
✨✨現在満員御礼中です✨✨
参加希望の方はコメント欄へお願いいたします！
「WEBデザイン勉強部屋」参加希望者のオープンチャット
https://line.me/ti/g2/3VhhK93QxLnCTNz63cjb1w?utm_source=invitation&utm_medium=link_copy&utm_campaign=default
「もくもく会」 参加希望者のオープンチャット
https://line.me/ti/g2/5KKfk2oZjnJy6w-KaIRS-g?utm_source=invitation&utm_medium=link_copy&utm_campaign=default
過去のレビュー会記録はこちらです！
この記事が気に入ったらサポートをしてみませんか？