スクロール時の追従メニューについて考える
ウェブサイトを構築しているとき、ナビゲーションメニューの仕様について検討することがよくあります。
追従させるかさせないか、させるとしたら追従要素は何にすべきか、どこに設置すべきか…。
扱う商材の導入までのハードルの高さ、ユーザーがとるであろう行動を踏まえて検討する必要がありますが、今回は参考までに、複数サイトのナビゲーション仕様を比較してみることにしました。
参考にさせていただいたのは、いわゆるCTA要素が多く設定されている(のではないかと個人的に思っている)保険業界のサイト。
サイト抽出にはDockpit無料版の業界分析を使用しました。
無料版で見られるのは一部業界に関してのお試し分析のみなのですが、業界内でのシェアやサイトランキングを確認できます。
無料版で「保険メディア」の業界シェアとサイトランキングが確認できたので、この中の上位10件のサイトのナビゲーションメニューを見てみることにしました。(2021年12月時点取得:2020年12月~2021年11月までのデータ)
サイトの追従メニュー傾向(保険メディア)
■楽天インシュアランス(2021年12月時点)
楽天インシュアランスが運営する保険の比較サイト。楽天の保険だけでなく総合的に扱っている。ランキング・保険の種類・保険相談など複数の種類から保険の選択肢を提供。
● サイトのCV:各種保険の見積り(シミュレーション)、各サイトへの誘導
● 追従要素:保険の選び方(3種)が画面下部に追従。「保険を選ぶ」ためのステップ誘導(次に取ってもらいたい行動)をサポートする要素を追従させている。
■ほけんのぜんぶグループ企業サイト(2021年12月時点)
ほけんのぜんぶグループの企業サイト。サイトの内容は取扱い事業や各種運営メディアの紹介が主(保険比較やサイト上で保険選択をサポートするものではない)。保険の無料予約相談とお問い合わせが主なCTA要素。
● サイトのCV:保険の無料予約相談とお問い合わせ
● 追従要素:上部のグローバルナビゲーションが追従するシンプルなパターン(追従時縦幅がやや縮小)。
主要CTA「無料相談予約はこちら」「お問い合わせ」を含んだグロナビが追従。
■インズウェブ(2021年12月時点)
自動車保険・火災保険・生命保険、あるいは電気料金比較などの保険や生活に役立つサービスの比較サイト。サイトTOPページは各サービスへの誘導(窓口)。下層ページに各種保険・サービスの比較サイトを保持。
● サイトのCV:各保険・サービスの一括見積もり
● 追従要素:各保険サービスサイトによって方針が異なる。追従要素がないパターンもあれば、下層で例えば「自動車保険比較サイト」へ進むと、下部に「今すぐ一括見積もりへ」というボタンと、「過去1時間で〇〇人の方が一括見積を完了しました」というアテンションが追従してくる。
■保険市場(2021年12月時点)
株式会社アドバンスクリエイトが運営する最大級の保険比較・情報サイト【保険市場】。生命保険・医療保険・学資保険・損害保険など保険全般を扱う。
● コンサルタントによる保険相談サービスがCVポイントとなっているようだ。
● ファーストビューを過ぎたあたりからページ下部に追従ナビゲーション発生。内容は保険相談の予約に関するもので「オンラインで相談する」「店舗で相談する」「希望の場所で相談する」の3種掲載。
■ほけんROOM(2021年12月時点)
保険相談・見直し・選び方を伝えるメディア。運営会社は損害保険代理店である株式会社Wizleap。保険や家計、税金、投資などお金全般に関する相談・情報を提供。
● サイトのCV:保険の無料相談(ほかにライフプランやマネー相談などがある)
● 追従要素:追従なし。各ページスクロールすると適所に無料相談へのCTAボタンがあるが追従はなし。記事を読み進めて興味を持ったユーザーが無料相談に進むように設計されている。
※自社の無料保険相談だけではなく、他社の無料相談への誘導も取り扱っているためといった理由もありそう。
■保険相談ニアエル(2021年12月時点)
株式会社LHL(日本生命グループ企業)が運営する掲載店舗数No.1の全国の保険ショップ、保険相談窓口、保険代理店の検索・予約サイト。
窓口検索サイトなので窓口検索が豊富。(suumoみたい)
●サイトのCV:保険相談窓口(ショップ)への誘導・申込み
●追従要素:
・TOPページでは追従なし。
・2階層目に進むと下部に電話予約のフローダイヤルが追従。(少し検討が先に進んだ段階で予約サポートのために設置しているのだろうか)
・3階層目で店舗詳細まで進むと、ネット予約(日付選択できる)が追従。フリーダイヤルもあり。ここまで閲覧したユーザーは予約に前向きなモチベーションだろうということで、具体的に日付を選択し先に進ませるステップをサポートしていると考えられる。
☆興味深度に応じたナビゲーション設計が特徴。
■楽天保険一括見積(2021年12月時点)
楽天インシュアランスプランニング株式会社が運営し、掲載する保険会社に一括して見積もりを依頼するサービスを提供しているサイト。扱っているのは自動車保険。
● サイトのCV:一括見積りの申込み
● 追従要素:KV通過途中時点でページ下部に追従表示。追従要素は「無料一括見積もりスタート」への誘導リンク。(各ページ共通)
■ほけんの窓口(2021年12月時点)
TVCMでもよく見かける保険の無料相談・見直しサービスサイト。
「ほけんの窓口」はプロと一緒に保険選びができる保険ショップ。よって窓口への誘導がサイトの主な目的。
● サイト上のCV:店舗誘導/予約
● 追従要素:ページ下部に「エリアから店舗を探す」およびフリーコールの案内が追従。(下層ページに進むとデザインが少し変わるが表示内容は同じ)
■保険スクエアbang!(2021年12月時点)
・生命保険パンフレット一括請求サイト
・自動車保険パンフレット一括請求サイト
いずれも「保険の総合情報サイト【保険スクエアbang!】」内で運営されているサイト。保険に関する最新ニュースから、保険選びのサポートまでアドバイスを提供し、一括見積りやパンフレット請求を促す。
● サイト上のCV:一括見積り(パンフレット請求)の申込み
●追従要素:なし(上記2サイトに関してはなし)
まとめ・感想
今回は保険メディアのスクロール時の追従メニューの傾向を見てみました。(PCのみ)
● 設置場所:ページ下部が多い傾向(10サイト中6サイト)
※ページ下部にスクロールメニューを設置する場合、ヘッダーのグローバルナビゲーションは追従させない傾向。
● 挙動:サイトによってまちまちだがKVを過ぎたあたりから追従メニューが発生する傾向。再び上にスクロールバックすると、追従メニューは非表示になるパターンが多かった。
● 内容:無料相談や見積もり等サイトのCVとなるものを追従させている
保険メディアのスクロール追従メニューでは上記のような傾向が見られました。
今回参考にしたサイトで1件だけ含まれていた企業サイトは、上記傾向とは異なる挙動(上部のグロナビが追従)をしていたので、企業サイトやブランドサイト等サイト種別によって特徴やある程度一般化されたパターンがありそうです。今後また別メディア・別種別のスクロール時の傾向も参考までに見てみたいと思います。