ヒートマップで改善！ABテストの課題と改善ポイント事例集

金融編

課題：言いたい事を詰め込んじゃってる問題

• ファーストビューでユーザーの目に入ってくる訴求ポイントが多い
• アクション導線が多く、何をしてほしいのかがわかりづらい

改善：ワンメッセージで勝負しよう！

• 訴求ポイントに優先順位を付けた
• アクション導線を申込みに絞り、そのアクションの後押しに集中させた

課題：アフィリエイトっぽくて安心感が弱い問題

• ローン比較のコピーが強くアフィリエイトのような印象
• 関西アーバン銀行の商品である旨の訴求が弱い

改善：企業ブランドの訴求も忘れない！

• トップに女性の写真を持ってきて安心感を増した
• ファーストビューのキャッチコピーでブランドを強調した

課題：字が多すぎて最後まで読みたくない問題

• 画面いっぱいに文字が並んであっとうされてしまう
• 読み手が読みたくなる構成になっていない

改善：見せるべきものと見せなくて良いもの

• 必ず読ませる情報は本文を見せ、任意、注意確認事項は折り畳みコンパクト化した
• ワンスクロールでアクション導線が見えるように工夫した

課題：新規ユーザーが迷ってしまう問題

• 機能が豊富で専門用語も多く、登録してすぐに何をやればいいのかがわかりづらい
• テキストが多く、情報の優先順位が不明

改善：何のアクションをすべきかを導いてあげましょう

• 専門用語の簡単な解説と入金→取引の流れをアイキャッチエリアで伝えた
• 入金のメリット訴求により入金を促した

課題：説明はいいけどアクションどうやるの問題

• 即時入金の説明の後に入金できるアクション導線がなく、入金につながりづらい

改善：アクションをスムーズにさせるという目的を忘れない

• 即時入金のアクション導線をファーストビューに設置した
• 「入金する」の不安を解消するため、女性の画像と「手数料ゼロ円」を配置し安心感を持たせた

リード獲得編

課題：アクション導線が埋もれてしまっている問題

• あまりに検索機能が使われていない
• 検索ボックスが背景画像に埋もれて目立たない

改善：アクション導線はハイライトで明確に

• アクション導線の背景とアクションボタンを強調した
• ページ下部にオススメの求人情報を設置した

課題：検索結果がゴチャゴチャしている問題

• 検索はされているが、検索結果のクリック率が低い
• 文字の羅列になっており、一個一個の検索結果がわかりづらい

改善：整理されることで、比較できる

• 検索結果をカセット表示し、2カラム化した
• 必要な情報が検索結果だけでも、把握できるようにした

課題：アクション導線どこかわからない問題

• 電話や問合せフォームの場所がわかりづらい
• ファーストビューでアクション導線が見切れている

改善：リアル店舗へのアクションもセオリーは同じ

• アクション導線を電話、フォームそれぞれで目立たせた
• アクション導線の近くに補足情報、後押しを置いた

課題：途中で入力諦められる問題

• 1画面に入力しなければならない項目が多い
• フォームが縦に長く入力が「面倒そう・・・」と思われてしまう

改善：どうすれば入力ハードルを下げられるかを考えよう

• フォーム画面の分割を行い、1ページの入力負荷を下げた
• 完了までの目安がわかるようにステップを設けた

課題：ターゲットユーザーの心理をとらえきれていない問題

• 事務職未経験の女性に訴求されていない可能性がある
• 画像がダークカラーなので、不安な印象を与えてしまう

改善：ユーザーの不安を安心に！

• ファーストビューに生き生きした女性の画像を配置した
• 社員になれる！土日が休み！などの訴求点を追加した

課題：メリハリがなく見づらい問題

• 情報量が多く、強調か所が少ない為、メリハリがない
• 詳細遷移ボタンがわかりづらい

改善：一覧は、写真とスペックが命！

• 画像を大きく出しながらも必要情報を網羅できるようにした
• 詳細遷移ボタンを目立つように変更した

課題：見たい情報が強調されていない問題

