見出し画像

バナーお題、やってたんです。

あいこ

こんにちは。あいこ（@route_A_design）です。

前回の記事を書いてから相当時間経ってしまいました。笑
すっかり年の瀬になってしまって、なんとなく今年１年を振り返って見て思い出したことがあったんです。

ずっと休んでたグラフィックデザインの仕事をまたチャレンジしよう、そして新たにWebデザインも勉強してみよう！と思い、Twitterで情報収集し始めたのが2019年の11月頃。
その頃Webデザインの勉強方法のひとつで「#バナーお題」を見かけてました。
タイムラインでやたらと見かける「ちょっとひと息」のコピーとチョコレートの写真、、、
こばやすさん（@kobayas_s）の「バナーお題」というものでした。


ちょうど1年前の11月頃はバナートレースもちょこちょこやっていたので、私の中でバナートレースを10個やったら、バナーお題をひとつチャレンジしようっていう課題を作って取り組みました。

そこでまずバナーお題の第一弾だった「冬限定ひとくちチョコの販促バナー」にチャレンジしました。
詳細はこばやすさんのnoteに書かれてます。

決まり事としてはこんな感じです。

バナー設置場所：自社ECサイトのサイドメニュー
コンセプト：冬限定一口チョコ。普段高いが今だけ割引価格
キャッチコピー：ちょっと一息。贅沢をお裾分け
期間：11/◯〜12/◯まで
ターゲット：20〜40代の働く男女
イメージカラー：白、水色
バナーサイズ：W300×H280px

20代から40代の働く男女、、、若手から中堅くらいで仕事を頑張る方々ですよね。そんな日々忙しく頑張っている人に、普段は買わないようなちょっと高級なチョコレートでひと息つきましょうよ✨、、、ていうストーリーが見えてきます。

でもこのバナーの役割はそのストーリーを伝えるのではなくて、このバナーを入り口に、上記ターゲット層を高級チョコが期間限定で今だけ安く買える販売サイトに導くことだと思いました。

私はバナー制作の仕事をしたことがないのでこの辺りの解釈が合っているかはわかりませんが、バナーってそこで全てを伝えるというよりも呼び込みみたいなものだと思うんですよね。
夜の街で一生懸命お店の呼び込みしている方々、あの役目と同じだと思いました。笑
通りすがりを捕まえないといけないものです。

バナーって、自分が見ているサイトの脇に貼られているものですよね。
ということは、サイトを見ているその視野の端に入り込んでくるもの。
もしくはスクロールして通りすがりに一瞬見えるもの、、、くらいのポジションにいると思います。
今回の課題のサイズはそんなに大きいものでもない。
そうなると、わずかに視界に入った時にちょっとでも気に留めてもらえないといけない。
その一瞬で伝えることはまず、「高級チョコが今だけ安いよ」ということだと考えました。
まずはこれだけ。視覚的に伝わるように。
それが伝わる写真選びとレイアウトを考えました。


写真選び

最初に候補で4枚選びました。

画像1

① https://www.reshot.com/free-stock-photos/photo/chocolate-truffles-from-harbor-candy-shop-6y0lO9/
誰かが箱に入ったチョコを持っているシチュエーションで、彩度がやや低めで静けさ、大人っぽさ、冬っぽい空気を感じさせる落ち着いた雰囲気の写真。

画像2

② https://pixabay.com/images/id-1737503/
商品そのものの美しさと高級感を感じさせる写真。
全体の色味もシックで上品。

画像4

③  https://unsplash.com/photos/gP1YecpRyD8
チョコレートを造形的に、アートっぽく見せつつ、チョコレートの特徴も見せてる写真。背景が白く、空間の広さを感じるので、造形的でもうるさくは無く品の良い印象。

画像4

④ https://www.pexels.com/photo/brownies-cake-chocolate-dessert-3666/?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels
お皿にチョコレートをのせて、これから優雅なティータイムかな？と思わせるような写真。

この4枚から、今回のバナーに適してるものを考えました。

①は写真としてはとても素敵な雰囲気があるものだけど、チョコレートを見せるというよりは写真全体でポストカードのような印象なので、ちょっと訴えるには弱いかなと思って外しました。

④はチョコレートに寄って美味しそうなシズル感はあるけど、写真全体の雰囲気が「冬限定」っぽさが無いことと、ティータイムっぽいシチュエーションを感じさせてしまうことが気になって、これも外しました。

そして残りの②と③。
②はオーソドックスな、チョコレートの宣材ぽい写真。
③はインパクトがあり、チョコレートの味が伝わってきそうな躍動感がある写真。
迷った結果、白場が活かせそうでレイアウトにいろんな可能性がありそうな③に決めました。
あと②の写真はすでにこのバナーお題で使っている人を何人か見かけていたのでやめました。笑

③の写真に決めたのにはまだ理由があって、チョコレートが何個も「積み上がっている」こととチョコレートが「溢れるように流れている」という様子に
「豊かさ」→「贅沢」を想わせるかなと思ったからです。
キャッチコピーにもある「贅沢をおすそわけ」の贅沢に繋がるかなと思いました。


どうトリミングするか

写真が決まれば、今度はトリミングとレイアウト。
W300×H280pxというサイズの中で、この写真の魅力が活かされるトリミング。
チョコレートの高級感、贅沢感、美味しさを感じさせられる見せ方、、、
写真はトリミングによって与える印象が大きく変わります。

画像5

