WordPressで商品診断を作る — 比較表で迷わせない「選ばせ方」

WordPressで商品診断を作る記事のアイキャッチ画像

商品が多いサイトで「比較表を置いたのに問い合わせが増えない」というのは、よくある詰まり方です。原因はだいたい、読者が表を前にして「で、自分はどれ?」で止まっているから。質問に答えてもらっておすすめを出す商品診断は、その手前の迷いを減らす導線になります。

結論を先に言うと、WordPressだけで商品診断は作れます。ただ実際にやってみると、難しいのは「作れるか」より「あとから直せる形で作れるか」のほうです。この記事では、作る順番と、運用で崩れやすいポイントを順に書きます。

目次

比較表だけだと、なぜ「で、自分はどれ?」で止まるのか

比較表だけの場合と商品診断の場合で、読者がどこで止まるかを対比した図

商品ページや比較表で選んでもらおうとすると、商品が増えるほど読者は迷います。差が伝わりにくく、選択肢が多いほど「自分にはどれが合うのか」が分からないまま比較疲れが起きて、問い合わせ前に離脱する。

特に、プランが複数条件で決まるサービスや、利用目的でおすすめが変わるケースは一覧表と相性が悪いです。運営側は「比較表を置けば十分」と思いがちですが、読む側はどの列を見ればいいのか分からず止まる。

選択肢の多さそのものが購入をためらわせる、という話は消費者行動の研究でも知られています。試食できるジャムを6種類にした場合と24種類にした場合を比べると、24種類のほうが足を止める人は多いのに、買った割合は大きく下がった、という有名な実験です。選択肢を増やすほど判断の負荷が上がり、決断が先送りされる。商品診断は、この負荷を「いくつかの質問に答える」に置き換える仕組みだと考えると分かりやすいです。

作る手順は4つ。ただし「結果を先に決める」のがコツ

商品診断を作る順番を、結果を先に決める→設問を逆算する→結果に条件を設定するの3ステップで示した図

商品診断の骨格自体はシンプルで、次の4ステップです。

  1. 設問を作る
  2. 各設問に選択肢を設定する
  3. 回答の組み合わせごとに結果を作る
  4. 固定ページに埋め込む

順番どおりに見えますが、先に決めるべきなのは3の「結果」のほうです。設問は後から足せても、結果の分け方が曖昧なままだと、商品が増えたときに破綻するからです。「何を聞くか」より「最終的に何パターンに分けたいか」を先に固めておく、と考えてください。

たとえば結果を「少人数向けのライトプラン/法人向けの標準プラン/高機能な上位プラン」の3つと決めてから、それを出し分けるのに必要な質問(利用人数・予算・重視する機能)だけを逆算して作る。この順番だと、設問を増やしても崩れにくくなります。

設問はつい増やしたくなりますが、多いほど完了率は落ちます。スマホ流入が多いLPなら特に途中離脱が増えるので、最初は3〜5問が現実的。「おすすめを分けるのに本当に必要な質問だけ」を残すのがコツです。

結果画面のほうは、商品名だけだと弱い。向いている理由・価格帯・主要機能に加えて、問い合わせや申込みのボタン、Contact Form 7 のフォームまで置いておくと、そのままCVにつなげられます。診断シミュレーションProでは結果コンテンツを通常のブロックエディタで作るので、文章・画像・ボタン・フォームを1か所で管理できます。自社商品だけでなく、結果の中にアフィリエイトリンクを置く使い方もできます。

分岐は「線を引く」のではなく、結果に条件を持たせる

回答マトリクスの3つのルール(AND判定・不問・複数同時表示)を示した図

ここが商品診断でいちばん効くところで、同時にいちばん誤解されやすいところです。

多くの人は「選択肢Aを選んだら結果Xへ」と線を引く絵を想像します。診断シミュレーションProは線を引きません。代わりに、結果コンテンツのほうが「自分を表示する条件」を持ちます。これを回答マトリクスと呼んでいます。

判定のルールは4つだけ。

  • 結果ごとに「どの設問でどの選択肢が選ばれたら表示するか」を設定する
  • 設定した条件をすべて満たしたとき(AND判定)にその結果が出る
  • 条件に入れなかった設問は「不問」=判定に影響しない
  • 条件を満たす結果が複数あれば、そのまま全部表示される(該当件数も出ます)

商品診断だと、この「不問」が効きます。「法人向けの標準プラン」は利用人数の設問だけを条件にして、予算と重視機能は不問にしておく。すると予算をどう答えた人にも標準プランが候補として出て、そこへ予算条件を足した上位プランが同時に並ぶ、といった見せ方ができます。似た商品を「条件を作るほどではないけれど並べて見せたい」ときにも、この形が使えます(複数の結果を同時に出す方法で詳しく書いています)。

