こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第38回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン38にて公開されています✨
今回のバナーで、アイキャッチの画像の加工を、トミナガハルキさんの著書「#ズボラPhotoshop 知識いらずの絶品3分デザイン」を参考にさせて頂きました。
「#023 使い勝手抜群!? 煙の画像を駆使して雰囲気を高めよう」と、「＃027 ジグザグフィルターでロックの音圧を伝えろ」を参考にしました。
初めてジグザグフィルターを使いましたが、ハロウィン感を出すため、煙や文字をゆらっと表現できて楽しかったです。
＃ズボラPhotoshopで検索すると、書籍を購入した方が作例をアップしてくれるという輪が広がっていて、刺激を頂いたり学んだりさせて頂いています✨
今回のバナーのお題の内容はこちらになります！
今回のバナーの目的 シューズショップのハロウィンセールバナー
配信場所 GDN・YDNなど
ターゲット 女性・10～20代
雰囲気 ポップ
サイズ 300px x 250px
画像 ブーツの画像・ハロウィンのイラスト
配色 橙色・黒・紫・白
文言
（必須）
- HALLOWEEN SALE
- 対象商品ポイント10倍
- 10.24 sat ・ 25 sun
- 詳しくはこちら
（任意）なし
（フォント）指定なし
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものになります。
- 「ポイント10倍」「SALE」「SALEの日付」という、優先順位の高い文言へ視線誘導するため、ジャンプ率をつけた。
- クモの巣のイラストは、背景的に使用するため不透明度を下げて馴染ませた。
- 靴の一部を帯の上に載せることで、レイアウトが単調にならないようにした。
- 反省点は、文字がかたいイメージとなり、ターゲット層（女性・10～20代）に響かない仕上がりになってしまったところ。
ヒカルさんが、この回のレッスンを画像で分かりやすく解説するツイートをしてくださっています✨
ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
①印象を強く（「HALLOWEEN SALE」の部分）
・イラスト素材のテキストを使うと印象が強くなって、ターゲットの10代により伝わる
イラストの吹き出し、また吹き出し線の手書き感や、文字の手書き感でポップさがぐっと増したと感じました。
吹き出しのもたらす効果について、ingectar-eさんの著書「あるあるデザイン」に解説があったので、引用させて頂きます。
「吹き出し親近感：マンガ表現で馴染み深い吹き出しの表現は、読むのが面倒くさくなりがちな文字を読みやすくさせたり、アイキャッチとして目立たせたりと、見る人との距離を縮めます」
面積の小さなバナーにおいて、視線を誘導したい文字に対して吹き出しを使うのは有効なんだなあと実感しました。
②画像の明るさ（ブーツの画像）
・ブーツの画像のシャドウを下げて露光を上げると印象が良くなる
今までのレッスンでも、「商品画像や、背景、人物の画像は、加工して見せたい印象にする」ということを教えて頂いていたのに、できていませんでした💦
意識して、まず取り組むようにしていきたいと思います。
また、今回私は、ブーツの画像が立体的に見えるように影をつけ、また「詳しくはこちら」の帯に、グラデーションをつけました。
立体感がある感じに見せるか、ペタッと平面的に見せるか、今回は判断をどちらにするかと考えると、今回はイラストのトーンに寄せて平面的にするとよいと教えていただきました。
バナーの中でトーンが揃って、よりポップな印象になったと感じました。
③あしらいの配置
・訴求文と商品画像へ散らして上手く配置
私のバナーでは、あしらいが「ポイント10倍」の一点に集中しすぎていた。ヒカルさんは、商品画像の側にコウモリやおばけのイラストを配置し、「ポイント10倍」という文言の側にカボチャ、日付の側に飴のイラストを配置した。
私の作成したバナーで、「対象商品」の文字の下に配置した円のオレンジの色が若干薄く、白文字の視認性がよくなかった。ヒカルさんは、「HALLOWEEN SALE」の文字の下に配置した吹き出しのオレンジ色を若干濃くして、白文字の視認性を保った。
私は、日付の部分でレイアウトが余ったと感じ、下にイラストを配置した。しかし、ヒカルさんは、日付の部分を改行し、文字を大きくすることでぴったりと収めた。
クモの巣のあしらいは、私のバナーの濃さではまだ視線がいってしまう。大きく、不透明度をもう少し下げることで悪目立ちしなくなる。「クモの巣かな、これは？」という程度に抑えるとよい。
若年層の女性がターゲットのバナーに挑戦させて頂いて、新たな表現方法を学ぶことができました✨
立体的に見せるか、平面的に見せるか、バナーのテイストによって統一することを学びました。平面的に見せるのであっても、ヒカルさんのバナーでは、コウモリが吹き出しに重なっていたり、「詳しくはこちら」の帯にクモの巣を背景的に配置し、その上にブーツがのることで、リズムが出ていました。
新たな学びを活かすとともに、商品画像の写真を加工する、文字の視認性を保つ背景色を選べているかを確認するなど、今まで教わっていることを着実に身につけるようにしていきたいと思います！
