WordPressで簡単にサイトバナーを作る方法をお探しですか？
バナーは、あなたのサイトが提供する製品、サービス、またはニュースの更新を人目を引く方法で強調することができます。ユーザーエンゲージメントを高め、クリック率を上げ、訪問者の行動を促すことができます。
この投稿では、WordPressサイトのバナーを簡単に作成する方法をご紹介します。
サイトバナーとは？
バナーとは、WordPressサイトの上部、下部、または側面に表示されるグラフィカルなディスプレイです。多くの場合、ブランド名やロゴ、その他のデザイン要素を含み、特定の製品やサービス、イベントを宣伝します。
例えば、eコマースストアがセールを発表したばかりの場合、ページの上部にバナーを表示し、新規訪問者に割引キャンペーンを伝え、購入を促すことができる。
優れたデザインのバナーは強い印象を与え、訪問者をサイトの他の部分へと誘うことができます。さらに、バナーはアフィリエイト商品の宣伝、ブランドアイデンティティの確立、訪問者にニュースレターへの登録を促してメールリストを構築したり、サイト内の他のページへのトラフィックを誘導するためにも使用できます。
また、バナーを使ってソーシャルメディアアカウントを宣伝し、訪問者にあなたのページをフォローしたり「いいね！」を押してもらうこともできます。
最適なサイトバナーサイズとは？
理想的なサイトバナーサイズは、WordPressブログのレイアウトや特定のマーケティング目標によって異なります。
例えば、画面上部に長方形で細いバナーを表示したい場合は、970×90のLarge Leaderboardサイズを使用します。
その他、最もよく使われるバナーサイズには以下のようなものがあります：
- ミディアムバナー300 x 250
- リーダーボード728 x 90
- ワイド・スカイスクレイパー160 x 600
- ハーフページ：300 x 600
- 大きなリーダーボード970 x 90
- ビルボード970 x 250
- 大きな長方形: 326 x 280
- 垂直バナー：120 x 240
- フルバナー468 x 60
- ハーフバナー：234 x 60
サイドバーにイベントのバナーを表示したい場合は、ワイドスカイスクレイパーまたはハーフページバナーサイズをご利用ください。同様に、ページにSquare型のバナーを表示するには、Mediumバナーサイズを使用することもできます。
広告バナーを表示したい場合は、WordPressで最もパフォーマンスの高いGoogle Adsenseバナーのサイズとフォーマットに関する初心者向けガイドをご覧ください。
それでは、WordPressサイトで簡単にバナーを作成する方法を見ていきましょう。このチュートリアルでは、バナーを作るための3つの方法を取り上げますので、以下のリンクからお好きな方法にジャンプしてください：
方法1：OptinMonsterを使用してサイトバナーを作成する（推奨）
OptinMonsterは、あなたのサイトのためのフローティングバーやポップアップバナーを簡単に作成することができ、市場で最高のWordPressバナーメーカープラグインです。
サイト訪問者を購読者やカスタマイザーに変えるのに役立つ、最高のコンバージョン最適化およびリード生成ツールです。
さらに、OptinMonsterのバナーテンプレートの多くには、サイト訪問者の名前、メールアドレス、電話番号を収集できるオプトインフィールドがあります。
詳細については、OptinMonsterのレビューをご覧ください。
ステップ1：サイトにOptinMonsterをインストールする
まず、OptinMonsterアカウントにサインアップする必要があります。これを行うには、単にOptinMonsterのサイトにアクセスし、’今すぐOptinMonsterを取得’ボタンをクリックします。
その後、WordPressサイトに無料のOptinMonsterプラグインをインストールして有効化する必要があります。詳しい手順については、WordPressプラグインのインストール方法についての初心者ガイドをご覧ください。
有効化すると、WordPressの管理画面にOptinMonsterのセットアップウィザードが開きます。
ここから、「既存のアカウントを接続する」ボタンをクリックし、WordPressサイトをOptinMonsterアカウントに接続します。
コンピューター画面に新しいウィンドウが開きます。
ここから「WordPressに接続」ボタンをクリックして先に進みます。
ステップ2：バナーの作成とカスタマイズ
WordPressアカウントとOptinMonsterの接続が完了したら、WordPressの管理サイドバーからOptinMonster ” キャンペーン ページに移動します。
ここから「Create Your First Campaign」ボタンをクリックし、サイトバナーデザインの作成を開始します。
テンプレート」ページが表示されますので、キャンペーンタイプを選択してください。
例えば、バナーを画面上部にバーとして表示したい場合は、「フローティングバー」キャンペーンを選択します。同様に、バナーをポップアップとして表示するには「ポップアップ」キャンペーンタイプを選択します。
その後、選択したキャンペーンのテンプレートを選択する必要があります。
このチュートリアルでは、「フローティングバー」キャンペーンタイプのテンプレートを選択します。
次に、作成するキャンペーンの名前を聞かれます。お好きな名前を入力し、「Start Building」ボタンをクリックしてください。
これにより、画面上にOptinMonsterドラッグアンドドロップインターフェースが起動し、バナーのカスタマイゼーションを開始することができます。ここから、左側のサイドバーからお好みのフィールドをバナーにドラッグ＆ドロップすることができます。
例えば、ソーシャルメディアアイコンをバナーに追加してフォロワーを増やしたい場合は、左サイドバーからソーシャルメディアブロックをドラッグ＆ドロップします。
その後、ブロックをクリックして、左カラムの設定を開きます。
ここから、ボタンのタイトルを変更したり、ソーシャルメディアのURLを追加したり、ドロップダウンメニューからソーシャルメディアのプラットフォームを変更することもできる。
また、他のブロックを追加して、サイトバナーデザインに動画、画像、テキスト、CTAを表示することもできます。
そうしたら、バナーの位置を選択する必要があります。
初期設定では、スクロールを開始すると、OptinMonsterフローティングバーがサイト画面の下部に表示されます。
しかし、左のサイドバーの一番下にある「設定」アイコンをクリックすれば、この設定を簡単に変更することができる。
左カラムに設定が表示されますので、「フローティングバーの設定」タブを展開してください。ここで、’Load Floating Bar at the top of the page?’スイッチを切り替えるだけで、バナーがトップに表示されます。
ステップ3：バナーのトリガーを追加する
バナーをデザインしたら、上部の「表示ルール」タブに切り替えてください。ここからバナー表示のルールを追加することができます。
バナーに特定の表示トリガーを追加したい場合のみ、このタブに切り替える必要があることを覚えておいてください。そうでない場合は、次のステップに進んでください。
例えば、ユーザーがサイトを去ろうとしているときにバナーを表示したい場合は、「Exit Intent」オプションを選択する必要があります。
そうしたら、真ん中のドロップダウンメニューから「すべての端末で」オプションを設定します。この表示ルールをモバイル端末のみに使用したい場合は、そのオプションを選択することもできます。
その後、お好みに応じて終了意図の感度を選択し、「次のステップ」ボタンをクリックします。
これにより、新しい画面が表示されます。ここで、「キャンペーン表示を表示する」ドロップダウンメニューで「オプトイン」オプションが選択されていることを確認する必要があります。
それが済んだら、「次のステップ」ボタンをクリックするだけです。
バナーの表示ルールが画面に表示されます。
ここで何かを変更したい場合は、「編集」ボタンをクリックして修正することができる。
ステップ4：バナーを公開する
上部の「公開する」タブに切り替え、画面右上の「保存」ボタンをクリックします。
その後、「公開する」ボタンをクリックするだけで、サイトにバナーが表示されます。
では、あなたのサイトにアクセスして、画面上部のバナーをご覧ください。
デモサイトではこんな感じ。
方法2：Canva（無料）を使ってサイトバナーを作る
無料でサイトのバナーを作りたいなら、この方法がおすすめだ。
Canvaは、バナー、ロゴ、ポスター、本の表紙など、あらゆる種類のグラフィックを作成できる人気のウェブベースのツールです。サイトのバナーデザインを作成するのに使える無料版もあります。
ステップ1：Canvaアカウントを作成する
まず、Canvaのサイトにアクセスし、「Sign Up」ボタンをクリックしてアカウントを作成します。
すでにCanvaのアカウントをお持ちの場合は、ログインするだけです。
アカウントを作成すると、Canvaアカウントのトップページが表示されます。
ここから、左の列から「カラム」タブに切り替え、上部にある検索ボックスを使ってバナーテンプレートを検索する必要があります。
Canvaで利用可能なバナーテンプレートがすべて表示されます。ただし、これらのテンプレートの一部は有料機能のためロックされている場合があります。
ステップ2：サイトバナーのデザイン
テンプレートを選択すると、Canvaのデザインインターフェースが画面に表示されます。
ここから、あなたの好みに応じてバナーをカスタマイズすることができます。ブロックをクリックしてテキストを追加することで、既存のコンテンツを変更することができます。
左カラムの「カラム」タブに切り替えれば、ステッカー、写真、動画など、さまざまなグラフィック要素を追加することもできる。
要素を追加すると、上部のメニューからさらにアニメーション、位置、透明度を変更できる。
また、左カラムの「アップロード」タブに切り替えて、コンピューターからメディアファイルをアップロードすることもできます。
バナーにテキストを追加するには、左の列から「テキストボックス」タブに切り替えるだけです。
そこで、初期設定のテキストスタイルや異なるフォントの組み合わせを使用して、バナーにコンテンツを追加することができます。
マウスでテキストを選択すると、リンク付きの行動喚起を追加することもできます。テキストの上部にリンクアイコンが表示されます。
そのアイコンをクリックし、追加したいリンクをコピー＆ペーストしてください。
その後、「完了」ボタンをクリックして保存する。
ステップ3：バナーの埋め込みコードを取得する
バナーのカスタマイザーに満足したら、画面右上の「共有」ボタンをクリックしてください。
するとプロンプトメニューが表示されるので、一番下にある「More」オプションを選択する。
すべてのオプション」メニューが表示されますので、「埋め込み」オプションを選択してください。
そうすると、画面に新しいプロンプトが開きます。ここから「Embed」ボタンをクリックするだけです。
CanvaがHTML埋め込みコードを作成します。
画面に表示されたら、「HTML埋め込みコード」設定の下にある「コピー」ボタンをクリックします。
ステップ4：WordPressにHTML埋め込みコードを追加する
WordPressのページ、投稿日、サイドバーなど、お好みの場所にバナーを表示することができます。このチュートリアルでは、WordPressのページにバナーを表示します。
まず、バナーを追加したいページや投稿を開きます。
そこで左上の「ブロックを追加」（＋）ボタンをクリックし、カスタマイザーを見つけてページに追加します。
そうしたら、コピーした埋め込みコードをブロックにペーストするだけです。
最後に、「更新」または「公開」ボタンをクリックして変更を保存します。
さあ、あなたのサイトにアクセスして、WordPressバナーの動きを見てみましょう。
方法3：Thrive Leadsを使ってサイトバナーを作る
Thrive Leadsを使ってサイトバナーを作成することもできます。これは、114,000以上のサイトで使用されている人気のWordPressポップアッププラグインです。
Thrive Leadsを使用すると、WordPressサイトでリードを獲得し、メールリストを増やすのに役立つ高品質のバナーをデザインできます。
ステップ1: WordPressサイトにThrive Leadsをインストールします。
まず、Thrive Themesのサイトにアクセスし、アカウントにサインアップする必要があります。登録が完了したら、ダッシュボードにアクセスしてください。
ここから、「Thrive Product Managerプラグインをダウンロードしてインストールする」リンクをクリックします。
次に、WordPressサイトにアクセスして、Thrive Product Managerプラグインをインストールして有効化します。詳細な手順については、WordPressプラグインのインストール方法のステップバイステップガイドを参照してください。
有効化したら、WordPress管理ダッシュボードからProduct Managerタブに移動し、「Log into my account」ボタンをクリックします。
ログイン情報を入力すると、Thrive Product Managerのダッシュボードが表示されます。
ここから、サイトにインストールして使用したい製品を選択することができます。Thrive Leads」プラグインを選択し、「選択した製品をインストール」ボタンをクリックします。
ステップ2：サイトバナーの作成
プラグインのインストール後、WordPress管理画面のサイドバーからThriveダッシュボード ” Thrive Leadsページにアクセスする必要があります。
そこで、「リードグループ」オプションの隣にある「新規追加」ボタンをクリックします。
画面に「新規リードグループの追加」ポップアップが表示されますので、作成するリードグループの名前を入力してください。
本当に〜してもよいですか？
例えば、メールリストを作成するためにバナーを作成する場合、リードグループに「メールリストキャンペーン」と名前を付けることができます。
その後、作成したリードグループが画面に追加されます。ここから「オプトインフォームの新規タイプを追加」ボタンをクリックします。
新しいプロンプトが表示されますので、作成したいバナーの種類を選択してください。
スライドイン、リボン、ウィジェット、インコンテンツ、ライトボックス、スクロールマットバナーなど、お好みに合わせて作成できます。
これらのバナーは、ユーザーからメールアドレスや電話番号などのデータを収集するため、フォームのようなものになります。
このチュートリアルでは、サイトのリボンバナーを作成します。
サイトバナーデザインタイプを選択すると、プロンプトは自動的に画面から消えます。
リードグループのダッシュボードを開くには、リードグループタブの右隅にある「追加」ボタンをクリックします。
リードグループのダッシュボードが表示され、キャンペーン開始後、グループのすべてのフォームとリードレポートが表示されます。
例えば、メールアドレスを取得するためのバナーを作成したい場合、バナーを通じて収集したユーザー情報はすべてここに表示されます。
とりあえず「フォームを作成」ボタンをクリックして、バナーの作成を開始してください。
新しいプロンプトが表示されますので、フォームの名前をプロバイダーに入力し、「フォームの作成」ボタンをクリックしてください。
フォームが作成されると、リードグループのダッシュボードに表示されます。
ここから、右隅にある「Edit Design」ボタンをクリックして、バナーの作成を開始します。
ステップ3：サイトバナーのカスタマイズ
Thriveビジュアルエディターが画面の新しいタブで起動します。
ここから、「Thrive Leads Library」プロンプトからバナーのテンプレートを選択することから始めることができます。
あらかじめ用意されたテンプレートをそのまま使うことも、ビジュアルエディターでさらにカスタマイズすることもできます。選択したら、「テンプレートを選択」ボタンをクリックするだけです。
リボンバナーのテンプレートを追加したら、各要素をクリックして簡単にカスタマイズできます。左側のサイドバーで要素の設定が開きます。
例えば、テンプレートのボタンカラーを変更したい場合、サイドバーでボタンカラーをクリックして設定を開く必要があります。
バナーにまったく新しい要素を追加したい場合は、画面の右隅にある「+」アイコンをクリックして追加することもできます。
すると右側に「Add Elements」サイドバーが表示され、お好みの要素をバナー上にドラッグ＆ドロップすることができます。
例えば、ソーシャルメディアアカウントのボタンをバナーに追加したい場合、右サイドバーからソーシャルフォローエレメントをドラッグ＆ドロップする必要があります。
ご満足いただけましたら、左下の「作業を保存」ボタンをクリックし、変更内容を保存してください。
その後、リードグループのダッシュボードに戻る必要があります。
ステップ4：バナーの設定
ダッシュボードに戻ったら、フォーム行の「位置」オプションをクリックしてバナーの位置を変更できます。
ポジション設定] プロンプトが表示され、ドロップダウンメニューからお好みのバナーポジションを選択できます。
その後、「保存」ボタンをクリックする。
次に、バナーの表示頻度を設定するには、フォーム行の「表示頻度」オプションをクリックします。
バナーを画面に表示する回数をスライダーで設定します。
0」のままだと、バナーがすべて表示されます。選択したら、「保存」ボタンをクリックして設定を保存します。
バナー表示に特定のトリガーを追加したい場合は、フォーム行の「トリガー」オプションをクリックする必要があります。
これにより、「トリガー設定」プロンプトが表示されます。ここでバナーのトリガーをドロップダウンメニューから選択することができます。例えば、一定期間後やユーザーがページの一番下に到達した時などです。
設定が完了したら、「保存」ボタンをクリックして設定を保存します。
ステップ5：バナーを公開する
バナー設定を行った後、Lead Groupsダッシュボードを終了し、上部のリンクをクリックしてThrive Leadsダッシュボードに戻る必要があります。
リードグループ」タブを開き、「デスクトップに表示」スイッチを「オン」に切り替えます。モバイル端末にもバナーを表示したい場合は、「モバイルに表示」スイッチを「オン」に切り替えてください。
その後、リードグループタブの右上にある歯車アイコンをクリックし、表示設定を開きます。
ここでは、バナーを表示させたいサイトのページを選択することができます。例えば、すべてのページと投稿の上部にバナーを表示させたい場合は、これらのオプションの次のボックスにチェックを入れます。
最後に「Save and Close（保存して閉じる）」ボタンをクリックして変更を保存します。
さあ、あなたのサイトにアクセスして、ページ上部に表示されたバナーをチェックしてみよう。
デモサイトではこんな感じ。
ボーナス：WordPressでスマート・アプリ・バナーを追加する
あなたのサイトにモバイルアプリがあるなら、スマートアプリのバナーを表示するのは良いアイデアです。これらのバナーはアプリを宣伝し、iPhoneやiPadユーザーにダウンロードを促します。
訪問者がこのバナーをクリックすると、アプリストアに移動し、アプリをダウンロードすることができます。すでに端末にアプリがインストールされている場合は、スマートアプリのバナーが代わりにアプリを開くように促します。
WPCodeを使えば、WordPressにスマートアプリのバナーを簡単に追加できます。アプリのIDを簡単にサイトに追加できる、市場で最高のWordPressコードスニペットプラグインです。
詳しくは、WordPressでスマートアプリのバナーを簡単に追加する方法のチュートリアルをご覧ください。
この投稿が、WordPressで簡単にサイトバナーを作る方法のお役に立てれば幸いです。また、WordPressサイトの色をカスタマイズする方法についての初心者向けガイドと、最高のウェブデザインソフトウェアのトップピックもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ralph says
I used to make banners as simple jpeg/png in canva and put images as clickable with links to where should they redirect. However this was always poor choice. What looks good on dekstop looks bad on mobile and vice versa.
Images maybe scale and fit to screen but they don’t adapt like normal coded banners which are way better. First method looks really promising and professional which I hope will help me increase my conversions.