ホームページのバナー画像のサイズ、種類、作り方

ホームページやWeb広告でバナー画像を作成する際、適切なサイズや種類を選ぶのに悩んだことはありませんか？実は、バナーのサイズや形式は、ユーザビリティやコンバージョン率に大きな影響を与えます。本記事では、効果的なバナー画像の作り方や、主要な広告プラットフォームごとの推奨サイズを詳しく解説します。

これを読めば、あなたも目的に合った最適なバナーを作成できるようになり、Webマーケティングの成果向上につながるはずです。バナー制作に携わるWebデザイナーやマーケター必見の内容ですので、ぜひ最後までお読みください。

ホームページのバナー、適切なサイズとは？

ホームページのバナーには、目的や掲載場所に応じて適切なサイズがあります。一般的に使用される主要なバナーサイズには以下のものがあります。

適切なサイズを選ぶことで、ユーザーの目を引き、クリック率を向上させることができます。また、デバイスや掲載位置に合わせたサイズを選択することで、ページのレイアウトを崩さず、効果的な情報伝達が可能になります。バナーの目的や掲載場所を考慮し、最適なサイズを選択することが重要です。

ホームページのバナーの目的とメリット

バナーは、Webサイトで重要な役割を果たす視覚的な要素です。特に、特定のキャンペーンや商品を効果的に伝える手段として利用されることが多く、クリック率の向上や閲覧者の注目を集めるために欠かせません。このセクションでは、バナーがどのようにして目的を達成し、どのようなメリットを提供するかについて詳しく解説します。

バナーには、視覚的な魅力と情報の伝達力を兼ね備えており、適切なサイズや配置により、サイト全体の印象を向上させる効果も期待できます。次に、具体的なバナーの目的とその利点について見ていきましょう。

バナーの主な目的は、閲覧者を特定のページやキャンペーンに誘導することです。例えるなら、街角に立っている看板やのぼりのような役割を果たします。Webサイトを訪れるユーザーは、バナーがない場合、特定の商品やキャンペーンに気づかないこともありますが、バナーを設置することで注目を集め、クリックしてもらいやすくなります。

このように、バナーは視覚的にわかりやすいメッセージを伝えることで、商品やサービスの認知度を高め、売上や訪問者数の向上につながる重要なツールとして機能します。

バナーの最大のメリットは、視覚的に印象を与えやすいことです。文章だけの紹介と異なり、画像やイラスト、写真を組み合わせることで、ユーザーに強い印象を残しやすくなります。特に、視覚的に効果的なバナーは、ユーザーの目を引き、無意識のうちにクリックを促す力を持っています。

さらに、バナーは様々なサイズや形式で作成できるため、パソコンやスマートフォンのいずれでも効果的に表示させることができ、広範囲のターゲットにアプローチすることが可能です。

国際標準規格のバナーサイズ

バナーサイズには、国際標準規格が存在し、多くのWeb広告で活用されています。特に、国際インタラクティブ広告協会 (IAB) によって定められた規格は、2年ごとに見直され、常に最新のWeb環境に対応するよう更新されています。バナーサイズは主に3つのカテゴリーに分類され、「Rectangles and Pop-Ups（長方形とポップアップ）」、「Banners and Buttons（バナーとボタン）」、「Skyscrapers（細縦長）」としてそれぞれ異なる役割を果たしています。

このセクションでは、それぞれのバナーサイズの特徴と活用方法について具体的に説明します。

「Rectangles and Pop-Ups（長方形とポップアップ）」は、バナー広告の中で最も広く使用されているサイズカテゴリーです。このカテゴリーには、300×250のミディアムレクタングルや、336×280のラージレクタングルなどが含まれます。これらのバナーは、Webサイトのサイドバーや記事内に配置されることが多く、ユーザーに強い視覚的インパクトを与えることができます。

また、スクエアポップアップやバーティカルポップアップのように、ポップアップ広告としても使用されることが多く、閲覧者の注目を集める役割を果たします。

