ウェブサイトバナーの作成方法（簡単な3つの方法）

視覚的に印象的なバナーは、訪問者がサイトにアクセスしたときに最初に気づくものの1つです。ブランドのトーンを設定し、メッセージを伝え、コンバージョンを促進するため、製品、サービス、または重要なアップデートを強調するための強力なツールとなります。

長年にわたり、WPBeginnerではニュースレターの宣伝、ブラックフライデーのセールを強調表示、無料コースの共有、プロフェッショナルサービスの表示など、さまざまな種類のバナーを使用してきました。

これらのキャンペーンを通じて、バナーは常に人々の注目を集め、行動喚起ボタンのクリックを促し、ビジネスのリードを促進することがわかっています。

この記事では、WordPressウェブサイトのバナーを簡単に作成する方法をご紹介します。これにより、これらのメリットをすべて活用してビジネスを改善することができます。

ウェブサイトバナーとは？

バナーは、WordPressウェブサイトの上部、下部、または側面に広がるグラフィカルな表示です。多くの場合、ブランド名とロゴ、およびその他のデザイン要素が含まれ、特定の製品、サービス、またはイベントを宣伝するために使用されます。

たとえば、eコマースストアがセールを発表した場合、そのページの先頭にバナーを表示して、新規訪問者に割引オファーを伝え、購入を促すことができます。

よくデザインされたバナーは、強い印象を与え、訪問者をサイトの他の部分の探索に誘うことができます。さらに、バナーはアフィリエイト製品のプロモーション、ブランドアイデンティティの確立、ニュースレターへの登録を促すことによるメールリストの構築、サイトの他のページへのトラフィック誘導に使用できます。

バナーを使用してソーシャルメディアアカウントを宣伝し、訪問者にページをフォローまたはいいねするように促すこともできます。

ウェブサイトバナーの最適なサイズは？

理想的なウェブサイトバナーサイズは、WordPressブログのレイアウトと特定のマーケティング目標によって異なります。

たとえば、画面の上部に長方形で細いバナーを表示したい場合は、970 x 90 のラージリーダーボードサイズを使用できます。

その他の人気があり、最もよく使用されるバナーサイズには以下のようなものがあります。

• ミディアムバナー：300 x 250
• Leaderboard: 728 x 90
• ワイドスカイスクレーパー：160 x 600
• ハーフページ：300 x 600
• ラージリーダーボード: 970 x 90
• Billboard: 970 x 250
• 大長方形：326 x 280
• 縦型バナー：120 x 240
• フルバナー：468 x 60
• ハーフバナー: 234 x 60

サイドバーでイベントのバナーを表示したい場合は、ワイドスカイスクレーパーまたはハーフページバナーサイズを使用できます。同様に、ミディアムバナーサイズを使用して、ページに正方形のバナーを表示することもできます。

広告バナーを表示したい場合は、WordPress向け最もパフォーマンスの高いGoogle AdSenseバナーサイズとフォーマットに関する初心者向けガイドをご覧ください。

それでは、WordPressウェブサイトで簡単にバナーを作成する方法を見てみましょう。このチュートリアルでは、バナーを作成するための3つの方法を説明します。以下のリンクを使用して、選択した方法にジャンプできます。

• 方法1：OptinMonsterを使用してウェブサイトバナーを作成する（推奨）
• 方法2：Canva（無料）を使用してウェブサイトバナーを作成する
• 方法3：Thrive Leadsを使用してウェブサイトバナーを作成する
• ボーナス：WordPressにスマートアプリバナーを追加する

方法1：OptinMonsterを使用してウェブサイトバナーを作成する（推奨）

OptinMonsterは、市場で最高のWordPressバナー作成プラグインであり、ウェブサイト用のフローティングバーやポップアップバナーを簡単に作成できます。

これは、ウェブサイト訪問者を購読者や顧客に変えるのに役立つ、最高のコンバージョン最適化およびリードジェネレーションツールです。

さらに、OptinMonsterのバナーテンプレートの多くには、ウェブサイト訪問者の名前、メールアドレス、電話番号を収集できるオプトインフィールドがあります。

