バナートレース６

Diary 2019/04/01

バナートレースと考察

元画像
トレース
サイズ：300px×250px
制作時間：1:30

安定の1時間半・・・

  1. フォント
    シンプルな角ゴシック。
    キャッチコピー→「見出ゴMB31」を使用。シンプルなフォントだけど、カを〇の中にいれて角度をつけることでポップな感じになっている。
    PASSO→「Lato」、MODA Series →「Pelago」を使用。たぶん本当はこの２つは同じフォントだと思うけど、良い細さがなかったので、似たフォントで代用・・・
    詳しくは～→「秀英角ゴシック金」
  2. 配色
    ベースカラー：薄いブルーグレーのグラデーション（#d8e3e5～#f0f8fa～#dfeaec）
    メイクカラー：車の深緑
    アクセントカラー：赤紫（#a91a90）←車の色の補色
  3. レイアウト
    会社ロゴ、キャッチコピー、画像、ブランド名とボタンの横４分割。
    写真を真ん中に、左上から右下に視線が流れる配置。
    余白や行間は、5px、10pxなどにある程度そろいつつ、1~3px微調整されている印象。かっちりそろえるより、見た目に自然なように少し調整する方が良いみたい。
  4. 使用画像
    商品写真を大きくメインに。見切れさせずに全体を見せている。
  5. 情報の優先度、伝え方
    車の外観＞キャッチコピー＞詳細ページへの誘導＞商品名・・・かな？
    キャッチコピーは一部に●べた塗に白抜きを使うことで、すごく目立つようになっている。個人的には車の写真よりまずそっちに目が行く・・・。「カワイイ＆カッコイイ」が一番伝えたいことなのかも。
    Z型の視線誘導が自然にされているデザインだと思った。
  6. 反省点
    MODA Seriesの文字色、PASSOと同じにしているけど、もっと薄い色だった・・・はっきりしすぎた。
    ボタンの矢印がなんかずんぐりむっくりしてる・・・。もっとスマートな作り方ないかな？

時間はかかったし、やっぱりフォントの違いは気になるけど、そこそこきれいにトレースできた気がする。
画像切り抜く系に慣れてきたら、時間のある日は、全画面写真系のバナーもまたやってみよう。
写真使わないバナーもやってみたいなあ。