「Banners and Buttons（バナーとボタン）」は、通常横長の形状をしており、Webページのトップやフッターに配置されることが一般的です。このカテゴリーの代表的なサイズには、468×60のフルバナーや、728×90のリーダーボードが含まれます。これらのバナーは、目立つ場所に配置されることが多く、クリック率の向上に貢献します。

さらに、小型のバナーであるボタンタイプも存在し、例えば120×90のボタン1や、125×125のスクエアボタンは、スペースの限られた箇所に使用され、補助的な情報を提供するのに適しています。

「Skyscrapers（細縦長）」は、縦に長いバナーサイズのことを指し、一般的にサイドバーに配置されます。このカテゴリの代表的なサイズには、160×600のワイドスカイスクレーパーや、120×600のスカイスクレーパーがあります。これらのバナーは、画面の側面に配置されるため、ユーザーの視線を自然に誘導することができ、ブランド認知度の向上に効果的です。

特に、縦に長い広告は、ユーザーがスクロールする際に目に入りやすく、長い間視界に留まることから、より効果的なアピールが可能です。

ディスプレイネットワーク広告のバナーサイズ

ディスプレイネットワーク広告は、インターネット上で幅広く展開される効果的な広告手法です。この広告形式では、適切なバナーサイズの選択が非常に重要です。主要なプラットフォームであるGoogle ディスプレイネットワーク（GDN）とYahoo! ディスプレイアド（YDA）では、それぞれ異なるバナーサイズの規定があります。

これらのサイズを理解し、適切に活用することで、広告の効果を最大化することができます。以下では、GDNとYDAのバナーサイズについて詳しく解説し、効果的な広告展開のためのポイントを紹介します。

GDNは、Googleディスプレイネットワークの略称で、Googleが提供する広範囲なWebサイトやアプリに広告を配信するプラットフォームです。GDNを利用することで、YouTubeやGmailなどのGoogle関連サービスだけでなく、多数のパートナーサイトにも広告を表示することができます。

GDNの特徴は、高度なターゲティング機能と広範囲な配信ネットワークにあります。ユーザーの興味関心や検索履歴、デモグラフィック情報などに基づいて、適切なオーディエンスに広告を表示することができます。また、リマーケティング機能を利用して、過去にWebサイトを訪れたユーザーに再度アプローチすることも可能です。

GDNでは、デバイスごとに最適化されたバナーサイズを提供しています。PCとタブレット向けのサイズとしては、300×250、336×280、728×90、300×600などが一般的です。特に300×250のミディアムレクタングルは、多くのWebサイトで採用されている汎用性の高いサイズです。

スマートフォン向けには、320×50や320×100などのサイズが推奨されています。これらのサイズは、スマートフォンの画面サイズに適しており、ユーザーの閲覧体験を妨げることなく効果的に広告を表示することができます。GDNでは、レスポンシブ広告も提供しており、デバイスの画面サイズに応じて自動的にバナーサイズを調整する機能もあります。

YDA（Yahoo! ディスプレイアド）は、Yahoo! JAPANが提供するディスプレイ広告プラットフォームです。YDAを利用することで、Yahoo! JAPANのトップページやYahoo!ニュース、Yahoo!ショッピングなど、Yahoo!の関連サービスやパートナーサイトに広告を配信することができます。

YDAの強みは、Yahoo! JAPANの豊富なユーザーデータを活用した精密なターゲティングにあります。ユーザーの検索履歴やブラウジング行動、デモグラフィック情報などを基に、適切なオーディエンスに広告を表示することができます。また、Yahoo! JAPANの高いトラフィックを活かした広範囲な露出が期待できます。

YDAでも、デバイスごとに最適化されたバナーサイズが提供されています。PCとタブレット向けのサイズとしては、300×250、728×90、300×600などがあります。これらのサイズは、GDNと共通しているものが多く、両プラットフォームで同じバナーを使用できる場合が多いです。

