ブログのスマホ対応。使いやすいデザインのグローバルメニューでナビゲーション

ブログのスマホ対応について。
スマホ表示のとき、メニューをいちばん下に固定して、グローバルナビゲーションを使いやすいデザインに変更しました。
どれくらい効果があるか、Googleアナリティクスのイベントトラッキングを使って検証します。

読者の3分の2はスマホから
ハンバーガーメニューについて
Googleアナリティクスの数値
変更理由と効果測定
ボトムナビゲーションの実装
- メニューを増やす場合
効果測定の準備は次回に

読者の3分の2はスマホから

Googleアナリティクスの数値から、わたしのブログの約65%が、スマホから見ていただいてることを最近、知りました。
「スマニュー砲」があった11日のデータは外しています。rubirubi.hateblo.jp

タブレットが約3~4%、つまり、デスクトップ（PC）の比率は全体の3分の1以下です。

※データは、Googleアナリティクスの[オーディエンス > モバイル > 概要] から知ることができます。さらにその下の[デバイス] で、おおよその機種もわかります。

わたし自身、ほとんどはPCでブログを書いているのと、ブログのカスタマイズやプログラミングのことなどが主な内容なので、かってな思い込みですがPCで読む前提で記事を書いていた気がします。

これまで、自分のスマホで誤字脱字などのチェックはしていましたが、スマホ対応というものをそれほど、意識していませんでした。

わたしが使っているテーマ「Innocent」は、レスポンシブデザイン対応なので、正直、頼り切った状態です。

前回の記事にも書きましたが、スマートニュースからの直帰率は約95%でした。
もう少し、せめてあと1ページでも興味を持ってもらいたかったなぁ・・って、ちょっと思ったりもしました。

そんなこんなで、いままでやっていなかった、スマホ対応をやってみようということに。

ただ、スマホ対応といっても何から手をつけていいか・・。

いろいろと考えた末、次のアクションにつなげるには、使いやすい（押してもらいやすい）グローバルメニューが大事かな？と。

ハンバーガーメニューについて

現時点では、スマホ画面にはハンバーガーメニューを採用しています。

ハンバーガーメニューに関しては、いろいろ賛否あるようですが、個人的には見た目もスッキリしてスタイリッシュだし、とても気に入っています。

ただ、一度「メニュー」を押してから、中身を展開しますので、メニューに何があるのかは、1クリックしないとわかりません。

メニューを押してもらいやすくするには、中身がすでに表示された状態のほうが、よい気がします。
【はてなブログをカスタマイズ】スマホのグローバルメニューをPCと同じように表示させる方法 - ひげしげノート
ひげしげさんのおっしゃるとおり、開かれたメニューのほうがたしかに親切♪

さらに、最下部に固定されていると、よりわかりやすそうです。
LINE・ツイッター・インスタグラムや、たくさんのアプリで採用されていますし、多くのかたに馴染んでもらえるデザインですね！

Googleアナリティクスの数値

ちなみにこちらの記事によると、直帰率はあまり気にしなくてもよいようですが。

直帰率は低いほうがいいだろう（参考値：僕のブログは65％）

(平均ページ)滞在時間は長いほうがいいだろう（参考値：僕のブログは3分50秒）

引用元：ブログでは「直帰率」を気にする必要はない【滞在時間を見るべき話】

わたしのブログの場合、

直帰率65%
平均ページ滞在時間1分半

でした。データの絶対数が人気ブログとはぜんぜんちがうと思いますが・・、直帰率はブログとしてはまずまず？滞在時間は短いですねー。

※平均ページ滞在時間は、Googleアナリティクスの[行動 > サイトコンテンツ > すべてのページ] から見ることができます。

今回のメニューの変更は、ナビゲーションをわかりやすくして次のアクションにつなげることが目的なので、ページ滞在時間というよりも、（サイト回遊率の上昇による）直帰率の減少、PV数・平均セッション時間の増加は見込めるかも、しれません。

ただ、いろいろな記事を参考に読ませていただきましたが、直帰率・平均ページ滞在時間・平均セッション時間等の数値は、サイト・記事に対するGoogleの直接的な評価指標ではないような感じでした。
【平均セッション時間】の目安は？滞在時間を長くする方法10選 | ブログ部

とはいえ、そもそもGoogleアナリティクスの項目となってる以上、大事な指標であることは変わりないだろうし・・。

