【実践ガイド】ドロップダウンメニューのヒートマップはこうやって確認します！

共有
,
#1

皆さん、今日も今日にてPtengineをご利用いただきありがとうごいます！

ヒートマップを見る時、ドロップダウンメニューをどう確認してますか？

実はドロップダウンメニューのような動的要素は、 カーソルが離れると要素が自動的に閉じたりするので、性質上、分析が少しだけ難しくなります。

今回はその見方をご紹介していきます！

:dart: 活用シーン

ECサイト運営者向け

  • カテゴリーメニューのクリック率分析
  • 商品階層の使いやすさチェック
  • サブカテゴリーの人気度調査
1├─ レディース
2│  ├─ トップス
3│  ├─ ボトムス
4│  └─ アクセサリー

メディアサイト運営者向け

  • 記事カテゴリーの閲覧傾向分析
  • ナビゲーションメニューの最適化
  • サブコンテンツの反応確認

コーポレートサイト運営者向け

  • サービス紹介メニューの動線分析
  • 問い合わせフォームへの誘導確認
  • 採用情報ページの階層チェック

サービス提供サイト向け

  • 機能メニューの使用頻度分析
  • ユーザー設定画面の最適化
  • ヘルプセンターの階層確認

:hammer_and_wrench: DevToolsでの操作手順

1. DevToolsを開く

  • Windows/Linux: F12キー
  • Mac: Command + Option + I

2. 要素を選択

  1. 画面左上の「要素を検証」アイコン（:mag:）をクリック
  2. 固定表示したいドロップダウンメニューをクリック

3. 表示を固定する

  1. Stylesパネルを確認
  2. display: none; を見つける
  3. クリックして display: block; に変更

4.ヒートマップを確認

操作方法は以下の動画をご覧くださいませ

ご不明点あればコメントでもチャットでもお待ちしております:relaxed: