WordPressテーマ「AFFINGER5(WING)」のver20190304βから追加された新機能「スクロールナビ」のデザイン例をメモします。
他の人はこちらも検索
「スクロールナビ」とは?
「スクロールナビ」とは、AFFINGER5のver20190304βから追加された新機能です。
検索結果に出てくる「他の人はこちらも検索」のような内部リンクを、目次の下などに配置し、離脱を防ぐ機能です。サイトのヘッダーに追加して、「スクロールできるメニューにする」などのアイデアもありますね。
基本的な使い方については、「ユーザーの離脱を改善するシンプルな2つのアイデア(ENJIROG)」をご参考にしてください。
スクロールナビのデザイン例
自分なりに考えたスクロールナビのデザイン例を、コードとともにメモしておきます。
通常デザイン
スクロールナビデフォルトのデザイン。
コードは次の通り。
<div id="st_listnavi_wrapper"> <ul class="st-sc-listnavi-box"> <li class="st-sc-listnavi"><a href="#">ダミーリンク</a></li> <li class="st-sc-listnavi"><a href="#">ダミーリンク</a></li> <li class="st-sc-listnavi"><a href="#">ダミーリンク</a></li> </ul> </div>
テキストに虫メガネを追加
スクロールナビのテキストの前に「虫メガネ」を追加。
コードは次の通り。
<div id="st_listnavi_wrapper"> <ul class="st-sc-listnavi-box"> <li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> ダミーリンク</a></li> <li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> ダミーリンク</a></li> <li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> ダミーリンク</a></li> </ul> </div>
見出しを追加
見出しとして「他の人はこちらも検索」を追加。
他の人はこちらも検索
コードは次の通り。
<p><span class="huto">他の人はこちらも検索</span></p> <div id="st_listnavi_wrapper"> <ul class="st-sc-listnavi-box"> <li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> ダミーリンク</a></li> <li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> ダミーリンク</a></li> <li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> ダミーリンク</a></li> </ul> </div>
背景色を追加
スクロールナビを「ボックスデザイン(タグ>ボックスデザイン>マイボックス)」で囲み、タイトルと背景色を追加。
他の人はこちらも検索
コードは次の通り。※st-mybox直前の半角スペースは削除すること。
<p>[ st-mybox title="他の人はこちらも検索" fontawesome="" color="#000000" bordercolor="" bgcolor="#f9f9f9" borderwidth="0" borderradius="" titleweight="2" fontsize="" myclass="st-mybox-class" margin="5 5 0 0"]</p> <div id="st_listnavi_wrapper"> <ul class="st-sc-listnavi-box"> <li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> <span style="color: #0000ff;">ダミーリンク</span></a></li> <li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> <span style="color: #0000ff;">ダミーリンク</span></a></li> <li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> <span style="color: #0000ff;">ダミーリンク</span></a></li> </ul> </div> <p>[/st-mybox]</p>
テキストのカラーを変更
スクロールナビのテキストを、テキストリンク色(青)に変更。
他の人はこちらも検索
コードは次の通り。※st-mybox直前の半角スペースは削除すること。
<p>[ st-mybox title="他の人はこちらも検索" fontawesome="" color="#000000" bordercolor="" bgcolor="#f9f9f9" borderwidth="0" borderradius="" titleweight="2" fontsize="" myclass="st-mybox-class" margin="5 5 0 0"]</p> <div id="st_listnavi_wrapper"> <ul class="st-sc-listnavi-box"> <li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> <span style="color: #0000ff;">ダミーリンク</span></a></li> <li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> <span style="color: #0000ff;">ダミーリンク</span></a></li> <li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> <span style="color: #0000ff;">ダミーリンク</span></a></li> </ul> </div> <p>[/st-mybox]</p>
うまく表示できない(ただのリストデザイン)になっている場合は、「キャッシュ」を削除してください。
おまけ(リッチリザルト風)
リッチリザルト風に。ただし、AMPではデザイン崩壊。
コードは次の通り。
<div id="st_listnavi_wrapper"> <ul class="st-sc-listnavi-box box80"> <li class="st-sc-listnavi"><img src="https://sample.jpg" alt="" /><br /> <a href="#">ココにタイトル</a></li> <li class="st-sc-listnavi"><img src="https://sample.jpg" alt="" /><br /> <a href="#">リッチリザルトっぽいね</a></li> <li class="st-sc-listnavi"><img src="https://sample.jpg" alt="" /><br /> <a href="#">画像はクリックできません</a></li> </ul> </div>
スクロールナビ使用の注意点
AMPページ非対応です。AMPページでは、このページのAMPバージョンのようなデザインになってしまいます。
AMPページでは普通のリストデザインになってしまうので、AMPページは非表示にする([ st-no-amp][/st-no-amp]を使用)などの対応が必要です。
まとめ
AFFINGER5のスクロールナビのデザイン例をご紹介しました。ほかにもデザインは考えられますが、検索ユーザーはGoogleの「他の人はこちらも検索」のデザインに見慣れているので、あまり装飾し過ぎるのも良くないかと思います。
あと、プラグイン「AFFINGERタグ管理マネージャー」などを使用してABテストし、どのデザインが最適か?データを集計して最適化するのも良いでしょう。