より多くの見込み客を獲得するテクニック、スライドインCTAをブログに表示する方法【チュートリアル】

この記事もそうですが、多くのブログ記事では、読者をランディングページへと導くCall-To-Action（CTA）が、画面の最後に表示されます。

ですが、どうでしょう。読者はそのCTAに気付いているでしょうか。

ブログ記事の最後にCTAを表示していると、そのうち訪問者がそれに気付かなくなるという問題があります。ブログを何度も訪れる人だけでなく、新しい訪問者であっても気付かない場合があります。非常に多くのブログが同じように画面の最後にCTAを表示しているため、この「おまけのコンテンツ」つまり「推奨される次のステップ」に目を向けない人が多いのです。

その対応策として、スライドインCTAと呼ばれる機能の利用を始めたブログもあります。このCTAは、表示の邪魔にならないように、サイドバーのコンテンツの下に表示されることが多いのですが、サイドバーがない場合は、トリガーされると（下の例のように）画面の右下に入り込んで表示されます。

面白いと思いませんか。このようなCTAをブログに表示させてみたいと思った方のために、今回はその方法をご説明します。ですがその前に、このCTAの効果について少しお話ししておきましょう。

コンバージョン率最適化 (CRO) の基礎完全ガイド

ウェブ分析の第一人者 小川卓氏によるコンバージョン率改善の資料と動画のセットです。運営側の主観だけでなく、ユーザー視点で取り組むCROについて学びませんか？

• ウェビナー動画と資料
• CROの実践に欠かせないDMAIC
• CROの実践手順
• CROを行う方へのアドバイス

今すぐ無料ダウンロードする 詳しく見る 今すぐ無料ダウンロードする

今すぐダウンロードする

全てのフィールドが必須です。

ダウンロードの準備ができました

下記のボタンよりダウンロードいただけます。

今すぐダウンロードする

HubSpotブログで最初にスライドインCTAを実装する際に、私たちはその効果について調べようと何度かテストを実施しました。

HubSpotブログで最もトラフィックの多い記事を10本選び、スライドインCTAを1か月のあいだ表示しました。その後、次の3つの指標について、スライドインCTAと、ブログ画面の最後に表示するCTAとで比較を行いました。

• クリックスルー率（CTR） - ブログ記事の訪問者のうち、何パーセントがそれぞれのCTAをクリックしたか。
• 転換率（CVR） - そのCTAをクリックした人のうち、何パーセントがランディングページのフォームから実際に転換したか。
• サブミッション - それぞれのCTAから最終的に何人の見込み客が獲得されたか。

このテストから、スライドインCTAの方がCTRが192%高く、またサブミッションも27%多いという結果が得られました。ただし、スライドインCTAのサブミッションの数は、実際には多くありませんでした。なぜなら、CVRはスライドインCTAの方が低いからです。しかし、クリックの数が大幅に増えたので、CVRが低くてもやはり、スライドインCTAの効果は高いと言えるでしょう。

これらCTAの指標が改善すれば、オーディエンスの反応が良くなったと考えることができます。皆さんのブログでも、スライドインCTAの効果についてテストを行ってみてはいかがでしょうか。
 

ブログにスライドインCTAをインストールするには、次の2つが必要です。

1. WordPressのアカウントを利用できること。または、企業のウェブサイトにJavaScriptのコードを追加できること。
2. 無料のLeadinアカウント（こちらからご登録ください）。

WordPressのアカウントをお持ちでない場合は、この記事をウェブ管理者にメールで送って、Leadinのセットアップを依頼してください。それ以外はご自分で行っていただけると思います。

1つ目の条件があまりにも難しそうだと思った方へ。JavaScript、またはWordPressプラグインをサイトに追加するのは最初の1度だけです。その後は、新しいスライドインCTAをLeadinから簡単に作成できます。
 

１）WordPressプラグイン、またはスタンドアロンのウェブアプリを使用して、Leadinをウェブサイトにインストール

まず、Leadinに移動してアカウントを作成します。

WordPressをお持ちであれば、プラグインのインストールを促すメッセージが表示されます（こちらの説明をご参照ください）。

WordPressをお持ちでない場合は、ウェブサイトのHTMLでタグの前にJavaScriptのコードを追加するかを尋ねるメッセージが表示されます。Joomla、Drupal、Wix、Weeblyなど、ほとんどのコンテンツ管理システムで、その方法は同じです（こちらのガイドからご参照いただけます）。

HubSpotを使用してウェブサイトをホスティングしているユーザーの方は、こちらの説明に従い、Leadinを「Products & Add-ons」メニューからアドオンとして追加できます。（注意： Leadinアカウントをすでにお持ちの方は、アドオンを追加した後、古い方のアカウントを削除していただく必要があります。）

２）Lead Flowを作成し、「slide-in box」のタイプを選択

Leadinのセットアップが終わったら、まずLead Flowを作成します。Lead Flowは対話型ポップアップをオールインワンで作成できるツールで、コンテンツをオーディエンスに効果的に宣伝するために使用できます。

Lead Flowエディターにアクセスするには、画面上部のナビゲーションバーから「Lead Flows」をクリックし、続いて「Create Lead Flow」を選択します。

すると、カスタマイズオプションがいくつも表示されます。最初にLead Flowのタイプを選択してください。CTAをスライドインで表示させるには、「slide-in box」を選択します。（注意： スライドインを画面の右側と左側のどちらに表示するかを選択できます。）

次はいよいよ「Callout」、つまりCTAを作成します。CTAはオファーの内容を簡単に説明し、タイトル、テキスト、画像、テーマカラーなどによって訪問者の注目を集めるために作成します。

