
バナー制作マスターしよう#1
てことで、3月に関しての投稿からはや4月。
バナー制作と、友人のバンドのサイト制作に集中することにしました。
実は4月デザLIGを1ヶ月休学することにしました。
— ちゃむ (@chaaamu1031) April 3, 2022
理由は本職が忙しすぎて、課題をこなすので精一杯になってる現実が悔しかったから。でも前向きな休学。今月はバナーについてもう少しちゃんと学んだり、制作予定のサイトの構想を立てる予定。感性磨け磨け✨5月からは直伝だ!
前置きはこのぐらいで、、、
ではさて、どうお題を見つけてバナー作ろうかと思ったら、
こんないいnoteを見つけてたので参加してみることに!
https://note.com/kobayas/m/m3e73ae9c2748
今までの自分は完璧な状態で人に見せなきゃ💦みたいなところがあったのですが、そんなんじゃいつまで経ってもなあなあで成長しないだろうし。
覚悟を決めてやろうと思った次第です。
では早速!
#バナーお題 第1弾 冬限定一口チョコ
(以下お題内容と考えたこと)
バナー設置場所:自社ECサイトのサイドメニュー
まずは自社ECサイトって具体的になんだろうというお話。
調べてみたところおそらくこんな感じ ↓

どんな雰囲気のECサイトなのかとかの想定もした方が良さそう
テーマカラーとか
商品概要:冬限定一口チョコ。普段高いが今だけ割引価格で売っている
この時点でバナーに盛り込む必要のありそうな要素
- 冬感
- チョコレートの画像
- 高級感
- 「今だけ」の注記
ターゲット:20〜40代の働く男女
両性かつ20~40代とターゲット層が広い。。。
個性的になりすぎないようにしよう。
20代からだから「大人っぽく」でも大丈夫そう。
ペルソナを用意しよう。
イメージカラー:白、水色
「クライアントからカラーの指定された!」って感じ。
ECのテーマカラーを想定しよう、ってとこも絡めてみよう。
バナーサイズ:W300×H280px
さっきのECに埋め込み想定してみるとサイズ感はこんな感じ ↓
(ちょっと見づらい💦グレーっぽいボックスを上に被せてます)

フォントサイズを考えないといけない
本文のフォントサイズが16pxとあったので、16px以上は担保する必要がありそうです。
あとはテキスト情報
▶︎ キャッチコピー:ちょっと一息。贅沢をお裾分け
「一息」、「贅沢(一息の中で)」、「お裾分け」が気になるワード
▶︎ 割引期間:11月1日〜12月31日まで
▶︎ 割引価格:10~20%割引
そして完成物


制作時間:4時間半(かかった〜。。。)
制作過程での構想↓
テーマ:
贅沢(エレガント)+温かみ(「一息」)
ペルソナ:
30代 男性 有職者
普段は仕事で忙しい 休日や帰宅後のコーヒーが好き
落ち着いた色合いが好きでインテリアにこだわり
(女性とスイーツの繋がりのイメージは元々強いため男性をペルソナに。)
テキスト:
「贅沢」≦ 「10~20%割引」の具合で強調を
フォントは基本、品を感じるものを。
日:遊明朝体
英:Baskerville
※キャッチコピーは温かみを出すために遊明朝体 横用を使用してみた
ビジュアル:
チョコレートは高級感を感じられるものを
(初めチョコを切り抜いてみたところチープな印象を受けたため器がある素材を探した)
雪 真っ白な雪はポップさが出る気がしたため透明感を
六角形は「一息」の「息」を意識してみた
正直全然まだまだ自信があるわけではなくてアプデ予定〜
割引の表記がもう少し改善させたい
文字量に違和感を感じないような配置など考える必要がありそう
唐突ですが、最近読んでいる本のご紹介📢
一冊目:『簡単だけど、すごく良くなる77のルール デザイン力の基本』
これはサイトデザイン、バナー、とかweb系デザインに限った話じゃなく、デザイン全般の「基本」がまとめられている本。
ノンデザイナーブックとも呼べるらしい。
テーマーカラー決めの章が本当に参考になるなと。
なんとなくで決めていた要素要素に、ちゃんとルールや意味を持たせられるようになりそう。7/10章まで読みました。集中したら1日2日で読める軽さ。
2冊目:『思わずクリックしたくなる バナーデザインのきほん』
これは4月バナー頑張ろうと思って買った本。
これから読む感じ笑
これ読みながら、バナー自己添削していく予定
また感想ご報告します〜
今日はとりあえずこのぐらいで!