スマートフォン向けには、320×50や320×100のサイズが推奨されています。これらのサイズは、スマートフォンの画面に適しており、ユーザビリティを損なうことなく効果的に広告を表示できます。YDAでも、レスポンシブ広告のオプションがあり、デバイスの画面サイズに応じて自動的にバナーサイズを調整することができます。

GDNとYDAでは、共通して使用できるファイル形式があります。主に対応しているのは、JPEG（.jpg、.jpeg）、GIF89a（.gif）、PNG（.png）の3種類です。これらの形式は、Web上で広く使用されており、高い互換性を持っています。

JPEGは写真やグラデーションのある画像に適しており、高い圧縮率で小さなファイルサイズを実現できます。GIFはアニメーション効果を付けられる利点がありますが、色数が制限されています。PNGは透過効果をサポートしており、背景が透明なロゴなどに適しています。
両プラットフォームとも、ファイルサイズに制限があります。GDNでは150KB以下、YDAでは3MB以下とされていますので、バナー作成時には注意が必要です。また、アニメーション広告については、GDNではGIFアニメーションが許可されていますが、YDAでは静止画のみが許可されている点に注意が必要です。

ディスプレイネットワーク広告を出稿する際には、いくつかの重要な留意点があります。まず、ターゲットオーディエンスを明確に設定することが重要です。ユーザーのニーズや興味に合致した広告を表示することで、クリック率やコンバージョン率の向上が期待できます。

また、バナーのデザインには特に注意を払う必要があります。視覚的なインパクトがあり、かつ商品やサービスの価値をわかりやすく伝えるデザインが求められます。テキストと画像のバランスを適切に保ち、ユーザーの興味を引くような魅力的なクリエイティブを作成することが重要です。
さらに、広告の表示頻度や配信時間帯なども考慮する必要があります。過度に頻繁な広告表示はユーザーにストレスを与える可能性があるため、適切な頻度設定が重要です。また、ターゲットオーディエンスのオンライン行動パターンに合わせて配信時間帯を調整することで、より効果的な広告露出が可能になります。

バナー画像の種類とは？

バナー広告はWebサイトでユーザーの目を引くために重要な役割を果たしており、その画像の種類も多岐にわたります。バナー画像は、形式によって適切な用途が異なり、それぞれの特徴を理解することが成功のカギです。

ここでは、一般的に使用されるバナー画像のファイル形式について詳しく説明し、どの形式がどのような状況に最適であるかを見ていきましょう。

BMP（ビットマップ）形式の画像は、Microsoft Windowsで使用される標準形式で、圧縮が行われないため、画像品質が非常に高いまま保持されます。しかし、その反面、ファイルサイズが非常に大きくなるため、Web上での使用にはあまり適していません。特にバナー広告としての利用は、Webサイトの読み込み速度を大幅に遅くしてしまう可能性があるため、避けるのが賢明です。

PNG（Portable Network Graphics）形式は、透過機能があり、背景を透明にできるため、デザインの自由度が高いのが特徴です。また、圧縮しても画像が劣化しない可逆圧縮方式を採用しているため、特に高品質なイラストやロゴに適しています。PNGは、バナー広告においても色鮮やかな表現が可能ですが、ファイルサイズが大きくなる傾向があり、Webページの読み込み速度に影響を与える可能性がある点には注意が必要です。

GIF（Graphics Interchange Format）は、最大256色しか使用できませんが、アニメーション機能を備えているため、動きのあるバナー広告を作成するのに最適です。色の制約から写真のような複雑な画像には向いていないものの、シンプルなロゴやアイコン、軽量なアニメーションを作成する際には非常に有用です。さらに、GIF形式は背景透過もサポートしているため、デザインの幅が広がります。

JPEG（Joint Photographic Experts Group）形式は、フルカラー写真のように多くの色を使用する画像に最適なファイル形式です。この形式では圧縮率が高く、ファイルサイズを大幅に削減できるため、Webページの表示速度に悪影響を与えるリスクが少ないのがメリットです。ただし、圧縮により画質が低下するため、繊細な画像やテキストを含むバナーには注意が必要です。

