WordPressバナーの作り方｜設置方法・おすすめサイズ・効果的なデザインを初心者向けに解説
はじめに
WordPressサイトで商品紹介、サービス案内、資料請求、キャンペーン告知などに使われる「バナー」は、読者を目的のページへ誘導するための重要なパーツです。見た目がきれいなだけでなく、設置場所やサイズ、文言、リンク先まで考えて作ることで、クリック率や問い合わせ数の改善につながります。
一方で、初心者の方は「ワードプレスでバナーはどう作るの？」「どのサイズがいい？」「記事内やサイドバーにどう設置する？」と迷いやすいものです。この記事では、WordPressバナーの基本から、作り方、設置方法、おすすめサイズ、クリックされやすいデザインのコツまで分かりやすく解説します。
1. WordPressバナーとは？役割と使い方の基本
1-1. WordPressで使うバナーの意味
WordPressで使うバナーとは、サイト内に設置する画像やリンク付きの告知パーツのことです。たとえば「無料相談はこちら」「資料をダウンロード」「おすすめ記事を読む」「セール開催中」といった内容を、画像やボタン風のデザインで目立たせるために使います。
通常のテキストリンクよりも視覚的に目に入りやすく、読者に次の行動を促しやすい点が特徴です。ブログ記事、サイドバー、ヘッダー、フッター、トップページなど、さまざまな場所に設置できます。
1-2. バナーを設置する主な目的
WordPressバナーを設置する主な目的は、読者を特定のページへ誘導することです。具体的には、商品購入ページ、サービス紹介ページ、問い合わせフォーム、メルマガ登録ページ、キャンペーンページ、アフィリエイト広告などへの導線として使われます。
バナーは単なる装飾ではありません。サイト運営の目的に合わせて設置することで、売上アップ、問い合わせ増加、回遊率向上、広告収益の改善などにつながります。
1-3. 画像バナー・テキストバナー・広告バナーの違い
画像バナーは、デザインされた画像にリンクを設定して使うバナーです。写真、イラスト、文字、ボタン風の要素を組み合わせられるため、視覚的な訴求力が高いのが特徴です。
テキストバナーは、文字を中心にしたリンクやボックス型の告知です。画像を使わないため表示が軽く、シンプルなサイトにもなじみやすいメリットがあります。
広告バナーは、Google AdSenseやアフィリエイト広告など、広告収益を目的として設置するバナーです。広告コードを貼り付けるタイプもあれば、自作画像にアフィリエイトリンクを設定するタイプもあります。
1-4. 初心者がバナーを使うべき場面
初心者がまずバナーを使うべき場面は、読者に見てほしいページがあるときです。たとえば、ブログ内の人気記事へ誘導したい場合、プロフィールページを見てもらいたい場合、無料相談や問い合わせにつなげたい場合などです。
特に、記事の最後に「関連記事はこちら」「サービスの詳細はこちら」といったバナーを設置すると、読者が次に何をすればよいか分かりやすくなります。サイト内の導線を整える意味でも、WordPressバナーは早い段階で活用したいパーツです。
2. WordPressバナーを作る前に決めること
2-1. バナーの目的を明確にする
バナーを作る前に、まず「何のために設置するのか」を決めましょう。目的が曖昧なまま作ると、デザインや文言がぼやけてしまい、クリックされにくくなります。
たとえば、商品を購入してもらいたいのか、資料請求してもらいたいのか、別の記事を読んでもらいたいのかによって、バナーに入れる言葉やデザインは変わります。目的は1つに絞るのが基本です。
2-2. 誘導先ページを決める
次に、バナーをクリックした後に表示するページを決めます。誘導先が分かりにくいページだと、せっかくクリックされても成果につながりません。
たとえば「無料相談はこちら」というバナーなら、問い合わせフォームや予約ページへ直接リンクするのが自然です。「詳しく見る」というバナーなら、サービス詳細ページや商品紹介ページへ誘導しましょう。バナーの内容とリンク先の内容を一致させることが大切です。
2-3. ターゲットユーザーを設定する
バナーは、誰に向けて見せるのかを意識して作る必要があります。初心者向けのブログなら、専門用語を避けて分かりやすい表現にする。ビジネス向けサイトなら、信頼感のある色や落ち着いたデザインにする。このように、ターゲットによって適した表現は変わります。
読者の悩みや目的を想像し、「このバナーを見た人がクリックしたくなる理由」を考えることが重要です。
2-4. 掲載場所に合わせてサイズを考える
バナーは、設置する場所によって適したサイズが異なります。サイドバーに大きすぎるバナーを置くとレイアウトが崩れやすく、記事内に小さすぎるバナーを置くと目立ちません。
PCだけでなくスマホ表示も考慮し、横幅が画面からはみ出さないサイズにすることが大切です。WordPressテーマによって表示幅が異なるため、実際に設置して確認しながら調整しましょう。
3. WordPressバナーのおすすめサイズ
3-1. サイドバーに適したバナーサイズ
サイドバーに設置するバナーは、横幅300px前後が使いやすいサイズです。代表的なサイズとしては、300×250px、300×300px、336×280pxなどがあります。
サイドバーは記事本文よりも幅が狭いため、横長すぎるバナーよりも正方形または縦横比が近いバナーの方が収まりやすいです。複数のバナーを並べる場合は、サイズを統一すると見た目が整います。
3-2. 記事内に適したバナーサイズ
記事内に設置するバナーは、横長タイプが使いやすいです。たとえば、728×90px、600×200px、640×360px、1200×628pxなどがよく使われます。
記事内バナーは読者の視線に入りやすいため、クリックされやすい反面、置きすぎると本文の邪魔になります。記事冒頭、本文途中、記事下など、目的に合わせて自然な位置に設置しましょう。
3-3. ヘッダー・フッターに適したバナーサイズ
ヘッダーに設置するバナーは、横長のデザインが向いています。サイト上部に表示されるため目立ちますが、縦幅が大きすぎるとファーストビューを圧迫してしまいます。高さは90〜150px程度に抑えると、読みやすさを保ちやすくなります。
フッターに設置する場合は、問い合わせ、会社情報、資料請求、SNSフォローなどへの導線として活用できます。フッターはサイト全体で共通表示されることが多いため、長期的に見せたいバナーに向いています。
3-4. スマホ表示で見やすいバナーサイズ
スマホでは画面幅が限られるため、横幅いっぱいに自然に表示されるレスポンシブ対応のバナーが適しています。画像自体は横幅600〜1200px程度で作成し、WordPress上では幅100%で縮小表示されるようにすると、さまざまな端末で見やすくなります。
ただし、文字が小さすぎるとスマホで読みにくくなります。スマホ表示を前提にするなら、短いキャッチコピー、大きめの文字、分かりやすいボタンを意識しましょう。
3-5. 画像サイズと表示速度の注意点
バナー画像は高画質にしすぎるとファイル容量が大きくなり、ページの表示速度に影響することがあります。表示速度が遅いと読者の離脱につながるため、必要以上に大きな画像を使わないことが大切です。
WordPressでは、メディアライブラリやエディターから画像ファイルをアップロードできます。一般的な画像形式として、JPG、PNG、GIF、WebPなどが使われます。
4. WordPressバナーの作り方
4-1. Canvaなどの無料ツールで作る方法
初心者におすすめなのは、Canvaなどの無料デザインツールを使ってバナーを作る方法です。テンプレートを選び、文字や画像を差し替えるだけで、見栄えのよいバナーを作成できます。
作成手順はシンプルです。まずバナーサイズを決め、テンプレートを選びます。次にキャッチコピー、画像、ボタン風のパーツを配置します。最後に色やフォントを調整し、PNGやJPG形式でダウンロードします。
デザインに慣れていない場合でも、テンプレートを使えば短時間で作れるため、最初のWordPressバナー作成に向いています。
4-2. 画像編集ソフトで作る方法
Photoshop、Illustrator、Affinity Designer、Figmaなどの画像編集ソフトを使えば、より自由度の高いバナーを作れます。細かいレイアウト調整、ブランドカラーの設定、写真加工、複数サイズの展開などを行いたい場合に便利です。
ただし、初心者には操作がやや難しい場合があります。最初は無料ツールで作成し、デザインにこだわりたくなったら本格的な画像編集ソフトを使う流れでも問題ありません。
4-3. WordPressのブロックエディターで作る方法
WordPressのブロックエディターを使えば、画像を作成せずに簡易的なバナーを作ることもできます。たとえば、カバーブロック、画像ブロック、ボタンブロック、カラムブロックなどを組み合わせる方法です。
画像ブロックはエディター上で追加でき、ページや投稿内に画像を配置できます。
4-4. バナーに入れるべき要素
クリックされやすいバナーには、主に4つの要素があります。1つ目は、何を伝えるバナーなのかが分かるキャッチコピーです。2つ目は、商品やサービスの魅力を伝える短い説明文です。3つ目は、クリック後の行動を示すCTAです。4つ目は、視覚的に内容を補足する画像やアイコンです。
たとえば「初心者向けWordPress講座」「今だけ無料相談受付中」「詳しく見る」といった形で、読者がすぐ理解できる言葉を使いましょう。
4-5. 作成したバナー画像の保存形式
バナー画像の保存形式は、用途に合わせて選びます。写真を使ったバナーならJPG、文字や図形が多いバナーならPNG、軽量化を重視するならWebPが候補になります。
ファイル名は「banner-side-service.png」「wordpress-banner-campaign.webp」のように、内容が分かる名前にしておくと管理しやすくなります。日本語ファイル名は環境によって文字化けすることがあるため、英数字とハイフンを使うのがおすすめです。
5. WordPressにバナーを設置する方法
5-1. 記事内にバナーを設置する方法
記事内にバナーを設置する場合は、投稿編集画面で画像ブロックを追加し、作成したバナー画像をアップロードします。その後、画像を選択してリンク先URLを設定すれば、クリックできるバナーになります。
記事の途中に設置する場合は、本文の流れを邪魔しない位置を選びましょう。おすすめは、関連する内容の直後や、読者の悩みが高まったタイミングです。記事下に設置する場合は、読み終えた読者に次の行動を促す導線として効果的です。
5-2. サイドバーにバナーを設置する方法
サイドバーにバナーを設置するには、WordPress管理画面の「外観」から「ウィジェット」または「エディター」を開き、サイドバーエリアに画像やカスタムHTMLを追加します。テーマによって操作画面が異なる場合があります。
サイドバーはサイト内の複数ページで表示されることが多いため、常に見せたいバナーに向いています。プロフィール、人気記事、メルマガ登録、広告バナーなどを設置するのに便利です。
5-3. ヘッダーやフッターにバナーを設置する方法
ヘッダーやフッターにバナーを設置する場合は、テーマのカスタマイズ機能やサイトエディター、ウィジェットエリアを使います。ブロックテーマの場合は、サイトエディターでヘッダーやフッターを編集できる場合があります。
ヘッダーは目立ちやすい反面、サイト全体の印象に大きく影響します。フッターは主張が強すぎず、問い合わせや資料請求への導線として使いやすい場所です。
5-4. ウィジェットを使って設置する方法
ウィジェットを使うと、サイドバーやフッターなどの共通エリアにバナーを簡単に設置できます。画像ブロックを追加してバナー画像を選び、リンクを設定するだけで基本的な設置は完了します。
複数のバナーを設置する場合は、上下の余白をそろえたり、画像サイズを統一したりすると見た目が整います。スマホでサイドバーが下部に回り込むテーマもあるため、スマホ表示も必ず確認しましょう。
5-5. カスタムHTMLでリンク付きバナーを設置する方法
カスタムHTMLを使えば、リンク付きバナーをより細かく設定できます。基本的なコードは以下のような形です。
HTML<a href="https://example.com/" target="_blank" rel="noopener">
<img src="https://example.com/banner.jpg" alt="サービス詳細はこちら">
</a>
hrefにはリンク先URL、srcには画像URL、altには画像の説明文を入れます。別タブで開きたい場合はtarget="_blank"を使います。外部リンクを別タブで開く場合は、セキュリティ面を考えてrel="noopener"も入れておくと安心です。
6. WordPressバナー設置に便利なプラグイン
6-1. バナー管理プラグインでできること
バナー管理プラグインを使うと、複数の広告バナーやリンク付き画像をまとめて管理できます。設置場所の指定、表示条件の設定、広告コードの挿入、クリック数の計測、ローテーション表示などができるプラグインもあります。
バナーの数が少ないうちは手動設置でも問題ありませんが、広告やキャンペーンが増えてくると管理が煩雑になります。その場合は、プラグインを使うことで作業効率を高められます。
6-2. 広告バナー管理におすすめのプラグイン
広告バナー管理でよく使われるプラグインには、Advanced AdsやAd Inserterなどがあります。Advanced Adsは、広告やバナー、各種広告コードをWordPress内で管理・設置するためのプラグインとして提供されています。WordPress.org 日本語
Ad Inserterは、Google AdSenseやGoogle Ad Managerなどを含む各種広告コードの挿入、ローテーションバナー、HTMLやJavaScriptなどの挿入に対応した広告管理プラグインです。WordPress.org 日本語
ただし、プラグインはサイトの目的やテーマとの相性によって使いやすさが変わります。導入前に更新状況、レビュー、対応バージョン、機能、サポート情報を確認しましょう。
6-3. プラグインを使うメリット・デメリット
プラグインを使うメリットは、バナーを一元管理できることです。複数ページに同じバナーを表示したり、広告の表示位置をまとめて変更したりしやすくなります。クリック計測や表示条件の設定ができるプラグインなら、改善にも役立ちます。
一方で、プラグインを増やしすぎるとサイトが重くなったり、テーマや他のプラグインと干渉したりする可能性があります。使わない機能が多いプラグインを入れるより、必要な機能に絞って選ぶことが大切です。
6-4. プラグイン導入時の注意点
プラグインを導入する前に、必ずバックアップを取っておきましょう。また、本番サイトでいきなり大きな変更をするのではなく、可能であればテスト環境で動作確認を行うと安心です。
導入後は、表示速度、スマホ表示、広告の表示位置、リンク先、管理画面の使いやすさを確認します。不要になったプラグインは停止するだけでなく、削除しておくと管理しやすくなります。
7. クリックされやすいバナーデザインのコツ
7-1. 伝えたい内容を一目で分かるようにする
クリックされやすいWordPressバナーは、見た瞬間に内容が分かります。読者はじっくりバナーを読んでくれるとは限りません。そのため、伝えたい内容を短く、分かりやすく表現することが重要です。
たとえば「無料相談受付中」「限定キャンペーン」「初心者向け講座」など、読者にとってのメリットがすぐ分かる言葉を使いましょう。
7-2. 文字を詰め込みすぎない
バナーに情報を入れすぎると、読みにくくなります。特にスマホでは文字が小さく表示されるため、長い文章は避けるべきです。
バナー内の文字は、メインコピー、補足文、CTAの3つ程度に絞ると分かりやすくなります。詳しい説明はリンク先ページに任せ、バナーでは興味を持ってもらうことを優先しましょう。
7-3. 配色とコントラストを意識する
バナーは、背景色と文字色のコントラストが重要です。文字が背景に埋もれてしまうと、内容が伝わりません。白背景なら濃い文字色、濃い背景なら白や明るい文字色を使うなど、読みやすさを優先しましょう。
また、サイト全体の色味と大きく違いすぎると、悪目立ちすることがあります。目立たせる部分と、サイトになじませる部分のバランスを意識しましょう。
7-4. CTAボタンを目立たせる
CTAとは「Call To Action」の略で、読者に行動を促す文言やボタンのことです。バナーでは「詳しく見る」「今すぐ申し込む」「無料で試す」「資料をダウンロード」などがCTAにあたります。
CTAボタンは、背景や他の要素と区別できる色にし、クリックできることが分かるデザインにしましょう。ボタン風の形にするだけでも、読者が次の行動を取りやすくなります。
7-5. サイトデザインと統一感を持たせる
バナーだけがサイトの雰囲気から浮いていると、読者に違和感を与えることがあります。フォント、色、余白、写真の雰囲気などをサイトデザインに合わせることで、自然な導線になります。
特に自社サービスや個人ブログのバナーは、ブランドイメージを伝える役割もあります。毎回デザインを大きく変えるより、基本のルールを決めて統一感を持たせるのがおすすめです。
8. WordPressバナーで成果を出すための改善方法
8-1. クリック率を確認する
バナーは設置して終わりではありません。成果を出すには、どれくらいクリックされているかを確認する必要があります。クリック率を把握することで、バナーの効果を判断できます。
Googleアナリティクス、広告管理プラグイン、短縮URLサービス、ヒートマップツールなどを使うと、クリック状況を確認しやすくなります。クリックが少ない場合は、設置場所やデザインを見直しましょう。
8-2. 設置場所を変えて比較する
同じバナーでも、設置場所によってクリック率は変わります。記事上、記事中、記事下、サイドバー、フッターなど、複数の場所で試してみると効果的です。
ただし、すべての場所に同じバナーを置くと、読者にしつこい印象を与えることがあります。まずは1〜2か所に絞って設置し、反応を見ながら調整しましょう。
8-3. デザインや文言を改善する
クリック率が低い場合は、デザインや文言を改善します。キャッチコピーが分かりにくい、ボタンが目立たない、色がサイトに埋もれている、スマホで文字が読みにくいなど、原因を1つずつ確認しましょう。
改善するときは、一度に多くの要素を変えすぎないことが大切です。文言だけ変える、色だけ変える、設置場所だけ変えるなど、変更点を絞ると効果を判断しやすくなります。
8-4. A/Bテストで効果を検証する
A/Bテストとは、複数のバナーを比較して、どちらの成果が高いかを確認する方法です。たとえば、同じリンク先に対して「無料相談はこちら」と「30秒で簡単申し込み」の2種類を用意し、クリック率を比較します。
A/Bテストを行うことで、感覚ではなくデータをもとに改善できます。アクセス数が少ないうちは大きな差が出にくい場合もありますが、継続的に検証することで成果につながりやすくなります。
8-5. スマホとPCで表示を確認する
WordPressバナーは、PCで見やすくてもスマホで崩れることがあります。文字が小さい、画像がはみ出す、余白が大きすぎる、ボタンが押しにくいなどの問題がないか確認しましょう。
現在はスマホからサイトを見るユーザーも多いため、スマホ表示の確認は必須です。設置後は、PC、スマホ、タブレットなど複数の画面サイズで見え方をチェックしましょう。
9. WordPressバナー設置でよくある失敗と対策
9-1. バナー画像が表示されない
バナー画像が表示されない場合は、画像URLが間違っている、メディアライブラリから画像が削除されている、HTMLコードの記述にミスがある、キャッシュが残っているなどの原因が考えられます。
まずは画像URLを直接ブラウザで開き、画像が表示されるか確認しましょう。表示されない場合は、WordPressのメディアライブラリに画像を再アップロードし、正しいURLを設定します。
9-2. 画像がぼやける・サイズが合わない
画像がぼやける原因は、元画像のサイズが小さいまま大きく表示されていることが多いです。たとえば、横幅300pxの画像を横幅600pxで表示すると、ぼやけて見える場合があります。
対策として、表示サイズより少し大きめの画像を用意し、WordPress上で適切に縮小表示します。ただし、大きすぎる画像は表示速度に影響するため、圧縮やリサイズも忘れずに行いましょう。
9-3. リンクが正しく設定されていない
バナーをクリックしてもページが開かない場合は、リンク先URLの入力ミスがないか確認します。特に、https://の抜け、全角文字の混入、余分なスペース、古いURLのままになっているケースに注意しましょう。
外部サイトへリンクする場合は、別タブで開く設定にすることもあります。ただし、内部リンクの場合は同じタブで開く方が自然な場合もあるため、ユーザー体験に合わせて設定しましょう。
9-4. スマホでレイアウトが崩れる
スマホでバナーがはみ出す場合は、画像の幅が固定されている可能性があります。HTMLで設置している場合は、画像にmax-width: 100%; height: auto;を指定すると、画面幅に合わせて縮小されやすくなります。
HTML<img src="banner.jpg" alt="バナー画像" style="max-width:100%; height:auto;">
また、横長すぎるバナーはスマホで文字が小さくなりがちです。スマホ用に別サイズのバナーを用意するのも有効です。
9-5. バナーが多すぎて読みにくくなる
バナーを増やしすぎると、記事本文が読みにくくなり、読者の離脱につながることがあります。特に広告バナーが多いサイトは、信頼感を損なう可能性があります。
バナーは数よりも配置と内容が重要です。記事の流れに合った場所に、目的が明確なバナーを必要な数だけ設置しましょう。読者にとって役立つ導線になっているかを基準に判断することが大切です。
10. WordPressバナーに関するよくある質問
10-1. WordPressバナーは無料で作れる？
WordPressバナーは無料で作れます。Canvaなどの無料デザインツールを使えば、テンプレートをもとに初心者でも簡単にバナー画像を作成できます。また、WordPressのブロックエディターを使えば、画像を作らずにテキストやボタンを組み合わせた簡易バナーを作ることもできます。
10-2. バナー画像の推奨ファイル形式は？
バナー画像には、JPG、PNG、WebPなどがよく使われます。写真を使うならJPG、透過背景やロゴ風のデザインならPNG、軽量化を重視するならWebPが向いています。GIFはアニメーションに使えますが、動きが多すぎると読者の邪魔になる場合があるため注意しましょう。
10-3. 広告バナーと通常バナーの違いは？
広告バナーは、広告収益やアフィリエイト成果を目的としたバナーです。Google AdSenseやアフィリエイト広告、スポンサー広告などが該当します。
通常バナーは、自社サービス、関連記事、問い合わせ、資料請求、キャンペーンなど、サイト運営者が任意のページへ誘導するために設置するバナーです。目的は違いますが、どちらも読者にクリックしてもらうための導線という点では共通しています。
10-4. 初心者でもプラグインなしで設置できる？
初心者でも、プラグインなしでWordPressバナーを設置できます。投稿や固定ページなら画像ブロックを使い、サイドバーやフッターならウィジェットやサイトエディターを使うことで設置可能です。
ただし、複数の広告バナーを管理したい場合や、表示条件を細かく設定したい場合は、バナー管理プラグインを使う方が効率的です。
10-5. バナーのクリック率を上げるには？
バナーのクリック率を上げるには、目的を明確にし、読者にとって分かりやすい文言を使うことが大切です。さらに、設置場所、サイズ、配色、CTAボタン、スマホ表示を見直すことで改善しやすくなります。
「何をクリックできるのか」「クリックすると何が得られるのか」が一目で分かるバナーほど、反応されやすくなります。設置後はクリック率を確認し、データを見ながら改善を続けましょう。
まとめ
WordPressバナーは、読者を目的のページへ誘導するための重要なパーツです。商品紹介、問い合わせ、資料請求、関連記事、広告など、さまざまな目的で活用できます。
バナーを作るときは、まず目的、誘導先、ターゲット、設置場所を明確にしましょう。そのうえで、サイドバー、記事内、ヘッダー、フッター、スマホ表示に合わせて適切なサイズを選ぶことが大切です。
作成方法は、Canvaなどの無料ツール、画像編集ソフト、WordPressのブロックエディターなどがあります。設置方法も、画像ブロック、ウィジェット、カスタムHTML、プラグインなど複数あります。
クリックされるバナーにするには、内容を一目で分かるようにし、文字を詰め込みすぎず、配色やCTAを工夫することがポイントです。設置後はクリック率や表示状態を確認し、デザインや文言、配置を改善していきましょう。
ワードプレスでバナーを上手に活用できれば、サイト内の導線が分かりやすくなり、問い合わせや購入、広告収益などの成果につながりやすくなります。まずは1つの目的に絞って、シンプルで見やすいバナーから作成してみましょう。