こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第22回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン2２にて公開されています✨
今回のバナーのお題の内容はこちらになります。
今回のバナーの目的 ヨガの体験レッスンキャンペーンバナー
ターゲット 女性 20〜40代
雰囲気 カジュアル
サイズ 300px x 250px
画像 鳩のポーズをとる女性
配色 お任せ
文言
（必須）
・ヨガで身体と心を柔らかく
・手ぶらでOK
・初回限定体験レッスン500円
・YOGA CLASS （店舗名）
・今すぐチェック
（任意）なし
アイキャッチの素材には、ヨガのポーズ、ダウンドッグをしているように見えるキャットを使わせていただきました。しなやかで、にゃんとも美しいです✨
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものになります。
-
キャッチコピーに、貂明朝を使って落ち着いた雰囲気を出した
- 配色の、黄色以外の三色は、ingectar-eさんの著書、「3色だけでセンスのいい色」の中の「オトナジョシのヨガカラー」を参考にした
-
トリミングやレイアウトを色々試すうちに、女性の写真素材をこのような配置にしてみたが、女性の目線がいかせてないのはもったいないかもしれない
ヒカルさんが、この回のレッスンを紹介するツイートで、とてもわかりやすく説明してくださっています。このツイートを参考にさせて頂いて、今回教えていただいたポイントを後ほど、まとめました。
今回ヒカルさんから頂いた大切なアドバイスがあります。
本や、参考バナーをそのまま使ったり真似るのではなく、自分のデザインを、なぜそうしたのか言語化し分解できると、そこからさらに発見があり、新たに作っていくことができる。
今回、私はレイアウトを組む早い段階で、配色を本を参考にして決めてしまい、他の色を試してみませんでした。
結果、配色のクオリティと、レイアウトのクオリティがバラバラな印象になりました。
色で言うと、私がPinterestで集めたジムのヨガ関連のバナーは、オレンジや、ヴィヴィッドなピンクで、活動的なイメージを感じさせました。
それを、試して、比べてみるとまた新しい気付きがあったかもしれません。
またレイアウトで言うと、斜めに割るレイアウトは、スポーティさや、活動的な印象がある為、今回の私が選んだ配色の優しい印象とは合わないかもしれないと教えていただきました。
ヒカルさんから、この配色を選んだのであれば、このバナーに試してみるとよい要素を教えていただきました。
- レイアウトは、例えばなみなみの線で割ってみる
- レースなどのあしらいを使用する
- 初回限定のリボンを柔らかい雰囲気のものにする
- 「手ぶらでOK」のテキストを手書きのフォントを使う
この要素を取り入れて、自分で作ったバナーを調整してみました。
まだ、荒削りで、改善すべき点は多いと思うのですが、作ってみることで学びがあり、楽しく取り組むことができました！
そして最後に、今回のバナーで教えていただいた作成のポイントをまとめさせて頂きました✨
使うフォントの種類を、少なくすること
・私は、「手ぶらでOK」のOKのフォントで、Avenirを使用した。
しかし、一つのバナーで使うフォントの種類は、少ない方がよいため、500円の数字と同じフォントのDIN Alternateに変更した。
メリハリの付け方
・キャッチコピーの「ヨガで身体を柔らかく」の助詞を小さくしてメリハリをつけた。
・「今すぐチェック」の帯の色を、ヒカルさんは「初回限定」の帯の色より、淡くした。
理由は、「体験レッスン」のボックスの方が優先順位的には、高いため。また、意味合いが違うため、２つの要素の色に違いを出した。
レイアウトの工夫
・私は、女性の身体のラインに沿って斜めに区切った。しかし、直線で縦に区切る方がより女性の体勢が引き立つ。
・キャッチコピーとのバランスを見て、「体験レッスン」のボックスを縦長することで、両方に目が留まりやすくなった。また、縦長にすることで、「体験レッスン」というテキストのジャンプ率を高くすることができた。
今回も沢山の学びをいただいたので、自分の中で理解を深めて、教えていただいたことを実践していきたいと思います！
