Tres Innovation

2017年04月11日

WEBデザイナー直伝!思わずクリックしたくなるバナーの作り方

Pocket

 

 

 

こんにちは!WEBデザイナーの昔宮です!

 

昨日4月10日、フォントの日という記念日が正式に認定されたそうです!

フォントと言えばこれからの時期にフォントに必要なフォント?の記事にある

なごみ極細

 

 

さてさて、今回は社内からリクエストがあったので、バナーの作り方について

紹介しようと思います!ちなみにPhotoshopでの制作方法です!

 

皆様もリクエストがありましたら私のできる限りを絞り出してお答えします!!!

 

 

 

バナーとは?

 

 

WEB上で他のサイトや他のページに飛ばすためのリンク用画像。

基本的には、広告や宣伝用として使います!

サイトの上部やサイドによく出てくる、思わずクリックしてしまって

最初見ていたページから全然違うところに行かせるあいつです!(笑)

違うサイト・ページに行かせることが役割なので

思わず、でもクリックしてもらえるバナーを作れたら大成功です!!

 

何を訴えたいのか?誰に伝えたいのか?

伝えたいことがわからなくては意味がないのです!

そして伝えたい対象者にわかりやすくなければ作ったところで

不必要な物をWEB上に置いていることになります。

 

 

 

作業手順

 

 

入れたい要素を考える

 

 

バナーは限られたサイズに入れていくので、入れなくてはいけない要素の優先順位を考えます。

 

例)商品のSALEバナーの場合

1,商品名

2,割引率・SALEという言葉

3,期間

4,会場・オンラインならサイト名や会社名(ロゴ)

 

 

入れたい要素をすべて入れる

 

 

Photoshopを開きバナーサイズを作ります。

入れたい要素をとりあえず入れてみます。

最初はとりあえずで大丈夫です!

だんだんこの段階で何をどのように入れるといいかが分かるようになります。

 

 

入れた要素の順位を考える

 

 

入れた要素に優先順位をつけます。

目立たせたい、伝えたい要素は優先順位を高くしていきます。

それにプラスして自分がバナーを見る人の気持ちになって考えてみてください。

例で出している商品のSALEバナーだったら、、、?

 

1,商品名・割引率・SALE

商品と割引率が気になりませんか?

なんの商品がどのくらい安くなるのか?

そもそも商品のSALEバナーなのでこれ重要ですよね!(笑)

 

○○商品 最大80%OFF

 

1

 

 

2,期間

SALEがあるならいつからいつまで?

そのバナーを見て買いたい!と思っても期間が記載していなければ

まだいいや~だったりいつまでかわからないからやめておこうになりかねません。

期間を設けてないSALEがあるなら最高だけど(笑)

 

2017.3.15(Wed)~2017.3.22(Wed)

2017.3.15(Wed)10:00~2017.3.22(Wed)23:59

上記のようにネットのSALEだと時間の記載も欲しかったり。

 

2

 

 

3,会場・オンラインならサイト名や会社名(ロゴ)

どこで買えるの?

どこの商品なの?

○○会社・ロゴ

 

大手会社や知っている会社名だったら信用性がUP!

無名でも知名度UP!

迷ったりしたら「入れたい要素を考える」で考えた優先順位を使ってもいいかと思います。

 

例)商品のSALEバナーの場合

1,商品名

2,割引率・SALEという言葉

3,期間

4,会場・オンラインならサイト名や会社名(ロゴ)

 

4

 

 

 

背景や商品画像を決める

 

 

ビジュアルは大事な要素です!

文字を読まなくてもどんな商品なのかが分かりイメージがすぐに沸きます。

そのため、バナーのテイストに合っていないと折角のバナーが台無しに、、、。

背景にする場合は上に文字が入りやすい画像を選びましょう!

大々的に商品画像を出す場合は明るさ加工や切り抜き、トリミングなどをしてベストな状態で!

 

 

5

 

 

 

レイアウトを考える

 

 

配置を考えていきます!要素により配置方法を変えます。

絶対的にこの配置ではいけないという事はないのでいろいろ試してみましょう。

配置を変えるだけでバナーの印象はガラッと変わります!

 

 

バナーいっぱいいっぱい全面に使う

 

 

背景に画像を使うレイアウト。

画像自体のサイズ感や画角がぴったりでビジュアル的に推したい場合最適!

バナー全体に色が付き、ビジュアル的に一番見せやすい。

 

 

全て

 

 

 

要素ごとに分割する

 

 

画像・文言と分割して配置をする時に使うレイアウト。

分割方法は縦でも横でも斜めでも!

画像のサイズ感や画角が合わないときにも使えます。

すっきり文字を見せたいときに最適!

 

 

分割

 

 

 

バナーに対して余白をつくる

 

 

余白を利用してシンプルかつインパクトを与えられるレイアウト。

文字が少ないときや画像も見せたいときに最適!

要素を個々に引き立てられる。

 

 

余白

 

 

 

統一性を持たせて配置する

 

 

文字や画像が多い場合に使うレイアウト。

統一性をもたせることで要素が多くてもごちゃごちゃしない!

画像の配置に迷った時に最適!

 

 

並列

 

 

 

文字の見せ方を考える

 

 

例)商品のSALEバナーの場合

最大80%OFF

 

最大80

 

 

 

装飾をする

 

 

要素以外の素材を付け足してイメージをつけます!

バナーの雰囲気作りができるようになります。

もし素材がないようでしたら

 

 

出来る事なら教えたくない!!!Webディレクター、Webデザイナーが選ぶ画像素材サイト10選!!1

 

こちらを参考にどうぞ!!!

 

 

 

Tシャツ1

 

バナー1※実際には販売しておりません。

 

 

Tシャツ3

 

バナー2※実際には販売しておりません!

 

 

Tシャツ2

 

バナー3※実際には販売しておりません!!

 

 

 

まとめ

 

 

今回はバナーづくりでの初歩的なところを紹介いたしました。

要素が決まっている形での制作だと文字の見せ方や要素配置がバナーの決め手になるかと!

自分がどのようなテイストで制作したいかを考えて是非作ってみてください。

 

 

 

 

 

 

この記事を書いた人

I hope share!この記事をシェアする