こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第31回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン31にて公開されています✨
今回のバナーのお題の内容はこちらになります！
今回のバナーの目的 英会話学習アプリの友達紹介キャンペーンバナー
配信場所 アプリサービス内
ターゲット 男性・女性、20～30代
雰囲気 ポップ・カジュアル
サイズ 300px x 250px
画像 スマホを持つ男女の画像
配色 明るくポップ
文言
（必須）
- 友達紹介CAMPAIGN
- あなたとお友達に¥5,000プレゼント
- 期間 9/1 – 10/31
- SP Learning（サービス名）
- 詳しくはこちら
（任意）なし
（フォント）なし
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものになります。
英会話学習アプリに関するバナーということで、少し調べてみると、無料のものから有料のものまで、沢山の種類があることを知りました。
こちらのNHK WORLD News というサイトを知り、英語学習に活用していこうと思いました。無料ながら、身近な日本のニュースを英語で聞くことができ、聞き取り力のアップを狙えそうです✨
そして、今回の私の作ったバナーのレイアウトは、第8回目「不動産会社の新生活応援キャンペーンのバナー」のとき、ヒカルさんがブラッシュアップしてくださったものを参考にしました。
- レイアウトを白の長方形と色のある背景で分けることにより、単調な印象にならないようにした。
- 本を参考にしつつ、爽やかな青色を基調にして、ポップな配色にした。
- 画像では、皆スマホを持っていて、アプリの使用を連想させるが、小さく使いすぎたかもしれない。
- 3名の画像の右手にある、期間や「SP Learning（サービス名）」の配置の仕方がうまくできず、余白が目立つ気がする。
ヒカルさんが、この回のレッスンを紹介するツイートをしてくださっています。
画像つきでとってもわかりやすいです✨
ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
文字やあしらいで、塗りと線をずらす表現をするときのポイント
文字が小さいとずれている感じが出し辛い。文字のサイズを上げて、あしらいの印象も全体に当てると整う（「CAMPAIGN」の文字、バナーの枠にも同じ1pxの境界線を使った。）
背景の色が薄い方がずれている感じが出せる。
境界線を黒ではなく、背景色にする（ポップな雰囲気がより出ると感じました✨）
この表現は余白感があるデザインに合うかも。
「友達紹介」の左右のあしらいは、目立たせる必要がないため色は薄めにした。
シェイプを変形させたときに気をつけること
「あなたとお友達に」の吹き出しを、私は拡大や縮小した後、シェイプの大きさ、X軸、Y軸に、小数点があるのをそのままにしていました。
ヒカルさんから、小数点をとって整数にしないと、ラインがにじむことを教えていただきました。
これから、気をつけていきます！
この件について、ツールの設定など紹介してくれている記事があったので添付させていただきます。
「友達紹介CAMPAIGN」と、「あなたとお友達に¥5,000プレゼント」の文字の組み方
「友達紹介CAMPAIGN」は、文字がずれた表現をするため、文字のサイズを上げたので縦組みになった。
下に続く「あなたとお友達に¥5,000プレゼント」では、中央揃えが続かないように、左右に割ったレイアウトにした。（長方形になるので、でこぼこせず、余分な余白もできない）
（また、白い長方形の上に配置することで、「クーポン感」が出ました✨）
「¥5,000プレゼント」と吹き出しのピンクは、少し濃くして視認性を上げた。
切り抜いた三名の画像の使い方
人同士を重ねて距離を近づけると、まとまりが生まれる
今回の写真では、女性の身長が男性より低めだったんですが、私は何も考えず、元の写真ののまま使用しました（ヒカルさんは、三名の間隔だけではなく、身長の高低差も調節した）。
ヒカルさんのように、柔軟に考えて配置できるようになりたいと思います！
背景の違和感をなくすために、パターンオーバーレイを使う
背景に、パターンオーバーレイで格子柄を使用した。（描画モードは、スクリーンを選択）
今回のバナーは学習アプリなので、格子柄から方眼紙をイメージさせることができる。
「友達紹介」などの文字がずれた表現とも合う。
パターンオーバーレイが全体にかかってしまったとき、レイヤースタイルを開き、一番上の「レイヤー効果」で、「クリップされたレイヤーをまとめて描画」のチェックを外すとかけたい部分にだけ効果が適用される。
今回も、新たな学びを沢山いただきました。ツールの使い方も、一つ一つ丁寧に覚えていきたいと思います。
今回強く、自分で思考するくせをもっとつけなければと感じました。優先順位をもとしたメリハリの付け方、レイアウト、配色、参考にしたものをまねるだけではなく、その時にそれぞれの要素を調節していく力をつけられるように、日々、思考することを心掛けていきます！
