バナーデザインをおしゃれに仕上げるコツ！【見本例6選】

バナーとは？

バナーの意味

本来は「横断幕」「のぼり」などの意味を持つバナー（Banner）ですが、インターネットにおけるバナーは、「誘導したいWebページへのリンク付き画像」広告を意味します。

バナーの役割

実店舗に立てられる宣伝のぼりが、通行人の注意を惹いて来店を促す目的・役割を持つのと同様、目にしたユーザーの注意を惹いて、インターネットのオフィス・店舗であるコンバージョンページに誘導するのがバナーの目的・役割だといえるでしょう。

おしゃれなバナーは効果的なのか？

冒頭でも触れたように、バナーが本来の目的・役割を果たすには、目にしたユーザーの注意を惹く「デザイン」が重要です。しかし、バナーデザインには「正解」がないのも事実であり、ユーザーの注意を惹くだけでも不充分です。

バナーを一目見て「自分のことだ」とユーザーに感じてもらえるデザインが必要なのです。その意味でいえば、バナー最大の目的・役割である「クリック率」が高いデザインなら、それが「正解」だといえるかもしれません。

掲載先が自社ホームページだけとは限らないバナーでは、メディアに応じてバナーデザインを変更する場合もあります。

デザインがおしゃれなバナーは効果も高い？

上述したように、バナーデザインには正解がありませんが、効果の高い＝クリック率の高いバナーデザインには原則・基本が存在します。それが「わかりやすく」「シンプルに」です。それでは、ユーザーが一目見て「自分のことだ」と感じるバナーデザインとは、どのようなものなのでしょうか？

効果の高いバナーデザインの基本「わかりやすさ」「シンプルに」、これがなにかに通じるものがあるとは感じませんか？そう、おしゃれの要素である「垢抜けている」と、ほぼ同じ意味だといっていいでしょう。垢抜けているの要素である「洗練されている」を「シンプルに」、「野暮なところがない」を「わかりやすさ」に置き換えて考えられるのです。

また、おしゃれのもうひとつの要素である「機転が利く」は、メディアに応じてバナーデザインを最適化させることにも通じるでしょう。つまり「効果の高いバナー」が「おしゃれなバナー」であるとは言い切れませんが、「おしゃれなバナー」は「効果の高いバナー」とほぼイコールだといっていいかもしれません。

バナー制作の基本・手順を押さえよう

おしゃれなバナーが、本来の「思わずクリックしてしまう」役割を果たすのであれば、すぐにでも制作したいと考えるかもしれません。しかし、バナーデザインをおしゃれに仕上げるためには、まず「バナー制作の基本・手順」を知っておく必要があるでしょう。具体的な手順は以下の通りです。

• バナーの目的（コンバージョンの内容）・掲載メディアを決定する
• バナーのターゲットを明確にする
• 写真や画像素材・キャッチコピーを集める
• 手書きでラフデザインを制作する
• 配色を決めてバナーを仕上げる

ひとつ重要なポイントを挙げておくなら、「わかりやすく」「シンプルな」効果の高いバナーを制作するには、「コンバージョンの目的＝ユーザーに伝えたいこと」を、できる限りひとつに絞ることです。この点を押さえておくだけでも、実際のバナーデザイン自体をシンプルかつスムースに進められます。

バナーのサイズを含めた基本、制作の手順の詳細を知りたい方は、こちらの記事も参考にしてください。


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

バナーデザインをおしゃれに仕上げるコツ

おしゃれ・お洒落という言葉は、本来の意味から考えても「主観的」な判断をもとにした感想だといえます。しかし、様々なユーザーが見るバナーデザインのはだれが見てもおしゃれに感じるポイントを重点的に工夫することが重要です。それでは、それを叶える4つのコツをご紹介します。

• 写真・画像のクオリティを重視する
• フォントの選定・使い方
• 伝わるレイアウト
• 配色に気を配る

写真・画像のクオリティを重視する

リンク付き画像であるバナーをデザインする際は、写真・イラストなどの画像素材を用意するのが一般的ですが、おしゃれ感を強調したいのであれば、バナーに使う写真・画像のクオリティに徹底的にこだわるべきです。

画素数の足りない荒い写真・画像を避けるのは当然ですが、それ単体で見ても惹き込まれる要素を持つ写真・画像を用意するのが望ましいでしょう。

