1on1レッスン

サーキュレーターの販促バナー

サーキュレーターのアイキャッチ

先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第27回目を迎えました✨

今回の授業もすでに、Webデザイン1on1レッスンチャンネルバナーデザイン27にて公開されています✨

今回のバナーのお題の内容はこちらになります。

今回のバナーの目的 サーキュレーターの販促バナー

ターゲット 男性・女性 20代〜50代

雰囲気 シンプル

サイズ 300px x 250px

画像 サーキュレーターの写真

配色 白・黒・青(水色)

文言

(必須)

  • シンプルサーキュレーター
  • 空気循環で効率UP
  • 〜8畳・静音設計・風力4段階
  • CYCLONE(メーカー名)
  • 詳しくはこちら

(任意)なし

 

左の画像(スマホ画面では上)が、私が初めに作ったもので、右の画像(スマホ画面では下)がヒカルさんがブラッシュアップしてくださったものになります。

yuriが作成したバナーヒカルさんがブラッシュアップしたバナー

 

 

 

 

 

バナー作成時に意識したことと、反省点
  • 性能面の情報は、同じ大きさの長方形の上に文言をのせ、縦に並べた。
  • 色のトーンを合わせるため、機能面の情報の長方形の色は、リボンからとって、薄くして使った。
  • 「空気循環で冷房効率UP」という訴求文の印象が弱いため、もっと工夫すべきだった。
  • 情報の優先順位がつけられておらず、メリハリがない。

ヒカルさんが、この回のレッスンを紹介するツイートをしてくださっています✨

今回から、一つのツイートで、複数の画像に分けてブラッシュアップのポイントを説明をしてくださっていて、さらに、教えてくださることが頭にスッと入ってくる気がします。

プロフィールや伝え方などを、日々、向上されている姿を見て、見習いたいと身が引き締まります。

今回も、このツイートを参考にさせて頂き、教わったポイントをまとめました。

ブラッシュアップのポイント

①訴求文のメリハリ

  • 私は、フォントをNoto Sansを使用したが、 ヒカルさんは凸版文久見出しゴシックを使用した(UPの部分は、欧文フォントHelvetica Neueを使用)。
  • 文言の切り方がポイントなる。「空気循環で」は機能面についての文言で、「冷房効率UP」が訴求のポイントとなるため、その部分を大きくすると、見る人の目に留まる
  • 「空気循環で」の後ろの帯の水色は、爽やかな印象の水色。「冷房効率UP」の文字色は、それより少し落ち着いた水色にする。
  • 後ろに写真を配置するため、「冷房効率UP」を袋文字にする(境界線を白色で4pxつける)。

②リボンの配置

  • 私の作成したものは、リボンの配置が中途半端に浮いている状態。またリボンの傾きがきついため、先頭よりも、後ろに目がいってしまい、中の文言に目が留まりにくい
  • 家電量販店にある扇風機についているリボンっぽく置くと、上部のコピーの下線としても機能する。
  • リボンのグラデーションのかけ方は、斜めに配置するときと、横に配置するときは変わってくるため、調整する。また、リボンのグラデーションで、色が薄い部分は、白抜きの文字の視認性が落ちるため、文字に境界線を入れる。

③性能の表記

  • 私の作成したものは、少しサイズが大きく悪目立ちしている。
  • 性能のところを青色にすると、青ばっかりになってしまうのでサーキュレーターの黒色に合わせ、統一感を出す。しかし、濃い黒にすると、サーキュレーターより目立ってしまうため、少し薄くなるよう調整し、グラデーションをかける。(このような方向にグラデーションをかけるときは、角度を135°にする)
  • 長方形を、サーキュレーターの形状(土台が少し丸くなっている)に合わせて、角丸にする(4px)。

④背景

  • 私が作成したものは、背景が寂しい。サーキュレーター以外でも、エアコン、除湿機などの室内家電の広告は、部屋のイメージが背景にある場合が多い。
  • 背景を選ぶときは、床と、幅木(はばき、壁の最下部の床と接する部分に水平につける化粧材のこと)、壁、植物があるものを選ぶとよい感じになる。背景の写真は、不透明度を下げて、前の文言への視線誘導を妨げないようにする。
  • 今回は、背景の写真を、文言とのバランスを見て、水平に反転させて使用した。また、植物の部分が、訴求文にかかっていたため、その部分をグラデーションで消した(描画色を黒、背景色を白を選択、グラデーションツールで、「描画色から透明に」を選択しふわっと消す)。

訴求文を文字組するポイントについて学び、そして情報の優先順位を理解して、メリハリをつけ視線を誘導するには、全ての要素に気を配ることが大切なんだと学ぶことができました。

また今回、ヒカルさんの背景の写真の選ぶところを見させていただき、その早さに驚きました。必要になるもののポイントをしっかり理解されているんだなあと感じました。

私は、参考にするバナーを選ぶときや見ているとき、つい「なんとなく」集めて考察できていないため、考察するくせをつけて、バナーの作成に活かしていきたいと思います。