ブログへ導入した固定メニューバーの効果に一同驚愕! 【A/Bテスト】

当記事は、ブログへ導入した固定メニューバーの首尾をA/Bテストによって確かめ、結果をまとめたものとなります。

 

私のブログに来訪した───するであろう各イケメンウェブ管理者ないしブロガーの方々は、今回の結果のみでそれの有用性を判断するのではなく、あくまでつまらぬ一例としてお考え下さい。

 

 

※能書きに興味ない人は、目次の☆(固定メニューバー導入 A/Bテストの結果)を押してそこから読み始めることを推奨

 

 

あらまし

モバイルファーストインデックス

 

近年、スマートフォンやタブレットを使用するユーザー、いわゆる "モバイルユーザー" が急増し、今やインターネット使用者の大半がモバイルユーザーとなった。もはやPCユーザーはマイノリティとなりつつあり、元マジョリティであるPCの利用率が、現時点最弱派閥であるタブレットに敗北する日もそう遠くはない。

 

【現在のインターネットにおけるデバイスの基本利用率】

  • スマートフォン - 70
  • パソコン - 20
  • タブレット - 10

 

当ブログ来訪者のデバイス比率も以下のようになっている。どのウェブサイトもおおむね同様のサマリーを示しているものと思われる。

 

インターネットの利用デバイス比率


 

モバイルユーザーの増加に伴い、Googleは数年前より "モバイルファーストインデックス" ───通称MFIを掲げ、モバイルユーザーの利便性を第一にウェブサイトの運営をするよう、ウェブサイト管理人へと通達した。

 

MFI施行後は、モバイル表示に不適当なウェブサイト*1はSEO面で低評価を受け、コンテンツの内容如何に依らずとも検索順位を下げられることとなる。

 

したがって、多くのウェブサイト管理人は、モバイルユーザーの利便性を最優先にレイアウトを考えるようになっている。

 

そうしてモバイルユーザーはVIPと化した。

 

 

モバイルの欠点

モバイルの欠点

 

タブレットはともかく、スマートフォンのモバイルには欠点が多く、他の二種に比べて利便性を大きく損なっている。

 

例えば

 

  • 表示領域が狭く、情報量が少ない。ページの全体像や現在位置が上手く掴めない
  • スムーズに読み進みにくいことから時間経過とともに記憶が劣化し、ページの最初と最後で話が繋がりにくい
  • マウスホバーによる気付きが発生しない(クリック可能な要素に気が付かない恐れがある)
  • 表示領域が狭いが故に格納されてしまった情報*2で機会損失
  • 読み込みが遅い
  • サイドバーコンテンツが記事下に並ぶことからページが縦長になりやすく、サイドバーが目に入りにくい。これによる機会損失は計り知れない
  • 些細な事でユーザーのストレスが蓄積しやすい

 

上記のような背景があるためか、某ウェブコンサルタント(大嘘)はモバイルユーザーについて次のように述べている。

 

モバイルユーザーは

  1. 読まない
  2. 信じない
  3. すぐ帰る
  4. 理解度が低い(研究によるとPCの半分以下とされる)

 

上記は一見すると悪口のように聞こえるものの、あくまでモバイルの特性によって生じる傾向を述べているに過ぎず、スマホを使っている人がバカだと言っているわけではない。 デバイスの欠点上そうなってしまうだけのこと。

 

(ソース貼付はしないけれど、発言者はユーザビリティ研究の第一人者であるヤコブ・ニールセン博士とだけ言っておく)

 

 

ユーザーが深く読まずにすぐ帰るからこそ、そこを改善する努力が必要になるだろうし、上記の傾向をいかに抑えることができるかという部分で、管理者はウェブを設計しなくてはならない。

 

そこで今回のテーマに繋がる。

 

 

メニューバー / グローバルナビ

メニューバー / グローバルナビ


他ページへの導線である内部リンクを散りばめた横長のセクター、俗にいう "メニューバー""グローバルナビゲーション" を設けているサイトは多数派となっており、サイトにメニューバーを備えることは常識と言っていいほどだ。

 

これらはあらゆるウェブにおいておおむね共通した構造、設置位置となっていることから、ユーザーの使用率はそれなりに高く、そのウェブサイトに興味を抱いたユーザーがメニューバーを起点として回遊することが多くなっている。

 

要はユーザビリティ向上に大きく貢献するものがメニューバー。メニューバーがユーザーのニーズを顕在化させて、新規ユーザー獲得のきっかけとなっているケースも少なくはないだろう。

 

 

