診断LPの作り方と構成｜最初の画面・質問・結果・LINEまで、結婚相談所の24問診断の実例診断LPの作り方と構成｜最初の画面・質問・結果・LINEまで、結婚相談所の24問診断の実例

「診断LPを作りたい。でも、最初の画面に何を置いて、結果のどこでLINEに誘えばいいのか分からない」

診断を作ろうとすると、質問の中身から考え始める人が多いと思います。ところが実際に手が止まるのは、画面の組み方のほう。STARTボタンの前に何を置くか、24問をどう分けるか、結果をどこまで見せるか。ここが決まらないと、LINEの友だち追加まで人が進みません。

2026年10月、大阪・淀屋橋の結婚相談所 Life Creation で、24問・6タイプの「婚活タイプ診断」のLPを作りました。依頼は10月19日の朝で、公開は翌日の午後。作った画面を1枚ずつ見せながら、診断LPの構成と、公開後に見ている数字を書きます。

質問とタイプの決め方、同点のときの判定は診断コンテンツの作り方に、広告の数字は診断LPのMeta広告に分けて書いています。この記事は画面の話だけです。

診断LPは、予約より軽い入口として置くページ

10月12日、結婚相談所の申込の入口を調べました。全国規模の相談所は、予約、資料請求、LINE、診断のように、入口を3〜7つ持っていた。大阪の中小の相談所は、面談の予約だけのところがほとんどです。Life Creation の公式LPも、入口は日時を決めて受ける60分のオンライン相談だけでした。

婚活を考え始めたばかりの人に、いきなり60分の相談は重い。まだ相談する気はないけれど、自分がどんなタイプかは知りたい。そういう人とLINEでつながっておくために、診断のページを1つ足すことにしました。

内容や結果をライン登録で見れる形にしたいです　ラインの獲得リードを最大化するのが狙いです （2026年10月19日の依頼）

ねらいはLINEの友だち追加です。予約を取るページではない。

ここを最初にはっきりさせておくと、あとで迷いません。最初の画面に料金表を載せるか、結果の画面に予約のボタンをいくつ置くか。どちらも、ゴールがLINEだと決まっていれば答えが出ます。

診断LPは4つの画面でできている

婚活タイプ診断のLPを、画面ごとに並べるとこうなります。

最初の画面何の診断かを伝えて、STARTを押してもらう

質問の画面24問を8問ずつ3ステップで答えてもらう

結果の画面タイプと2項目だけを見せて、LINEのボタンを押してもらう

LINEの続き結果カードから、全7項目の詳しい結果のページを開いてもらう

画面は、最初の画面と質問の画面と結果の画面で、URLが分かれています。STARTを押すと /shindan/questions/ に移り、答え終わると、タイプごとの結果のページへ。

URLが分かれていると、どの画面で人が減ったかを、GA4のページの単位でも見られます。1枚のページの中で画面を切り替える作りだと、GA4の上ではずっと同じページにいることになる。

4つ目のLINEの続きは、LPの外にあります。友だち追加をするとLINEに結果カードの画像が届き、それをタップすると、7項目すべてが載った詳しい結果のページが開く。LPを作るときは、ここまでを1つの流れとして組みました。

最初の画面に置くのは、キャッチ・絵・実績の帯・STARTの4つだけ

形は、すでにある別の業種の適性診断のページを参考にしました。キャッチ、イラスト、実績の帯、STARTボタンだけの短い最初の画面。そこに、相談所の実績を載せた形です。

開いた直後

スクロールした先

最初の画面（スマホの幅）。左が開いた直後、右が少しスクロールした先。STARTボタンのすぐ下はフッターで、ページはそこで終わる

上から順に、置いたものは4つ。

キャッチで、何の診断で何分かかるかを言う。実績の帯で、どこの誰が作った診断かを見せる。知らない相談所の診断に答えるのは、少し身構えるものです。帯の数字には、IBJの公表データであること、お見合いや成婚を保証するものではないことを注記で添えました。

STARTの下の一文は、終わりを見せるために置いています。24問と書いてあれば、あとどれくらいで終わるか読む人が自分で見積もれる。

載せなかったものもあります。料金表、会員さんの声、よくある質問、相談所の詳しい紹介。公式LPなら当然載せるものを、ここでは全部外しました。ページはSTARTのすぐ下で終わり、あとはフッターだけです。

