こんにちは、yuriです。
今回、ヒカルさんから教えていただくバナー作成のレッスンが、第14回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン14にて公開されています✨
今回のお題は、アパレルブランドのSALEバナーでした。
今回のバナーの目的 アパレルブランドのSALEバナー
ターゲット 女性・20〜30代
雰囲気 シンプル
サイズ 300px x 250px
画像 女性の画像
配色 背景：画像 アクセントカラー：ピンク・イエロー
文言
（必須）
・SALE
・2020 SPRING
・MAX80%OFF
・4.5sun-4.12sun
・MEVIUS（ブランド名）
（任意）なし
左の画像（スマホ画面では上）が、私が作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップをしてくださったものになります。
私が、バナーを作ったあと感じた反省点は、「シンプル・スタイリッシュなデザイン」のイメージを掴むことができず迷走してしてしまい、まとまりがなくなってしまったことです。メリハリも出せていないと感じました。
ヒカルさんに指摘して頂いた私の作成したバナーの問題点と解決策
- 左にスペースを空けて文字を置くとこだけに帯を敷いている
- トリミングも女性の背中側ではなく、前に空間を作っている
- 女性の目線に文言を配置している
- 愚直でドストレート、日の丸構図的（王道的）である
→ スタイリッシュにするには、「いかに外すか」が大事。少し外してやると印象的になる！
ブラッシュアップの流れ
ブラッシュアップ１- まず、上の構図で、Futura Condensed Mediumで組んでみる（細身のフォント）。文字組を意味合いで切って、幅を揃えて並べると、ジャンプ率をつけられる。
- この中央に文字組を持ってくる構図で、Futura Condensed Mediumのような細身のフォントだと左右に空間があいてしまう。
- 横幅のあるフォントに変えてみる（上のバナーではCentury Gothicを使用している）
→少し印象が弱いのと、Century Gothicは、文字の横幅が広いものと狭いものがあるため、バラバラとした印象になる（私はこのデザインが、とてもスタイリッシュに感じましたが、もっと良くなるの？とワクワクしました….!）
ブラッシュアップ２
- DINで組んでみる。DINは、アパレルっぽい雰囲気があり、文字組もしやすい。
- レイアウトを区切って、リズムをつける。
- 女性の背中側に文字組を置くと収まりがよい
- モノトーンに調整してみる（→モノトーンは、秋冬を連想させた）。
ブラッシュアップ・完成形
- SPRINGの色をピンクにする。ビビットなピンクは夏を連想させるため柔らかなピンクを選ぶ。
- SPRING以外の文字色を、ピンクのトーンに合わせてグレーにする。
- 春の日差しをイメージして、写真を補正をする。
- 女性の写真の幅を狭めることにより、印象を引き締める。
今回のレッスンで、スタイリッシュという自分にない表現に出会って学ばせていただき、幸せでした…..!
今回のアイキャッチを作るとき、写真の被写体に文字が絡むような表現をしてみようと思いましたが、まず写真選びが難しく、結局断念しました💦。
そして、作り終わった後に気付いたのですが、女性の服装や背景、どう見ても夏！これはでは、SUMMER SALE💦 反省です。
挑戦して、失敗して、また挑戦してスタイリッシュや他の表現の引き出しを増やしていきたいと思います！
（挑戦する前に、ヒカルさんが教えてくださっていることを復習するようにします✨）
