診断の答えを「あえて隠す」と、利用者が自分から動く ——鍵マークとLINEの仕組み連携で、操作いらずのLINE登録の流れを作るまで
業務改善コラム / 集客・見える化 / 読了目安:約8分
診断ツールを作るとき、「結果をすべて見せる」のが当たり前やと思ってました。ところが、苦手な項目を鍵マークで伏せて「答えはLINEで受け取る」設計にした途端、利用者が自分から動く流れができた。LIFF(LINEの中でページを動かすための仕組み)を使って、スマートフォンで自動的にLINEのトーク画面が開く「操作ゼロ」の流れを作るまでの記録です。
「全部見せる診断」が招く問題
診断のような読み物を作るとき、最初に考えるのは「どれだけ詳しい結果を出すか」でした。点数が出て、項目別の評価が出て、コメントがつく——丁寧に作るほど価値が高いはず、と思ってたんです。
ところが、結果をすべて見せると「情報を渡して終わり」になります。利用者は診断結果を読んで満足して、次に何をするかが曖昧なままページを離れる。「あなたの弱点は広告管理と在庫確認です」と伝えても、「で、どうすれば?」で終わってしまう。相談の入口のつもりが、無料の読み物を読まれただけになってました。
情報を全部見せると、利用者は「学んだ」状態になります。学びが完結した人は、次の行動を起こしにくい。診断ツールを集客の入口として使うなら、この「完結感」が邪魔になるなと思いました。
弱点を「鍵マークで伏せる」設計の発想
そこで試したのが「一部だけ見せる」設計です。
診断が終わったあとに出すのは、項目ごとの棒グラフ(売上管理・広告・業務効率など)。棒の色や長さで、どこが強みでどこが課題かはひと目で伝わります。ただ、弱点と判定された項目の棒には鍵マークの模様を重ねて、詳しい中身が読めないようにしました。
「答えはLINE診断書で受け取る」——この誘導ボタンを1つだけ置いてます。
これで起きたことが二つあります。まず、利用者はすでに20問を答えた後なので「ここまで来たんやから答えを見たい」という気持ちが自然に高まってる。次に、ボタンが「LINE登録してください」という依頼ではなく「診断書を受け取る」という行動になるので、自分の利益のために動く感覚になります。

LIFFで操作をゼロにした理由
「弱点の答えを知りたい」と思ってもらえても、LINE登録の手続きが面倒やとそこで離れます。QRコードをカメラで読み取って、友だち追加して、トーク画面を探して——この手順を踏ませると、途中でやめる人が出る。
そこで使ったのがLIFF(LINE Front-end Framework)です。LINEが用意している開発用の部品で、ふつうのWebページからLINEアプリの機能を呼び出せます。
組み込んだ流れは単純です。診断が終わると、スマートフォンではLIFFがLINEアプリへの切り替えを指示して、同時に診断書の文章をそのトーク画面に送ります。利用者は何もしなくても、スマホがLINEのトークを開いて診断書が届いた状態になる。LINEをまだ友だち追加してない場合は、その時点で追加画面が出ます。それも含めてLIFF側が処理するので、使う側から見ると「診断が終わったらLINEに届いた」という一本の流れになります。
QRコード→カメラ→友だち追加→トーク確認、という手順がゼロになる。この差は、想像以上に大きかったです。
パソコンとスマートフォンで動きを分けた作り
LIFFの自動起動は、LINEアプリが入ったスマートフォンを前提にした仕組みです。パソコンのブラウザでも動きますが見え方が変わるので、ブラウザが送ってくる端末情報から機種を見分けて、スマートフォンでは自動で移動・パソコンでは手動のボタンを表示する、という出し分けにしました。
ハマったのは、LIFFの準備が整う時点です。liff.init()は裏側で少し時間をかけて終わるので、準備が終わる前に利用者がボタンを押すと、LINE公式サイトのトップページに飛んでしまう。最初これに気づかず、しばらく原因が分からへんかったです。笑
- 対処①:
init()の処理が終わるまでボタンを押せない状態にし、完了後に押せるようにする - 対処②:
redirectUri(戻り先のページ)をはっきり指定し、ログイン後の戻り先が意図しないページになるのを防ぐ
どっちも「動かしてみるまで気づきにくい」タイプの落とし穴でした。LIFFを初めて組み込むなら、実物のスマートフォンでの確認を早めにやるのがいいと思います。パソコン上の疑似的な画面やパソコンのブラウザでは再現しないことがあります。
「一部だけ見せる→行動→全部見せる」という型の応用範囲
今回やったことをまとめると、「一部だけ見せる→利用者が自分から動く→全部見せる」という構造でした。これは診断ツール以外にも応用できると思ってます。
- 費用の試算ツール:おおよその金額は見せる・詳しい内訳はメール登録後に送る
- 検索対策(SEO)の簡易チェック:サイトの点数は見せる・改善案の一覧は相談フォームから
- 在庫の健全性チェック:項目別の評価は見せる・おすすめの対応はLINEで
- 補助金の適合確認ツール:当てはまる項目数は見せる・対象の補助金一覧はメール登録後
共通してるのは「利用者が価値を確認してから、次の一歩を自分で選ぶ」という順番です。押し付けへんぶん、動いた人の温度が高くなる。
「そのページだけで完結させない」というのは、利用者にとって不親切な話やないと思ってます。一部だけ見せる段階でもちゃんと価値を渡すのが前提で、その上で「続きはLINEで」という道すじを用意する形です。出し惜しみやなくて、関係を始める入口として機能させる。ここを踏み外すとただの意地悪になるので、気をつけてます。同じような入口を作りたい人がいたら、どこを隠してどこを見せるかから一緒に考えましょう。
サイトに診断ツールを設けてLINE登録の流れを作りたい方へ
診断の設計からLIFF連携の組み込みまで、目的に合わせて組み直します。LINEで状況を送ってもらえたら、どういう形が向いてるかを返します。
LINEで相談するあわせて読みたい
いま、どこで詰まっているか
当てはまるものをタップするだけ、約1分。入力も登録も要りません。詰まっている場所が分かったら、その直し方を「診断書」にしてLINEでお送りします。
記事の更新通知だけ受け取りたい方は、LINEで新着記事を受け取る。月に数本、相談の義務はありません。