長年にわたり、WPBeginnerではこのツールを数回使用して、バナーを追加し、成功したリード獲得キャンペーンを構築してきました。詳細については、完全なOptinMonsterレビューをご覧ください。

ステップ1：ウェブサイトにOptinMonsterをインストールする

まず、OptinMonsterアカウントにサインアップする必要があります。これを行うには、OptinMonsterのウェブサイトにアクセスし、「今すぐOptinMonsterを入手」ボタンをクリックするだけです。

その後、WordPressウェブサイトに無料のOptinMonsterプラグインをインストールして有効化する必要があります。詳細な手順については、WordPressプラグインのインストール方法の初心者向けガイドを参照してください。

有効化すると、OptinMonsterセットアップウィザードがWordPress管理パネルに表示されます。

ここから、「既存のアカウントを接続」ボタンをクリックして、WordPressサイトをOptinMonsterアカウントに接続します。

これにより、コンピューター画面に新しいウィンドウが開きます。

ここから、「WordPressに接続」ボタンをクリックして進みます。

ステップ2：バナーの作成とカスタマイズ

WordPressアカウントをOptinMonsterに接続したら、WordPress管理サイドバーから OptinMonster » Campaigns ページに移動します。

ここから、「最初のキャンペーンを作成」ボタンをクリックして、ウェブサイトバナーのデザイン作成を開始します。

これにより、「テンプレート」ページに移動し、キャンペーンタイプを選択することから始めることができます。

例えば、画面上部にバナーをバーとして表示したい場合は、「フローティングバー」キャンペーンを選択できます。同様に、バナーをポップアップとして表示するには、「ポップアップ」キャンペーンタイプを選択できます。

その後、選択したキャンペーンのテンプレートも選択する必要があります。

このチュートリアルでは、「フローティングバー」キャンペーンタイプ用のテンプレートを選択します。

次に、作成中のキャンペーンの名前を入力するように求められます。好きな名前を入力して、「ビルドを開始」ボタンをクリックして進みます。

これにより、OptinMonsterのドラッグ＆ドロップインターフェイスが画面に表示され、バナーのカスタマイズを開始できます。ここから、左側のサイドバーから選択したフィールドをバナーにドラッグ＆ドロップできます。

例えば、フォロワーを増やすためにバナーにソーシャルメディアアイコンを追加したい場合は、左側のサイドバーからソーシャルメディアブロックをドラッグアンドドロップできます。

その後、ブロックをクリックするだけで、左側の列にその設定が開きます。

ここから、ボタンのタイトルを変更したり、ソーシャルメディアのURLを追加したり、ドロップダウンメニューからソーシャルメディアプラットフォームを変更したりできます。

ウェブサイトバナーのデザインに動画、画像、テキスト、またはCTAを表示するために他のブロックを追加することもできます。

それを行ったら、バナーの位置を選択する必要があります。

デフォルトでは、OptinMonsterのフローティングバーは、スクロールを開始するとウェブサイト画面の下部に表示されます。

ただし、左側のサイドバーの下部にある「設定」アイコンをクリックすることで、この設定を簡単に変更できます。

これにより、左側の列に設定が開きます。「フローティングバー設定」タブを展開する必要があります。ここから、「フローティングバーをページの上部に読み込みますか？」のスイッチを切り替えるだけで、バナーが上部に表示されます。

ステップ3：バナーのトリガーを追加する

バナーのデザインが完了したら、上部にある「表示ルール」タブに切り替えます。ここから、バナー表示のルールを追加できます。

バナーに特定の表示トリガーを追加したい場合にのみ、このタブに切り替える必要があることを覚えておいてください。それ以外の場合は、次のステップに進むことができます。

たとえば、ユーザーがサイトを離れようとしているときにバナーを表示したい場合は、「離脱インテント」オプションを選択する必要があります。

それが完了したら、中央のドロップダウンメニューから「すべてのデバイス」オプションを選択するだけです。この表示ルールをモバイルデバイスのみに使用したい場合は、そのオプションを選択することもできます。

その後、お好みに合わせて離脱意図感度を選択し、「次のステップ」ボタンをクリックしてください。

