1on1レッスン

通販サイト夏のクリアランスセールバナー

夏のクリアランスセール バナーアイキャッチ

先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第24回目を迎えました✨

今回の授業もすでに、Webデザイン1on1レッスンチャンネルバナーデザイン24にて公開されています✨

今回のバナーのお題の内容はこちらになります。

今回のバナーの目的 通販サイト夏のクリアランスセールバナー

ターゲット 女性 20〜30代

雰囲気 ポップ

サイズ 300px x 250px

画像 ワンピースを着た女性

配色 青・白・黄

文言

(必須)

・SUMMER CLEARANCE SALE

・MAX70%OFF

・第1弾 6.26[Fri] – 7.12[Sun]

・SHOP CITY (店舗名)

・CHECK NOW

(任意)なし

 

左の画像(スマホ画面では上)が、私が初めに作ったもので、右の画像(スマホ画面では下)がヒカルさんがブラッシュアップしてくださったものになります。

Yuriが作成したバナーヒカルさんがブラッシュアップしたバナー

 

 

 

 

 

 

バナー作成時に意識したことと、反省点
  • 女性の目線の先に、SUMMER CLEARANCE SALEという文言を置いて、視線を誘導した。

  • セール期間と、MAX70%OFFというテキストの下に白い帯を敷くことで視認性を上げた。
  • 「70」の文字の視認性を上げるよい方法を見つけられなかった(白い帯を敷くことで、白い文字の視認性が下がった。)
  • 三角形をあしらいとして使用したが、あしらいとして成立しているか自信がない。

ヒカルさんが、この回のレッスンを紹介するツイートで、とてもわかりやすく説明してくださっています✨

ヒカルさんがブラッシュアップをしてくださる中で、太陽のモチーフを配置するところを見て、自分の雑さに気付きました。

私は、そのままの形で使用したので、テキストに黄色い線が重なった部分がありました。ヒカルさんは、太陽のモチーフにマスクをかけて、テキストと重なる黄色の線の部分を消していました。

この丁寧さのおかげで、視認性が上がり、まるでロゴのような美しさやまとまり感が出るのだなあと感じました。

「MAX70%OFF」の文字の縁の色は、服の色と同系色だと視認性が下がるので、黒色にしました。このように縁のある文字は、女性の着ているようなボーダーの洋服の上に配置すると、目にとまりくくなるので、サイズを大きくすることによりそれを回避しました。

また、最後の仕上げのとき、ヒカルさんは背景の区切り方を斜めにされました。女性の顔と右手の間に空いてしまった空間を、斜めに区切ることでそこに目線がいかないようするためでした。

細部まで手を抜かず、丁寧に作り上げていくことで、伝えたいメッセージを届けることができるのだなあと、いつも感動します。

嬉しいお知らせがあります!

ヒカルさんが、デザインの基本チェックシートを作ってくださいました✨

今回私が作ったバナーは、チェックシートの基本項目、メリハリの「優先順位付けが行われている」を満たせていなかったことに気付きました。

私は、「SUMMER CLEARANCE SALE」と「MAX70%OFF」の両方のテキストを大きくしてしまい、メリハリの付け方が弱かったです。

また私の作成したバナーは、チェックシートの応用項目、配色・リズムの「リズムが良く目が泳がない」も、満たせてなかったです💦

背景の区切り方、「MAX70%OFF」の下の帯、「CHECK NOW」のボタン、店舗名を、全て同じ長方形を使用して、リズムが単調になっていました。

このチェックシートはヒカルさんが、デザインを独学中の方、デザイナーの教育担当の方に向けて、そしてディレクターのチェックバック用として使えるように作ってくださいました✨「ダウンロードしてご利用してください」とのこと✨

私も、皆さんと一緒にこのチェックシートを活用して、改善点に自分で気付いてブラッシュアップしていけるようにがんばります!