見出し画像

【デザインルール】 ぱっと見、いい感じのデザインを作れる人になるために。バナー編

こんにちは!unique box の shimaです!

バナーデザインを作成するときに考えなければいけないことが4つあるのでご紹介していきます!これさえ見ればロジックも加味した良い感じのバナーを作れるようになりますので最後までゆっくり見てってください〜

1. バナーの目的

バナーの目的は大きく下記の3種類に分けられます。

画像1

A.ブランディングバナーはブランドの世界観を優先し、商品を認知してもらうことを目的としています。C.販売目的バナーは目を引くことを優先し、商品が売れた。もしくは問い合わせが送信された。などのコンバージョンが目的です。B.キャンペーンバナーは、展示会やプレゼントキャンペーンのような「場所」や「期間」が限定されたバナーです。告知が目的です。

上記の通り、目的によって立たせる情報が変わり、見せるキャッチコピーや情報量も変わってきます。

2. デザインの優先順位を決める

目的がわかったので優先順位を引いていきましょう!今回は実際にバナーを作成しながら考えていきたいと思います!サイズ:1280×670px

まずは必要な情報(テキスト)をベタ打ちで入力します。

画像2

テキストに対して番号を振って優先順位をつけていきます。

画像3

今回作るバナーはデザイナーのコミュニティの場を告知する広告用バナーです。期間や場所が限定され、集客を目的としているので、Bのキャンペーンバナーに相当します。

よって、情報の優先順位としては、開催内容 > 期間 > 場所 > 補足内容の順番で構成していきます。場合によっては期間や場所が優先されます!

それから、テキストのや、大きさ太さなどを調整して優先順位を組み替えれば、あっとゆうまに出来上がりです!

画像5

3.ヘソをだす

もともと雑誌広告や、キービジュアル制作を仕事としてやっていたので常にヘソを意識しろと叩き込まれました。作成したバナーデザインを元に考えていきます。

ヘソとは、バナー内に表示される1番見せたい内容をビジュアル化したモノと、キャッチコピーを一括りにしたものです。よって、ヘソはバナー内の約70%以上の範囲を占め、残り30%の情報と強弱をつけることでより際立って情報を伝えることができます。

画像6

4. 誰に向けて作るのか

バナー広告ってすごいんですよ!バナーを表示させたい相手を絞り込むことができるんです!

画像5

よって、男性に絞り込んでバナー配信する場合は男性が好むデザインにしなければいけない。ということになります。

↑絞り込む年齢は基本的にペルソナで設定された人物の前後10歳ずつくらい。

今回作成したバナーのターゲットは10代から20代の人に参加していただきたいので若いトーンの配色で、イラストなどを用いて柔らかい印象がでるようにデザインしていきます。

画像9

5.デザインのバランスを見る

大事にして欲しいことは2つ。マージンを意識することと、情報を詰め込みすぎないこと。

スクリーンショット 2021-06-19 2.49.11

マージンが狭かったり、マージンのバランスが悪かったりすると、窮屈に見えてしまい素人っぽくなってしまいます。

最低でも外側のマージンは10%空けておくことで窮屈さを回避できます。始める時に10%内側にいれたボックスを作ってガイドを引いてから制作にとりかかりましょう。

スクリーンショット 2021-06-19 2.54.09

ラクしてバランスをとりたい場合は、縦に半分、もしくは横に半分に分けて、片方にビジュアル、片方にキャッチコピーを入れておけばおおよそ外さないデザインになります。

画像10

その上で、ヘソを意識したり、商品の大きさを決めたり、ロゴの大きさを決めていくとレイアウトは決まっていきます。

おわり〜!

「もくもく会」の告知です!

画像11

毎週土曜日、WEBデザイン勉強を目的に「もくもく会」を開催しています!

「もくもく会」とは、zoomを使用して、みんなでWEBサイト制作の勉強をしたり、情報を共有し合ったりする仲間作りのコミュニティです!今はコロナ感染拡大防止のためオンラインのみでしています。

学生さん、スキルアップしたい人、転職活動中の人、いろんな方に参加していただきたけると嬉しいです。

参加対象者は・WEBデザイナーになりたい人・WEBデザイナー・フロントエンドの方です。

下のLINEオープンチャットからご参加ください!
https://line.me/ti/g2/5KKfk2oZjnJy6w-KaIRS-g?utm_source=invitation&utm_medium=link_copy&utm_campaign=default

画像12

参加すごくお待ちしています!!

「shimaのノートから来た!」とコメントお願いします (bow)!

この記事が気に入ったらサポートをしてみませんか?