新しい画面に移動します。ここで、「キャンペーンビューを表示」ドロップダウンメニューで「オプトイン」オプションが選択されていることを確認する必要があります。

それが完了したら、「次のステップ」ボタンをクリックするだけです。

バナーの表示ルールが画面に表示されます。

ここで何かを変更したい場合は、「編集」ボタンをクリックして修正できます。

ステップ4：バナーを公開する

上部にある「公開」タブに切り替え、「保存」ボタンをクリックします。画面の右上隅にあります。

その後、「公開」ボタンをクリックするだけで、バナーがウェブサイトに表示されます。

次に、ウェブサイトにアクセスして、画面の上部にバナーが表示されることを確認してください。

これはデモサイトでの様子です。

方法2：Canva（無料）を使用してウェブサイトバナーを作成する

無料でウェブサイトバナーを作成したい場合は、この方法が最適です。

Canvaは、バナー、ロゴ、ポスター、ブックカバーなど、あらゆる種類のグラフィックを作成するための人気のあるウェブベースのツールです。ウェブサイトバナーデザインを作成するために使用できる無料バージョンも提供しています。

ステップ1：Canvaアカウントを作成する

まず、Canvaのウェブサイトにアクセスし、「サインアップ」ボタンをクリックしてアカウントを作成します。

すでにCanvaアカウントをお持ちの場合は、ログインするだけです。

アカウント作成後、Canvaアカウントのホームページに移動します。

ここから、左側の列から「テンプレート」タブに切り替え、上部にある検索ボックスを使用してバナーテンプレートを検索する必要があります。

これにより、Canvaで利用可能なすべてのバナーテンプレートが表示されます。ただし、これらのテンプレートの一部は有料機能のためロックされている場合があります。

ステップ2：ウェブサイトバナーをデザインする

テンプレートを選択すると、Canvaのデザインインターフェイスが画面に起動します。

ここから、お好みに合わせてバナーをカスタマイズできます。ブロックをクリックしてテキストを追加することで、既存のコンテンツを変更できます。

左側の列にある「要素」タブに切り替えることで、ステッカー、写真、動画などのさまざまなグラフィック要素を追加することもできます。

要素を追加したら、上部のメニューからアニメーション、位置、透明度をさらに変更できます。

左側の列から「アップロード」タブに切り替えることで、コンピューターからメディアファイルをアップロードすることもできます。

バナーにテキストを追加するには、左側の列にある「テキストボックス」タブに切り替えます。

そこでは、デフォルトのテキストスタイルを使用したり、異なるフォントの組み合わせを使用してバナーにコンテンツを追加したりできます。

マウスでテキストを選択して、リンク付きのコールトゥアクションを追加することもできます。これにより、テキストの上部にリンクアイコンが表示されます。

そのアイコンをクリックして、追加したいリンクをコピーして貼り付けるだけです。

その後、「完了」ボタンをクリックして保存します。

ステップ3：バナーの埋め込みコードを取得する

バナーのカスタマイズに満足したら、画面の右上にある「共有」ボタンをクリックするだけです。

これにより、下部にある「その他」オプションを選択する必要があるプロンプトメニューが開きます。

次に「すべてのオプション」メニューに移動し、「埋め込み」オプションを選択する必要があります。

それを行うと、新しいプロンプトが画面に開きます。ここから、「埋め込む」ボタンをクリックするだけです。

Canvaは、HTML埋め込みコードを生成します。

画面に表示されたら、「HTML埋め込みコード」オプションの下にある「コピー」ボタンをクリックします。

ステップ4: WordPressにHTML埋め込みコードを追加

これで、お好みに応じてWordPressのページ、投稿、またはサイドバーにバナーを表示できます。このチュートリアルでは、WordPressページにバナーを表示します。

まず、バナーを追加したいページまたは投稿を開く必要があります。

そこに着いたら、左上隅にある「ブロックを追加」(+) ボタンをクリックして、カスタムHTMLブロックを見つけてページに追加します。

それが完了したら、コピーした埋め込みコードをブロックに貼り付けるだけです。