SEO的なことをいろいろ考えるうちに、頭がグルグルしてきて・・(＠_＠;)
最終的に思考停止に、オチいりました笑。

変更理由と効果測定

とりあえず、グローバルナビを最下部固定の使いやすそうなデザインに変えてみることにしました。

常にメニューがあるのはジャマ、という意見もあるようですが・・、スマホって縦長だし、視線は真ん中だし、そんなにジャマじゃないよなぁ、と思うことにして。(^.^)

変更の理由をまとめると。

スマホだと、記事全文のあとにサイドバーがだーーっと続くので、どこを押していいかよくわからないかも
グローバルナビがある上まで戻らないと、ナビが押せない
ナビゲーションが下にピタッとあるのはインスタとかツイッターみたいで馴染みやすそう
読んでほしい記事なども固定ナビにおけばオススメしやすい

また、下記についての検証も同時にすることにしました。

ブログ内の回遊率は上がる（＝直帰率改善）か？
グローバルナビのどこが押されているのか？
そもそもグローバルナビって使ってもらっているのか？

こちらに関しては、Googleアナリティクスのイベントトラッキングで測定可能かと思います。
イベントトラッキングはタグの設置など、手間がかかる印象がありますが、Googleタグマネージャを使えばかんたんに利用できるようになります。

イベントトラッキング、Googleタグマネージャの設置方法や使い方などについては「効果測定の準備」でのちほどまた次回に、書かせていただきたいと思います。
（2019/8/25追記：書きました→効果測定の準備）

ボトムナビゲーションの実装

元CAバンビさんのこちらの記事を参考にさせていただきました。ありがとうございます。
【レスポンシブ】スマホ固定フッターメニュー★ボトムナビゲーションでアクセスUP！ - Bambi's BLOG @ hatena

そのままでもよかったのですが、コードを少しだけ変更させていただきました。
JQueryを利用して、クリック（スマホだとタッチ）したとき階層メニューを閉じるようにしました。

変更したコードはこちらです。お好みだと思いますが、もしこちらを使う場合、

HTMLの上部分を[ヘッダ > タイトル下] に、
HTMLの以下を[フッタ] に、
CSSの部分を[デザインCSS] に貼り付けてください。

See the Pen スマホメニュー by いなり寿子 (@heureux_yoppy) on CodePen.

※↑こちらの「Result」にはアイコンが表示されていませんが、実際は表示されます。

また、わたしは一番左を自己紹介ページ(about)へのリンクにしていますが、コードは元CAバンビさんの「 」のアイコン・項目名「ホーム」のままとなっています。
下記はわたしの変更例ですが、もしアイコンや表示される文字を変える場合、下記を参考にHTMLのコードを書き換えてください。

<a href="#">
<i class="blogicon-home"></i><br><span class="mini-text">ホーム</span></a>

↓

<a href="https://rubirubi.hateblo.jp/about">
<i class="blogicon-mill"></i><br><span class="mini-text">自己紹介</span></a>

なお、iPhone X への対応として、[設定 > 詳細設定 > headに要素を追加] の部分に、下記のコードを追加する必要があります。
くわしくは、上記で紹介した元CAバンビさんのページに解説されています。

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

メニューを増やす場合

たとえば、4つのメニューを5つにしたい場合、HTML側にリストタグ（<li>～</li>の部分）で囲まれた部分を追加・編集して、CSS側のコードを1行書き換えます。

仮に「ホーム」と「おすすめ」のあいだに「自己紹介（aboutページ）」を入れたい場合は、[ヘッダ > タイトル下] で下記のコードを

<li>ホームのコード</li>と<li>おすすめのコード</li>

のあいだに追加します。

    <li>
	<!-- ↓↓項目2. 自己紹介 ＃の部分にaboutページのURLを入れる -->
        <a href="#">
	<i class="blogicon-miil"></i><br><span class="mini-text">自己紹介</span></a>
    </li>

CSS側は、下記の部分の「width:25%;」を、「width:20%;」に書き換えます。これは、全体を100％としたときのアイコンの数で割った数値になります。

ul.bottom-menu li {
  float:left;
  width:25%; ←この部分を書き換える
  background-color:#f5f5f5;/*背景色*/
  list-style-type:none;
  text-align:center;
  font-size:25px;/*アイコンのサイズ*/}