こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第41回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン41にて公開されています✨
今回のアイキャッチを作成するとき、トミナガハルキさんの著書「#ズボラPhotoshop 知識いらずの絶品3分デザイン」の「#026 描きかけのキャンバスアート」を参考にさせて頂きました。
今回のバナーのお題はオイルヒーターで、その特徴が「部屋全体が、ポカポカと暖かくなる」というところから、ひだまりの中すやすや眠る猫さんをイメージしてみました。
お手本のトミナガさんの作品がすばらしく、自分の作ったものは完成度がまだまだだと感じます。観察眼を磨いたり、練習を重ねたりしていきたいと思います。
私は、このお題をきっかけにして、オイルヒーターはどんな特徴があるのか調べてみました。
オイルヒーターは、空気を汚さない、風が出ない、乾燥しにくい、音が出ない、お手入れが楽、火事の心配がないというメリットがあることを知りました。とても、魅力があります✨
今回のバナーの目的 オイルヒーターの販促バナー
配信場所 GDN・YDNなど
ターゲット 女性、20～40代
雰囲気 やさしい
サイズ 300px x 250px
画像 オイルヒーターの画像
配色 暖色系・白・焦げ茶
文言
（必須）
- シンプルオイルヒーター
- oil-heater（商品名）
- ひだまりの暖かさ
- 24H TIMER、10畳、ECO mode
- 購入はこちら
（任意）なし
（フォント）なし
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものになります。
- 背景となる床の画像を、Camera Rawフィルターで暖かみを出すように調整し、不透明度を下げ悪目立ちしないようにした。オイルヒーターを切り抜いて、背景の上に重ねた。
- 暖かさを表現するため、オイルヒーターとキャッチコピーに光彩外側の効果をかけた。
- 反省点は、文字サイズなどでメリハリがつけられず、視線誘導がスムーズにいっていないところ。
ヒカルさんが、この回のレッスンを画像を使って解説するツイートをしてくださっています✨
ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
①文字のコントラスト（「ひだまりの暖かさ」というキャッチコピーの部分）
・背景とのコントラストを高くして、文字の光彩を外すと目が留まる
私の作成したバナーでは、背景の色が濃ゆく、さらにキャッチコピーに光彩の効果がかかっている。そして、オイルヒーターの画像を大きく使用し、配色が目立つ白色のため、目が引っ張られて、キャッチコピーと綱引き状態になって目がおよいでしまう。
オイルヒーターの画像にのみ光彩の効果をかけることで、差別化ができて、キャッチコピーに目が留まるようになった。
背景の色を薄くすることにより、オイルヒーターの画像にかけた光彩の効果も、伝わりやすくなった。
②図形のリズム（「24H TIMER、10畳、ECO mode」という機能の部分）
・円形に配置するとリズムが変わって差別化できる
私の作成したバナーでは、商品画像も機能の部分も長方形のため、リズムが同じになっていた（床のラインも並行で、四角形の要素となっている）。
３つの円形を選択し、レイヤーメニューで「シェイプを結合」を選択し、グラデーションの効果をかけた。サイズ感は、私の作成したバナーの機能の部分よりも若干小さくなっていて、キャッチコピーの方に目が留まるようになった。
③商品画像の余白
・周囲に余白を設けるとスッキリ見やすくなる。
私の作成したバナーでは、商品の配置の仕方が少しパツパツした印象になっている。
周囲に余白を設けることで、暖かさを表現した光彩の効果も伝わりやすくなる。
余白を設けると床の面積が大きくなり、そのままの濃さだと目立つため、不透明度を30％にした。
oil-heater（商品名）の位置が、「24H TIMER、10畳、ECO mode」の下にあると目立つため、商品画像の下に配置した。
今回、レイアウトの中で要素のリズムを変えると、目が泳ぐことを防げること、余白を設けることで視線をうまく誘導できることなどを学びました✨
優先順位を考え、メリハリをつけることができておらず、全ての要素を強調しがちという自分のくせにも気付くことができました。
優先順位を理解して、ヒカルさんのように、細部まで丁寧に調整することを目指していきたいと思います✨