スマートフォンのカメラが劇的に進化しているのも事実ですが、最終的に写真の質を決定するのは「レンズ」「構図」「光」です。フォトレタッチソフトで修正することを前提にしているようでは、クオリティを担保できません。腕に自信が持てないなら、プロカメラマンなどの起用も視野に入れた方がいいかもしれません。

フォントの選定・使い方

バナーの目的にマッチしたフォントの使い方ができれば、それだけでおしゃれ感を演出したデザインを実現できます。

フォントデザイン

たとえば、一般的に使われるフォントには「明朝体」「ゴシック体」がありますが、それぞれの与えるイメージは想像以上に異なり、文字の太さを変えるだけでも与える印象は変わります。メインのビジュアルイメージと相反するフォントを選ぶと、ちぐはぐで野暮ったい印象を与えてしまいかねません。

フォントサイズ

もちろん、フォントのサイズも重要です。キャッチコピー・サブコピー・補足説明と、どんなに多くてもフォントサイズは3つまでに抑えておくのが無難でしょう。字詰めを含む文字間隔を調整するのも忘れてはなりません。

伝わるレイアウト

高品質な写真・画像素材、ユーザーに刺さるキャッチコピーが用意できていても、それが雑然と並べられているだけでは「なにが伝えたいのか」焦点がぼやけてしまいます。それぞれの素材を活かしつつ、「わかりやすく」「シンプルに」伝えたいことが伝わるよう、整理整頓されたレイアウトを心がける必要があるでしょう。

ここで重要になってくるのが「伝えたいことをできる限りひとつに絞る」ことです。伝えたいことが絞られていれば、必然的に使いべき素材、アピールすべきポイントがハッキリしてくるはずです。見せたいものがキチンと見れるように、スペースを活かしてレイアウトするのがおしゃれ感を出すポイントです。

配色に気を配る

デッサンはうまく描けたのに、色を付けたらダメだったという経験を持つ方もいるのではないでしょうか？それだけ、おしゃれ感を演出するのに重要なのが配色です。

配色はデザイナーのセンスが活かされるポイントでもありますが、色の基本（色相・明度・彩度）を理解しておく必要もあります。見本になるバナーデザインを参考にしながら、試行錯誤していくのが重要です。

バナー作成時に気をつけるべきこと5選

バナー作成時に注意すべき点がいくつかあります。 ここでは、5つの注意点を紹介していきます。

• たくさんの色を使わない
• 使用する写真を商品・ブランドイメージと合わせる
• 写真や画像の画質が悪いものは使用しない
• 内容を詰めすぎない
• 派手な写真を使用しない

たくさんの色を使わない

デザイン初心者の方だと、つい色を使いすぎてしまうことがあります。 バナーを制作するにあたり、配色はバナーやサイトなどの印象を大きく左右します。

複数の色を使用するよりも、メインとなる色を1色決め、その捕色をしていくとキレイなバナーを制作することが可能です。

読者にいい印象を与えるためにも、色の使いすぎには注意しましょう。

使用する写真を商品・ブランドイメージと合わせる

ホームページやネットショップなどの作成において、デザインはもちろんのこと、どの写真を使用するかで企業やブランドのイメージは大きく変わってきます。

使用する写真とイメージのギャップが大きいと、商品やサービスの内容を伝えることは難しいです。写真とのイメージがマッチすれば、コンテンツの内容が読者に刺さるものになります。

写真や画像を使用する際は、自社のイメージと合っているかしっかり確認するようにしましょう。

写真や画像の画質が悪いものは使用しない

ホームページなど全体のデザインが素晴らしい仕上がりでも、使用するバナーの写真の画質が荒いと台無しになってしまいます。

SNSやWebサイト上にある画像は画質がよくないものが多いです。それらの画質が悪いものを使用していると、自社のブランドによくないイメージがついてしまいます。

バナーをクリックしてもらうためにも、画像はよりキレイなものを利用するようにしましょう。

内容を詰めすぎない

情報の詰め込みすぎには注意が必要です。バナーに使用する画像は、サイズが小さいのでたくさんの情報を詰め込むのは危険です。

「情報を一度で一気に伝えたい」という気持ちはあると思いますが、情報が多いと読者が疲れてサイトから離れてしまう可能性があります。

そのため、バナーに含める情報はシンプルにまとめるといいです。

派手な写真を使用しない

「印象を残すためにも派手な写真を使いたい」などの思いから派手な写真を使用するのは注意が必要です。

写真のカラーが強すぎたりすると、「文字が読みにくい」「文字が消える」といったことも発生します。

