こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、55回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン55にて公開されています✨
今回のバナーのお題は、マカロンの販促です。
私は、前にマカロン作りにはまっていたことがありまして、
ネットで、プロの菓子職人の方だけではなく、家庭でお菓子作りを楽しむ方たちが
作るときや焼くときのコツを紹介してくれていて、とても参考になり、感動したことを思い出しました。
今回のアイキャッチに使ったレースは、無料レース素材集 da lace（ダ・レース）さんからお借りしました。
素敵なレース素材が沢山あって、見てるだけでもわくわくします。こんな素敵な素材を無料でお借りできるとは…、リスペクト＆感謝です..!
お題の詳しい内容はこちらになります！
今回のバナーの目的 ホワイトデーのマカロン販促バナー
配信場所 GDN・YDNなど
ターゲット 男性・ 20～30代
雰囲気 ポップ
サイズ 300px x 250px
画像 マカロンの画像
配色 お任せ
文言
（必須）
- HAPPY WHITE DAY MACARON
- 幸せの青いマカロン
- ホワイトデー限定100セット
- ご注文はこちら
（任意）なし
（フォント）なし
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものです。
- マカロンの画像を、トーンカーブを調整して赤みを抑え、すっきりした印象にした。そして、自然な彩度を上げて、マカロンの色を強調した。
- 「幸せの青いマカロン」を、縦書きにしてリズムが単調にならないようにした。
- ポップさを出すため、レイヤースタイルからパターンオーバーレイを選択し、背景をストライプ柄にした。
- 反省点は、優先順位が高いのがマカロンの画像だと考えたが、仕上がりは、どの要素も同じくらい主張してしまい、目が散るところ。
ヒカルさんが、この回のレッスンを画像で分かりやすく解説するツイートをしてくださっています✨
ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
①商品名のメリハリ(「幸せの青いマカロン」の部分)
・文字のリズムに気を付けて、大きめに配置すると目が留まる
私のバナーでは、メリハリが弱く、また、レイアウトを縦半分で区切っており、商品と商品名が同じ四角に収まっていなかったので、繋がりがピンときにくかった。
②商品画像の配置
・思い切って中央に配置すると商品も文字もバランスよくまとまる
こちらの下の画像は、以前、珈琲豆のサブスク販促バナーのときに、ヒカルさんがブラッシュアップしてくださったものです。
このバナーでは、珈琲カップが主役ではないため、目立ちすぎないようカップの一部をトリミングしました。
私はこのバナーを参考にレイアウトを組みました。しかし、今回はマカロンの入ったカップが主役であるため、ヒカルさんは、トリミングせず、中央に大きく配置した。
③パターンのコントラスト
・ストライプの白とベージュの色を近づけると悪目立ちしない
私のバナーでは、ストライプの上に置いた文字の視認性が少し低かった。
私は、レイヤースタイル＞パターンオーバーレイ＞描画色 比較（明）で、不透明度100％にしたが、ヒカルさんは不透明度55%にした。
柔らかな色合いになって、ホワイトチョコレート感があり、美味しそう！と感じました✨（甘いもの好きの感想…）
「HAPPY WHITE DAY MACARON」という文言は、優先順位としては「あしらい」的なイメージで高くないため、文字色は、背景のベージュから色をとって少し濃くした。
④「ホワイトデー限定100セット」の位置
・左下に配置することで、右上から、中央、左下とスムーズに視線誘導ができる。
スペースに合わせて、リボンと「限定100セット」の文字を配置した。サイズが小さめになったので、水色を少し濃くすることで、視線が留まるようにした。
その色に、帯と縁の色も合わせた。
今回のレッスンも、沢山の学びを頂きました✨
商品画像のトリミングをするかどうか、配置場所をどこにするか、そのときどきにあわせて考え、選び、説明できるようになりたい！と思いました。
視線誘導をするのが苦手な理由は、優先順位を決めかねていることや、メリハリをつける力が弱いためだと気付けたので、そこに気をつけて復習をし、挑戦してゆきたいと思います！