だが、メニューバーは確かに便利ではあるが、例えば縦長になりやすいスマホのページでは、多くの場合ヘッダーに隣接したメニューバーはコンテンツ部から大きく離れてしまう。すると視界に入ることが少なくなる上に、上部に戻って押しに行くのも面倒くさい───つまり効果が薄いという欠点がある。

 

それを解消するのが固定化。

 

『メニューバーをスクロールに追従させ、常に画面へ表示させることによってユーザビリティを向上させようじゃないか』というのが固定メニューバーなるものの発想だ。

 

上記には二種類ある。 

 

上部固定メニューバー

上部固定メニューバー

画面の上部に追従させるタイプ。視界の妨げになりにくい反面、気が付かれずに終わることもしばしば。あとモバイルの場合、指をいっぱいに伸ばさないと押せない。押しにくい。

 

下部固定メニューバー

下部固定メニューバー

画面の下部に追従させるタイプ。画面の下部を占有しているせいでコンテンツに目を通しにくくなるが、認知性と押しやすさには優れている。

 

反面、ミスタップが発生しやすく、機種ないしOSによっては表示にバグが生じるという欠点がある。

 

 

固定メニューバーの欠点

固定メニューバーを導入した場合、設定する幅やユーザーのデバイスにも依るが、多くの場合は画面の約10%近くをメニューバーが占有することとなるため、モバイルの欠点である "表示領域の狭さ" をより顕著にしてしまう。

 

これによりユーザーの理解度はまた一段と低下し、場合によっては障害物と認識されてしまうなど、僅かながらにストレス体験を生じさせる恐れがある。

 

 

メニューバーへ導入する余地のあるモノ

ウェブサイトによって表示させるべきものは異なる。ここでは一般論として表示させる余地があるものを列挙する。

 

1.トップページ

ランディングページから入ったユーザーが、『サイトの全体像を掴みたい』と思った際に使用する。あるいは単なる回遊のアレコレ。

 

2.記事カテゴリ

記事のソートに便利。特定のジャンルに興味を持っているユーザーのニーズを顕在化させることができる。

 

ただし、多くのブログは記事カテゴリが乱雑すぎるため、リストを配置しきれないか、あるいはユーザーが選択回避の法則で選択することをためらうことになる。カテゴリがまとまっていないウェブサイトには配置するべきでない。

 

逆に、カテゴリが上手くまとまっているなら絶対にチョイスするべき項目となる。

 

3.人気記事

メニューバーに人気記事欄を導入しているウェブサイトは少なくないものの、ユーザーが求めているのは自分の興味関心と関連を持つものであって、ウェブサイトのベストセラーをただ列挙しても効果は期待できない。

 

ただし、特定のネタのみを取り扱う専門ブログであれば、大いに効果を発揮するものと思われる。

 

4.上に戻る

使用率自体は低いとされているが、とりあえずお作法として導入されていることが多い『上に戻る』ボタン。記事が長いウェブサイトなら導入して良いと思う。一記事1000文字も書かないようなら不要。

 

5.SNSページ

自分のSNSアカウントへの導線。SNSとウェブで相互に活用したい人にとってはアリ。

 

6.お問い合わせ

よほど活気のあるウェブサイトでない限りは誰も押さない。だいたい不要。

 

7.aboutページ

自己紹介やおことわりを明記したaboutページ。リピーターを獲得したい趣味ブロガーは導入の余地アリ。

 

8.SNSシェアボタン

基本的にユーザーは、ブラウザ備え付けのシェアボタンを利用することが判明していることから、固定メニューのSNSシェアボタンは不要。要らないと言っている人しか見たことがない。採用している人の母ちゃんはでべそ。

 

9.Amazon欲しいものリスト

