こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第46回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン46にて公開されています✨
今回のバナーのお題の詳しい内容はこちらになります!
今回のバナーの目的 アパレルブランドのWINTER SALEバナー
配信場所 GDN・YDNなど
ターゲット 女性、20~30代
雰囲気 カジュアル
サイズ 300px x 250px
画像 女性の画像
配色 お任せ
文言
(必須)
- しあわせな、冬をもっと
- FUKUOKA OUTLET SHOP(店舗名)
- WINTER SALE
- 12/12 sat – 12/20 sun
(任意)なし
(フォント)なし
左の画像(スマホ画面では上)が、私が初めに作ったもので、右の画像(スマホ画面では下)がヒカルさんがブラッシュアップしてくださったものになります。
- 冬をイメージし、淡い色合いで仕上げた
- 背景を斜めに区切ることでリズムを出した
- 「冬」の文字の下にの結晶を配置して、アイキャッチにした
- 反省点は、背景の色と女性のコートが同じトーンの色で、被ってしまっているところ
ヒカルさんが、この回のレッスンを画像で分かりやすく解説するツイートをしてくださっています✨
ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
①コントラスト(「WINTER SALE」と女性の画像のコントラスト)
・背景色を濃くすると「WINTER SALE」という文字の視認性が上がり画像ともマッチする
女性の画像は、はっきりした印象の色合いである(マフラーの青色や、口紅のピンク色、髪の毛の茶色など)
そこで、私の作成したバナーのように背景の色が薄すぎると、「WINTER SALE」という文字の印象が、画像に負けてしまっていた。
②画像と文字の配置(「WINTER SALE」と女性の画像の位置)
・女性の背中の中央で上下位置を揃えるとしっくりくる
「WINTER」、「SALE」、「12/12 sat – 12/20 sun」を、女性の背中にぴったり沿うイメージで、右揃えにして一体感を出した。
私は、「SALE」の文字をイタリック体で使用し、それだとスポーティな印象があったため、ヒカルさんはイタリック体を使わなかった。
「WINTER」の前に、雪の結晶を配置し目立ちすぎないよう不透明度80%にした。
③言葉の印象(「しあわせな、冬をもっと」の部分)
・シンプルに配置すると言葉の印象と合いキャッチコピーとの差別化もできる
私は、「冬」という文字を袋文字にして目立たせたが、ヒカルさんは女性の印象と合わせて、シンプルに「しあわせな、冬をもっと」というテキストを配置した(私の表現だと、女性が笑みを浮かべていたら合ったかもしれない)。
また、私の作成したバナーの「しあわせな、冬をもっと」という文字の配置の仕方だと、「しあわせな」の前に「冬」が来てしまい、理解し辛くなっていた。
私の作成したバナーでは、レイアウトを区切る斜めの角度が急で、スポーティな印象を与えた。水平にすると、上下が分断されてしまうので、ヒカルさんは緩やかな傾斜をつけてリズムを出した。
今回のレッスンも沢山の学びを頂きました✨
前回、「余白を埋めなければ」となってしまう癖を反省したばかりなのですが、今回もその癖を発動してしまいました💦
バナーの目指す雰囲気を掴み、記載する項目や画像の優先順位を理解し、メリハリをつけ、伝わるバナーを作成できるよう頑張ります✨