バナーをクリックしてもらうためにも、カラーバランスを考えて使用する写真を選ぶようにしましょう。

商業デザインとしてのバナーデザイン

バナーデザインに限らず、デザインにはセンスが求められると考えている方が多いのではないでしょうか？もちろん、それはある意味では正解だともいえますが、広い意味でのデザイン、特にバナーを含む商業デザインは「目的を達成する（コンバージョン）ための設計」だといえます。

つまり、設計を念頭に置いて作業すれば、デザイナーでなくてもバナーという商業デザインは成り立ちます。これが自己表現をメインにする「アート」とデザインの違いです。

しかし、商業デザインという「設計」を高品質に仕上げるためには、知識と経験が必要なのも事実です。最終的に同じバナーデザインというゴールに辿り着くとしても、知識・経験の豊富なデザイナーであれば最短距離で到達できるといえるでしょう。

バナーデザインを外注するメリットは？

そして、知識・経験豊富なデザイナーを起用できることこそが、バナーデザインを外注する最大のメリットだといえます。PhotoshopやIllustratorなどのグラフィックソフトが使えれば、バナー制作はだれにでも可能ですが、それこそ「効果の高いバナー」を制作できるようになるには、知識を得て経験を積み重ねなければなりません。

社内にデザインチームがあるなら話は別ですが、高品質なバナー制作に没頭していてはコア業務に影響が出てしまいます。

意外に安いバナー制作の費用相場

バナー制作の費用相場が意外なほど安いのも、バナーデザインを外注するメリットのひとつだといえるでしょう。一般的な静止画タイプのバナーであれば5,000円程度から、内製が困難になりがちなGIFアニメーションタイプのバナーでも1万円程度から、CSSを活用した切り替わりタイプのバナーでも2〜3万円程度から依頼できます。正社員の人件費が時給換算で2,000円以上であると想定すれば、外注はコスト面からも現実的な選択肢となり得ます。

こちらの記事では、実績豊富な制作会社を紹介していますので参考にしてみて下さい。


バナー制作の費用相場は？料金を抑えるポイント・おすすめの制作会社19選も紹介！

最新のバナーが見れるギャラリーサイト

おすすめの最新のバナーが見れるサイトを紹介していきます。

詳しく解説していきます。

• BANNER LIBRARY
• バナー広場

BANNER LIBRARY

BANNER LIBRARYは、洗練されたバナーを多く集めたバナーギャラリーサイトです。

バナーを検索する際にも、カテゴリー、テイスト、バナー形状・カラー・メディアなど 利用したいイメージごとにバナーを検索することが可能となっています。

また、バナーにはハッシュタグがついているので、ハッシュタグでバナーを検索することで関連のものを一覧で見ることも可能です。

おすすめタグやお気に入り追加などの機能もあるので、とてもシンプルで見やすいギャラリーサイトとなっています。

BANNER LIBRARY

バナー広場

バナー広場は、12000種類以上ものバナーをコレクションしてるサイトです。

検索カテゴリもかなり細かく、サイズ、業種、デザイン、タイプなどで絞り込み検索ができます。

また、気になるバナーはお気に入り登録することができるので、しっかり調べたい方にオススメのサイトです。

バナー広場

媒体別のバナーが見れるサイト

次に媒体別で見れるサイトを紹介していきます。

FacebookやInstagramを使ってバナー広告を考えている人もいるかと思いますので、参考にしてみてください。

• Facebook広告ライブラリ
• Facebook広告集めました
• インスタ広告集めました

Facebook広告ライブラリ

Facebook広告ライブラリは、Facebook社で公開している広告ライブラリページです。

FacebookアプリやInstagramで掲載されている広告を検索することができます。

また、検索も国、広告カテゴリ、キーワードを入力して検索することが可能となっています。

Facebook広告ライブラリ

Facebook広告集めました

Facebook広告集めましたは、Facebookの広告を集めたギャラリーサイトです。

画像とFacebook上での説明文と一緒に掲載されているので、Facebook広告を作りたい方にはとても参考になると思います。

カテゴリー別で検索もできるので、検索もとてもしやすいです。

Facebook広告集めました

インスタ広告集めました

インスタ広告集めましたは、Instagram広告のバナーを集めたアカウントです。

Instagramのアカウントとなっているため、カテゴリーごとの検索ができません。 しかし、定期的に広告が投稿されているのでフォローをしておくと損はないはずです。

また、Instagramで使われている広告バナーの特徴や流行などを知ることもできるので、この機会にフォローしておきましょう。

