設問と結果を作り終えたあと、最後に残るのが「これ、どうやってページに出すのか」という工程です。先に答えを書くと、固定ページに貼るのは1行だけ。ブロックエディタなら1ブロック置くだけです。
そのうえで言うと、この記事の本題は貼り方ではありません。診断は設置作業より、ページのどこに置くか、始まる前に何を書くか、終わったあとどこへ送るかで結果が変わる。作ったのに使われない診断は、たいてい置き場所と前後の文章でつまずいています。
貼るのは1行。ブロックなら選ぶだけ
診断シミュレーションProでは、管理画面で設問セットを作った時点でIDが振られます。固定ページの本文に、次の1行を貼れば設置完了です。
[mqs_simulator id="設問セットID"]id には自分の設問セットのIDを入れます。ブロックエディタを使っているなら「診断シミュレーション」ブロックを追加して対象の診断を選ぶだけでも置けます。回答後の結果はページ遷移なし（AJAX）で、同じページにそのまま表示されます。
どちらを使うかは好みで決めていいのですが、ざっくり言えばこうです。クラシックエディタやテンプレート、ACFのフィールドなどブロックが使えない場所ではショートコード。編集担当者が複数いて、コードらしきものを触らせたくないならブロック。編集画面の見た目で位置を把握できるぶん、後者のほうが「うっかり消える」事故は起きにくいです。
設置先は投稿でも構いません。ただサービス案内やLPは長く残る資産なので、固定ページで持っておくほうが後々管理しやすい。ここは診断に限らずWordPressの運用の話です。
本文の外から呼ぶと、そこだけ何も出ない
設置でつまずく人がいるとしたら、ほぼこのパターンです。固定ページの本文に貼ったときは普通に動くのに、テンプレートファイルやACFのフィールドから呼び出したときだけ、診断の場所が空白になる。
原因はショートコードの書き方ではなく、診断に必要なCSSとJavaScriptがそのページで読み込まれていないことです。作っている側の事情を明かすと、これらのアセットは「本文に診断が置かれているか」を見て読み込むかどうかを決めています。全ページで無条件に読ませると、診断を置いていないページまで重くなるからです。その代わり、本文の外から呼ばれた場合は検知しきれない。
そのための逃げ道として、設定に「アセット強制読み込み」を用意してあります。テンプレートやACFから呼ぶ構成なら、これをオンにしておけば表示が安定します。表示されないときの切り分けはWordPressで作った診断が表示されないときの対処にまとめました。
まずは普通の固定ページで形を固めて、それから特殊な配置へ広げる。この順のほうが、どこで壊れたかを切り分けやすいです。
置き場所で完了率は変わる
診断をページのどこに置くかで、開始してもらえる率はかなり変わります。よく使う位置は3つあります。
ファーストビューのすぐ下は、「自分に合うかをまず知りたい」層と相性がいい。比較説明より先に体験してもらう置き方です。商品数が多いなら、結果からアンカーリンクで比較表や詳細説明へ飛ばせるようにしておくと、そのままCVにつながります。
CVとは、Conversion（コンバージョン）の略で、問い合わせ・購入・資料請求など、ページ上で達成したい行動のことです。CV率は、訪問者数に対してどれくらいCVが発生したかを示す割合を指します。
商品やプランの違いを一通り説明したあとに置くのも自然です。比較表を見て「違いは分かったけど、で、自分はどれ？」となった人をそのまま診断へ流せます（商品診断の作り方）。3つめが記事末やCTAの手前で、ノウハウ記事で悩みを整理してから診断に入る形。読者の中で問題意識が立ち上がった直後なので、意外とよく回ります。
どれか1つが正解というより、そのページで読者がどの段階にいるかで決まります。迷うなら、比較説明のあとから試すのが外しにくいです。
始まる前の一文と、終わったあとの一手
診断がいきなり始まると、人は身構えます。前に一文置くだけで開始率は変わるので、「3分でおすすめプランが分かります」「条件に合う案内だけを表示します」くらいの短い説明を添えておく。何が分かるのかを先に見せる、それだけです。
終わり側はもっと大事で、結果を表示して終わると導線がそこで切れます。結果コンテンツは通常のブロックエディタで作れるので、商品詳細ページへのリンク、問い合わせボタン、資料請求ボタン、Contact Form 7 のフォームあたりを必ず1つは置いておきたいところ。結果からCVへつなぐ設計は診断結果から問い合わせにつなげる方法で詳しく扱っています。
公開したら、自分のスマホで最後まで答える
設置が終わったら、公開前に一度、実際のページをスマホで開いて最後まで回答してみてください。PCで見ている限り自然でも、スマホだと余白が詰まる、ボタンが画面端に寄る、進捗バーが窮屈に見える、といったことがよく起きます。既存LPに差し込んだ場合は特に、周囲のデザインとの馴染みを最後に確認しておくと安心です。
もう一つ、複数ページに同じ診断を貼っていくと、どこに何を置いたか分からなくなります。診断シミュレーションProの設問セット編集画面では、その設問セットが今どのページで使われているかを確認できるようにしてあります。量産する前提なら、この画面を先に知っておくと後で探し回らずに済みます。
置いたあとは、ダッシュボードで開始数・完了数・完了率・設問別の離脱率を見ながら、位置や導入文を調整していく。完璧な配置を最初に当てにいくより、置いて数字を見るほうが早いです。
よくある質問
ショートコードとブロック、どちらがおすすめ？ どちらでも同じ診断が表示されます。ブロックが使える環境ならブロック、クラシックエディタやテンプレートから呼ぶならショートコードを使ってください。
1つのページに複数の診断を置ける？ 置けます。それぞれ別の設問セットIDを指定すれば、同じページに並べられます。
投稿にも設置できる？ できます。固定ページ・投稿のどちらでも同じショートコードとブロックが使えます。
テンプレートに直接書いたら表示されない 本文の外から呼ぶ場合は、設定の「アセット強制読み込み」をオンにしてください。それでも出ないときはキャッシュとIDの指定を疑うのが早いです。
—
診断シミュレーションProの機能や動作環境は製品ページで確認できます。