• 画像が小さく、条件も小さい
• アクション導線がわからない

改善：写真を最大化する工夫を考え切ろう！

• 情報をカセットに集めて写真と価格を強調した
• アクション導線を目立たせた

課題：入力モチベーションわかない問題

• シンプルすぎて入力モチベーションがわかない
• 問い合わせ内容が入力できない

改善：必須、任意は明確に！でも入れてほしい情報は先に

• ファーストビューに問合せの目的を載せた
• 入力箇所、選択箇所など任意と必須項目を背景色でわかりやすくした

課題：情報に優先順位が付いていない問題

• ファーストビューの情報量が多い
• 強調色が多く優先順位が不明なのでサイト上で迷ってしまう

改善：TOPでも優先順位は明確に

• 最も欲しいアクションである教室検索をアイキャッチに設置
• サイドバナーも押し下げて、エリア検索の優先順位を上げた

課題：フォームにメリハリがない問題

• ファーストビューで入力項目が見えない
• 青で統一されており、強調色が見えづらい

改善：中間色をうまく活用しよう！

• ファーストビューで多くの入力項目が見えるようにした
• 入力項目にメリハリをつけた

課題：フォームにきてもまだ不安問題

• 高いハードル、不安を取り除けているか不明

改善：取り下げられる不安はすべて取り切れ！

• よくある質問でユーザーの不安を取り除いた
• トップに男性女性、双方が相談されている様な画像を追加した

サブスクリプション編

課題：アクション導線が埋もれてしまっている問題

• スッキリしたデザインに見えるが、アクション導線が目立たない

改善：アクション導線の周りに最後の一押しを！

• アクション導線をエリアでわけた
• アクション導線周りに後押しする情報を追加した

課題：アクション導てしまっている問題

• スッキリしたデザインに見えるが、アクション導線が目立たない

改善：アクション導線の周りに最後の一押しを！

• アクション導線をエリアでわけた
• アクション導線周りに後押しする情報を追加した

課題：比較したくても比較できない問題

• プラン数が多く、選びづらい
• 比較するための情報が価格と容量しか存在せず、一階層深く入らなければならない

改善：減らせるステップ、ユーザーの手間は極限まで減らす

• 階層下にあった比較材料をランディングページに記載した
• アクション導線を申込みに変更し、1ステップ削減した

課題：ファーストビューの訴求が少なすぎる問題その１

• ファーストビューのエリアがタイトルの画像のみ
• テキストの訴求ポイントのインパクトが弱い

改善：スマホはスペースを有効に使い切るべし

• ファーストビューに期間、価格などの訴求ポイントを入れた
• ユーザーがどう利用しているかイメージできる画像を追加した

課題：ファーストビューの訴求が少なすぎる問題その２

• ファーストビューのエリアがタイトルの画像のみ
• テキストの訴求ポイントのインパクトが弱い

改善：視覚に訴える工夫をやり切ろう！

• 意思決定できる情報をアクション導線周りに配置した
• 訴求の優先順位を明確にした

課題：なぜフォームに来たのか忘れてしまう問題

• 登録メリットが書かれていない
• 何に対して登録するのかがわからない

改善：入力の最後までメリットを伝え続けよう！

• ファーストビューにランディングページと訴求とメリットを追加
• 入力のハードルを下げる訴求を追加した

課題：何がお得なのかわからない問題

• ファーストビューで有料会員のメリットが掴みづらい
• 月払い、年払い、それぞれのメリットがわかりづらい

改善：意思決定できる比較をさせよう

• 有料プランの特徴をファーストビューで明確にした
• 月払い、年払いの違いを定量で提示

EC編

課題：カート内のアクション導線がゴチャゴチャ問題

• 詳細ページを開いてから、カートの追加までの時間が長い
• 詳細ページを開いたのに、離脱されてしまう事が多い

改善：選択はストレス

• 詳細情報とアクション導線をファーストビューにまとめた
• モーダルを使って、色やサイズの情報を整理した