エディターの「Callout」ステップでは、次の操作が可能です。

1. 画像のアップロード（「Form」ステップでも可能）
2. コールアウトテキスト（メインヘッダー）の設定
3. ボタンのテキストの調整（「Form」ステップでも可能）
4. テーマ色の設定（Lead Flowでいつでも変更可能）

コールアウトを変更するたびに、変更後の表示をエディターの右側で確認することができます。たとえば下のように表示されます。

ここまで大丈夫でしょうか。では、続いてフォームを作成します。

Lead Flowの「Form」ステップでは、フォームにフィールドを追加したり、フィールドの言語を変更したり、オファーの価値について詳しい説明を追加したりできます。

「Language」では、CTAの編集不可能な部分（フィールドのラベルなど）の言語を変えることができます。現状では、フランス語、スペイン語、日本語、ドイツ語、ブラジルポルトガル語に設定できます。（これ以外で対応をご希望の言語がございましたらお知らせください。）

最後に、訪問者がフォームを送信した後に表示するサンキューメッセージを作成します。

このステップで、別のリソースやダウンロードのためのリンクを追加したり、下の例のような簡単なメッセージを入れたりできます。

３）オプションを設定

「Flow Options」セクションでは、CTAを表示する場所や、表示のためのトリガーなどを設定します。

最初に、Lead Flowの名前を設定します。（また、この画面でLead Flowを「Unpublish（停止）」することもできます。）ここで設定した名前は、コンタクトのタイムライン、および内部通知のメールにも表示されます。

続いて、CTAをどのページに表示させるかを設定します。Leadinの「exact match URL」オプションを選択すると、ワイルドカードの使用が可能になります。ワイルドカードとは、文字または文字列のプレースホルダ―として機能する、アスタリスクなどの文字を言います。たとえば「http://www.website.com/blog/*」の最後にある「*」がそうです。

ワイルドカードを使用して、CTAをブログのすべてのページに表示させたい場合は、URLの最後にアスタリスク（*）を追加してください。

次に、Lead Flowをトリガーするアクションを選択します。このオプションはLead Flowの種類に応じて変わりますが、スライドインの場合は次のオプションを選択できます。

• ページスクロール。訪問者がページを下方へ50%以上スクロールするとトリガーされます。
• 表示時間。ページの表示がX秒経過するとトリガーされます（7秒以上で設定できます）。

モバイルデバイスではLead Flowを表示させたくない、という場合は、下の画像のオプションで設定してください。（注意： Lead Flowはモバイルに完全に最適化されているので、よほどの理由がない限り、モバイルでも表示させることをお勧めします。）

最後に、このLead Flowで新しくフォームが送信されたとき、内部通知メールを送信するかどうかを設定します。通知を有効にすると、コンタクトを獲得するたびにメールで通知を受け取ることができます。

また、LeadinをEメールプロバイダーに接続させることもできます（詳しくはこちらをご覧ください）。Leadinをプロバイダーに接続させると、Lead Flowで新しくフォームを送信したコンタクトを、どのリストに登録するかを選択できます。

（HubSpotのユーザーの方たちへ： HubSpotでは、Lead Flowはフォームと同様に扱われます。訪問者がLead Flowから入力を行うと、その情報はフォームサブミッションとしてデータベースに登録されるため、そのフォームサブミッションをベースに、HubSpotからワークフローや自動メールのセットアップを行うことができます。）
 

４）CTAをプレビューして公開

Lead Flowsエディターには対話型のプレビュー機能があり、各段階のLead Flowのテストや動作チェックを行うことができます。このプレビューはデスクトップでも、タブレットやモバイルでも可能です。

Lead Flowを公開するには、画面の右上にあるブルーの「Publish（公開）」ボタンをクリックします。

公開を停止したい場合は、「Options」タブに移動し、画面上部にある「Unpublish」オプションを選択します。あるいは、Lead Flows Dashboardから直接停止することもできます。

Lead Flowの開始後は、Leadinダッシュボードからビューの数やコンバージョンの数をトラッキングすることができます。たとえば下の画像のように表示されます。

これで完了です。お疲れさまでした。上手くできましたでしょうか？

スライドインCTAを利用したことはありますか？ 下のコメント欄で、ヒントや苦労したことなどをお聞かせください。
 

ワードプレスにCTAを設定する方法は主に下記の3つです。

• 専用ツールを使用
• プラグインを使用
• HTMLコードを直書き

それぞれ詳しく見ていきましょう。
 

専用ツールを使用

ツールを使えば、ポップアップや追従ボタンなどのCTAも手軽に作成できます。専門的な知識は必要ありません。

月額数千円から1万円前後の費用はかかりますが、CTAの管理、更新、自動的な最適化などの機能も搭載されているので、コストパフォーマンスの高い方法といえるでしょう。
 

プラグインを使用

CTAの作成や管理ができる無料のプラグインを使えば、コストをかけずにCTAの設定や管理ができます。専門的な知識は不要です。

ただし、プラグインの使用には下記のようなデメリットがあります。

• ブログの表示速度低下
• バージョンアップ停止の可能性

プラグインは、導入数の多さや導入事例を参考にしながら選びましょう。
 

HTMLコードを直書き

ワードプレスのCTAを表示したい記事に、HTMLコードを直接書く方法です。設定方法としては難しくはありませんが、更新もすべて手作業になるので大幅な手間がかかります。

編集メモ：この記事は、2016年7月に投稿した内容に加筆・訂正したものです。Katherine Boyarskyによる元の記事はこちらからご覧いただけます。