ホームページのバナー作成方法

バナー広告を作成する際には、さまざまな手法やツールを利用できます。自分で手軽に制作する方法から、専門業者に依頼してプロフェッショナルな仕上がりを目指す方法まで選択肢があります。それぞれの方法にはメリットと注意点があり、目的や予算に応じた適切な選択が重要です。次に、自分で制作する方法と、専門業者に依頼する方法について説明します。

自分でバナーを制作する場合、簡単なデザインツールを使用する方法が一般的です。無料ツールとしては、初心者に使いやすい「Canva」などが人気です。Canvaでは、事前に用意されたテンプレートを活用し、ドラッグ＆ドロップ操作で簡単にバナーをデザインできます。

また、PhotoshopやIllustratorといった高度なデザインツールを使用することで、より自由度の高いデザインが可能になります。これらのツールを使用する際には、アイコンや画像の選定、配色、レイアウトに注意し、バナーが伝えたいメッセージを明確に表現できるようにデザインしましょう。

バナーのデザインが複雑だったり、自分での制作が難しかったりする場合は、専門のデザイン業者に依頼することも可能です。専門業者に依頼することで、より洗練されたデザインや、ターゲットに効果的に訴求できるバナーを制作してもらえます。

料金はバナー1枚につき1000円程度から始まり、デザインの複雑さや制作枚数によって変動します。クラウドソーシングサイトを利用して、フリーランスのデザイナーに依頼することも一つの選択肢です。予算や納期に応じた最適なパートナーを見つけることができるでしょう。

ホームページのバナーを作る際の手順

バナーを効果的に作成するためには、手順を整理し、必要な要素を漏れなく整えることが重要です。バナー作成の際には、視覚的に魅力を伝えつつ、ターゲットに明確なメッセージを届けることを目指しましょう。次の手順では、バナー制作の各ステップを詳しく解説していきます。

バナーを制作する際の第一歩は、訴求する内容に沿ったコピーを決定することです。バナーには限られたスペースしかないため、簡潔でインパクトのあるメッセージが必要です。メインコピーとサブコピーを決めて、どの要素を優先して伝えたいかを明確にしましょう。メインコピーは、ユーザーの興味を引き、クリックを促す重要な要素となるため、わかりやすく強調することがポイントです。

バナーに使用する画像やアイコンは、ユーザーの視線を引きつけ、メッセージを強調するための重要な要素です。メインビジュアルとしてどのような画像を使用するかを早い段階で決め、広告の内容と関連性があるかを確認しましょう。無料素材サイトや自社のロゴ、写真などを上手に活用し、メッセージを視覚的にサポートするデザインを心がけます。

次に、配色とレイアウトを決定します。配色は、ブランドイメージや訴求するメッセージに合わせて選定し、視認性が高く、目立つデザインを目指します。レイアウトも重要な要素で、情報が見やすく整理されているかがクリック率に影響します。アイコンやテキストの配置を工夫し、ユーザーにとって魅力的で使いやすいデザインを目指しましょう。

まとめ

バナー画像は、Webサイトの効果的なマーケティングツールとして不可欠です。適切なサイズ、形式、デザインを選択することで、ユーザーの注目を集め、クリック率を向上させることができます。国際標準規格やディスプレイネットワーク広告の規定を理解し、目的に合わせたバナーを作成することが重要です。

自社制作や専門業者への依頼など、状況に応じた方法を選択し、戦略的にバナーを活用することで、Webサイトのパフォーマンスを大幅に向上させることができます。効果的なバナー制作と運用により、ビジネスの成長と成功を加速させることが可能となります。

Webマーケティングご担当者の皆様、効果的なバナーの作成を目指しているなら、ぜひともDYMのWEB事業部にお声がけください。DYMのWEB事業部ではバナーだけでなく、Webサイトの制作・運用まで承っております。ぜひお声がけください。

＞＞DYMの「WEB事業」サービスページはこちら