顧客がお金を出して買う本とは違い、無料が当たり前のWebコンテンツは斜め読みが基本。沢山文字を書いたとしても、その殆どが読まれる事は無く、見出しや画像だけでユーザーはコンテンツを読んだ気になります。
いくら素晴らしい良いコンテンツを作っても、その先の「読まれる仕掛け」をしなければユーザーは読んではくれません。
今回はちょっとした細工で、コンテンツの読み込みを手助けしてくれる仕掛けを紹介したいと思います。
記事を読むのに必要な時間を表示
▲上記例:Positionlyのブログ記事ページ
コンテンツマーケティングでは、長文の文章やインフォグラフィックなど「読み込まなければ内容が掴めない」コンテンツが多い傾向にあります。最後まで離脱せず、ユーザーに読み込んでもらう為の仕掛けとしてスクロールバーに読み込みに必要な時間を表示させる方法があります。
実装方法
スクロールバーに時間を表示されるJqueryのライブラリを利用する事で直ぐに実装出来ます。
スクリプトダウンロード:jQuery Reading Time
スクリプトを自サーバー内に設置するか、もしくはgithubに設置あるスクリプトを読み込む事で実装が完了できます。
直ぐに試されたい方は下記コードをhead箇所に挿入すれば実装完了です。
<script type="text/javascript" charset="utf-8" src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="//raw.github.com/themeskult/jquery-reading-time/master/jquery.readingTime.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.post').readingTime();
});
</script>
後は文章量(スクロール量)で自動的に読むのに必要な目安時間をJavascript側で計算し、表示してくれます。
WordPressに設置する場合は、投稿記事ページのみに表示される様、is_single()関数を用いてJqueryスクリプトの読み込みを制限しましょう。
例
<?php if(is_single()){ ?>
<script type="text/javascript" charset="utf-8" src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="//raw.github.com/themeskult/jquery-reading-time/master/jquery.readingTime.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.post').readingTime();
});
</script>
<?php } ?>
目次スライダー
ページ内の見出し文毎に自動スクロールするリンクを表示する仕掛けです。ページをスクロールしても目次のバーがスクロールに合わせてついてくる為、ユーザーは常に目次を見る事が出来ます。
これにより、例え縦に長いコンテンツで合っても、ユーザーは興味のある章に直ぐに飛べる為、内容の理解を促進する事が出来ます。
実装方法
ページ内リンク
ページ内を飛ぶリンクはページ内リンクで実装出来ます。
目次側
<a name="アンカー">目次タイトル文</a>
見出し文側(h2の場合)
<h2 id="アンカー">見出し文</h2>
スライドする目次バー
スクロールしても付いて来る目次バーを実装します。
これにはJqueryプラグインStickUPで簡単に導入できます。
StickUpの場合、見出し箇所に差し掛かると、同じ目次タイトルが自動的に強調され、ユーザーが一目でどの箇所を閲覧しているのか認識する事が出来ます。
スライドしてお勧めの記事を表示
ページ下部にスクロールが差し掛かると、右下からスライドしてお勧めの記事タイトルを表示する仕掛けです。
ユーザーが閲覧している記事と関連する別ページのタイトルを表示し、より多くのページを閲覧してもらう方法です。固定された記事欄とは異なり、スライドという動きを付けながら表示する為、ユーザーの視線を向けさせ、クリック率を高める事が出来ます。
実装方法
WordPressの場合
プラグインnrelate Flyoutをインストールする事で簡単に導入できます。
関連する記事を自動的に選択し、スライド形式で表示する所までひと通りやってくれる便利なプラグインです。
スクリプトから実装する場合
JQueryプラグインEnd of Page Slide Out Box with jQueryを利用する事で簡単に導入出来ます。
関連記事の選択部分の実装は別途行う必要がありますが、スライド形式で表示するにはこのプラグインで実装が終わります。
まとめ
その他にも関連コンテンツを表示するWordpressプラグインやページを離脱しようとする際にオファーを表示するポップアップなど様々な改善手法があります。
今回はそれ程時間も掛からず実装できる改善方法を紹介しました。これら改善によって、多くのユーザーにコンテンツを読んで理解してもらい、認知度を上げればと思います。