こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第43回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン43にて公開されています✨
今回のバナーの目的 クリスマスケーキの予約バナー
配信場所 GDN・YDNなど
ターゲット 男性・女性、20～40代
雰囲気 1案：ポップ
2案：神聖・シンプル
サイズ 300px x 250px
画像 クリスマスケーキの画像
配色 お任せ
文言
（必須）
- Merry Christmas 2020
- THE CAKEのクリスマスケーキ
- ご予約受付中 12/13まで
（任意）なし
（フォント）なし
１案：ポップで作成した私が作成したバナーがこちらになります。このバナーをクリックしたら、Webサイトで、予約できるケーキがいくつか紹介されていて、実際に予約ができるイメージですね。
自分で押し案として、2案：神聖・シンプルの方を選び、今回、ヒカルさんはそちらをブラッシュアップしてくださりました✨
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものになります。
-
背景を使いたいが、そのままで文字を置くと視認性が保てないので、ケーキを切り抜き、背景の上に黒色のレイヤーをはさみ、そのレイヤーの不透明度を下げて置くことで文字の視認性を保った。
- ケーキをより美味しそうに見せるため、Camera Rawフィルターで、露光を上げたりして加工した。
- 反省点は、レイアウトが単調で、バナーに目を留めてもらう力が弱いところ。
ヒカルさんが、この回のレッスンを画像を使って解説するツイートをしてくださっています✨
ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
①文字組みと配置（「Merry Christmas 2020」の部分）
・単語ごとに縦に組んで左上に配置すると、最初に目が留まりやすい
「Merry Christmas 2020」の文言とケーキの画像で、レイアウトを斜めに区切るレイアウトになっていて、リズムが出ている。
私の作成したバナーでは、「Merry Christmas 2020 」が、下に配置されているが、順番的に先に見せたい。
「Merry」と「2020」の文字の下にアイキャッチとして雪の結晶を配置したが、目立ち過ぎないよう不透明度を下げた。
②背景画像の処理（「Merry Christmas 2020」と「THE CAKEのクリスマスケーキ」の背景）
・背景をグラデーションで少し削ると、テキストの視認性が高まる
ケーキの大きさをこの大きさにすると、上に余白ができる。画像の上部もちょうど黒色なので、黒のグラデーションで自然につなげ、余白を黒で埋めた。（前に、デスクの販促バナーのレッスンのときも、ヒカルさんは余白を自然に埋めていました。この発想ができるようにならねば〜）
「THE CAKE’S クリスマスケーキ」の、カタカナの部分に長体をかけ（110%）、高さを出した（スマートな印象も与える）
③日付のまとまり（「ご予約受付中 12/13まで」の部分）
・月と日に差を出して罫線で区切ると、収まりが良くなる
文字を配置する場所を見つけるポイント：写真画像を見たとき、文字を置ける空間を探す（ヒカルさんがこの文言を配置した場所は、背景に物がないため、帯を敷かず文字を配置することができた）
リボンの横幅が長かったため、Commandキーを押しながら幅を少し縮めて調節した。
今回のレッスンは、バナーに沢山の情報が掲載されているのではなく、イメージを伝えるバナーということで、また違った学びが沢山ありました✨
フォントの選び方、帯を使わず文字組みでブロック感を出す方法、画像が足りず余白ができたときの処理の仕方、メリハリの付け方などなどです。
毎回なのですが、ヒカルさんがブラッシュアップしてくださるとき、集中力をずっと保っているところを尊敬します。私は、創作する力が弱くても、集中して向き合うところは意識できるはずなので、そこから頑張りたいと思います✨
