こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、54回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン54にて公開されています✨
今回のバナーのお題は、生牡蠣の販促です。
こちらのサイトで牡蠣についての記事を読んでみました。
「牡蠣の養殖って実際にはどのようなことをしているのでしょうか？」という質問の答え
「種牡蠣（たねがき）と呼ばれるものを海に付けておくんですよ。牡蠣を吊るす深さの調整など、環境を少しコントロールするだけで、餌をあげることはありません。ほとんど海任せですね。」
また、「牡蠣の生食用・加熱用の区分けというのは鮮度ではなく、海域で分けている」ということも初めて知りました。
身近な食材でも、少し深堀りすると、新鮮な発見があるんだなぁと感じました。
お題の詳しい内容はこちらになります！
今回のバナーの目的 生牡蠣の販促バナー
配信場所 GDN・YDNなど
ターゲット 男性・女性 20～60代
雰囲気 和風
サイズ 300px x 250px
画像 生牡蠣の画像
配色 お任せ
文言
（必須）
- 北海道産 殻付き生牡蠣
- 5kg 4,980円
- 送料無料
- UV殺菌処理/生食可
- ご注文はこちら
（任意）なし
（フォント）なし
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものです。
- 「和風」の雰囲気を出すため、また生牡蠣の新鮮さを伝えるため、昭和書体のフォント「闘龍」を使用した。
- 「北海道産」の文字は、赤の帯の上に白抜きで配置して、リズムを変えた。
- 反省点は、「生牡蠣」という文言の上下に、意図しない余白があること、生牡蠣の「蠣」と、「5kg」という文字が接近していて窮屈な感じがするところ。
- 参考にしたバナーは、海や、養殖場の写真画像を使用しているものがあり、そうしたらより雰囲気を出せたかもしれない。
ヒカルさんが、この回のレッスンを画像で分かりやすく解説するツイートをしてくださっています✨
ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
①文字組みと余白(「北海道産 殻付き生牡蠣」の部分)
・背景画像との被りに気をつけて、バランスよく組むと良い感じにまとまる
「生牡蠣」の「牡」の文字は、画像と少し重なるため、白の縁文字にした。
②商品画像のトリミング
・牡蠣の身をアップにして殻の部分をカットすると美味しそうに見える
私は、商品画像全体を使おうと考え、また、殻の部分をグラデーションで消すことを考えつかず、結果、牡蠣の身を小さくしか配置できなかった。
③文字の処理
・スペック系の情報は、可読性の高いフォントで組むと伝わりやすい
私は、 「殻付き生牡蠣」と同じ書体を使ったが、小さい文字で筆文字は少し可読性が悪かった。
ヒカルさんの選んだ書体だと、「殻付き生牡蠣」という文言とスペック系の情報との差別化もできると感じました（一番視線誘導したい文言のみ、筆文字を使う）。
そして、スペック系の情報を配置する場所を、グラデーションで少し削り、文字を縁文字にすることで視認性を保った（牡蠣の身を大きいまま、見せることができた）。
帯の色は、食材自体の鮮度感や色を引き立てるため、黒を使用した。
今回のレッスンも、沢山の学びを頂きました✨
商品画像をどう見せるか、トリミングするかで、視線を誘導する力が大きく変わることを実感しました。
また、「画像をグラデーションで消して、文言を配置する」という方法は、前のレッスンで教えていただきした。作成するとき、「牡蠣の身を大きくみせたい」という思いはありましたが、「牡蠣の殻は、ここで見せるべきか？」という考えができなかったため、その方法を活用しなかったんだなぁと気付きました。
レッスンで教わってきたことを、復習しじっくり観察し直すと、気付けていないことが沢山ありそうだと感じるので、振り返ってみます。
また、柔軟に対応できるよう、挑戦する、教わった方法を試してみるということも同時に意識してゆこうと思います。
