こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第40回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン40にて公開されています✨
今回のアイキャッチを作成するとき、トミナガハルキさんの著書「#ズボラPhotoshop 知識いらずの絶品3分デザイン」の「#036 対象モードで魔法円を描こう」を参考にさせて頂きました。
丁寧にツールの使い方や、数値を紹介してくださっているので、今まで知らなかった加工の仕方にも楽しく挑戦させて頂いています✨
今回のバナーのお題は、スマートリモコンです。
私は、このお題をきっかけにして、スマートリモコンの便利さを知りました。アイキャッチは、IoTやAIのおかげで、まるで魔法が使えるように、暮らしが便利になっていくのかも？という想像をして、魔法円と楽しげに踊る女性で表現してみました。
付け焼き刃的な知識ですが💦、少し紹介させて頂くと、スマートリコンは、エアコン、電気、家電（ルンバなど）、扇風機（スマートプラグ使用）などをスマホで操作したり（遠隔からも！）、音声アシスタントをできるスマートスピーカーと組み合わせたりして、暮らしを快適にするものです。
今回のバナーの目的 スマートリモコンの販促バナー
配信場所 GDN・YDNなど
ターゲット 男性・女性、20～50代
雰囲気 シンプル・スマート
サイズ 300px x 250px
画像 スマートリモコンの画像
配色 白・灰色・黒（モノトーン）
文言
（必須）
- スマートリモコン
- SMART reremo（商品名）
- おうちと繋がる
- ¥5,980
- 11月中旬 新モデル発売
- ご予約はこちら
（任意）なし
（フォント）ゴシック体
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものになります。
- 背景に配置する画像を選ぶときに、使っている場面を想定しやすいようエアコンや電気、テレビが写っているものを選んだ。
- スマートな雰囲気を出すため、キャッチコピー「おうちと繋がる」のところで、細身のウェイトを使用した。
- 「11月中旬 新モデル発売」という文言の視認性を保つため、背景の画像にマスクをかけ、グラデーションツールでふわっと消した。
- 反省点は、「11月中旬 新モデル発売」の部分で、もう少しワクワクした感じを出せればよかった。
ヒカルさんが、この回のレッスンを画像を使って解説するツイートをしてくださっています✨
ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
①商品のサイズ
・商品画像のサイズを大きくするとしっかり目に留まる
私の作成したバナーでは、商品のサイズが小さめであまり目に留まらない。
②コピーのサイズ（「11月中旬 新モデル発売」の部分）
・商品画像右下の机の余白を利用するとバランスよく収まってくれる
机がレイアウトを区切っており、帯の役割をもっているのでそれを活用する。
「おうちと繋がる」というキャッチコピーは下にあるよりも、上にある方が自然である。机の余白には、その他の文言を配置する。今回、「11月中旬 新モデル発売」の優先順位が高いと考え、そちらを目立たせた。（しかし、スマートリモコン自体や商品名がよく知られていないときは、そちらを目立たせた方がよい場合もあるかもしれない）
帯として使うには机の面積だけでは足りず、下に空白ができたので、シェイプ（四角形）を作ることで伸ばし、グラデーションをかけ色を馴染ませた（同じ白色に見えるが光の当たり方で若干色むらがあるため、自然に見えるようスポイトツールでその部分の色をとって馴染ませた）
文字の色を私はグレー（#565656）にしたが、ヒカルさんはそれより濃いめのグレー（#444444）にして、視認性をあげた。
金額は、私は DIN AlternateのBoldを使用したが、今回、値段の優先順位は高くないと想定し、ヒカルさんは URW DINのMediumを使用した。
③商品と背景画像
・家電を小さくすると商品が目立つ
私の作成したバナーでは、商品と家電が似たサイズで目立っていない。
商品画像の配色が白色で、形状的にも目立つものではない。背景の画像を小さくすることにより、商品がズームアップされているように見えて、目を留めてもらえる。
背景の画像を私は、不透明度を下げて使用したが、ヒカルさんはCamera Rawフィルターで画像を加工して使用した（露光をあげ、ハイライトのつまみを左に、シャドウのつまみを右に動かした）。若干黄色味ががった白から、爽やかな白になった。背景画像が切れた左側を、マスクをかけ、グラデーションツールでふわっと消して、キャッチコピーを配置する空間を作った。
④アクセントカラー
「11月中旬」の旗のオレンジ色が、アクセントカラーとして活きている。
「ご予約をこちら」の帯と、枠の配色もそれに合わせた。
今回、商品を目立たせ、視線を誘導する方法や、そのためのレイアウトの組み方を学ぶことができました✨
商品画像を大きく使い目を留めてもらう、背景画像は小さくして使い、商品画像がズームアップされている構図にする、机がレイアウトを区切りちょうど帯の役割を果たしているので活用するなど、一つ一つなるほど！とハッとするばかりでした。
一つ一つ、教えて頂いたことを身につけて、活用していけるよう頑張ります！