最後に、「更新」または「公開」ボタンをクリックして変更を保存します。

さて、WordPressバナーが機能しているか確認するために、あなたのウェブサイトにアクセスしてください。

方法3：Thrive Leadsを使用してウェブサイトバナーを作成する

Thrive Leadsを使用してウェブサイトバナーを作成することもできます。これは、114,000以上のウェブサイトで使用されている人気のWordPressポップアッププラグインです。

Thrive Leadsを使用すると、WordPressサイトでリードを獲得し、メールリストを成長させるのに役立つ高品質なバナーをデザインできます。

このツールをリアルタイムで徹底的にテストした結果、直感的なインターフェースと魅力的なテンプレートを備え、初心者にも非常に使いやすいことがわかりました。詳細は、Thrive Themes Suiteのレビューをご覧ください。

ステップ1：WordPressウェブサイトにThrive Leadsをインストールする

まず、Thrive Themesのウェブサイトにアクセスしてアカウントにサインアップする必要があります。それが完了したら、メンバーダッシュボードに移動してください。

ここから、「Thrive Product Managerプラグインをダウンロードしてインストールする」リンクをクリックしてください。

次に、WordPressウェブサイトにアクセスして、Thrive Product Managerプラグインをインストールして有効化します。詳細な手順については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化後、WordPress管理ダッシュボードから「製品マネージャー」タブに移動し、「マイアカウントにログイン」ボタンをクリックしてください。

ログイン情報を入力すると、Thrive Product Managerダッシュボードが表示されます。

ここから、サイトにインストールして使用したい製品を選択できます。「Thrive Leads」プラグインを選択し、「選択した製品をインストール」ボタンをクリックするだけです。

ステップ2：ウェブサイトバナーを作成する

プラグインのインストール後、WordPress管理サイドバーからThriveダッシュボード » Thrive Leadsページにアクセスする必要があります。

そこに着いたら、「リードグループ」オプションの横にある「新規追加」ボタンをクリックするだけです。

これにより、「新しいリードグループを追加」ポップアップが画面に表示され、作成中のリードグループの名前を入力する必要があります。

リードグループを識別しやすい名前を付けてください。

例えば、メールリスト構築のためのバナーを作成している場合、リードグループに「メールリストキャンペーン」と名前を付けることができます。

その後、作成したリードグループが画面に表示されます。アクセスするには、「新しいオプトインフォームのタイプを追加」ボタンをクリックします。

これにより、作成したいバナーの種類を選択する必要がある新しいプロンプトが開きます。

スライドイン、リボン、ウィジェット、インコンテンツ、ライトボックス、またはスクロールマットバナーをお好みに合わせて作成できます。

これらのバナーは、メールアドレス、電話番号など、ユーザーからデータを収集するフォームのようなものになります。

このチュートリアルでは、サイトにリボンバナーを作成します。

ウェブサイトバナーのデザインタイプを選択すると、プロンプトは自動的に画面から消えます。

リードグループダッシュボードを開くには、「リードグループ」タブの右隅にある「追加」ボタンをクリックする必要があります。

これにより、リードグループダッシュボードに移動します。キャンペーンが公開されると、そのグループのすべてのフォームとリードレポートが表示されます。

例えば、メールアドレスを収集するためのバナーを作成したい場合、バナーを通じて収集するすべてのユーザー情報はここに表示されます。

とりあえず、「フォームを作成」ボタンをクリックしてバナーの作成を開始してください。

これにより、フォームの名前を入力し、「フォームを作成」ボタンをクリックする必要がある新しいプロンプトが開きます。

フォームが作成されると、Lead Groupsダッシュボードに表示されます。

ここから、右隅にある「デザインを編集」ボタンをクリックしてバナーの作成を開始します。

ステップ3：ウェブサイトバナーをカスタマイズする

Thriveビジュアルエディターが新しいタブで画面に起動します。

ここから、「Thrive Leadsライブラリ」プロンプトからバナーのテンプレートを選択することから始めることができます。

事前に作成されたテンプレートをそのまま使用するか、ビジュアルエディターでさらにカスタマイズすることができます。選択が完了したら、「テンプレートを選択」ボタンをクリックして次に進みます。

