ブログをスマホで見たときに上部にナビゲーションメニューが固定されてるほうがPVにも読者に優しいと思ったよ

ブログには上部固定ナビゲーションがあったほいがいいと思う話



僕はブログを読んでる途中で「あ、だいたい話の内容掴めたかな」って思ったら、他の記事を読みたくなるんです。

でもスマホだといちいちスクロールするのが面倒…。だからパソコンで読んじゃうんですが、僕のサイトは9割くらいの人がスマホから見てくれてるんですよ。

宮川 輝
スマホで読んでるときにすぐ違うページに行ける方法があれば便利だなぁ

と思ったので、スマホのときだけ上部にナビゲーションがくっついてくるものを実装しました。

プログラムができない僕は実装するまで5時間かかりました。もう変数もif文も見たくない。

でもね、とても快適なブログになったと思います。

スマホで見てるそこのあなた!上のほうに棒みたいなのくっついてきてるでしょ。今回はそれのお話でっす。

スマホで見たときに上部固定ナビゲーションを設置することで得られる効果って?

この上部固定ナビゲーションを設置することによって、3つの効果が得られると考えております。

1.PV(ページビュー)の増加

まずは全体的にPV(ページビュー)の増加が見込めるはずです。

スマホだと、ブログを読んでる途中で「もういいや!」ってなっても、次のページを探すまでにどうしても時間がかかるんですよね。

このブログでは一応、ある程度スクロールすると右下に”ページトップへ戻るボタン”が出るようになってるんですが、僕自身使ったことがほとんどないので、一般ユーザーの方もほぼ使ってないと思います。

なので、いつでも上部にメニューを開けるボタンがあれば、ワンタッチで次のページを探すことができるので、今まで飽きてページを離れてた人をちょっとだけ長く滞在させることができるはずです。

2.SNS流入の増加

そして、僕が設置した上部固定ナビゲーションにはメニューに加えて、すぐにSNSで共有できるボタンも設置しました。

いまの僕のサイト、検索ばっかりでSNSからの流入がほぼゼロ。悲しい。泣いちゃう。

よくパソコンから見たときにSNSのシェアボタンがくっついてくるサイトってありますよね。あれはやっぱり読んでる途中に設置すること絵すぐにシェアしてくれる人が増えるからなのでしょう。

スマホのユーザーが全体の約9割を占めている僕のサイトでも、必須だと思い追加しました。

3.ユーザービリティの向上

あとはこれですね。

宮川 輝
まぁこのブログなんて使いやすいの!また来ようかしら!

読者にとって、スマホの画面に他のページへ飛べない画面が映し出され続けるのは不快なはずです。

「なんだこの記事、面白くねーじゃん!」とか「他の記事ねーのかよ!」って人は、一番下or一番上までスクロールすることなく離脱してしまうでしょう。

だからやっぱり、ページ上にいつでも逃げ道を作ってあげるというのは読み手にとって心の安心。とっても優しいと思うのです。

上部固定ナビゲーションを実装するときに参考にしたサイト。

上部固定ナビゲーションの実装は簡単じゃないので、プログラムの知識がない人にはオススメしません。

下手するとページエラーで画面が真っ白になります。今回の実装でぼくは3回くらいなりました。頭真っ白になりました。

HTML・CSS・JavaScript・JQuery・PHPがわかる方であれば問題ないと思いますが、SEO的によくない配置にならないようにだけ注意してください。(navタグの複製など)

僕は下の3つのサイトを参考にして作りましたので、気になったらチェックして見てくだせぇ!