
#バナーお題 01(冬限定一口チョコ)
こんにちはTomichaです!🍫
今日も独学で「デザインする」を仕事にしたいと勉強を進め、自分の課題と向き合う中で作品を作りアウトプットの機会を増やしていこうという思いに至りました。
今回はその第1歩としてバナー作成についてno+eにまとめていきます🗒
思い立った理由
--------------------------------------------
・1から作ることで養う使う力はトレースだけでは育めない
・作品に取り組むと現時点での自分の足りない力が認識できる
・アウトプットすることを決めれば、半ば強制的にインプットもできる。怠惰への逃げ道を塞ぎたい
ちなみにこれまでの約半年自分の中で、
前半はツールに慣れることデザインを見る習慣をつけること、
中盤からビジュアルへの興味も湧きトレースとサイト分析と、デザインや思考力などの本を読み、インプットを中心にしていました。
これからは、
今までのこと + α実際に作ってみる
を重視して学んでいこうと思います。
ということで言わずと知れたこばやす様の(@kobayas_s)の#バナーお題に挑戦🔥
今回使用したツールはIllustrator。(ちなみに私はイラレでのデザイン経験ほぼ皆無です)
まずは自分の思考の整理から。

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




-デザインの進め方
-何を伝えたいのか
-1番のメリット(商品の売り、アピールポイント)
-強調ポイント
-ターゲット層と商品テイストに合う素材の選定
まず上記を整理しました。
-何を伝えたいのか→いつも手の出せない高級チョコが期間限定で安くなっている
-1番のメリット(商品の売り、アピールポイント)→10~20%割引
-強調ポイント→最大で20%割引、期間限定
-ターゲット層と商品テイストに合う素材の選定
・冬の季節感→雪のあしらい
・贅沢さ、高級感→ゴールド 明朝体 グラデ
・働く大人向け→落ち着いた色味
-手段と方法
Pinterest、Twitter、no+eで参考デザイン探し
デザイン制作(ラフから)

- 意識した点
-1番のメリットを強調
ターゲットユーザーが反応する情報「割引」「%OFF」「SALE」など。「10~20%割引」がユーザーにとって一番のメリットであると考え、『最大』という言葉を使い印象づけて興味を持ってもらえるように配置しました。
-キャッチコピー 商品画像を見えやすく、邪魔しない
ユーザーがバナーを目にした時に興味を引くポイントともなりますし、一瞬向いた興味をさらに興味を持ち続けてもらうための情報や文字になるのでなるべく見やすくを意識。
-パターンをいくつか考える
答えが1つではない、それがデザインの面白いところです。なので1つの課題に対して1つの答え方だけでは学びも少ない。
技術力はなくとも1つのお題から様々な表現方法ができないか挑戦しました。
- 制作時間
正直初めてなのであまり時間にとらわれず作りました大体ちょこちょこ作成した時間を繋ぎ合わせたら5-7時間/1作品だったかと思います。
-振り返りと学び
反省ポイント①:詳しくはこちら、Check→など行動を誘発する、指示の内容を入れ忘れました。情報の優先度は低くても、デザインの中に入れておいた方がいい情報でした。
反省ポイント②:比較的要素を詰め込んでもごちゃごちゃせずにスッキリした、まとまりあるように仕上げられたと思います。
反省ポイント③:ダークチョコの色味で大人、高級感を引き出したかったのですが、コントラストが曖昧で暗めの印象が強くなりました。
反省ポイント④:イラレでのデザインで、簡単ですが雪のあしらいや、文字の動きを出したり、表現方法を考え挑戦することができツールやあしらいのインプットに繋げられました。
反省ポイント⑤:パターンを考えたなら、文字の表現20%OFFの文言や商品名を入れるとか違ったアプローチの方法を試してみれば良かったと思います。
作成する上での学び
------------------------------------
①切り抜きは違和感がないように
②シャドウは繊細に
③セールや目立たせたいこと大胆に
④明朝系のフォントは細いから少し線を足して太く。
⑤優先順位をつけて情報はまとめる。
-感想
バナー制作はあの小さな世界に思いを込めてあしらい、フォント、カラー、デザインのバランスをとりながらも、顧客の行動に繋げられるような心理的効果も発揮しなくては意味がない。
『バナーの目的を明確にし
伝わりやすさ(デザイン)と惹きつけやすさ(心理)のバランスを考える』
この作業ができるように意識しなければならないと感じました。
あと、できれば作成したものを作り直したいところなのですが中々一度作ると自分では壊せない。壊したくても違和感の正体を明確にできない。第3者の意見が欲しいなと切実に思いました笑🥲
最後までご覧いただきありがとうございました!
梅雨でテンションも上がりにくいですが、頑張ろっと🐌🌧