ユーザーの離脱を改善するシンプルな2つのアイデア

目次に戻る

目次の下に表示してみよう

この仕組みは何も検索結果だけではなく記事内でも活用できるはずです。

例えば記事に訪れたユーザーが目次を見て「欲しい情報ではなかった」と感じた時に関連のありそうな別（ページ）のコンテンツをさりげなく提案できます。

サンプルでは目次で花の種類を、その下にスクロールナビで「お祝いにおすすめの花」「結婚式に飾りたい花」「花言葉のいろいろ」「男性に人気の花ランキング」「女性に人気の花ランキング」など用途に応じた別ページへのリンクを表示しています。

実際にはこんな感じ

基本的なコードは以下のようになっています

html

<div id="st_listnavi_wrapper">
<ul class="st-sc-listnavi-box">
	<li class="st-sc-listnavi"><a href="#">お祝いにおすすめの花</a></li>
	<li class="st-sc-listnavi"><a href="#">結婚式に飾りたい花</a></li>
	<li class="st-sc-listnavi"><a href="#">花言葉のいろいろ</a></li>
	<li class="st-sc-listnavi"><a href="#">男性に人気の花ランキング</a></li>
	<li class="st-sc-listnavi"><a href="#">女性に人気の花ランキング</a></li>
</ul>
</div>

CSS

.post .st-sc-listnavi-box {
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	padding:5px!important;
}

.post .st-sc-listnavi{
	display: inline-block;
	margin-right:3px;
}

.post .st-sc-listnavi a{
	display:block;
	border: solid #f3f3f3 1px;
	padding: 3px 10px;
	border-radius: 3px;
	text-decoration: none;
	color: #757575;
	font-size:90%;
}

※適宜調整して下さい

アドセンス広告で離脱させるのも1つの手法ですが「サイトをもっと知ってもらいたい」「ファンになってもらいたい」ならこんな方法も良いのではないでしょうか。

読み始めたが途中でめんどうになった

興味を持って読み始めたけど思ったより記事が長かったりで途中でめんどくさくなった。そんな経験はありませんか？

『戻るのも、目的の場所を探すのも面倒』

と離脱してしまうユーザーには「求めているであろうコンテンツ」をいつでもわかりやすく用意してあげると親切です。

以下では「人気のお花ランキング」をユーザーは知りたいであろうと仮定して

1. 「人気のお花ランキング」のボタンを用意。
2. ユーザーが通り過ぎたらボタンを上部に固定
3. 該当記事まで来たらボタンは消える

という仕組みです。

図ではわかりやすく露骨に黄色のボタンとしていますがこの記事のように透過背景で設置するのも1案だと思います。

あくまでもポイントはリンクを「見て欲しい箇所（営業）」ではなく、「ユーザーが求めているであろうコンテンツ」にリンクさせることです。

ENJI

指定の範囲内だけリンクを表示させることで該当するコンテンツでも表示されるという不自然さをなくせるのもいいですね

実装はposition: stickyを使用した非常にシンプルなものです

<div>
    <p style="position: -webkit-sticky;position: sticky;top: 0;">
       <a href="#hoge">目次に戻る</a>
    </p>
    ～文章～
    <!-- ここまで追いかける -->
</div>

position: stickyは親及び先祖要素にoverflow:hidden;が指定されている場合や対応していないブラウザもあるので注意して下さい。

position:stickyの対応状況

他にもサイトや記事によって色々な見せ方が出来ると思います（ボタンではなく画像や広告にしちゃうとか）。