【参考サイト付き】バナーデザインを美しくする10のステップ
※2022年1月に情報を更新しました
みなさんこんにちは！ LIGデザイナーのえびちゃんです。
バナーデザインを作成していると「デザインが上手くいかない」「バナーの参考を上手く探せない、ギャラリーサイトも古いのばかり」「最近のトレンドってどんな感じなんだろう？」……などなど、デザイン面の悩みってたくさん出てきますよね。
そして、デザイン面のお悩みだけでなく、「本当にクリックしたくなるバナーに仕上がっているのだろうか？」「そもそも効果のあるバナーの特徴はなんだろう」と、マーケティング目線での悩みも出てくると思います。
この記事では、バナーデザインの参考を探すあなたにおすすめの最新ギャラリーサイトと、バナーデザインをする際に気をつけるべきポイントやノウハウをご紹介しています。バナーデザインのお役に立てたら嬉しいです！
参考探しに！ バナーデザインギャラリーサイトまとめ
以前、先輩からのデザインフィードバックをまとめた記事にも書きましたが、デザインをする際に適切な参考を探すのはとても大事です。
私がふだんバナーを作る際に実際に参考にしているギャラリーサイトを、それぞれの特徴とともにご紹介していきます！
最新のバナーが見れるギャラリーサイト3選
BANNER LIBRARY
BANNER LIBRARYさんにはふだんからだいぶお世話になっております……。チョイスされているバナーがトレンドを押さえたものが多く、更新日もかなり最近です。特徴的なのがInstagramなどのように、紹介されているバナーそれぞれにハッシュタグがついていることです。
ファッション系のバナーの参考を探したいな、というときにこのハッシュタグで検索すれば、関連のものを一覧で見ることができ、大変便利です！
バナー広場
バナー広場さんも、更新日がかなり最近で、定期的に更新されているのでよく参考にさせていただいております！ 検索のカテゴリがかなり細かく分かれており、自分が探したい参考に簡単に辿り着くことができます。
今作成しているサイズと同じサイズの参考バナーを探したいな〜という場合も、ここまで細かくサイズ感が分けられているので探しやすいですし、
「キャンペーンバナー探したいな〜」、「写真がメインに使われてるバナー探したいな〜」という場合も、要素別に細かく分類されているので、とても探しやすいです。
Bannner.com
Banner.comさんも最新のバナーのラインナップになっており、よく見にいきます。
とくに感動したのがこちらの分類分けです。写真が使われてるバナーという分類だけでなく、「テキストのみ」や「切り抜き」、「顔切り抜き」など、より細かく分類が分かれているので、探したいバナーに簡単に辿り着くことができてとても便利です！
媒体別のバナー（広告）が見れるサイト3選
Facebook広告ライブラリ
Facebookページに載せるバナーや広告を担当する際に便利なのが、Facebook社が出しているFacebook広告ライブラリです。こちらでは、Instagramを含むFacebookアプリ・サービスに掲載されている、現在アクティブな広告を検索することができます。関連キーワードや、広告主の名前で検索することができます！
LIGで検索をすると、このように現在アクティブになっているLIGのFacebook上の広告が出てきます。バナーの見せ方や説明文とのバランスなど、Facebook用のバナーを作成する際に他社がどのようにしているのか参考にするのにおすすめです。
Facebook広告集めました。
Facebookの広告を集めたギャラリーサイトです。画像だけではなく、Facebook上での説明文とともに掲載されているので、Facebook広告を作る際に大変参考になるかと思います。ギャラリーサイトなので、カテゴリーで分かれており、検索もしやすくなっています。
インスタ広告集めました。
Instagram広告バナーを集めた、Instagramのアカウントです。Instagramのアカウントなのでカテゴリーごとの検索はできません。ただ、定期的に更新がされているのでふだんからフォローをしておいて、ストックを増やすのに便利です。それに加えて、Instagramで使われている広告バナーの傾向を掴むのにとても良いと感じました！
バナーに限らずいろんなデザインに触れたいときに見るサイト2選
Pinterestは全デザイナーさんが大変重宝されているのではと思っているのですが、あらためてご紹介します！ 私もバナーに限らず、アイキャッチやWebサイト制作、ロゴや名刺を作成する際など、デザインをする際は必ずPinterestから参考を探しにいきます。
バナーデザインギャラリーサイトで見つけた参考も、「Pinterest保存ボタン」というGoogleの拡張機能を使って、Pinterestのボードに保存して管理をしています。
Pinterestでバナーデザインを探す際に、大変便利な検索機能を紹介いたします！ 自分のアカウントのトップページにいき、検索フォームの右側のプルダウンを「ボード」に指定して、検索ワードを「banner」や「banner ads」で検索してみてください。
すると、Pinterestユーザーさんがバナー関連で作成したボードを一覧で見ることができ、ふだんからバナーのストックを貯めておくことができます！ とっても便利ですよね。
マイフェバ
マイフェバさんは、関西・北陸・せとうちエリアのおでかけ＆観光情報を発信している、メディアサイトです。記事についているサムネイルが、毎回とっても可愛くておしゃれで、同じようなテイストのバナーやアイキャッチを作成するときに参考にしております。とくに、作字をしたいと思ったときに見にいくことが多いです！
以上が、私がバナーを作成する際に参考にしているサイトのご紹介になります！
自分の目的にあったバナーデザインの参考を探すことができたでしょうか？ 次の章では、より効果のあるバナーを作成するための秘訣をご紹介したいと思います！
効果のあるバナーを作成する際に気をつけるべきポイントとは？
デザインでおしゃれで綺麗なバナーを作成するだけでなく、実際に効果が出るような、マーケティング目線でバナー作成時に気をつけるべきポイントをLIGのマーケターである、まこりーぬさんにお話を聞きました。ぜひ参考にしてみてください！
そもそもバナーの効果って何で測ればいいの？
バナーの効果測定には、何を指標にすれば良いのでしょうか？ クリック率（CTR）？ コンバージョン（CV）？ とはいえクリックをされないことにはコンバージョンには繋がらないので、大前提としてきちんと目にとまり、「クリックしたくなる」バナーを作ることがとても大切です。
ただし、闇雲にクリックさせることだけを考えるだけでCVには繋がりにくくなってしまい、意味がないバナーとなってしまいます。そこで、LIGで過去作成してきたバナーの中で、クリック率の高かったバナーの例とその特徴をご紹介するとともに、CVにつなげるコツも織り交ぜてご紹介していきたいと思います。
クリック率の高いバナーの特徴
キャッチコピーがわかりやすいバナー
一つ目の例はこちらのバナーです。「短納期、低価格新プラン誕生」というキャッチコピーで、端的にわかりやすくメリットを伝えているので、バナーを見て、瞬時に自分にとってどのようなメリットがあるのか具体的にわかります。
パッと見たときに「あ、役に立ちそうだな〜」と思ってもらえることが大切です。このような、視認性（目で見た時の確認のしやすさ）の高さが、バナーデザインには求められます。
キャッチコピーに共感が持てるバナー
こちらのバナーのように「コピーに共感できるもの」に関しても、クリック率が高い傾向にあります。「そうそう、こういうことに悩んでいるのよ……」とか、「電話番に日々追われて自分の業務に集中できないのよね……」という、バナーで紹介するサービスを使うターゲット層が悩んでいるであろうポイントを上手くコピーにすると、クリック率が上がる傾向にあります。
インパクトのあるバナー
そして次の特徴は、「目を引くビジュアルのバナー」です。目を引くバナーがどんなものかというと、たとえば……
このように「インパクトがあるバナー」は、クリック率が高い傾向にあります。写真のビジュアル的にも「上司を殴っている」というだいぶインパクトのある見た目です。そのビジュアルに合わせて、色味も黄色やオレンジでパキッとした配色で、いろいろなバナーがある中でもパッと目を引くデザインになっています。
そしてインパクトがある見た目であるだけに止まらず、コピーもインパクトがあり、伝えたい意味もぱっと見でわかりやすいものになっているのもポイントです。
既視感のあるバナー
インパクト重視だけでなく、「既視感のあるバナー」もクリック率が高い傾向にあります。
あれ……なんか見覚えありませんか……？
これも……どこかで見たことある気がする……。
オマージュ系など、どこかで見たことがあるようなビジュアルだと、パッと目をひき、クリックしてみたくなるバナーデザインになります。
クリック率は高いがCVに繋がらないバナーの特徴
クリックさせるための特徴はなんとな〜く掴めたかなあと思います。さて、一方でクリックされるものの、CVに繋がらないバナーの特徴ってどんなものでしょうか？
上記の例のように、インパクトを出して目に止まるように工夫することはとても大事です。ただし、クリックさせることだけにこだわりすぎて、パッと見で意味のわからないバナーや、商品・サービスにまったく関係のないバナーや画像にしてしまうと、クリックされるもののCVに繋がりにくく、意味のないバナーになってしまいます。
LIGの例をあげていきましょう。今回はFacebook広告を例に出します。
商品サービスにまったく関係のないバナー
LIGのWeb制作の紹介をしたFacebook広告です。いなみさんが慎吾ママの格好をしていたり、水玉の背景を敷いたり、慎吾ママの世界観がしっかり出ていますね。いなみさんかわいすぎる……。
この広告、クリック率がとてもよかったんですが、CVにはあまり繋がらなかったそうです。
「慎吾ママ！」というインパクトや、「いなみさんかわいい……」という理由からクリックはしたくなりますが、そもそも画像がサービス内容とまったく関係ないので、サービスに興味を持ってクリックしているわけではないということですね……。
インパクトを出すことだけに注力しすぎてしまうと、結果に繋がりにくいことがわかる例だと思います。
結論：キャッチコピーがわかりやすく、目を引くビジュアルのバナー最強
結論、最強のバナーの特徴はこちらとなりました。
- 案外真面目で、わかりやすいメリットや共感を伝えるキャッチコピー
- キャッチコピーに沿いつつも、パッと見で目に止まるようなインパクトがあるビジュアル
バナーデザインに役立つ記事まとめ
LIGではデザインに関するさまざまな知識をブログを通じて紹介しています。ここでは、バナー作成に役立つ記事を集めてみました。ぜひバナー作成の参考にしてみてください！
新米デザイナー必見！バナーデザインを効率的に美しくする10のステップ
あまりバナーデザインを作ったことがなく、バナーデザインの基礎を知りたい方必見の記事です！ デザインをする前に考えるべきことや、バナーをソフトで実際にデザインをする際にどのようなステップで作成すれば効率よく作成できるのかがわかる、とても良い記事です！ バイブルにしています。
今まで私が作ってきたバナーのコンセプトや裏話を勝手にまとめてみました。
今まで私が作ってきたバナーのコンセプトや裏話を勝手にまとめてみました。
合成ゴリゴリの、おもしろインパクトのあるバナーを作成したい場合にめちゃくちゃ参考になると思います。バナーのコンセプトの説明もあるので、このような発想でバナーを作れば良いのだなという参考になります。
【デザイン初心者向け】入社して初めて作成したアイキャッチ、先輩からのフィードバックをすべて公開します！
【デザイン初心者向け】入社して初めて作成したアイキャッチ、先輩からのフィードバックをすべて公開します！
私が書いたブログのアイキャッチ制作に関する記事です。ラフを考える上で大切にすべきことや、デザインの細かい部分の詰め方、コントラストの付け方など、バナー作成においても参考になるかと思います。
まとめ
参考探しや効果のあるバナーの特徴など、幅広〜く知識を得られましたでしょうか。バナーを作る際の一助になれれば幸いです！
デザインを独学で学んでいてバナーデザインがうまくいかない方や、もっと体系的にデザインを学びたい方には、スクールでの勉強もおすすめです！ 弊社が運営しているWebデザインスクール「デジタルハリウッドSTUDIO by LIG」では、キャリアや勉強方法でお悩みの方へ向けた無料個別説明会も開催しています。オンラインでも開催しておりますので、ぜひお気軽にご参加ください……！
また、こんなバナー作れそうもない……バナー作成誰かにして欲しい……と思っているそこのあなた！ LIGのデザイナーがご要望にあったバナーを作成いたしますよ！ ぜひ、お気軽にお問い合わせください……！
バナー制作のお問い合わせはこちら
ちなみに、最近LIGで働く現役Webデザイナーに普段どんなサイトを見ているか、どういう使い方をしているのかを聞いてみました。YouTubeに動画であがっているのでそちらもぜひ！
同じテーマの記事一覧