実際にスマホの幅（390px）で開いてみると、開いた直後の画面に収まるのは実績の帯の途中まで。STARTは1回スクロールした先にあります。スクロールした先にも、START以外に押すものはありません。実際の診断は婚活タイプ診断のページで開けます。

質問の画面は、24問を8問×3ステップに分ける

24問を1ページにずらっと並べると、スマホではいつまでも終わらない縦長のページになります。8問ずつ3つのステップに分けました。

Step 1の最初

8問に答えたところ

Step 2

質問の画面。左がStep 1の最初、中央が8問に答えたところ、右がStep 2。上の丸で今のステップが分かる

画面の上には、小さくしたキャッチと「Step 1」「Step 2」「Step 3」の3つの丸。今いるステップの丸に色が付きます。

質問の下に「はい」「どちらでもない」「いいえ」の3つのボタンが横に並び、選んだボタンはピンクで塗りつぶされる。8問の下にNEXTボタンがあり、その下に「のこり 8 問」のように残りの数が出ます。NEXTを押すと、次のステップの1問目、つまり画面のいちばん上から始まる。

答えをタップしても、勝手にスクロールさせない

参考にした適性診断のページは、答えを選ぶと次の質問まで自動でスクロールしていました。最初はそれを真似していた。

作っている途中で、使いにくいという指摘が入りました。タップするたびに画面が動くと、いま選んだ答えが見えなくなる。選び直したくても、ボタンが画面の外へ流れていってしまいます。自動のスクロールは外し、答えた質問に印が付くだけにしました。

ステップの切り替わりでだけ画面を上に戻す、というのが今の作りです。動かすのは、人がNEXTを押したときだけ。

Step 3の最後のボタンだけは、NEXTでなく「診断結果を見る」。押すと、ハートが並んだ「あなたの婚活タイプを診断しています…」の画面をはさんで、タイプごとの結果のページに移ります。計画家タイプなら /shindan/result/compass/ のように、URLもタイプで分かれている。

結果の画面は2項目だけ見せて、残りはぼかしと鍵で

全部見せたら、LINEに登録する理由がなくなる。何も見せなければ、当たっていると感じてもらえない。結果の画面は、この間をとる画面です。

診断中

タイプとグラフ

ぼかしと鍵

LINEのボタン

結果の画面（例は計画家タイプ）。左から、診断中の画面、タイプとグラフ、ぼかしと鍵、無料カウンセリングとLINEのボタン

結果の画面の上から順に、見せているのはこうです。

1. タイプのモチーフの絵と「あなたは 理想を描く計画家タイプ」
2. 6タイプそれぞれの当てはまり度の棒グラフ
3. 「こんなところ、ありませんか？」と、当てはまった質問4つ
4. 長所と短所
5. 恋愛の傾向の1文目

恋愛の傾向の2文目から先には、ぼかしをかけています。その上に鍵の印と「詳しい診断結果は全7項目。ここで見られるのは2項目だけです」。続きの項目の名前を、相性のいいお相手、向いている出会い方、成婚までの3ステップのように札にして並べ、最後に「残りの項目は、LINEで無料でお届けします」と書きました。

隠したものの名前だけは見せる、というのがこの画面の肝です。鍵の向こうに何があるか分からないと、続きを読みたいとは思いにくい。公開した日には、ぼかしている部分の中身そのものも厚くしました。

LINEのボタンは5か所

LINEの友だち追加のボタンは、結果の画面に5か所あります。行き先は5つとも同じで、ボタンの文言だけを2種類に分けました。

文言は、詳しい結果を受け取る言い方と、無料カウンセリングを受ける言い方の2つ。どちらを押しても、友だち追加のあとに届くものは同じです。

ボタンを押すと、画面に出ている診断コード（計画家タイプなら LC03）がコピーされます。コードのすぐ下には「結果が届かないときは、トークにこのコードを送信」。友だち追加と同時に結果が届くのが本来の流れで、届かなかったときの逃げ道として置いています。

結果の画面の後半には、婚活を始めた人が陥る3つの落とし穴、Life Creation の3つの強み、無料カウンセリングの案内と、公式LPに近い段も続きます。

公開した翌日に作り直したところ

