こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第53回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン53にて公開されています✨
今回のバナーのお題は、ドライブレコーダーです。
ドライブレコーダーに関して、私は知識がなかったので少し調べてみました。
「ドライブレコーダーは何らかのトラブルが起きた際にその状況を録画できるため、さまざまなことに役立ちます。」
普及率が思っていたより高かったです！ 解像度や画素数の大きさ、記録をするSDカードの容量の大きさなども大切だとわかりました。
お題の詳しい内容はこちらになります！
今回のバナーの目的 ドライブレコーダーの販促バナー
配信場所 GDN・YDNなど
ターゲット 男性・女性、30～60代
雰囲気 シンプル
サイズ 300px x 250px
画像 ドライブレコーダーの画像
配色 お任せ
文言
（必須）
- HDR Drive Recorder（商品名）
- Tokutenランキング人気No.1
- 簡単取付
- エンジン始動で自動録画
- 詳しくはこちら
（任意）なし
（フォント）なし
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものです。
- 「Tokutenランキング人気No.1」を、メダルのイラストを使って表現した。
- 目指す雰囲気は、「シンプル」なので、フォントを欧文は Times New Roman、和文は小塚明朝を選んだ。
- 背景のレイアウトを、斜めで区切ることでリズムを出した。
- 「Tokutenランキング人気No.1」の「No.1」のフォントの色を赤色にするなどして、視認性を上げた方がよかったかもしれない。
- 「自動録画」が、視線を誘導する力が弱いのであしらいを足した方がよかったかもしれない。
ヒカルさんが、この回のレッスンを画像で分かりやすく解説するツイートをしてくださっています✨
ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
①メダルの配置
・商品の背後に設置してメダルとしてのまとまりも整理すると認識がスムーズになる
私の作成したバナーでは、メダルのサイズが大きく、商品の上に被ってしまっていた。
このメダルは、「No.1」であることが伝わればよい。
「人気」のフォントの色を金色に、「Tokutenランキング」のフォントの色を白色にすることにより、メダルとしてまとまりが出た。
また、私は「人気No.1」の文字組みで、余白を大きく作ってしまったが、ヒカルさんは文字組みで余白を作らず、メダルとしてのまとまりが出た。
②商品画像のリズム
・画面側を大きく中央に配置して、レンズ側は少し小さくすると視線を誘導しやすい
バナーを見たとき、画面側を大きく手前に配置したほうが、すぐにドライブレコーダーと認識できる。
商品名の「HDR Drive Recorder」は、そのまま横に並べず、意味で切り取って「HDR」を紺色の帯の上において、余白をうまく埋めた。
③文字の配置
・「簡単取付」は商品に設置するように配置すると意味がつたわりやすい
私の作成したバナーでは、「簡単取付」が「エンジン始動で自動録画」の補足のように見える。配置を変えることで、２つが別の意味を持つことを伝えられる。
私は「簡単取付」の文字をそのまま横に並べたが、ヒカルさんは余白にあわせて、組み方を変えた。
今回のレッスンも、沢山の学びを頂きました✨
何の商品の販促バナーなのか伝わりやすくするため、画像の並びや大きさを調整すること。
商品画像の上にあしらいが被らないようにする、また、今回はメダルのあしらいの意味を考えて配色や、大きさを調整すること。
文言の持つ意味を考えて、伝わりやすい配置にすることなどなどです。
実際にヒカルさんのブラッシュアップする流れを見ていると、文字組みを変更して色々と試したり、文言の配置やレイアウトを変更して試したり、出来上がるまでの過程を見られることで大変学びになります。
教わったことを一つ一つ習得して、作成するときに挑戦する気持ちで取り組みます！
