先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第28回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン28にて公開されています✨
今回のバナーのお題の内容はこちらになります。
今回のバナーの目的 学習塾の夏期講習バナー
ターゲット 男性・女性 10～50代
雰囲気 ポップ・爽やか
サイズ 300px x 250px
画像 スマホを持つ画像・高校生の画像
配色 青（水色）・黄・白
文言
（必須）
- 2020 夏期講習
- 対象学年 高1・高2
- 期間 8/1 土 ～ 8/30 日
- 今年の夏はスマホで授業
- オンラインゼミ（塾の名称）
（任意）なし
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものになります。
- スマートフォンを持つ人の画像を、目が入らないようにトリミングすることで、視線をスマートフォンへ誘導した。
- 対象学年、期間の後ろの帯を、背景の色味と合わせ、強調したいその内容の方を白文字にした。
- スマートフォンを持つ人の画像が、大きいと感じたが、小さくすると下に空間があく、もしくは目の部分が見えるのでこの大きさのまま配置してしまった。
スマートフォンを持つ人の画像のトリミングの仕方は、Webデザイン1on1レッスンチャンネルのデザインショートレビュー＆ブラッシュアップのコーナーの第３回目を参考にさせていただきました。
復習して見ることで、前回気付けなかった新たな発見がありました。復習が私には必要だなぁと感じます。
（デザインショートレビュー＆ブラッシュアップのコーナーへのご応募は、次回まで、しばしの間締め切っておられます。）
このコーナーで、ヒカルさんによる４つのバナーのブラッシュアップが見ることができます✨
素敵だなぁと思う丁寧に作られたバナーが、さらに「伝わる」バナーになった部分の解説を詳しく聞けます。
会員様でない方も、レビューまで見ることができ、会員様はその後のブラッシュアップの解説まで見ることができます。初めの30日間は視聴無料ですので、ぜひご覧いただけると嬉しいです✨
ヒカルさんが、この回のレッスンを紹介するツイートをしてくださっています✨
画像付きで説明してくださっているので、とってもわかりやいです….!
今回も、このツイートを参考にさせて頂き、教わったポイントをまとめさせていただきました。
ヒカルさんがブラッシュアップ前に指摘してくださったこと
ブロックごとのまとまりは、出せている。パッと見たときの、ブロックごとの相関関係を変えると、よくなる。
ブラッシュアップのポイント
①画像のサイズ
訴求文のスペースを確保しつつ、画像が足りない部分はマスクでグラデーションにするとまとまる。
やり方：スマホを持つ学生の画像にレイヤーマスクを掛け、グラデーションツールを使ってふわっと見える感じにする。
初めは、スマホを持つ学生の画像をそのまま使用したが、のちに切り抜いた画像を使用した。そうすると、背景の色を画像のものから変更できることができた。
色は大きく印象を変えることになるため、今後も、画像はまず切り抜いて使うことを考えるとうまくいくと、アドバイスを頂く。
②レイアウトの切り分け
「オンラインゼミ」「2020 夏期講習」の下に、思い切って帯を敷いて、文字と背景色を反転させると、レイアウトが切り分けられる。
ここの文字色と、下のレイアウトの背景色を同じにすることで、統一感が出る。
③訴求文のメリハリ
中央に大きく配置して、配色も白文字ベースにアクセントを黄色にすると締まって見える。
「今年の夏は」のフォントと、「スマホで授業」のフォントを「A-OTF 見出ゴMB31」に統一する。また、漢字を大きく、ひらがなを小さくしてメリハリをつける。
④訴求文と詳細情報に、差をつける
詳細情報である、対象学年と、期間の部分のフォントサイズや帯の大きさが私の作成したバナーでは大きかったが、ヒカルさんは、帯の高さを狭く、フォントも小さくし、差を出した。
また、対象学年と、期間の背景の帯の長さを合わせて、統一感を出した。
今回のレッスンも、沢山学ばせていただきました..!
画像の処理の仕方で、エアコンクリーニングのキャンペーンバナーのときに、エアコンの画像を切り抜いて、ふわっと消して必要な部分を使うという方法を教えて頂いていたのに…!と、反省しました。
「オンラインゼミ・2020夏期講習」の部分でレイアウトの切り分けを行うのも、ハッとしました。私の作成したバナーでは、中央でレイアウトを分けているので中途半端で何か違うと思いながらも、そのまま配置してしまっていました。
優先順位の付け方も、理解して作成できるようにならなければと思います。（スマホを持つ学生さんを一番伝えたいわけではないと、気付けるようにならないと💦！）
復習しつつ、一歩一歩、前に進みたいと思います！
