診断の答えを「あえて隠す」と、ユーザーが自分から動く ——ロック柄×LIFF連携で、ゼロタップLINE登録フローを作るまで
業務改善コラム ／ 集客・見える化 ／ 読了目安：約8分
診断ツールを作るとき、「結果をすべて見せる」のが当たり前だと思っていました。ところが、弱点カテゴリをロック柄で伏せて「答えはLINEで受け取る」設計にした途端、ユーザーが自分から動く流れができました。LIFFという仕組みを使ってモバイルで自動的にLINEトークが開くゼロタップフローを作るまでの設計記録です。
「全部見せる診断」が招く問題
診断系コンテンツを設計するとき、最初に考えるのは「どれだけ詳しい結果を出すか」です。点数が出て、カテゴリ別の評価が出て、コメントがつく——それだけ丁寧に作れば価値は高いはず、というのが最初の発想でした。
ところが、結果をすべて開示すると「情報提供で終わる」という問題が起きます。ユーザーは診断結果を読んで満足し、次に何をすべきかが曖昧なままページを離れます。「あなたの弱点は広告管理と在庫確認です」と伝えても、「で、どうすれば?」と思われておしまいになりがちです。相談の入口になるはずが、無料コンテンツを読まれただけで終わる流れです。
情報を全開示すると、ユーザーは「学んだ」状態になります。学びが完結した人は、次のアクションを起こしにくくなります。診断ツールを集客の入口として使うなら、この「完結感」は設計上の問題です。
弱点を「ロック柄で伏せる」設計の発想
この問題を解決するために採用したのが「部分開示」の設計です。
診断完了後に表示するのは、カテゴリごとのバー（売上管理・広告・業務効率など）です。バーの色や長さで、どのカテゴリが強みでどれが課題になっているかは視覚的に伝わります。しかし、弱点と判定されたカテゴリのバーにはロック柄のオーバーレイをかけ、詳細が読めないようにします。
「答えはLINE診断書で受け取る」——このCTAを1つだけ置きます。
この設計で起きることは二つあります。まず、ユーザーはすでに20問を答えた後なので「ここまで来たのだから答えを見たい」という気持ちが自然に高まっています。次に、CTAが「LINE登録してください」という依頼ではなく「診断書を受け取る」という行動として提示されるため、ユーザーは自分の利益のために動く感覚を持てます。
LIFFでゼロタップ化した理由
「弱点の答えを知りたい」と思ってもらえたとしても、LINE登録の手順が面倒だと離脱が起きます。QRコードをカメラで読み取り、友だち追加し、トーク画面を探して——このステップを踏ませると、途中でやめる人が出てきます。
そこでLIFF（LINE Front-end Framework）を使いました。LIFFはLINEが提供するSDKで、WebページからLINEアプリの機能を呼び出せる仕組みです。
実装した流れはシンプルです。診断完了後、モバイルではLIFF SDKがLINEアプリへの切り替えを命令し、同時に診断書のテキストをそのトーク画面に送ります。ユーザーは何もしなくても、スマホがLINEトークを開いて診断書が届いた状態になります。LINEがまだ未登録の場合は、その時点で友だち追加画面が出ます。それも含めてLIFF側が処理するため、ユーザー体験としては「診断が終わったらLINEに届いた」という一本の流れになります。
QRコード→カメラ→友だち追加→トーク確認、という手順がゼロになる。この差は想像以上に大きいと感じています。
PCとモバイルで挙動を分けた実装
LIFFの自動起動はスマートフォン（LINEアプリあり）を前提とした設計です。PCブラウザでも動作はしますが体験が異なるため、ユーザーエージェントでデバイスを判定し、モバイルでは自動遷移・PCでは手動ボタンを表示する出し分けを行いました。
実装で注意が必要だったのはLIFFの初期化タイミングです。liff.init()は非同期で完了するため、初期化が終わる前にユーザーがボタンをタップするとLINE公式サイトのトップページに飛んでしまう不具合が起きます。
- 対処①：
init()のPromiseが解決されるまでボタンをdisabled状態にし、完了後に有効化する - 対処②：
redirectUriを明示的に指定し、認証後の戻り先が意図しないページになるケースを防ぐ
どちらも「動かしてみるまで気づきにくい」種類の落とし穴です。LIFFを初めて組み込む場合は、モバイル実機での確認を早めに行うことをお勧めします。シミュレーターやPCのブラウザでは再現しないケースがあります。
「部分開示→行動→完全開示」パターンの応用範囲
今回の設計をまとめると、「部分開示→ユーザーの自発的行動→完全開示」という構造です。この流れは診断ツール以外にも応用できます。
- コスト試算ツール：概算コストは見せる・詳細内訳はメール登録後に送る
- SEO簡易チェック：サイトの点数は見せる・改善提案リストは相談フォームから
- 在庫健全性チェック：カテゴリ別の評価は見せる・推奨アクションはLINEで
- 補助金適合確認ツール：適合カテゴリ数は見せる・対象補助金リストはメール登録後
共通しているのは「ユーザーが価値を確認してから、次の一歩を自分で選ぶ」という順序です。押し付けないことで、アクションを起こした人の温度が高くなります。
「コンテンツで完結させない」という設計の意図は、ユーザーにとって不利益ではありません。部分開示の段階でも十分な情報価値を渡すことが前提で、その上で「続きはLINEで」という動線を用意する形です。強引に情報を出し惜しみするのではなく、関係を始める入口として機能させる——この視点で診断ツールを設計すると、集客とユーザー体験が両立しやすくなります。