お客様の画面の全体像とURLの作り方
ここからのページでは、お客様(LINEの友だち)側に表示される画面を紹介します。会員証・プラン購入・予約などはすべて「LIFFアプリ(LINEの中で開く会員ページ)」として表示されます。このページでは、どの画面がどのURLで開くのか、そのURLをどこで入手してお客様に案内するのかをまとめます。
管理画面との関係
お客様の画面は、管理画面の LIFFアプリ一覧 で登録した「デフォルトのLIFFアプリ」を通して表示されます。プランやクーポンなど画面に出る内容は、それぞれの管理画面での設定がそのまま反映されます。
代表的な3画面です。実際には契約状況や管理画面の設定に応じて、表示されるボタンや項目が変わります。
入口URLの基本形
お客様に案内するURLは、次の形が基本です。
https://liff.line.me/<LIFF ID>このURLを開くと、LINEアプリの中で会員ページが立ち上がり、最初に プラン一覧(ホーム) が表示されます。さらに、URLの後ろに画面ごとのパスを付けると、その画面を直接開けます。
https://liff.line.me/<LIFF ID>/member-ship ← 会員証を直接開く例ご自身のLIFF IDを確認するには
プラン編集画面の「LIFFプランURL」など、管理画面のURLコピー機能で取得したURLに https://liff.line.me/<LIFF ID>/... の形でLIFF IDが含まれています。その https://liff.line.me/<LIFF ID> までの部分を流用し、後ろのパスを付け替えるのが確実です。
トラッキング用の短縮URL
LIFF アプリの編集画面では、QR コードや印刷物向けに「トラッキング用LIFF URL(短縮版)」をコピーできます。短縮版は次のように、/t/の後ろへ遷移先を置き、https://や計測制御用のクエリを省略した形式です。
https://liff.line.me/<LIFF ID>/t/lin.ee/<友だち追加URLのID>短縮版を開くと、/t/へのアクセス自体が流入元計測として扱われます。LINE 公式アカウントはアクセス時点のデフォルト設定を使用し、パスに含まれる遷移先と広告などから付与されたクエリを流入元として保存してから、友だち追加URLへ転送します。
画面とURLの一覧
| 画面 | パス | お客様への案内方法 |
|---|---|---|
| プラン一覧(ホーム) | /plans (省略可) | https://liff.line.me/<LIFF ID> をリッチメニュー等に設定 |
| プラン詳細 | /plans/<プランID> | プラン編集画面の「LIFFプランURL」をコピー |
| プラン契約(購入) | /subscribe/<価格ID> | プラン一覧・詳細の「購入する」ボタンから遷移(URLの個別案内は不要) |
| 会員証 | /member-ship | パスを付けたURLをリッチメニュー等に設定 |
| 契約内容の確認・解約 | /subscription/<契約ID> | プラン一覧の「プランを確認する」から遷移(契約ごとのURLのため個別案内は不要) |
| 予約一覧 | /reservations | パスを付けたURLをリッチメニュー等に設定 |
| 予約の作成 | /subscription/<契約ID>/reservations | 契約中プランの「予約する」ボタンから遷移 |
| 順番待ち受付 | /shops/<店舗ID>/waitlist | 店舗ごとの受付URLをリッチメニューや店頭QRで案内 |
| モバイルオーダー | /subscription/<契約ID>/mobile-order | 契約中プランの注文ボタンから遷移 |
| 保有クーポン・利用履歴 | /coupons | パスを付けたURLをリッチメニュー等に設定。会員証の導線を非表示にしていても直接案内可能 |
| クーポンの取得 | /coupons/<クーポンID> | クーポン編集画面の「クーポン取得用URL」をコピーして配布 |
| 抽選 | /lottery | パスを付けたURLをリッチメニュー等に設定 |
| ポイント残高・履歴 | /points | パスを付けたURLをリッチメニュー等に設定 |
| 友だち紹介 | /referral?campaignId=<キャンペーンID> | 紹介キャンペーンごとのURLを案内 |
| 会員情報の登録・変更 | /user/new / /user/edit | 会員証の「登録情報の変更」から遷移。直接案内も可 |
| お支払い方法の確認・変更 | /settings/payment-info | 画面下部の共通メニュー「お支払い情報」から遷移 |
| 銀行振込残高・請求履歴 | /bank-account | 銀行振込を有効にしている場合に案内 |
| アンケート回答 | /survey-forms/<フォームID> | フォーム一覧の「回答URL」をコピーして配信などに利用 |
| 店舗チェックイン | /shops/<店舗ID>/check-in | 店舗一覧の「QRコードを表示」で取得したQRコードを店頭に設置 |
滞在課金を有効にしたプランでは、チェックアウト時に滞在料金の支払いが表示されます。契約や店舗の設定に応じて自動で開く画面のため、通常はURLを個別に案内する必要はありません。
画面下部の共通メニュー
お客様の画面の下部には、3つの共通メニュー(タブ)が表示されます。
| タブ | 移動先 |
|---|---|
| ホーム | プラン一覧 |
| 会員情報 | 会員証 |
| お支払い情報 | お支払い方法の確認・変更 |
お客様はどの画面からでも、このタブで主要な画面に移動できます。
リッチメニューへの設定方法
リッチメニュー一覧 でメニューを作成するとき、タップ領域のアクションに上記のURL(例: https://liff.line.me/<LIFF ID>/member-ship)を貼り付けると、お客様がメニューをタップしたときにその画面が直接開きます。「会員証」「ご予約」「プラン購入」のようにタップ領域ごとに別の画面を割り当てるのが定番の構成です。
LINE以外のブラウザで開いた場合
これらのURLはLINEアプリの中で開くことを前提にしています。パソコンなどLINE以外のブラウザで開いた場合は、画面は表示されず、スマートフォンでLINEを開くための案内(QRコードやLINEアプリ起動ボタン)が表示されます。お客様への案内は、LINEのトーク・リッチメニュー・LINE内で開くページの中に置くようにしてください。
実際の見た目を確認するには
ご自身のスマートフォンで自店舗のLINE公式アカウントを友だち追加し、リッチメニューや案内URLから開くと、お客様と同じ画面を確認できます。