「3人に1人が同点」。試しに答えを何通りか入れてみて、出てきた数字がこれでした。

公開した日の判定は、合計点が同じなら、タイプの並び順で前にあるほうを出すもの。これだと、並びの先頭にある聞き上手タイプ（LC01）が、最後のマイペースタイプ（LC06）の2倍以上出る。結果の画面をどれだけ作り込んでも、出てくるタイプが偏っていたら、当たっていると感じてもらえません。

判定を作り直したのは10月21日。合計点、「はい」の数の順に比べて、それでも並んだら、並んだタイプの文だけを並べた「最後の1問」を出して本人に選んでもらう形です。あわせて、結果の画面に6タイプの当てはまり度のグラフを出すようにした。上で見せたグラフがそれです。

同点のときだけ出る最後の1問。24問すべてに「はい」と答えると、6タイプが同点になってこの画面が出る。選ぶとすぐに結果へ移る

画面の作りとしては、質問の画面に1枚足しただけ。「最後に1問だけ。いちばん自分に近いものはどれですか？」の下に、並んだタイプの文がボタンで並び、下に「選ぶと、すぐに結果が出ます」。ほかの質問と違って3択でなく、1つ選べばそのまま結果に移ります。

判定の決め方そのものは、診断コンテンツの作り方に詳しく書きました。画面の側で直したのは、もう1つ。詳しい結果を、LINEの文章で送るのをやめて、ページで開く形にしたことです。LINEの吹き出しに長い文が並ぶと、先に送った結果カードが画面の上に押し出されて見えなくなる。今は、結果カードの画像とボタンだけを送っています。

余談ですが、色は参考にした診断のピンクを公式LPのローズに寄せた #d9879a に、ゴールドとアイボリーを合わせています。LINEのボタンだけは、LINEの緑のままにしてあります。

公開後に見る数字

詳しい結果のページまで開いた人は95%。

10月28日時点で、診断からLINEの友だち追加をした人のうち、これだけが詳しい結果のページを開いていました。LINEに届く結果カードをタップする、という最後の段は、ほぼ全員が通っている。

数えている場所を画面の順に並べました。

line_click には、5か所のうちどのボタンが押されたかと、タイプも一緒に残しています。どの位置のボタンが押されているか分かれば、使われていないボタンを外す判断ができる。

GA4のイベントのほかに、Microsoft Clarity（画面の動きを録画して見られる無料の道具）も入れました。数字で減っている画面が分かったら、その画面の録画を見に行けます。

公開した日に、STARTを押した数がGA4にほとんど届いていないことにも気づきました。押してすぐ次のページへ移るので、送り終わる前にページが切り替わっていた。直した経緯は診断コンテンツの作り方に書いています。

LINEの先は、ステップ配信で続ける

友だち追加のあとは、LPの外の話。10月25日に自動の配信を足しました。追加から2時間後に、詳しい結果のページを開いたかどうかで送る内容を分け、翌日の20時と4日後の20時に続きを届けます。10月28日には、結果カードに「翌日20時に届く」という予告も入れている。

日付ごとに送る配信の組み方は、LINEのステップ配信で、別の案件の例で書いています。LINEから無料カウンセリングの予約まで何人進んだかは、まだ集計中です。

まとめ：診断LPを作る前に決めておく3つ

作ってから直したところを振り返ると、どれも作る前に決めておけたことでした。

1. 最後に何を渡すか。結果の画面で見せる項目と、LINEのあとに渡す項目の境目を、画面を作る前に決める
2. 画面ごとに何をしてもらうか。最初の画面はSTART、質問の画面はNEXT、結果の画面はLINEのボタン。押してほしいものを画面ごとに1つに絞る
3. どこで数えるか。開始、各ステップ、完了、LINEのボタン、友だち追加、詳しい結果を、別々のイベントにしておく

1つ目が決まらないと、結果の画面のぼかしをどこからかけるかが決まりません。2つ目と3つ目は、公開してから足すと、最初の数日の数字が取れないまま広告費だけが出ていきます。

診断を、無料の作成ツールで作るか、LINEの拡張ツールの診断機能を使うか、自分で作るか。この選び方は診断コンテンツを作るツールの選び方にまとめました。Life Creation の診断を作った経緯と使った仕組みは、制作実績のページに載せています。