見出し画像

課題バナーに挑戦！#01

sato

satoです！photoshopもわかってきて、もう少し上のことをやってみたいと思っていた今日この頃。
今回はこばやすさん（@kobayas_s）のバナー課題にチャレンジしました。

🔽お題はこちら

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

＃バナーお題　第１弾

制作はちゃんみき(MiKi)(@myn2224)さんのやり方を参考に制作しました。

1.情報の整理

課題の情報を以下の形で整理してみました。
この作業で情報を明確にできるので、バナーを作る上でとても役に立ちました。

⚫︎クライアントの製品・サービス名
Koba choco
⚫︎事業・サービス内容
冬限定一口チョコ。普段高いが今だけ割引価格で売っている
⚫︎バナーサイズ
W300×H280px
⚫︎ターゲットの確認（年齢、性別、職業、年収などのペルソナ）
20～40代の働く男女、真面目な会社員。真面目ゆえに苦労しがち。
職業はサラリーマン。入社３年目。
⚫︎ターゲットはどんな感情で何を考えてるか？
いつも真面目に頑張ってたまには息抜きしたい・贅沢したいなと思っている。
⚫︎必要な構成要素（クライアント指定の文言や写真など）
ちょっと一息。贅沢をお裾分け
⚫︎重要ポイント（特に強調したい箇所など）
高級チョコが安いということ

２．参考となるデザイン探し

１でまとめた情報を加味して、以下に絞って参考デザインを探します。

  • 季節感（冬らしさ）

  • 限定

  • 高級感

  • お手軽に買える

3.ラフ案作成・レイアウト作成

ラフ案は６案作成をしました。
１や２での情報を見返してバナーで伝えたい情報とは少し違うかなと思う要は案から外すようにしました。

4.作成

３で決定したレイアウトを基にバナーを作成していきます。
どうやったら高級感を出せるかな？配色は？お手軽に買えることを伝えるにはどういった表現がいいのか・・などなど試行錯誤の末、ラフから２作品を作成してみました。

案１は高級感を重視し、写真を高級感がありおいしそうな一口？チョコ（トロっとしていておいしそう）の写真をチョイスしました。また、キャッチコピーが前面に出るように配置＆デザインしました。

案１

案２は安さを重視し、今だけお手軽に買えることを前面に出しました。また、枠をつけることによって、サイト内でも目立つように工夫しました。案１同様に配色に金色・紺を加え、高級感をアップ！

案２

5.案確定

こうして作成した２作品のうち、今回はよりイメージと近い案２を採用することにしました。

6.やってみて

初めて課題バナーに挑戦してみましたが、新しい発見が色々あり、とても学びがある経験でした。今回の経験を下記にそれぞれまとめてみました。

うまくいったこと

最終的に採用した案では、最もバナーで伝えたいこと（高級感をだしつつ、お手軽な値段で冬限定一口チョコが買える）が表現できたのかなと思います。

新しい学び

〇情報を整理してペルソナを設定することによって、情報が明確になり、作成しやすくなりました。
〇情報を整理したうえで参考になりそうなデザイン案を作成することで探しやすく、またイメージがずれていくことを防ぐことができると感じました。

次回は改善したいこと

〇イメージが白、水色だったのですが高級感を与える気持ちが強すぎて、イメージと若干ずれてしまっている気がします。(水色、白で高級感って難しい・・)
〇10~20%割引の表示だったので”最大20%OFF”にすべきでした。
〇「実際にサイト画面に当てはめる」はできませんでした。実際に当てはめることによってデザインの再確認になると思うので、次回は挑戦します！

Twitter(X)でも投稿しています。

ここまで読んでくださり、ありがとうございました～！

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