こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第44回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン44にて公開されています✨
今回、観葉植物がお題ということで、参考にするデザインを見ていたら、観葉植物を家に置きたい欲がむくむくとわいてきました✨
しかし、何度か枯らした経験があり、育てる勇気がなく、切り花で欲を満たすことにしました。ガーベラを購入したんですが、なんともかわいく、そしてめっちゃ長持ちしてくれています✨
植物を育てる勇気がわくまで、切り花に癒してもらおうと思います。
今回のバナーのお題の詳しい内容はこちらになります！
今回のバナーの目的 観葉植物の選べるセット販促バナー
配信場所 GDN・YDNなど
ターゲット 20～30代
雰囲気 シンプル
サイズ 300px x 250px
画像 観葉植物の画像
配色 お任せ
文言
（必須）
- 緑のある暮らし
- 観葉植物 選べる5点セット
- GREEN GREEN（店舗名）
- ご注文はこちら
（任意）なし
（フォント）なし
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものになります。
- 観葉植物の画像にいきいきとした感じを出すため、Camera Rawフィルターで露光や自然な彩度を調節した。
- 「選べる」という文言を吹き出しに入れて動きを出した。
- 反省点は、画像、キャッチコピー、訴求文言の間で、優先順位がつけられておらず、視線の誘導がスムーズでないところ。
ヒカルさんが、この回のレッスンを画像で分かりやすく解説するツイートをしてくださっています✨
ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
①文字組みとあしらい（キャッチコピー「緑のある暮らし」の部分）
・文字のサイズを上げて、あしらいを拡大して使うとメリハリが出る
私が作成したバナーの、キャッチコピーの部分はブロック感が少し弱い。
あしらいは、目立ちすぎないよう不透明度を33%にした。
「緑」の一文字を大きくすることで、アイキャッチとなりリズムもでた。
「緑のある暮らし」というテキストの視認性を保つため、境界線を白色で2pxをつけた。
②画像の補正とあしらい（観葉植物の画像）
・シャドウを削って彩度を上げると明るい印象になり、鉢をトリミングすると葉に目が留まりやすい
私が作成したバナーは、観葉植物の画像が少し暗く鉢の方へ目がいってしまう。
また、今回は観葉植物自体の魅力を伝えることがポイントとなるため、観葉植物の画像を大きく使用した。
③ボタンの配置（「ご注文はこちら」の部分）
・リボンの素材をこちらで利用すると、鉢を丁度いい具合に目隠しできる。
私は、下に帯を敷きその上に「ご注文はこちら」を配置したが、帯ではなくボタンにすると、植物を大きくみせられる。
リボンの太さをCommandキーを押しながら、調節した。
④観葉植物 選べる5点セットの組み方
「5点セット」の文字色をオレンジ、「観葉植物」を緑にして、文字間を調節し、長方形に組むことでブロック感を出した。
また、「観葉植物」の文字が植木鉢の画像と重なるので、視認性を保つため白色で境界線を2pxつけた。
「選べる」の吹き出しを、マスクをかけ余計な部分を削って、文字の傾斜と同じ傾斜にして、リズム感を出した。
今回のレッスンも沢山の学びを頂きました✨
観葉植物の画像を使う大きさ、写真画像の加工や、トリミングの仕方、イラストのあしらいとしての使い方、文字組みの仕方や、メリハリの付け方などなどです。
今回は、私が使用したイラストがポップな印象によっていたので、目指す雰囲気は「シンプル」だったんですが、私の作成したバナーをもとにブラッシュアップしてくださったので、仕上がりもポップな印象によりました。あしらいを使うときは、目指す雰囲気にあっているかどうかを確認するようにします！
また、リアルな植物があるときは、イラストの植物を一緒に使うと印象がバッティングしがちであり、今回はリアルな植物に負けないように押すイメージでイラストを使用したと教えていただきました✨
教えていただいたことを次に繋げていけるよう、復習しつつ頑張りたいと思います✨