作っている側の話をすると、線を引く方式にしなかったのはここが理由です。選択肢→結果で線を張っていくと、設問が1つ増えるたびに確認すべき組み合わせが掛け算で増えて、作った本人でも追えなくなる。結果側に条件を置けば、増えるのは「結果の数」だけで済みます。あわせて選択肢には安定したIDが自動で振られるので、公開後に設問や選択肢を並べ替えても、設定済みの条件はそのまま生きます。順番を直したくなるのは公開後にほぼ必ず起きること。ここが壊れない前提で組めるかどうかは、後々じわじわ効いてきます。

設置は1行。手が要るのは既存LPに入れるときだけ

設問セットを作った時点でIDが振られるので、固定ページに次の1行を貼れば置けます。

[mqs_simulator id="設問セットID"]

id には自分の設問セットのIDを入れます。ブロックエディタなら「診断シミュレーション」ブロックを選ぶだけ。結果はページ遷移なし(AJAX)で、その場に表示されます。

ここまではスムーズなのですが、既存のLPに差し込むと周囲のデザインと馴染まないことがあります。前後のコンテンツとくっついて見えるならスペーサーブロックを挟む、余白が合わないならCSSで少し調整する。公開前に一度、実際のページで表示を見ておくほうが安心です。設置の考え方はWordPressで診断コンテンツを固定ページに設置する方法で詳しく書いています。

いちばん多い空振りは「どの結果も出ない」

作ってみると分かりますが、手が止まるのは設問ではなく結果側です。よくあるのは、似た結果が並んで「どの条件がどの結果につながるのか」を自分でも追えなくなるパターン。商品点数が増えると結果パターンも増えるので、結果タイトルの命名ルールは先に決めておかないと、あとで整理できなくなります。

そしてもっと痛いのが、条件を細かくしすぎた結果、最後まで答えたのに表示される結果が1つもない、という空振りです。せっかく答えきってもらったのに何も返せない状態なので、ここでの離脱はもったいない。どの条件にも当てはまらない人向けの共通結果を1つ用意しておくのが保険になります。

なので、最初から全商品を細かく出し分けようとしないこと。代表的な3パターンくらいに絞って公開し、条件は後から足していくほうが運用しきれます。

公開してからが本番

商品診断は公開して終わりではなく、むしろそこからです。結果を見せただけだとCVにつながりにくいので、結果の直後に商品詳細リンク・問い合わせ・申込み・フォームのいずれかは必ず置く。結果から問い合わせへつなぐ設計は診断結果から問い合わせにつなげる方法にまとめています。

そのうえで、どの設問で離脱が多いか、どの結果に偏っているかを見ながら直していきます。診断シミュレーションProのダッシュボードでは開始数・完了数・完了率・平均所要時間・設問別の離脱率・結果の表示分布が見られるので、設問数や順番の改善がしやすい(離脱率の直し方)。計測はセッション単位で個人情報を保存せず自社DBに蓄積するので、外部の解析ツールを足さなくても改善の材料はそろいます(ログの保持は既定90日)。公開前に完璧を目指すより、公開後に離脱ポイントを見つけて直すほうが現実的です。

複数サイトで使うなら、設問セットはJSONでエクスポート/インポートできます。ステージングで作り込んでから本番へ運ぶ、という進め方とも相性がいい。

向いている場面、向かない場面

商品レコメンドやSaaSのプラン診断、目的別のおすすめ提案、資料請求・問い合わせ前の事前絞り込みには向いています。「どれを選べばいいか分からない」という悩みには、一覧より診断UIのほうが効きます。

逆に、ECカートの完全代替や、在庫・配送条件まで含む複雑な購入処理、超大規模な比較条件を1回の診断で処理したいケースには向きません。金額をその場で四則演算するライブ計算機でもありません。料金の自動計算が主目的なら、そこは別の仕組みの仕事。

よくある質問

コードの知識は必要? 必須ではありません。設問と結果は管理画面で作り、設置はショートコードかブロックです。CSSでの余白調整が要る場面はありますが、分岐のコードを書く必要はありません。

1つの回答で複数の商品をおすすめできる? できます。条件を満たす結果が複数あれば、まとめて表示されます(該当件数も出ます)。

作った診断を別サイトへ移せる? 設問セットをJSONでエクスポート/インポートできます。検証環境で作って本番へ移す、複数サイトへ同じ診断を展開する、といった使い方ができます。

結果から問い合わせにつなげられる? 結果コンテンツはブロックエディタで作るので、問い合わせボタンも Contact Form 7 のフォームもそのまま置けます。

診断シミュレーションProの機能や動作環境は製品ページで確認できます。

目次