Cocoonのモバイルフッターメニューに「人気記事」へのリンクを追加してみた

WordPressテーマ「Cocoon」の「モバイルフッターメニュー」に、人気記事一覧ページへのリンクを追加してみました。

当サイトはサイドバーを設置しないシングルカラム構成のため、いわゆる「人気記事ランキング」を置いていません。そこで、スマホで常時アクセスしやすいモバイルフッターメニューに「人気記事」ボタンを追加することで、回遊率アップを狙います。

実際に使ってみるとかなり便利で、利便性が向上しました。

Cocoonのモバイルフッターメニューがかなり便利

「Luxeritas」から「Cocoon」へ乗り換えて数ヶ月。ようやくアクセス数も戻りつつあります。

その中でも、「Cocoonに変えてよかった」と感じる機能のひとつが「モバイルフッターメニュー」です。

Cocoonはレスポンシブデザイン対応なので、PC・スマホ表示を自動で切り替えてくれます。ただ、スマホは単にレスポンシブに切り替えるより、スマホ専用の機能があったほうが良いと思います。

「Cocoon設定 → モバイル」タブから設定できます。

当サイトでは、“常時表示”ではなく、

ページを開いた時
上方向へスクロールした時

だけ「ウニッ」と表示されるようにしていますが、これが思った以上に使いやすいです。

「トップへ戻る」ボタンだけでなく、

シェア
目次へジャンプ
ホームへ戻る

などが表示されるので、スマホユーザーには非常に使いやすくなると思います。

モバイルフッターメニューに「人気記事」を追加してみた

今回は、そのモバイルフッターメニューに「人気記事一覧ページ」へのリンクを追加してみました。

理由は、ユーザーは、記事ページへアクセスしても必ず最後まで読むとは限りません。しかし、画面下部に「人気記事」への導線があれば「他にはどんな記事が人気なんだろう？」と、そのまま別ページへ移動してくれる可能性があります。

特に初見ユーザーにとって「人気記事」は、

そのサイトの雰囲気
どんな記事が読まれているのか
どんな情報が強いサイトなのか

を把握しやすくなりますし、「人気記事ランキングページ」ですから、それなりに質の高い記事が集まっていますので、（AIによると）回遊率（PV/セッション）が5〜15％程度向上する可能性があるとのこと。

もちろんサイト構成や読者層にもよりますが、スマホ導線の改善としてはかなり効果的だと思います。

▼人気記事ランキングは「Cocoon」のランキング機能を使っています。

人気記事一覧を表示するショートコードの利用方法

「人気記事」ボタンの追加方法

Cocoonには標準でモバイルフッターメニュー機能がありますが、デフォルト状態では「人気記事」ボタンを追加できませんので、

「外観 → メニュー」から新しくメニューを作成する必要があります。

▼詳しい設定方法は公式サイトがわかりやすいです。

フッターモバイルボタンの設定方法

スマホ画面のフッターに表示されるスライドインメニューボタンのカスタマイズ方法の解説です。

当サイトでは、以下のように設定しました。

モバイルフッターメニューに入れたほうが良いもの

リンク文字列	URL	CSS class
ホーム	#home	fas fa-home
メニュー	#menu	fas fa-bars
カテゴリ（メニューの代替）	#menu	fas fa-folder-open
人気	ランキングページURL	fas fa-fire
シェア	#share	fas fa-share-alt
目次へ	#toc	fas fa-list
トップ	#top	fas fa-arrow-up
検索	#search	fas fa-search

※「CSS class」には、Font Awesome のアイコン名を指定します。

完成！

これで、

ホーム
人気記事
シェア
目次へ
トップへ戻る

をモバイル画面下からすぐ操作できるようになりました。

特に「人気記事」を追加したことで、各記事から別記事への導線がかなり自然になった気がします。

トップページではなく、ナビゲーションメニュー（カテゴリ一覧）を指定しても良いと思います。

※ただし便利だからといって、メニューアイコンを増やしすぎるとユーザビリティが悪くなるので最大でも5つ程度に絞るのが良いと思います。

「人気記事」ボタンが効果的な理由

AIに、「モバイルフッターメニューに人気記事を置くメリット」を聞いてみたところ、なるほどと思う回答がありました。

1. 親指の“一等地”にある
スマホでは、画面下部が最もタップしやすい位置です。記事を読んでいる途中や、読み終えたタイミングで自然に目に入るため、「次の記事」を促しやすくなります。
2. 記事下まで到達しない読者を拾える
すべてのユーザーが記事末尾までスクロールするわけではありません。しかし、フッターメニューは途中でも表示されるため、「離脱する前」に別記事へ誘導できる可能性があります。
3. 「人気記事」はクリックの心理的ハードルが低い
「人気記事」は“みんなが読んでいる安心感”があるため、「とりあえず見てみよう」と思ってもらいやすく、クリックまでの心理的ハードルを下げる効果があります。

とのことです。