背景の白場を活かすために左に寄せて文字を右にレイアウトする想定で置いてみました。
これでもキレイに収まっていると思いますが、やや大人しい、、、というか収まりすぎ？
で、ちょっと移動。

画像6

上にはみ出るようなトリミング。
チョコレートの積み上がりの「終わり」を見せないことで、このチョコレートはこの上にあとどれくらい積み上がっているのか、見た人に想像させることができます。
先の写真ではチョコレートの上から下までを見せているので、「６個のチョコレートで作られた画」と完結してしまうけれど、後の写真はトリミングで上を見せていないので、チョコレートが積み上がっている「豊かさ」の感じ方を見た人の想像に委ねることになります。好きに想像してくれて良いんです。それだけこの写真が「豊か」になり「贅沢」になると思いました。

なのでトリミングはこの方向性で決定。


レイアウトとあしらい

写真のトリミングが決まったので今度は入れる情報の整理とレイアウト。
コピーのどこを立たせるか。どこを強調させどこを控えめで良いのか。

このバナーの中に入れる情報は
・キャッチコピー「ちょっと一息。贅沢をお裾分け」
・冬限定のチョコが今だけ割引価格であること。
・割引期間。

このバナーで1番伝えたいと自分が決めたことを思い出します。
「高級チョコが今だけ安いよ」
分解すると→「高級」「チョコ」「今だけ」「安い」
「チョコ」は写真で伝わります。「高級」は書体とコピーの中の「贅沢」というワードに当てることにしました。「今だけ」「安い」は「今だけ割引価格」というワードをちょっと目立たせることで主張。
割引期間の伝達順はその後でも良いと思うのであまり目立たせなくても良いかなと思いました。

あと必要な要素としては、冬っぽさ、イメージカラーの白×水色、20〜40代の男女という幅広いターゲット層、、、を踏まえてデザインを決めていきました。


そうして出来たバナーがこちら。

バナーお題_01


・・・・・び、、、びみょ〜〜〜〜〜〜！！！笑
そう、、、この時、微妙な仕上がりだったんです。笑笑
写真は悪く無い…と思う、、、ということは文字の入れ方、レイアウトだな。。。
なんかパラパラと散漫、、、「冬期限定」とその下のあしらいが取って付けたかのような中途半端さ。期間もこの位置で良いんだろうか、、、
下の帯の処理はこれで良いのか？「詳しくはこちら」の誘導ボタンってそもそもいるのか？？？

なんともモヤモヤとすっきりしない気持ちで全然納得しない仕上がりでした。笑
そしてこの時に頼ったのが、制作したものに対してフィードバックしてくれるサイト「feeput」。
（2020年10月24日でfeeputのサービスは終了とのことです）

【フィードバックしていただいた内容】
・「冬期限定」を目に入りやすくリボンなど背景においてみては。
・「贅沢を」のベースライン揃える
・「今だけ」の訴求が弱い
・日付の期間がどの情報に対してなのかがわかりにくい
・日付の「/」が大きいのでは。

まさに自分でもモヤっとしていた部分を指摘していただきました。
そして修正後。

バナーお題_01_修正

【修正箇所】
・冬期限定の下にリボンをひいて目立たせる
・その分「贅沢」が弱くなったので、冬期限定に負けないように加工
・「贅沢を」のベースラインと日付の「/」調整
・「今だけ」を目立たせる
・日付を「今だけ割引価格」と紐付ける
・ボタンは要らないと思ったのでカット


最初に作った時に「冬期限定」のところのあしらいにリボンをひくことも考えていたけど、ちょっと表現がリボンってベタかな〜と思って悪あがきで別のあしらいにしてみたけど、結局微妙っていう。。。笑
この時思ったのは時にはベタな表現も必要ってことです。それだけ視認性高いってことですからね。一言で「リボン」と言ってもそれをどんなリボンにするかでもだいぶ印象を変えられます。そこはデザイナーのセンスでしょうね。精進します。。。笑

それにしても今見ると、修正後も最初のよりはマシだけど、ちょっとどうなんだか…って思うとこはあります。笑
そんなに「贅沢」を目立たせる必要ないんじゃないの？とか。笑笑
「贅沢」の後の「を」がはみ出てるとか。。。
そもそも最初の考え方の時に「高級」と「贅沢」を結びつけたこと事態が違っていたかもなぁと今なら思いますね。
高級＝贅沢ではないんですよね。贅沢の価値観も人それぞれだし。

まぁ、、、まだまだ私も未熟だなってことです。笑


このバナー制作の過程を綴ってみましたが、これまでもnoteを書くたび言っていますが、これが正解の方法でもなく、正解の考え方でもないです。
ましてや先にも言いましたが、私バナーの仕事したことないし。笑
ただ紙媒体の広告の仕事はしていたので、その延長での考え方からは作りました。
バナーお題はバナーの練習課題であって、その作ったものの成果も効果も仕事じゃないのでわかりません。
でもこういうのはどんな表現が正解かっていうよりも、自分で「バナー」というのはどういうものなのかを考え、どんなデザインが適しているのかを考え、手を動かして作ること事態がバナーお題に対しての正解かなと思います。


-----------------

このこばやすさんのバナーお題、このチョコレートのバナーを皮切りに第５弾まであります。
Webデザインの仕事を目指してる方にはとても良い練習課題だと思います！
ちなみに第2弾からいきなり難しくなります！私はやってません！笑

ではでは。

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