ヘッダー・サムネ・ロゴ作成のご相談はこちら ≫

クリックされやすいバナー・サムネイル作成のコツ!【デザインやサイズでクリック率が違う】

スポンサーリンク
デザイン
この記事は約5分で読めます。
おすん
おすん

時間や場所に縛られずに働いている
フリーランスデザイナーのおすん( @osunnotsubuyaki)です。

普段はフリーデザイナーとしてロゴデザインやサムネイル、ヘッダーなどのWeb画像をメインにデザインをしていてココナラ でも出品しています。

 

ココナラでデザインを見てみる

 

バナーは「旗」や「のぼり」といった意味があり、Web上では宣伝したい商品やサイトの看板になります。

バナー制作で大事なことは、いかにその商品やサイトの看板に目を止めてもらい誘導出来るかを目的とします。

人間の脳に送られる全情報の90%は目を通る視覚からと言われていて、文字よりも写真や画像に6万倍早く反応できるのです。

また、視覚からの情報は感情や本能を刺激しやすいと指摘されていることからも、バナーやサムネイルの重要性がいかに高いかがわかります。

 

おすん
おすん

ネットサーフィンをしてても目を引くようなバナーとかサムネイルでクリックしてる気がします。

 

スポンサーリンク

バナー・サムネイルデザインの基本

バナーやサムネイルを作る際の基本的なツール(ソフト)はAdobeのIllustratorPhotoshopです。

無料で作成できるCanvaなどの画像作成アプリもたくさんありますが、どうしても痒いところに手が届かないってことも多いので、綺麗なバナーを作りたいならIllustratorかPhotoshopをおすすめします。

 

Adobe Illustrator・Photoshopを学割価格(約半額)で購入する方法!

Adobe Illustrator・Photoshopを学割価格(約半額)で購入する方法!

 

文字数やデザイン、文字のサイズを適切に

文字のほうが認知するのが遅いけど文字もデザインすれば視認性も上がります。

こちらのサムネを例としますが、強調したい部分の文字サイズのみ大きくすることで視認性が変わってきます。

フォント(字体)は丸いと柔らかい印象→安心感を与え、角張ったような四角いフォントだと硬い印象→ビジネス系のイメージとして使い分けることもできます。

 

また、瞬時に読んで(見て理解して)もらえるよう文字数を少なくして、伝えたい内容や情報を絞りこむことで「読ませる」というよりも「見せる」というイメージで作成するとより良く情報を伝えることができます。

 

目立つ色にする

この記事のサムネ(アイキャッチ)になりますが、目立つ色として赤や黄色を使っていますが、色の組み合わせも意外と大事なんです。

背景色が濃い色なら文字は薄い色というように、できるだけ重なり合う色が真逆の色合いにすると目立つので参考にしてみてください。

 

見出しなどの装飾をする

 

 

余白をうまく使う

あまり文字やイラストなどで余白を埋めると、余裕のない見づらいサムネになってしまいます。

余白をうまく使うことでスタイリッシュに見えるので、空白部分を埋めたい気持ちはわかりますが、時には余白をうまく空けることも大事です。

 

スポンサーリンク

バナーのサイズによってクリック率も変わる

Googleが「高い成果が見込める」として紹介する広告サイズは以下の通り。

引用:https://www.benricho.org/size/04-google.html

 

Google Adsenceが推す効果的である掲載する広告のサイズは以下の通り。

 Google推奨の効果的な広告サイズ
  • 336×280px
  • 300×250px
  • 728×90px
  • 160×600px

広告サイズに関するガイド

 

世界第一位の検索エンジンであるGoogleが推奨していることからも分かる通り、広告サイズの推奨は上記のようになります。

これからバナーやサムネなどの作成をする時には、上記のサイズを参考にしてみるとクリック率が上がるかもしれないので試す価値アリです。

 

スポンサーリンク

バナー・サムネイルの作成方法と参考サイト

いざバナーを作成しようと思ってもどんなデザインで作ればいいのかなかなか難しいと思うので、参考になるサイトと作成方法をご紹介します。

参考サイト① retrobanner

retrobanner

 

参考サイト② バナーデザインアーカイブ

バナーデザインアーカイブ

 

バナー・サムネイルの作成方法(ツール)

自分で簡単にスゴいバナーが作りたいならバナープラス がおすすめです。

 

下記のバナーはこのバナープラスを使ってわずか数分で作ったバナーです。

 

バナー作成が初心者の方でも分かりやすいツールなので、直感で操作ができるのが特徴です。

▼ ツールを使えば同じバナーでも全然違います ▼

 

外注するのも費用がかかるし、かといって自分で作ってもクオリティの良いバナーが作れないって方は、上記の参考サイトを見本にしてバナープラスで作成すれば綺麗なバナーがすぐに作れます。

 

バナー・サムネイル作成のコツまとめ

バナー・サムネイル作成のコツ
  • バナーやサムネイルのデザインは基本を忠実に
  • 高い成果が見込める広告サイズにする
  • 参考サイトを見本にして簡単に作成できるバナープラスを使う

表現が壮大ですが、人間が急激に進化しない以上、視認性などのデザインの基本は昔からずっと一緒です。

デザインの基本を忠実に守って、効果が高い広告サイズでクリック率を上げるようにバナーやサムネイルの作成をするようにしましょう。

 

コメントはこちら ご質問・情報提供等ございましたらコメント欄に書き込んでください

トップへ戻る
タイトルとURLをコピーしました