おしゃれなバナーデザイン見本例6選

最後に、おしゃれ感のあるバナーを制作したい方の参考になるよう、見本となるバナーをいくつか紹介しておきましょう。お目当てのジャンルをぜひ参考にしてください。

• コンテンツマーケティングのバナーデザイン
• スマホ料金プランのバナーデザイン
• 父の日キャンペーンのバナーデザイン
• デパートの「母の日」「父の日」ギフトラッピングのバナーデザイン
• 通販サイト売上ランキングのバナーデザイン
• レディースファッション通販サイトのバナーデザイン

コンテンツマーケティングのバナーデザイン

『背景を色で塗りつぶす』『大きなフォントを配置する』の組み合わせで、コンテンツマーケティングの「企画」→「生産」→「拡散」→「検証」という流れをひと目見て理解できる、シンプルで洒落たデザインとなっています。

スマホ料金プランのバナーデザイン

『余白を使う』デザインの一例です。上の画像で目を引き、下の余白でわかりやすく文章でサービス内容を説明、画像背景と、特大フォントのロゴが同じ模様デザインとなっていて、全体の統一感もあります。

父の日キャンペーンのバナーデザイン

横長のバナーの背景を温かみのある暖色系の二色でわけ、左半分に柔らかみのあるフォントで目を引く「FATHERS DAY」のコピーを配置、右半分には大きな円形の白抜きを有効に使い、キャンペーン内容がひと目でわかるデザイン、全体的に「お店の看板」風にまとまっています。

デパートの「母の日」「父の日」ギフトラッピングのバナーデザイン

上述の「父の日キャンペーン」とは別のアプローチで「母の日」と「父の日」のギフトラッピング企画を上手くまとめ上げた広告になっています。上下を大きく色分けし、イラストを組み込んだ特大フォントで「母の日」と「父の日」を明確化、上下のデザインに共通性をもたせることでわかりやすさを演出しています。

通販サイト売上ランキングのバナーデザイン

通販サイトの売上ランキングのバナー広告を、赤系の背景と金色のフォントでゴージャスに演出しています。背景には天井からのスポットライトの光をイメージさせるデザインが施されており、これがランキングのバナー広告であると一見してわかりやすいデザインにまとめています。

レディースファッション通販サイトのバナーデザイン

フォントの配置の工夫と、複数のフォントを使い分けることで、シンプルかつイメージが伝わるバナー広告となっています。枠部分を工夫することで、昔の欧米の新聞に見られた広告記事のような雰囲気を醸し出し、おしゃれ感を演出しています。

まとめ

自社でバナー制作するメリットは、必要なときにすぐに作業に取りかかれる、バナーを内製することで社内に制作ノウハウが蓄積できる（可能性がある）などが挙げられます。しかし、タイムリーなバナー制作は、コア業務に割り振るべきリソースを消費することでもあり、デザイン業務が属人化すれば、担当者が退社したときに制作ノウハウが社内に残らない可能性もあります。

もちろん、本職のデザイナーに匹敵するおしゃれなバナーを自社制作するのも簡単ではないでしょう。素早く「コンバージョン」という目的を達成したいなら、制作会社の協力を仰ぐのが早道かもしれません。

そんなとき『比較ビズ』なら、必要事項を入力する2分程度の手間があれば、優良なホームページ制作会社をスピーディーに探せます。複数のホームページ制作会社に無料で相談できるのもポイントです。是非、利用してみてください。


かわいいバナーデザインの作り方｜見本例6選と参考サイトも紹介

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

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

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

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

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

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

ホームページ制作会社へ一括見積りをする
監修者の一言

おしゃれなバナーは、ウェブサイトやSNSページなどに訪問したユーザーに対して、そのサイトやページの特徴を印象付けたり、内容を端的に伝えるためにとても重要です。自分自身が「おしゃれ」と思っていても、それは個人の感想になってしまうので、「なぜ、そうデザインするのか」という哲学を持ちましょう。

クライアントがいる場合はしっかりとクライアントと話し合い、自社のサービスである場合はしっかり内容やブランドに合っているかどうかも考えながら、記事にも書かれている４つのコツや注意点を踏まえて、バナーをデザインすることで、よりおしゃれなバナーを作ることができると思います。

サイトやページの特徴や内容を意識し、見やすい色、使用する写真、フォント、文字のサイズなどを的確に選択し、より印象的なデザインになるように目指して作っていきましょう。


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