futureshopはテンプレートの自由度が高いカートです。だからこそ「直せるのに、どこを直すべきかわからない」という状態になりやすくなります。
デザインを変えられる環境では、改善案はいくらでも出ます。問題は、その案のどれが効くかを決める材料がないことです。担当者の勘と、社内の声の大きさで決まってしまう——これが自由度の高いカートで起きがちな停滞です。
本記事では、futureshopのサイトにヒートマップ等のCVR改善ツールを入れる手順と、判断材料をどう集めるかを解説します。
記事のポイント
- 任意測定タグ設定の場所と、head / body の出し分け
- プレーンテキストは出力できないという仕様上の注意
- 導入前に確認するレスポンスヘッダー
- 分析できる範囲・できない範囲
- テンプレートを直す前にやること
目次
- futureshopでCVR改善ツールを併用する理由
- 任意測定タグの設置場所
- 出力時の注意点
- 導入前に確認するレスポンスヘッダー
- 分析できる範囲・できない範囲
- futureshopのサイトで見るべき3箇所
- テンプレートを直す前にABテストで確かめる
- Dejamで改善を進める
- よくある質問
- まとめ
futureshopでCVR改善ツールを併用する理由
futureshopの管理画面では、売上・注文・アクセスの数字を確認できます。ただしこれらは結果であって、ページの中で何が起きたかは含まれません。
| 管理画面でわかること | わからないこと |
|---|---|
| どの商品が何件売れたか | 商品ページのどこで読むのをやめたか |
| アクセス数と注文数 | 流入後に何をクリックしようとしたか |
| カート投入数と注文数の差 | どのタイミングで迷いが生じたか |
「カートに入れたのに買われていない」という事実がわかっても、その理由がわからなければ打ち手が決まりません。 ヒートマップはこの空白を埋めるために使います。
任意測定タグの設置場所
futureshopでは、管理画面から任意のタグを出力できます。
構築 > プロモーション管理 > 任意測定タグ設定 から設定します（futureshop公式マニュアル）。
出力先は3箇所から選べます。
| 出力先 | 用途 |
|---|---|
<head> タグ内 | 計測タグはここ。ページ描画前に読み込ませたいもの |
<body> 直後 | 描画開始直後に動かしたいもの |
</body> 直前 | ページの表示を優先したいもの |
ヒートマップ等の計測タグは <head> 内を選びます。 読み込みが遅れると、ページ上部での行動を取りこぼす可能性があるためです。
head へ出力する場合は「広告測定設定」または「任意測定タグ設定」を使います。コマースクリエイターを利用しているかどうかで画面構成が変わるため、自社の環境に合わせて確認してください。
出力時の注意点
futureshopの任意測定タグには、知らないとつまずく仕様があります。
プレーンテキストは出力できない
HTMLタグを伴わない文字列は出力できません。 test は出力できませんが、<div>test</div> は出力できます。
<script> タグで囲まれた計測タグは問題なく出力できますが、「タグの前後にコメントだけ入れておく」といった使い方はできません。
システム側のJavaScriptと競合することがある
出力にはシステム制御のJavaScriptが使われるため、出力内容によってはエラーが発生する場合があると公式マニュアルに明記されています。設定後は必ず、実際のページで動作を確認してください。
確認方法: 商品ページを開いて開発者ツール（F12）の Console タブにエラーが出ていないか、Network タブで計測タグが読み込まれているかを見ます。管理画面で保存できたこと＝正しく動いていること、ではありません。
導入前に確認するレスポンスヘッダー
CVR改善ツールは、①タグによる計測と、②サイトをiframeで読み込むビジュアルエディタの2つでできています。止まる原因が別なので、分けて確認します。
| ヘッダー | 影響する機能 |
|---|---|
X-Frame-Options | ABテスト・LPOのビジュアルエディタ |
Content-Security-Policy | 計測タグの読み込みと送信 |
X-Frame-Options: DENY でも、ヒートマップの計測は動きます。 編集機能だけが止まります。したがって「まず計測から始める」という進め方が可能です。
curl -sI https://（自社ドメイン） | grep -i "x-frame-options\|content-security-policy"何も出力されなければ制限はありません。詳細と、変更を依頼するときの文面はCVR改善ツールが動かない原因はヘッダー｜X-Frame-OptionsとCSPの確認方法にまとめています。
分析できる範囲・できない範囲
| 画面 | 計測 |
|---|---|
| トップ・商品ページ・特集ページ | ⭕️ |
| カート画面 | 🔶 セキュリティ上、動かないことがある |
| 決済・購入完了画面 | ❌ 対象外 |
| 会員登録・問い合わせフォーム | ⭕️ |
**改善対象は「カート投入前まで」**と考えてください。決済画面が見られないことは実務上の制約になりにくく、カゴ落ちの要因の多くは商品ページ側にあります。
futureshopのサイトで見るべき3箇所
1. 商品ページの情報の並び順
テンプレートの自由度が高いぶん、情報の順番が最適とは限りません。 熟読ヒートマップで、どのブロックが読まれてどこで止まっているかを確認します。
よくあるのは、スペック表が上にあって、使用シーンの説明が下にある構成です。検討初期のユーザーはスペックを読めないため、上部で離脱します。
2. 特集ページからの回遊
futureshopでは特集ページを作り込んでいるケースが多くあります。ここで確認すべきは商品ページへ遷移しているかです。
クリックヒートマップで、特集内の商品リンクが押されているかを見ます。読まれているのにクリックされていないなら、リンクだと認識されていない可能性があります。
3. スマートフォンでのCTA位置
スクロール到達率をスマホとPCで分けて確認します。PCで問題なくても、スマホでは購入ボタンが画面の遥か下にあることがあります。到達率が50%を切る位置にCTAがあるなら、半数以上には見えていません。
テンプレートを直す前にABテストで確かめる
futureshopはテンプレートを編集できるため、課題が見つかればすぐ直せます。ただし直す前に検証したほうが安全です。
| 進め方 | 問題点 |
|---|---|
| テンプレートを直接書き換える | 効果が季節要因と区別できない。戻すのに手間がかかる |
| ABテストで出し分けてから反映 | 数字で判断できる。負けたら出すのをやめるだけ |
「変えたら上がった」は、多くの場合その変更のおかげではありません。 同じ期間に両方を出して比較しない限り、因果は確定できません。
Dejamでfutureshopサイトの改善を進める
ヒートマップ
クリック・クリックイベント・熟読・滞在・離脱の5種類。熟読は4秒以上の滞留、離脱・滞在は5%刻みの20バンドで計測するため、「商品説明のどのブロックで止まったか」を具体的に特定できます。データ保存期間は無制限なので、季節商材の前年比較もできます。
ABテスト
デザイン変更テスト・リダイレクトテスト・ポップアップテストの3種類。テンプレートを書き換えずに検証できるため、公開中のサイトを止めずに改善を回せます。
LPO
特集ページやキャンペーンLPの改善に使えます。流入元ごとに出し分けて、どの訴求が効くかを検証できます。
よくある質問
Q. タグを設定したのに動きません。
A. 3点を確認してください。①出力先が <head> になっているか、②HTMLタグを伴わないプレーンテキストになっていないか（出力できない仕様です）、③Console タブにエラーが出ていないか。futureshopは出力にシステム制御のJavaScriptを使うため、内容によってはエラーが出ることがあります。
Q. コマースクリエイターを使っていますが、設定場所は同じですか？
A. 画面構成が変わります。公式マニュアルにコマースクリエイター利用時・未利用時それぞれの手順が用意されているため、自社の環境に合わせて参照してください。
Q. 決済画面のカゴ落ちを分析できませんか？
A. 決済画面は計測対象外です。ただしカゴ落ちの要因の多くは商品ページ側にあるため、手前の導線から着手するほうが改善余地が大きく残っています。
Q. テンプレートを直せるのに、ABテストは必要ですか？
A. 直せることと、直した効果を判定できることは別です。ABテストは「変更する手段」ではなく「変更を決める材料」を得るためのものです。
まとめ
- タグは構築 > プロモーション管理 > 任意測定タグ設定から。計測タグは
<head>出力 - プレーンテキストは出力できない。HTMLタグで囲む必要がある
- 出力にシステム側のJavaScriptを使うため、設定後の動作確認が必須
X-Frame-Options: DENYでも計測は動く- 分析範囲はカート投入前まで
- 見るべきは商品ページの情報の並び順・特集ページからの回遊・スマホのCTA位置
- テンプレートを直す前にABテストで確かめる
ECサイト全体のCVR改善の考え方はECサイトのCVR改善ガイドにまとめています。
CVR改善ならDejam！テンプレートを止めずに改善を回す
Dejamは、LP制作・ヒートマップ分析・ABテスト・AI自動解析をオールインワンで提供するCVR改善特化ツールです。「自由に直せるが、どこを直すべきか決められない」という段階から、本格的なPDCAを回して成果を最大化するまでを総合支援します。
Dejamが選ばれる理由
- 国内唯一のワンプロダクト: LP制作・ヒートマップ分析・ABテストをすべて単一ツールで完結
- 月額3万円〜利用可能: オプティマイズプラン月額3万円〜 / CMSプラン月額5万円〜 / オールインワン月額12万円〜
- ユーザー課金なし: 何名で使っても追加費用は発生しない
- ISMS認証取得: ISO/IEC 27001:2022 & JIS Q 27001:2023認証取得済み
- 毎週アップデート: 市場トレンドとユーザーリクエストに応じて機能を毎週拡充
Dejamの主要機能
- LP/記事LP制作: ノーコード・コードの切り替えに対応。AIで生成したコードを直接取り込み可能
- ヒートマップ: 5種類（クリック/クリックイベント/熟読/滞在/離脱）。データ保存期間無制限
- ABテスト: デザイン変更テスト・リダイレクトテスト・ポップアップテストの3種類
- 自動解析: どのコンテンツがCVRに貢献しているかAIが自動解析
- 独自ドメイン300件まで無料: LP専用ドメインを大量運用しても追加費用なし
テンプレートを書き換えずに検証できるため、公開中のサイトを止めずに改善を進められます。