リボンバナーのテンプレートを追加した後、各要素をクリックすることで簡単にカスタマイズできます。これにより、左側のサイドバーに要素の設定が開きます。

例えば、テンプレートのボタンの色を変更したい場合は、それをクリックしてサイドバーで設定を開く必要があります。

バナーにまったく新しい要素を追加したい場合は、画面の右隅にある「+」アイコンをクリックして追加することもできます。

これにより、右側の「要素の追加」サイドバーが開きます。ここで、選択した要素をバナーにドラッグアンドドロップできます。

例えば、バナーにソーシャルメディアアカウントボタンを追加したい場合は、右側のサイドバーから「ソーシャルフォロー」要素をドラッグ＆ドロップする必要があります。

満足したら、左下隅にある「作業を保存」ボタンをクリックして変更を保存してください。

その後、リードグループダッシュボードに戻る必要があります。

ステップ4：バナー設定の構成

ダッシュボードに戻ったら、フォーム行の「位置」オプションをクリックすることで、バナーの位置を変更できます。

これで「配置設定」プロンプトが開きます。ドロップダウンメニューから希望するバナーの配置を選択できます。

その後、「保存」ボタンをクリックします。

次に、バナーの表示頻度を設定するには、フォーム行の「表示頻度」オプションをクリックします。

これにより、「表示設定」プロンプトが開きます。ここでスライダーを使用して、バナーが表示される回数を決定できます。

数値を0のままにすると、バナーは常に表示されます。選択したら、「保存」ボタンをクリックして設定を保存してください。

バナー表示に特定のトリガーを追加したい場合は、フォーム行の「トリガー」オプションをクリックする必要があります。

これにより、「トリガー設定」プロンプトが表示されます。ここで、ドロップダウンメニューから、特定の期間後やユーザーがページの最下部に到達したときなど、バナーのトリガーを選択できます。

完了したら、「保存」ボタンをクリックして設定を保存します。

ステップ5：バナーを公開する

バナー設定を構成した後、上部にあるリンクをクリックして、Thrive Leadsダッシュボードに戻るために、リードグループダッシュボードを終了する必要があります。

そこに着いたら、「リードグループ」タブを展開し、「デスクトップに表示」スイッチを「オン」に切り替えます。モバイルデバイスにもバナーを表示したい場合は、「モバイルに表示」スイッチを「オン」に切り替えることができます。

その後、リードグループタブの右上にある歯車アイコンをクリックして、表示設定を開きます。

ここで、バナーを表示したいウェブサイトのページを選択できます。たとえば、すべてのページと投稿の上部にバナーを表示したい場合は、これらのオプションの横にあるチェックボックスをオンにしてください。

最後に、「保存して閉じる」ボタンをクリックして変更を保存します。

これで、ウェブサイトにアクセスして、ページの上部に表示されているバナーを確認できます。

デモウェブサイトではこのようになりました。

ボーナス：WordPressにスマートアプリバナーを追加する

ウェブサイト用のモバイルアプリをお持ちの場合は、スマートアプリバナーを表示することをお勧めします。これらのバナーはアプリを宣伝し、iPhoneまたはiPadユーザーにダウンロードを促します。

訪問者がこのバナーをクリックすると、アプリストアに移動し、そこでアプリをダウンロードできます。すでにデバイスにアプリがインストールされている場合は、スマートアプリバナーが代わりにアプリを開くように促します。

WPCodeを使用すると、WordPressにスマートアプリバナーを簡単に追加できます。私たちの意見では、これは市場で最高のWordPressコードスニペットプラグインです。これにより、アプリのIDをウェブサイトに簡単に追加できます。

詳細については、WordPressでスマートアプリバナーを簡単に追加する方法に関するチュートリアルをご覧ください。

この記事がWordPressのウェブサイトバナーを簡単に作成する方法を学ぶのに役立ったことを願っています。また、WordPressウェブサイトの色をカスタマイズする方法に関する初心者向けガイドや、最高のウェブデザインソフトウェアのトップピックもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。