バナーづくりのコツ!目立たせたいものを目立たせる5つのポイント

[39,260 views]

みなさんこんにちは!
ネットショップ制作会社のアラタナです。

本日は、バナー画像作成のコツ!についてお話しいたします。
まず初めに(分かっているという方が多いと思いますが、)
「バナー画像って何ですか?」
と聞かれることがしばしばありますので、ご説明をさせていただきます。

バナー画像とは、
・商品紹介などのための広告・宣伝画像
・サイトに掲載し、クリックすると特集ページや商品ページへ遷移するような画像
のことです。

バナー画像の具体例
バナー画像サンプル

ネットショップのバナー画像とは、実店舗でいうところの、お店のポップと考えてもらってよいと思います。

打ち出したいキャンペーン内容や、商品に応じて、
色々なバナー画像を作られると思いますが、そのバナー画像がちょっとした工夫で、
売上やクリック率に大きく関係してくるということをご存知でしょうか?

弊社でも、1つの広告の中で、
いくつかデザインやキャッチコピーが違うバナーをランダムに出して、
どれが一番効果が良かったか?ということをよく行っています。
ちょっとした違いでも、これで結果が大きく変わってくるのです。

いままでなんとなく作っていた・・・というアナタ!まだ遅くありません!
是非、以下ポイントを押さえて、競合店舗よりもクリックされるバナー画像を作成してみてください!
以下5つの目を惹くためのバナー画像のポイント!あなたは知っていましたか?

【ポイント1】ギザギザ・鋭角で目を惹く!

人の目は、ギザギザや、角が多いものへ目がいくという特性があります。
その特性を利用して、無意識に目を惹くギザギザをバナー画像の中に配置し、
商品紹介や特集ページへ誘導させましょう!
vol.4素材1

【ポイント2】明度の差を意識する!

色の組み合わせで、見やすい・見にくいというのは、法則があります。
昔、美術の授業でなんとなく教わったような…。
この明度の差を使い分けると、とても見やすく、目立つバナー画像を作成できるようになります。
暗い背景に、明るい文字や、明るい背景に暗い文字を配置すると、
見やすく、はっきりとしたバナー画像が出来上がります!
vol.4素材2

【ポイント3】大きさを変える、傾ける、色を変える!

注意を引くために、「あれ、なんかちょっと違和感を感じるぞ・・・」
と思わせてしまうのもテクニックです!
全体はまとまっているのに、一部分だけ、変化をもたらして目を惹く。
バナー画像上級者テクニックを取り入れてみましょう!
vol.4素材3

【ポイント4】Zの法則!

これは、、実は人は何かを見るとき、(文章を見る、物を見る…)
自然と、左上→右上→斜め左下→右下へと、さっと目を配るようになっています。
この配列で、文字や見せたいものを置いておくと自然に目に入ってくるようになっています。
バナー画像のレイアウトや、バナー画像を配置するサイト上の位置でも、このルールを使ってみてはいかがでしょうか?

(例)左上に目立たせたいポイントを持ってくる。●%OFF➡セールの名前➡開催期間➡最後右下は「どうしてほしいか」をもってくる・・・など
vol.4素材4

【ポイント5】「右矢印」で何をしてほしいかを促す!

最後は「右矢印」です。
右矢印は見ただけで、「進む」「次へ」など肯定的な意味を持つことが多いため、
右矢印を使うことで、次のステップ(クリック、商品購入など)を促すことができます。
バナー画像の中にも、バナー画像を見た後、どんなアクションを取ってほしいか
(クリックしてほしい、購入フローへ進んでほしい、○○○円以上購入してほしいなど)という事まで誘導してあげるようにしましょう!
vol.4素材5

以上いかがでしょうか?
是非、色々と試行錯誤しながら、一番効果の高い勝ちパターンを見つけてみてくださいね!

上記のバナー参考例は、以下弊社のデザイン制作アプリ、SketchPage(スケッチページ)で、デザイン歴0年のスタッフが作成しています。
WEBの知識が無くても作成でき、htmlも自動出力が可能です。
目を惹くための素材や、ノウハウが詰まったテンプレートも多数ご用意しておりますので、是非おためしくださいませ。

無料トライアルあり!4,000種類の豊富なデザイン素材で、ページやバナーが作り放題!
10,000ダウンロード突破!無料で試せるネットショップ向けデザインツール SketchPage -スケッチページ-

SketchPage

ライタープロフィール

SketchPage運営
10,000人以上に使われる、ネットショップ向けデザインツールのSketchPage(スケッチページ)!WEBの知識が無くても、バナー作成・ページ作成が簡単にできます。自動出力されるhtmlは、EC-CUBEにも対応!
30日無料のトライアルを是非お試しください。
そんな、スケッチページの運営チームからデザインノウハウを発信していきます!
http://sketchpage.jp/

このEC記事につけられたタグ