かっこいいバナーデザインを作るコツ【見本例5選】

かっこいいバナーデザイン【見本例5選】

ビール会社の広告サイトのバナーデザイン

参照元：サッポロビール株式会社

天体観測と自社製品のイメージをかけ合わせた広告サイトのバナーデザイン。天の川を中心とした夜空を背景に、中央にロゴデザインと必要最小限の情報テキストを配置し、余白部分を生かしたシンプルでクールなデザインとなっています。

靴のクリアランスセールのバナーデザイン

参照元：adidas

画像を上手く利用し、余白と情報のレイアウトでクールにまとまったデザインです。靴の画像とスポーツ用品メーカーのロゴと必要最小限の情報だけで、靴のクリアランスセールとひと目みて誰にでもわかる広告です。

Webサイト制作会社のバナーデザイン

参照元：株式会社Gear8

左側にロゴマークとキャッチコピーをまとめ、右側にホッキョクグマとCGをあわせた画像を用い、「静」と「動」のメリハリが効いた、クールなデザインにまとまっています。見るものの興味を引く力のあるバナーデザインになっています、

タイヤメーカーのサイトデザイン

参照元：falken

これも余白とフォントを上手く活用してかっこいいデザインになっている一例。背景のダークな画像の中央にメリハリのある白文字のコピー、その上にタイヤ痕のようなデザインがのることで、タイヤメーカーの公式サイトであることがわかります。

自動車メーカーのバナーデザイン

参照元：トヨタ自動車株式会社

赤い地の色に赤い車体画像を載せて色調を赤に統一、挑戦的なコピーとクルマを撮影した画像で、パワフルな印象を見るものに与えるバナーとなっています。

かっこいいバナーデザイン作成の4つの基本

「かっこいい」にはさまざまなものがありますが、バナーや広告といった媒体における「格好良さ」の基本は「シンプル」であること、と言えるでしょう。

バナー広告のデザインの基本は「フォント」「余白」「レイアウト」「情報」によって構成されており、この構成要素を一定のルールに基づいて組み立てることで「シンプル」でかっこいい、インパクトのあるデザインを作ることが可能です。

高品質なバナーデザインの基本！クリック率を高める作成のコツは？

フォントの基本｜系統を揃える

「かっこいい」デザインに用いるフォントの基本は、「系統を揃える」ことです。シンプルでかっこいいデザインを狙うなら「明朝」「ゴシック」「セリフ」「サンセリフ」などで系統を統一するのが良いでしょう。

有名広告などで稀に「一部のフォントだけを崩す」というものがあります。一部のフォントを崩すことで文字を目立たせる効果が期待できますが、上手くやらないと不自然な印象を与えかねません。デザイン慣れしていない限りは、あくまで系統を揃えることが基本です。

余白の基本｜情報を詰め込みすぎない

バナーに掲載する情報を絞り込みましょう。せっかくバナーを作るのだから、必要な情報はすべて載せたいと考えがちですが、文字や画像の情報を大きさの限られたバナーに詰め込んでしまうと、ただ見づらいだけのものになってしまいます。

「シンプル」な印象をもたせるために、十分な余白をもたせましょう。文字情報は必要最小限にとどめ、余白と文字情報をバランス良く配置することで、シンプルでスタイリッシュな印象を見る人に与えることができます。十分な余白を設けることで、大切な情報を強調する効果もあります。

レイアウトの基本｜要素をまとめる

余白の基本とも関連する部分ですが、レイアウトの工夫も「かっこいい」デザインの基本です。レイアウトの基本は「要素ごとに揃える」ことです。フォントの「系統を揃える」とは別で、バナー上に掲載する情報をグルーピングし、それぞれのグループを分けて配置する、ということです。

バナーに掲載する情報はすべて重要度が同じ、というわけではありません。特に伝えたい重要な情報は、他の情報よりも目立つレイアウトにします。情報の重要度によってメリハリをつけることで、シンプルでわかりやすいデザインにまとめることができます。

情報の基本｜バナーに掲載する情報を絞り込む

小さなバナー広告に掲載できる情報量は限られており、その限られた情報に、必ず必要な情報が含まれなければなりません。レイアウトを意識しすぎて必要な情報を盛り込まなければ、広告としての本来の機能を果たしません。バナーに掲載する情報を吟味して、必要最小限に絞り込むことが重要です。

バナーに掲載する「必要最小限」の情報は、そのバナー広告の目的によって千差万別。前もって「必要最小限」の情報を吟味し、絞り込んでおくことが非常に重要です。バナーを作る目的を明確化するとよいでしょう。

かっこいいバナーを簡単に探せる参考サイト3選

かっこいいバナー見本を探したい場合は次の3つのサイトがおすすめです。

BANNER LIBRARY｜絞り込みが豊富

「BANNER LIBRARY」は絞り込み機能が豊富で、作りたいバナーを明確にイメージできているときに便利なサイトです。下記のような項目で絞り込みできます。

「横長」「縦長」など、バナーの形状でも絞り込める点が特徴的です。

バナー広場｜ランキング機能つきで流行がわかる

「バナー広場」は、「月間閲覧数ランキング」というページがありバナーデザインの流行を手軽に把握できるサイトです。サンプル数の多さも特徴で、2022年10月現在、14,000以上のバナーを参照できます。

FACEBOOK広告集めました。｜広告バナーをジャンル別に探せる

「FACEBOOK広告集めました。」はFacebook広告で配信されていたバナーに特化したサンプルサイトです。バナーと広告文とが一緒に表示されるため、デザイナーだけでなく広告担当者にもおすすめできます。

「インスタ広告集めました。」というInstagramアカウントではInstagramで配信されていた広告を探せますので、あわせて参考にしてください。

まとめ

今回は、かっこいいバナーデザインの事例を解説しました。

基本やセオリーを守りながら、他にはない「かっこいいバナー」を作るのはなかなか大変です。自作に自信がない場合、あるいはよりクオリティの高い「かっこいいバナー」を作りたいとお考えの場合は、専門の業者に制作を依頼してみてはいかがでしょうか。

『比較ビズ』にはバナーデザインの専門業者が数多く登録しており、複数の業者に同時に見積もりや相談を行うこともできます。『比較ビズ』で、ハイクオリティのバナー制作ができる業者を探してみてはいかがでしょうか？

自社にぴったりのホームページ制作会社を探すには？

ホームページ制作会社選びでお困りなら「比較ビズ」が解決します！

• 費用相場がわからず不安...
• 発注先選びを失敗したくない…
• 忙しくて探す時間がない...

今年で運営17年目の「比較ビズ」は、仕事を”依頼したい人”と”請けたい人”を繋ぐマッチングサービスです。これまでサイトリニューアル、ECサイト、SEO対策の依頼など多くのご相談を頂き1万社以上もの企業様の発注をサポートしてまいりました。

まずは下記のボタンより、お気軽にご相談ください。

仲条高幸

監修者

Tech School for Change Makers

ドイツのベルリン在住。『なかじょのプログラミング｜メタバース入門』という登録者数2250人以上のYouTubeチャンネルを運営。Udemy講師としてプログラミングやメタバースに関する講座を出しており、受講生4000人以上。LINE API Expert としても月に一度活動中。TSfCM （Tech School for Change Makers）という社会変革をテクノロジーで起こすスクールも運営。

この監修者の記事一覧