あなたはブログにバナーを設置していますか？
- アフィリエイトのまとめ記事を多くの人に読んでほしい
- メルマガの登録者を増やしたい
- ブログからコンサルの問合せを獲得したい
上記のような目的を達成する際は、バナーでアピールするのが効果的です。
バナーを上手に活用できば、ブログの読者をスムーズに目的地へ誘導できます。
「でも、デザインのスキルがない人にバナーを作ることはできないでしょ？」と考える人も多いでしょう。もちろんデザイン性の高いバナーを作るにはスキルが必要ですが、初心者でもツールを使えば作成可能です。
本記事では、ブログのバナーの作成方法や参考になるサイトを紹介します。
ブログのバナーとは
バナーとは英語で「旗」や「のぼり」という意味があります。
例えば、「カット〇〇円」といった旗がある美容院はよくありますよね。お店に入ってメニューを確認したり、Google検索をする必要がないため、安心して来店できるのがメリットです。
- カット〇〇円の旗を設置
- 見込み客のハードルが下がる
- 来店する人が増える
上記の通り、コンバージョンにつながりやすくなるのです。
ブログのバナーも同じ意味合いを持っています。
ブログにバナーを設置する必要性
バナーは、読者の目を引いて希望のページに誘導するために必要です。
ブログにテキストリンクしかない場合、多くの読者はスルーします。どんなに読者のためになるページを作っても、相手にメリットが伝わらなければクリックされません。
「テキストリンクを設置すればOK」と考える人もいますが、これは大きな機会損失をしています。
例えば、下画像のようなバナーがなく、テキストリンクのみだったとしたらどうでしょうか？
きっと、ほとんどの人がTCD AWARDや無料のWordPressテーマについて気づくこともないでしょう。
パッと見て内容が理解できるバナーを作るからこそ、読者もスムーズに特定のページへ辿り着けるようになるのです。
見やすいバナーを作るコツ
バナー作成に入る前に、コツをおさえておきましょう。
- 誰に何を伝えたいかを明確にする
- バナーのサイズを決める
- 伝えたい要素を全て書き出す
- 書き出した要素に優先順位をつける
- 素材を配置する
- レイアウトを調整する
- フォントを調整する
- カラーを調整する
- バランスを調整する
誰に何を伝えたいかを明確にする
はじめにバナーのコンセプトを決めていきます。
誰に何を伝えたいかによって、バナーのデザインは変わるからです。ビジネスマン向けのブログにも関わらず、かわいいデザインのバナーを貼ってもクリックされる可能性は低いでしょう。
ターゲットの興味を引くデザインや文言などをリサーチして、ズレが生じないようにしてください。
初心者の方は、競合サイトのバナーを参考にすると分かりやすいです。
バナーのサイズを決める
バナーのサイズを決める工程です。
事前にサイズを決めて制限を設けておかないと、自由度が高すぎてデザインが決まらなくなってしまいます。
特にバナー作成経験がない初心者は、あらかじめサイズを決めた上で必要な要素を盛り込むようにしましょう。
一般的なバナーのサイズは以下の通りです。
バナーを貼る位置や目的によって、最適なサイズは変わります。
はじめてバナー作成に挑戦する際は、スクエアやラージレクタングルあたりがおすすめです。ブログの記事内だけでなく、サイドバーでも使いやすいサイズになります。
伝えたい要素を全て書き出す
バナーのサイズが決まったら、含めたい要素を全て入力していきます。
この段階では、文字の大きさやカラーを調整する必要はありません。
訴求したい要素を並べる際は、以下の点を意識してみてください。
- 読者に対して明確なメリットを伝えられているか
- 重要な情報が漏れなく含まれているか
- 余計な情報を含んでいないか
ターゲットに刺さる文章を短くまとめる作業は簡単ではありません。
競合サイトのバナーの文言などを参考にして、伝わりやすいキャッチコピーを試行錯誤してみましょう。
書き出した要素に優先順位をつける
各要素に優先順位をつけて、重要なポイントを強調します。
上の画像は、Canvaのテンプレートですが、パッと見た瞬間に「BLACK FRIDAYのキャンペーン」であることが分かりますよね。
優先順位は以下のようになっています。
- BLACK FRIDAYキャンペーン
- 開催期間
- 特典情報
文字の大きさや背景色を変えることで、バナーにコントラストをつけるイメージです。
優先順位をつけて、ブログの読者に伝わりやすいバナーを目指しましょう。
素材を配置する
画像や図形などを配置して、文章を読まなくても伝わりやすいバナーにしていきます。
例えば「おすすめの子供服」のまとめ記事へ誘導したいとしましょう。
この際、バナーに挿入されている画像がきれいな景色だったら、読者は勘違いしてしまうはずです。子供の全体像が写った写真や、笑顔のアップなど、訴求したい内容に合った素材を配置するのがポイントです。
レイアウトを調整する
テキストや画像の配置を調整します。
バナーデザインに正解はありませんが、読者にとって見やすいレイアウトを意識することが大切です。
画像やテキストのバランスを見ながら、しっくりくるレイアウトを見つけてみてください。
フォントを調整する
テキストのフォントを調整して、より読みやすいバナーにしていきます。
優先順位の高いテキストを太字にしたり、力強いフォントで強調したりする工程です。小さい文字で軽めのフォントを使えば、読者も「これは補足情報だな」と理解できます。
ただし、1つのバナーで異なるフォントを使いすぎると、統一感がなくなってしまう点に注意してください。
ターゲットが好みそうなフォントにするとよいでしょう。
カラーを調整する
テキストや背景色を調整して、インパクトのあるバナーにしていきます。
ブログの場合、記事を上から下まで熟読する読者は少ないものです。スクロールしながら、目に止まった部分のみを読む人の方が多いでしょう。
記事内にバナーを挿入するなら、スクロールを止めたくなるようなインパクトがなければなりません。
ブログ自体のデザインを邪魔しない範囲で、目立つ色使いになるように試行錯誤してみましょう。
バランスを調整する
実際にブログにバナーを貼り付けて、違和感がないかチェックします。
- 文字が小さすぎないか
- バナーのサイズは適切か
- スマホで表示した際に視認性が悪くないか
- ブログのデザインと統一感が出ているか
上記のポイントをチェックして、バランスを調整してみてください。
特に、スマホで表示した際に分かりやすいかは重要です。ほとんどの読者はスマホでブログを閲覧します。モバイルフレンドリーなバナーになるように、微調整を行ってください。
バナーの作成方法：無料で使えるCanvaが便利
はじめてバナーを作成する際は、無料で使えるCanvaを利用するのがおすすめです。
Canvaは世界中のデザイナーやブロガーが利用しているデザインプラットフォームになります。様々なテンプレートが利用できるので、デザインの知識がなくても整ったバナーを作成可能です。
Canvaのトップページの検索欄に「バナー」と入力し「テンプレート」を指定してEnterキーを押します。
バナーのテンプレートが一覧表示されます。
イメージに近いデザインのバナーを選択しましょう。
デザインを選択したら「このテンプレートをカスタマイズ」をクリックしてください。
デザインの編集画面が表示されます。
各要素をクリックしてカスタマイズしましょう。
画面左側にある「素材」をクリックすると、図形やグラフィックが使えます。
テキストをクリックすると、フォントやサイズ、透過度などをカスタマイズできます。
好みのフォントを選択して、全体のバランスを整えましょう。
バナーが完成したら「共有」→「ダウンロード」の順でクリックします。
「ダウンロード」を選択して、バナーを保存しましょう。
Canvaは非常に多機能なので、実際に試しながら使い方を覚えてみてください。
ちなみに無料プランでもデザイン性の高いバナーが作れますが、有料プランに切り替えるとさらに便利になります。
Canvaの有料プランについては、下記記事をご覧ください。
ブログのアイキャッチ画像やバナーなど、幅広い用途に使える人気ツールのCanva。 無料から使えるCanvaですが、有料版にしたら「こんなに便利だったんだ！」と感じました。しかも、有料版に切り替えたことで、有料画像素材サイトを解約でき、年間1.5万円ほどの節約にもつながったのです。 本記事...
ブログにバナーを貼る方法
バナーをブログに貼り付ける方法は以下の通りです。
- バナーをアップロード
- 記事にバナーを挿入
- バナーにリンクを挿入
本記事では、利用者の多いWordPressブログにバナーを貼り付ける方法を紹介します。
ブログ記事の編集ページを開いて、バナーを挿入しましょう。やり方は画像を挿入するときと同じです。
ブロックエディタの場合は「画像」を選択して「アップロード」をクリックします。
バナーを選択してアップロードが完了すると、記事内に挿入されます。
画像をクリックすると、右側にメニューが表示されるので、サイズの調整やセンター寄せなどの設定を行いましょう。
次にバナーにリンクを挿入します。
リンクボタンをクリックしてください。
リンクを貼り付けます。
プレビューを確認して問題なければ設定完了です。
サイドバーにバナーを設置する際は「ウィジェット」から行えます。
お使いのテーマによって設定方法が多少変わりますが「バナー＝画像」なので、難しいことはありません。
サイトに合ったバナーを作成して、コンバージョンにつなげましょう。
ブログのバナーはどこに貼るべきか？
ブログのバナーを貼り付ける場所に制限はありません。
以下は、一般的な配置例です。
- タイトル下
- サイドバー
- 見出し下
- 記事の最後
タイトル下
タイトル下は、たくさんの読者が見てくれる可能性が高い場所です。
- メルマガの登録者募集
- 期間限定のキャンペーン情報
- 読者に周知させたい重要事項
上記のようなバナーを配置するのに最適な場所といえるでしょう。
サイドバー
サイドバーはPC表示で目立つ場所です。
- 読んでほしい記事
- おすすめの商品
- まとめ記事
上記のようなバナーを配置するのがおすすめです。
ブログアフィリエイトの場合は、キラーページのバナーを設置すると読者が訪問しやすくなるでしょう。
見出し下
見出し下は、記事と関連性のあるバナーを貼り付けるのがおすすめです。
集客記事の見出し下にキラーページのバナーを挿入すると、クリック率を上げられる可能性が高くなります。
見出しと関連性が低いバナーは、読者にとって有益ではないので、なるべく関連性の高いバナーを配置しましょう。
記事の最後
記事の最後は、問合せやメルマガ登録などのバナーを配置するのが一般的です。
キラーページの場合は、アフィリエイト広告のバナーを貼りましょう。記事の総括と合わせて、バナーを配置すると自然な流れで読者を誘導できます。
バナーの種類や目的によって、貼り付ける位置は様々です。
定期的にコンバージョン数をチェックしつつA/Bテストを行って、バナーをブラッシュアップしていきましょう。
デザイン性の高いバナーが見れる参考サイト
バナーのデザインを学ぶのに最適な参考サイトを3つ紹介します。
- BANNER LIBRARY
- retrobanner
- Banner Matome
BANNER LIBRARY
BANNER LIBRARYは、様々なジャンルのバナーを集めたギャラリーサイトです。
カテゴリーやテイストなど、ジャンル別に検索できるので、目当てのバナーを見つけやすいのが魅力。更新頻度も高いので、最先端のバナーデザインを参考にできます。
retrobanner
retrobannerは、13,000以上のバナーデザインがチェックできるギャラリーサイトです。
サイズ、色、業種、テイストの4つから検索できます。カラーコードも参考にできるので、バランスのよい色使いを参考にできるでしょう。
マンガやイラスト系のバナーが充実しているのも特徴的。プロのデザイナーによるハイクオリティなバナーがたくさん紹介されています。
Banner Matome
Banner Matomeは、2万点以上のバナーが紹介されているギャラリーサイトです。
業種と表現別で検索でき、多ジャンルのバナーを参考にできます。2021年10月から更新がストップしていますが、様々なテイストのバナーを参考にできるので、ブックマークしておくとよいでしょう。
まとめ
ブログのバナーの完成度を上げるには、実際に試行錯誤を繰り返して練習する必要があります。
- 参考サイトや競合サイトのバナーをチェック
- 同じデザインになるようにCanvaで編集してみる
- 慣れてきたらゼロベースでバナーを作成
上記の通り、まずは気になるバナーを参考に、実際に作ってみるのがおすすめです。
ブログに合ったデザインのバナーが作成できると、読者の回遊率が上がったり、アフィリエイトの成果を上げやすくなったりします。
また、バナーは改善を繰り返してこそ、完成度が高くなるものです。
定期的に効果測定を行い、キャッチコピーやデザインを微調整していきましょう。
コメント