課題：宿泊情報の情報過多問題

• ホテル予約に関する情報がテキストで羅列されていた
• ユーザーが必要としている情報がわかりづらい

改善：見せる情報は顧客に選んでもらう

• ユーザーが必要とする情報をアンカーをつけてインデックス化し整理した
• カレンダー（空き情報）を最初のタブに設置することで、宿泊アクションを誘導した

課題：一覧のカセットが見づらい問題

• ファーストビュー上部の検索条件、並び替えのスペースが大きい
• 表示されているカセットが大きく、比較がしづらい

改善：一覧カセットは、コンパクトに明確に

• ファーストビューのスペースを使っていた部分を整理して短くした
• カセットの高さを短くして、区切りを強調、視認性を上げた

課題：アプリダウンロードを想起しづらい問題

• ダウンロードのアクション導線が目立たない
• アプリであること、ダウンロードしてほしいこと、が伝わりづらい

改善：アイコンとイメージでアプリの認識を

• アプリとわかるようにApp Storeのアイコンを入れた
• アプリ内イメージ、無料、コーディネートの文言追加でサービスイメージを想起

課題：「本当にお得ない？」問題

• 訴求ポイントが書いてあるが、どれぐらい嬉しいことかがわからない

改善：数字は心を動かす

• 具体的な数字を掲載し、ユーザーにイメージさせた
• 「いまさら」「使えば使うほどお得」など、後押しするコメントを追加した

課題：どうやったらムービーを見てくれるか問題

• シンプル過ぎてムービーであるかがわかりづらい

改善：見るハードルを下げ、動画を認識させよ

• ムービーを予測させ、時間を記載しハードルを下げた
• 再生ボタンや枠を「動画」に馴染みがあるデザインに変更した

課題：メリハリがない問題

• 白地にテキストが多く、メリハリがない
• 必須項目がわかりづらい

改善：必須、任意のメリハリをつけよう

• 必須項目のフォームに色を入れた
• 「入力完了」を赤の反転色として緑にした

課題：訴求ポイントを全部のせてしまう問題

• 訴求ポイントが多く頭に入ってこない
• 訴求の優先順位が整理されていない

改善：何度も言うけど、優先順位を

• 「1週間限定」をもっとも優先順位の高い情報として目立たせた
• そのほかの訴求ポイントを小さく背景色を変えた

課題：判断に必要な情報が目立ってない問題

• 詳細ページに遷移してきたユーザーを後押しする情報が目立たない
• 「カートに入れる」以外を見過ごしてしまう

改善：判断材料は、「目立たせ！」アクション導線の近くへ！

• 意思決定に必要となる「価格」情報を大きく、強調した
• タイムセールなど、後押しとなるような情報を反転して目立たせた

課題：商品一覧でいかに商品を選んでもらうか？問題

• ページが長すぎて商品展開がわかりにくい

改善：ロングページは、アンカーを活用せよ！

• 1DAY、2WEEKをトップに用意した
• 色分けやアンカーで明確に商品が違う事を表現した

課題：ユーザーに選択のストレスを与えてしまう問題

• ユーザーが同時に複数の意思決定をしなければならない

改善：選択はストレスだ！

• サイズと生地選択が別で見えるように表示を変更した
• 初期状態で「Mサイズ」を選択しているなど、ユーザーが選択する手間を省いた

課題：アクション導線と訴求が食い合っている問題

• 訴求ポイントとアクション導線が混同するデザイン
• 宅配買取サービスのサービス訴求が弱く、イメージしづらい

改善：アクションは1つ！訴求は優先順位！

• 訴求の追加、コピーの優先度を整理した
• 混同するデザインを修正し、アクション導線を目立たせた

課題：アクション導線がまったく目立たない問題

• サイトの色とアクション導線が同じ色で埋もれてしまっている
• サービスの特徴が「つめて送るだけ」しかないため、もったいない

改善：PCとスマホは別物です！

• アクション導線の色を変えて強調した
• 「手間がかからない」ということをイラストも使ってイメージしやすくした