バナートレース#03

↓見本

↓トレース

このバナーを選んだ理由

・文字情報がうまく整理されているバナーだと思ったため。

バナーの概要・目的

「おうち割」の概要を伝えるとともに、お得さをアピールして、「今すぐシミュレーションする」ボタンをクリック→加入につなげる。

使用フォント

・ゴシックMB101
・FF DIN

なお、前者は『絶対フォント感を身につける。』という本に付属の『フォント見本帳』で、後者はMy Fontというサイトから特定した。

使用ソフト

Illustrator

気付いたこと

【情報の整理について】
・一番アピールしたい要素である「2,300」円と「おトク」の文字にまず目が行くような設計。
具体的には、他の文字と色を変えて濃いピンクに、さらに「2,300」はジャンプ率を高くし、「おトク」はギザギザの円の中に入れアイコン化。

・「スマホ」「ネット」「でんき」という文字を四角で囲み、キーワードを強調。

・「スマホ、ネット、でんきをまとめる」という内容を、文字情報だけでなくイラストも添えることで、誰でも一目でぱっと理解できるデザインに。
なお、イラスト部分はICOOON MONOから見本と似たアイコン素材をダウンロードして使用した。

・全体を家の形をした枠で囲み、枠の上部に「おうち割」という題字を配置することで、「おうち割とは・・・（以下、枠内の要素）」という情報のまとめ方ができている。

・「今すぐシミュレーションする→」を黒ベタの上に置くことで、有彩色数を増やさずクリックボタンを目立たせることができている。

【フォントについて】
・「ゴシックMB101」は、1970年代から写植の見出しゴシックとして親しまれていた書体。
一文字一文字が力強く、クセも少ないので、タイトルやコピーにもよく使われているイメージ。
親しみやすいけれど信頼できる感じの雰囲気なので、今回のバナーにもマッチしていると思った。

・「DIN」はとても可読性・視認性に優れているので、今回のバナーの値段表記に使われているのも納得。
「DIN」はいろいろなフォントメーカーから出ており、見本は「DIN Next」か「FF DIN」どちらかで迷ったが、始筆と収筆部分が水平にカットされていることから「FF DIN」ではないかと推測。
「FF DIN」は「DIN Next」よりもすっきりと読みやすい気がするので、小さいバナーにもぴったりだと思った。
なお、「2,300」のコンマ（,）の水平比率は80％（もしくはコンデンス体を使用している？）。たしかに横幅100％のままだとコンマが間延びして悪目立ちした印象になるなと思った。

さいごに

最近、趣味でいくつかデザインをしてみたのだが、情報に優先順位をつけて上手く配置するのが特に難しいなあと感じた。
今後しばらくは、今回のような情報量が多めのバナーを中心にトレースして、情報を分かりやすく伝えるためのコツをつかんでいきたい。