こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、59回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン59にて公開されています✨
今回のお題の詳しい内容はこちらになります！
今回のバナーの目的 母の日のカーネーション販促バナー
配信場所 GDN・YDNなど
ターゲット 女性、10～30代
雰囲気 綺麗・シンプル
サイズ 300px x 250px
画像 カーネーションの画像
配色 お任せ
文言
（必須）
- フラワーギフト
- 母の日 5.9sun
- ラッピング・メッセージカード・送料無料
- FLOWER BOX（店舗名）
- ご注文はこちら
（任意）なし
（フォント）明朝体
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものです。
- ブーケの画像は、リボンの華やかさを見せたいとおもって、背景からリボンごと切り取って左上に配置した。
- 「綺麗・シンプル」の雰囲気を出すため、フォントは、貂明朝とAdobe Garamond を使用した。
- レースのあしらいを使用して、「母の日フラワーギフト」に視線を誘導した。そのままだとレースが目立ちすぎたので、不透明度を落としてなじませた。
- 「ラッピング・メッセージカード・送料無料」の部分は、この３つが無料でサービスされるということと考え、「無料」という文言を前に配置した。
- 反省点は、ブーケの画像が小さいと余白が空きすぎてしまうのでこのサイズにしたが、ブーケの画像と「母の日フラワーギフト」という文言が同じくらいの強さとなり、視線が泳いでしまうところ
ヒカルさんが、この回のレッスンを画像で分かりやすく解説するツイートをしてくださっています✨
ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
①メリハリ（「母の日・フラワーギフト」の部分）
・文字のサイズを大きく配置するとしっかり目が留まる
今回、優先順位は「母の日・フラワーギフト」という文字組み、花束の画像の順番。花束の画像は、色がはっきりしていて目がいきやすく、左上という位置もまず目がいくところなので、私のバナーでは優先順位が逆になってしまっている。
また、私が作成したバナーでは「母の日・フラワーギフト」の文字組みが中央揃えなので、バナーの中央におくと収まりが良い。
「FLOWER BOX（店舗名）」のフォントサイズを、「母の日・フラワーギフト」よりも小さくして、メリハリをつけた。
レースの画像は、今回も、無料レース素材集 da lace（ダ・レース）からお借りしました。いろいろな形状で用意されていて、レース模様の種類も沢山あり、とってもありがたいです✨
リボンも、da lace（ダ・レース）と同じくTopeconHeroesダーヤマさん制作のRIBBON FREAKS（リボンフリークス）から素材をお借りしました✨
②花束の使い方
・花束を複数使ってそれぞれ部分的に利用すると締まる
今回の画像は、花束とリボンの間にラッピングペーパーがあるため、そのままだと使い辛いので、花束とリボンを別々に配置した。
リボンの画像は、不透明度を少し落として目立ちすぎないように調整した。
レースの画像が目立って（円の形状のものは目を引きやすい）、中央の文言に目がいかなくなるのを防ぐため、レースの上に花束とリボンが少しかぶるようにした。
③文字のグルーピング
・文字とリボン、帯の扱いを変えて2行にまとめると、すっきり整う
「ラッピング・メッセージカード・送料無料」の帯の上に、リボンが重なることで、レイアウトに奥行きが出た！と感じました。
また、ヒカルさんは、帯の高さを、上のレイアウトに合わせて幅を決めていると気付きました。
最後の調整で、花の色が濃ゆいため、「母の日・フラワーギフト」の文字の配色を若干濃くした。
今回のレッスンも、沢山の学びを頂きました✨
優先順位をきめて、メリハリをつけ、視線誘導をスムーズにすること。
フォントサイズで、ジャンプ率をつけること。
帯の高さを全体のバランスを見て決めることや、ボタンの代わりにリボンを使うという発想も、学びになりました！
自分の弱いポイントを把握して、少しでも改善してゆけるようになりたいと思います！
