人生RPG

2児のパパで今年30歳の冒険者(サラリーマン)が日々の生活を通して勇者(自由を手に入れた者)を目指すサクセスブログです。

人生RPG

遠回りのサイトになってない?「TOPへ戻る」ボタンを設置して回遊率を高めよう

SPONSORED LINK

f:id:boukenshaLv1:20180721141643j:plain

こんにちは!最近、記事の文字数が5000字を軽く超えてしまう冒険者Lv.1(@boukenshaLv1)です!!

よく自分のブログをチェックするんですが、こんな悩みがあります。

ページトップに戻るのにスクロールめんどくさい

ブログトップに行きたいけど記事の下にそのボタンが無い

こういう状態のサイト(ブログ)ってたくさんありますよね。

そして、長文の記事だとすっごいめんどくさい!
適切な場所に適切な行動ボタンが欲しーーー!」と、読者目線で思います。

多くの読者は知らない人が書いているブログを見ているのだから、たとえ良記事があったとしても知らないのでブログから離脱してしまうんですよ。

ブログ内の導線がしっかりしていると次々と読みたい記事を回りユーザビリティが上がっていきます。

記事概要

この記事では、読者がサイト内を歩くときに遠回りをしないように「TOPへ戻る」ボタンを設置して労力を軽減してあげよう!というカスタマイズ方法を紹介しています。

TOPへ戻るボタンの実装イメージ

【サイトトップページでの表示】

f:id:boukenshaLv1:20180721114340p:plain


【記事ページでの表示】

f:id:boukenshaLv1:20180721114037p:plain

参考にした記事

azanaerunawano5to4.hatenablog.com

とても分かりやすい解説で、すぐに実装完了しました。

「TOPへ戻る」ボタンにはいろんなデザインカスタマイズがありますが、
この方のデザインは
・ちょうどいい大きさ
・半透明なので目立たなく画面に表示されても邪魔にならない
・どんなデザインのサイトでも違和感なく馴染むシンプルなデザイン

という点がとても気に入っています。


「TOPへ戻る」ボタン カスタマイズ方法

今回コードを記述する場所は
・「headに要素を追加」
・「フッター」
・「デザインCSS」

の3か所になります。

いずれもコピペだけで出来るので初心者の方も簡単に実装できます。


head内にコードを記述する

このコードは<head>~</head>内に記述するのですが、はてなブログの場合この位置は
「設定」→「詳細設定」→「headに要素を追加」になるので

「headに要素を追加」の項目に、以下のコードをコピペして記述してください。

<!-- ↓TOPへ戻るボタンの画像読み込みコード↓ -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<!-- ↑TOPへ戻るボタンの画像読み込みコード↑ -->


このコードは「TOPへ戻る」ボタンのアイコンを呼び出すためのコードです。

カスタマイズ初心者は[デザイン]でのカスタマイズ以外でのコード記述をするカスタマイズ方法は見慣れないかもしれませんね。


フッターにコードを記述

次に「デザイン」→「カスタマイズ」→「フッター」の場所に以下のコードをコピペで記述します。

<!-- ↓ページTOPに戻るボタン↓ -->
<div id="page-top">
  <a id="move-page-top"><i class="fa fa-chevron-circle-up fa-5x"></i></a>
</div>
<script>
  $(window).scroll(function(){
    var now = $(window).scrollTop();
    if(now > 500){
      $("#page-top").fadeIn("slow");
    }else{
      $("#page-top").fadeOut("slow");
    }
  });
  $("#move-page-top").click(function(){
    $("html,body").animate({scrollTop:0},"slow");
  });
</script>
<!-- ↑ページTOPに戻るボタン↑ -->

このコードを変えることで
・「アイコンデザイン」
・「戻るスピード」
・「どれくらいページが進んだら表示されるか」
・「どの位置まで戻るのか」

などを設定変更できます。

私は初期(上のコード)のままで満足しているので、変更していません。


デザインCSSに記述する

最後に「デザイン」→「カスタマイズ」→「デザインCSS」に以下のコードをコピペして記述します。

/* ↓ページトップへ戻るボタン↓ */
/*上に戻る*/
#page-top {
  display:none;
  position:fixed;
  right:10px;
  bottom:20px;
  margin: 0;
  padding: 0;
  text-align:center;
}
#move-page-top{
  color:rgba(0,0,0,0.4);
  text-decoration:none;
  display:block;
  cursor:pointer;
}
#move-page-top:hover{
  color:rgba(0,0,0,0.6);
}
@media only screen and (min-width: 400px){
  #page-top{
    right:50%;
    margin-right: -450px;
  }
}
/* ↑ページトップへ戻るボタン↑ */


ボタンの位置や色などを変更したい場合は、このコード内で変更できます。

こちらも私は初期設定のままで不便を感じていないので変えていません。


「TOPへ戻る」ボタン まとめ

デザインを変えて使いたい方は上記で紹介したサイトに詳しく書いているので参考にしてみてください。

今回「TOPへ戻る」ボタンを実装するにあたり、何個か違うコード・デザインのものも試してみました。

ボタンに「TOPへ戻る」というデザインのものもあり「分かりやすくて良いじゃん」と思いましたが。スマホで確認すると結構大きく、透過もされていなかったので画面が小さいスマホでの観覧が更に見にくくなるという状態になりました。

コードをいじってみたもののなんか透過されてないボタンが画面に表示され続けているのはどうやっても見にくいなと思い、文字無しアイコンのみで透過されているこちらのボタンに落ち着きました。

最近はスマホでサイトを見るユーザーが圧倒的に多いので、PCデザインよりスマホデザインに気を付けた方がいいです。
Googleもスマホデザインを評価してますからなおさら(汗)

と偉そうに言ってますが、私もスマホデザインがイマイチで綺麗なサイトではないです。
今テストブログを立ち上げてカスタマイズ絶賛調整中です。


回遊率を上げるために今回「TOPへ戻る」ボタンを設置しましたが、他にも

・記事下に「ブログTOPへ戻る」ボタンを設置する
・サイドバーに固定目次を設置して戻りたい場所に戻れるようにする
記事内に関連記事を設置する

など、読者が次の行動に迷わないようにしてあげる対策はいくらでもあります。

今回「TOPへ戻る」ボタンを優先した理由は、私のブログヘッダーは「どのページでもブログトップに行けるから」です。

▼こちらのカスタマイズ記事をご覧ください▼


ヘッダー画像さえクリックできればブログトップに戻れるので、ページの一番上までいければよかったんです!

なので、今回「TOPへ戻る」ボタンを設置して導線を作りました。


サイト管理者は、読者の気持ちを第1に考えないといけないのでこういった細かい気配りをサイト全体に施しましょう。