かわいいおにゃのこブロガーなら買ってもらえるかもね(´癶ω癶`)

 

 

なお、項目数は選択回避の法則やタップ要素の幅を考慮し、2~5つの間に留めることが望ましい。

 

また、グーグル曰く、タップ要素のサイズは最低限48px以上が望ましいそうだが、私はコンパクトに納めるためにあえて43pxにしている(していた)。

 

 

私がチョイスしたもの

先ほども見せているが、私がチョイスしたものは以下の4つ。

 

メニューバー 項目

 

1.ホーム(TOP)

常識として。一番左に導入するのはインターネットのスタンダード。

 

2.記事一覧(アーカイブページ)

ホームと構造はほぼ同じであるものの、アーカイブページの方が表示件数が多いため採用。隣のホームボタンの意味がわからない人もおそらく一定数いるだろうし。

 

3.ガイド(サイトマップ)

『このブログ is 何?』と首をひねったランディングページユーザー(初見)のために作ったページ。

 

押してみないことにはどんなページなのか予測できないところが難点。直観性は著しく悪い。改善もとい入れ換えの余地ありけり。

 

4.上に戻る

『画面下部右端は上に戻るボタン』という考えは、それなりにメジャー(?)であることから採用。

 

ミスタップされたら多大なストレスを与えることは必至。

 

カテゴリ一覧を採用しなかった理由

本来はカテゴリ一覧を採用しようと思っていた。で、少しでも重くしたくないことから、JavaScriptを使わずに導入しようと思った。

 

だがJavaScript無しで作成すると、リスト一覧の閉じ方に難があることに気が付き、押したユーザーが上手く格納できずにイラついて離脱する恐れがあったためボツ、断念。

 

まぁ結局入れろって話になるわけだが、なるべく使いたくない。拙者イヤでござるイヤでござる><

 

(上部メニューバーに使ってるくせにこの言い草)

 

 

☆固定メニューバー導入 A/Bテストの結果

固定メニューバー導入 A/Bテストの結果


Aパターン(導入前)とBパターン(導入後)の比較、これを "A/Bテスト" と呼び、もっぱらインターネットマーケティングにおける施策判断のための試験として用いられている。 

 

A - 集計期間

固定メニューバー導入日である1/06から一か月後の2/06まで

 

B - 比較期間

導入日前の一か月間(12/05~翌年1/05)

 

 

AとBのユーザーサマリーを比較するA/Bテストの結果は以下のようになった。

  

  スマホ タブレット 判決
直帰率 +0.17% +1.05% 悪化
離脱率 +3.54% 悪化
平均滞在時間 +5.52% 好転
平均セッション時間 -8.30% -6.89% 悪化
ページ/セッション -2.02% -1.72% 悪化
ユーザーあたりの
セッション数
+2.12% 好転
備考 1.直帰率および離脱率は数値が低いほど良い(上昇=悪化)
2.デバイス分けが無い項目は分割した計測ができなかった

 

...。

 

...全然改善されてないし、それどころかトータルで見たらむしろ悪化してるじゃねーか。

 

上記データを鑑みても、大部分のスコアが低下しているのに、どういうわけか平均滞在時間が5%も上昇している謎。可能性としては表示領域が狭い分、読みにくくなって滞在時間が引き延ばされたと考えるか、あるいはただの偶然や誤差か。

 

正直なところ、固定メニューバーによってユーザーの動きにどのような変化が現れたのか、私では推測できそうにない。だが少なくとも『効果覿面ではない』ということだけは確かである。

 

 

ところで、まれに他のブロガーの記事で『固定ナビでアクセス倍増!w』などと聞こえの良いことを謳っていたりするが、恐らくはアクセス稼ぎのためにタイトルを盛っている可能性が高い。そう、今日の私の記事(一同驚愕!)のように。

 

確かに、サイトの性質に合致したメニューを配置することができれば、数パーセントのPVアップが見込める場合もあるだろう。だが、倍増することはまずありえない。理由は後述。

 

 

まとめ

固定メニューバーの有効性の無さに一同驚愕!!

固定メニューバーの有効性の低さに一同驚愕!!

 

結論 - ユーザーはメニューバーなんて毛の先ほどもありがたがっていない。少なくとも私のブログにおいては。

 

それどころか、読了率を低下させて結果むしろマイとなる可能性すらある。今回数値としてマイナス傾向が示された以上は、むしろマイに転ぶ改悪となる可能性が大きい。(私がネガキャンのために虚偽の結果を掲示している線も考えられるが)

 

固定メニューバーはブログの回遊を高めて満足度を向上させることはおろか、画面領域10%の占有が、知らず知らずのうちにユーザビリティを低下させていると考えるのが妥当だ。

 

 

とはいえ、たかだか一か月間の拙いテスト───期間中に出した記事の内容云々など、細部要素を度外視している───ため、今回のケースだけで有用性無用性を判断することもできない。冒頭でも述べている通り、あくまでつまらぬ一例として参考程度に留めてほしい。

 

私は今後も様子見がてらに件のものを採用し続ける所存であるものの、以降も優れない兆候が見られるようなら外す予定だ。もし今回のテストが単なる下振れだったなら、今後むしろプラスに寝返る可能性もある。

 

ということで、今後私のブログからメニューバーが撤去された場合、それは本格的に "メニューバーがダメだったという証拠" ととらえていただければ幸いである。

 

まぁ結論を急ぐ前に、そのうち気が向いたら今度は上部に固定してテストしてみようかなーと思っていたりいなかったり。コード弄るのめんどくせ。

 

 

固定メニューバーが有用となるケースの想定

モバイルユーザビリティ テスト

 

専門ブログならともかく、雑記ブログに訪れたユーザーが『他にどんな記事があるんだろう』と思うケースはあまりない。

 

なぜなら、検索エンジンからやってくるユーザーは、単なる調べものでやって来た通りすがりであり、お目当ての情報を見つけたらそのまま帰るだろうし、無かったら無かったで内部───他ページを漁ることなく検索結果一覧画面へ戻って他を当たりに行く。

 

したがって、メニューバーを利用するのは層は、『おっ、ここ面白い!他に何があるんだろう?』と思った潜在的マッチユーザーが押してみるくらいのもので、ただの調べもので通りすがっただけの人は、直帰が当たり前であることから絶対にそれを押さない。

 

例えばの話、ゲームAの攻略情報を調べるために検索からウェブサイトへアクセスしてきたユーザーが、他の記事を閲覧する可能性は限りなく低い。『ゲームAの攻略情報を手に入れたからついでに釣りの記事も覗いてみよう!』とは絶対にならない。

 

だからこそ直帰はほぼ確定的なものとなる。調べ物ユーザーは直帰して当然、これ絶対。

 

 

つまり多くの場合、メニューバーは "ただ画面を狭くしているだけの障害物" でしかなく、興味を持ってくれたごく一握りの初見ユーザーにしか効力を発揮しない...と考えるのが妥当である。(リピーターも基本的に利用する理由が無い)

 

自分のウェブサイト、ブログに興味を持つであろう数パーセントのユーザーをもてなすために、その他の通りすがり全員の読了率その他諸々を低下させるのか、それらはウェブ管理者の意向やポリシー次第となるであろう。どちらを取るかは自由だ。

 

 

と考えた場合、固定メニューバーをセレクトすべきなのは、回遊を前提としていない雑記ブログではなく、同じジャンルのネタを主力に扱っている専門ブログ、そちらに導入した方が良い結果をもたらしやすいと思われる。 

 

 

メニューバーを設置しない is NOT GOOD

ユーザビリティ 行き止まりを無くす

 

今回の話はあくまで "固定・画面追従" ナビゲーションの話であって、通常の絶対位置から移動しないメニューバーはこの限り───マイナス疑惑ではない。

 

ウェブサイトの中にはメニューバーを採用していないところも多い───ワードプレスブロガーに対して、はてなブロガーは異様にやっていない───が、導入を拒む特別の理由がない限りは設けた方が良いとだけ、三流ブロガーの分際で偉そうにそう宣っておく。

 

特にはてなブロガーは、自身のコンテンツ内容にしか興味のない文学肌が多いせいか、ユーザビリティを始めとするカスタマイズ面はかなりズボラな傾向にあり、メニューバーはおろか

 

  • 記事一覧ページが無い
  • カテゴリが未整理
  • 関連記事モジュールが無い
  • 過去記事に遡る手段が乏しい

 

という、興味を持ってくれた人を無碍にするような不親切な行き止まり構造のところも少なくはない。こうなっては他のページを探したくてもうまく探すことはできず、結局眉間にシワを寄せた人たちは帰っていく。するとPVや機会を損失したことになる。

 

長い目で見た場合に一体何PVを損失するだろうか...考えただけでも恐ろしい。

 

 

きっと中には『PVなんて興味ねえし』と異論を投げる人がいるだろう。

 

だが、わざわざブログをやっているということは、多くの場合 "読んでほしい" と思っているからこそ記事を書いているはずだ。

 

であるにもかかわらず、『PVに興味がない』というのはある意味矛盾しているし、それに大した手間のかからないカスタマイズでその損失を防ぐことができると考えたら、すぐにでもそれをやるべきだと思う。

 

何も『ゴチャゴチャとオレ色アタシ色で彩れ』とまで言っているのではない。せめてユーザーが回遊しやすいようにしてやっても良いのではないだろうか。言うなれば、ショッピングモールの階段をエスカレーターやスロープにするような、優しきバリアフリー的懇切感覚、それさえあれば...。 

 

*1:ビューポート未設定、タップ要素が近すぎる、極端な文字サイズ...等々

*2:ハンバーガーメニュー等