LINE ID連携 各画面の遷移と解説(スマートフォン)
LINE連携オプションご利用時のLINE ID連携、関連各画面の説明をします。
スマートフォン版(LINEアプリ内ブラウザも同じ)の画面遷移です。
LINE ID連携について
LINE ID連携の詳細と、ID連携機能のはじめかた、および活用方法については、「LINEとのID連携」オプションのはじめかたをご覧ください。
- 閲覧デバイスなどの注意事項につきまして、必ずご注意事項をご覧ください。
LINE連携オプションは『LINE@向け「Messaging API」 利用規約』および『API型LINE@運用ガイドラインのAPI型LINE@運営ルール』に従ってご利用ください。
目次
- 「LINE ID連携」画面(スマートフォンのみ)からのLINE ID連携する流れ
- LINEログインする流れ
- 会員登録済みのお客様(消費者)がLINEログインする流れ(コマースクリエイター切替後)
- 「マイページ」からのLINE ID連携の流れ
- 連携解除の流れ
- [参考]各「ログイン連携」ボタンの並び替え方法
- 【参照】LINE「認証」画面での「権限を編集」について
- 【futureshop omni-channelご利用時】LINE ID連携と同時に会員登録後、会員カードへの画面遷移について
- その他「ログイン連携」に関するマニュアル
「LINE ID連携」画面(スマートフォンのみ)からのLINE ID連携する流れ
このセクションでは、ECサイトのトップページやその他広告や告知LP上に、「LINE ID連携」画面へのリンクを張り、LINE ID連携をおすすめするなどの導線を想定しています。
「LINE ID連携」画面は、「マイページ」内の画面ですが、ログインなしで閲覧できます。
はじめてLINE ID連携する場合の流れ
LINE ID連携をしていただくには、まずはじめにショップが運営する公式LINEアカウントと「友だち」になっている必要があります。
「友だち」になっていただくためのQRコードや検索用のアカウント名を事前に告知しておきましょう。
以下は、「友だち」追加完了している状態のお客様(消費者)がID連携を行う際の画面遷移です。
「LINE ID連携」画面にて、「LINE ID連携」ボタンを押下します。
![](/images/line/spLineIdLink.png)
![](/images/sysparts/user-page-LinkLineId-link-member.png)
LINE「ログイン」画面が開きます。
LINEアプリで「LINE ID連携」ボタンをタップした場合は、この画面は表示されません。次画面に遷移します。
この画面はLINEの(LINEヤフー株式会社のシステムで生成される)画面です。(https://line.me/配下の画面)
LINEにご登録の情報(メールアドレスとパスワード)を入力してログインボタンを押下してください。(Android、LINEアプリ内ブラウザなど一部の環境では「ログイン」画面が表示されません。)
ログインが成功したら、LINEで「友だち」かどうか確認をし、「友だち」でなければ自動的に「友だち」に追加します。
![](/images/line/linemelogin.png)
※iPhone Safariの場合
すでにLINEの友だち追加済みだが、ブロックされていた場合
[1]「LINE ID連携」画面に戻ります。
LINE ID連携」を行う前に「LINE友だち追加」ボタンをタップしてください。
LINEアプリを起動しブロック解除していただきます。
![](/images/line/spLineIdLinkAddFriend-addfriend.png)
![](/images/line/spLineIdLinkAddFriendcc-addfriend.png)
[2]LINEアプリで友だちブロックを解除
LINEアプリが起動しますので、ブロック解除します。
※LINEアプリにて「設定(歯車アイコン)→友だち→ブロックリスト」にて編集ボタンから「ブロック解除」をタップしてもブロック解除できます。(iOS版LINEアプリの場合)
![](/images/line/lineaddfriend-202110.png)
[3]再度「LINE ID連携」ボタンを押下します。
LINEアプリで友だちを追加し終わったら、ブラウザに戻り、もう一度「LINE ID連携」ボタンを押下します。
![](/images/line/spLineIdLinkAddFriend-addID.png)
![](/images/line/spLineIdLinkAddFriendcc-addID.png)
LINEチャネル認証
同意するボタンを押下してください。
![](/images/line/linechannelallow.png)
LINE ID連携時「LINEチャネル認証」画面での「権限を編集」について
LINE ID連携時に「LINEチャネル認証」画面が表示される場合があります。
お客様(消費者)の操作により、お友だち追加ができなくなる場合がございますので、【参照】LINE「認証」画面での「権限を編集」についてをご覧ください。
連携を行います。
お客様(消費者)の会員登録状況・ログイン状況により、以下のように遷移するので、それぞれ以下のように連携を完了します。
[A]すでにECサイト会員IDでログイン中であった場合
「ログイン」画面は表示されず、「LINE連携完了」画面に遷移します。
[B]ECサイトに会員登録済みで、すでに友だちだった場合/LINE友だち追加が成功した場合
「ログイン」画面に遷移します。
「ログイン」画面にて、ECサイトにログインすると、ID連携が完了し、「LINE連携完了」画面に遷移します。
[C]ECサイトに会員に登録していない場合
「ログイン」画面で会員登録ボタンを押下し会員登録すると、会員登録完了と同時にLINE ID連携が完了します。
詳しい流れは、LINE ID連携と同時に会員登録する場合の流れをご覧ください。
LINE ID連携会員になれば、次回からはLINEでログインできるようになります。
![](/images/line/spAfterLinelogin.png)
![](/images/line/spAfterLinelogincc.png)
「LINE連携完了」画面が表示されます。
LINE ID連携が完了しました。
![](/images/line/spLineIdLinkComplete.png)
![](/images/sysparts/user-page-LinkLineIdSuccess-comment-complete.png)
LINE ID連携と同時に会員登録する場合の流れ
「LINE ID連携」画面にて、「LINE ID連携」ボタンを押下します。
はじめてLINE ID連携する場合の流れと同様です。
LINE「ログイン」画面が開きます。
はじめてLINE ID連携する場合の流れと同様です。
LINEチャネル認証
はじめてLINE ID連携する場合の流れと同様です。
「ログイン」画面が開きます。
「ログイン」画面が表示されますので、会員登録ボタンを押下します。
![](/images/line/splineaftrelogin.png)
![](/images/line/spAfterLinelogincc.png)
「会員登録」画面で会員登録します。
会員情報を入力します。
![](/images/line/spLineMemberEntryEdit2.png)
![](/images/line/memberentryconfirm.png)
![](/images/sysparts/user-page-register-edit-form.png)
LINE ID連携済みの会員登録が完了です。
![](/images/line/spLineMemberEntryComplete.png)
![](/images/sysparts/user-page-register-success-commentLine.png)
LINEログインする流れ
コマースクリエイター切替後は、マニュアル表示のステータスを「コマースクリエイター利用中」に変更し、会員登録済みのお客様(消費者)がLINEログインする流れ(コマースクリエイター切替後)をご覧ください。
スマートフォンサイト:ログイン画面
<LINEアプリからのログイン>
LINE ID連携済みの場合、LINEアプリでメッセージにあるURLをタップして、アプリ内ブラウザにてECサイトを表示した際は、自動的にログインできます。
<スマートフォンサイトからのログイン>
LINE ID連携済みの場合、「LINEでログイン」ボタン押下でECサイトにログインできます。
LINE ID連携済みの場合は、ログインできます。(マイページ、注文フォーム、クーポン取得などの画面に遷移)
LINE ID連携されていない場合は、スマートフォンサイトのログイン画面に戻ります。「LINEと会員連携(リンク)してください」からLINE連携画面に遷移してLINE ID連携していただけます。
![](/images/line/spLinelogin.png)
![](/images/line/spLinelogincc.png)
LINEログイン
この画面はLINEの(LINEヤフー株式会社のシステムで生成される)画面です。
本画面が開いた際には、LINEにご登録の情報(メールアドレスとパスワード)を入力して、LINEアプリにログインしてください。
![](/images/line/linemelogin.png)
通常のブラウザでECサイトを表示する方法
LINEアプリでメッセージに記載されたURLをタップすると、通常LINEアプリ内ブラウザでECサイトが表示されますが、URLの末尾に「openExternalBrowser=1」とつけると、通常のブラウザ(SafariやAndroid標準ブラウザなど)でECサイトが表示されるようになります。(例:http://example.com/fs/sample/group?openExternalBrowser=1)
Amazon Payご利用店舗の場合、スマートフォン版LINEアプリのメッセージからLINEアプリ内ブラウザでECサイトを表示すると、お届け先・お支払い方法(クレジットカード)選択ウィジェット(Amazonアカウントの登録情報が表示され、選択できる部分)がエラーになる場合があります。こちらはLINEアプリのセキュリティ仕様とAmazon Payの仕様によるものです。
通常のブラウザの場合、LINEログイン時にメールアドレスとパスワードを入力することになりますが、Amazon Payは正常に動作します。
会員登録済みのお客様(消費者)がLINEログインする流れ(コマースクリエイター切替後)
ゲスト(会員未登録)のお客様(消費者)は「LINE ID連携」と会員登録を同時に行う流れになります。
LINE ID連携と同時に会員登録する場合の流れをご覧ください。
LINEアプリからのログイン
LINE ID連携済みの場合、LINEアプリでメッセージにあるURLをタップして、アプリ内ブラウザにてECサイトを表示した際は、自動的にログインできます。
スマートフォンサイトからのログイン
「ログイン」画面にて[LINEでログイン]を押下します。
![](/images/line/spLinelogincc.png)
[A]未ログイン状態であった場合
[A-1]登録済み会員IDが、「LINE ID」と既に連携済みである場合
連携ログイン完了となり、「マイページ」などのログイン後の画面へ遷移します。
複数の会員IDをお持ちの場合は、連携済みの会員ID側でログインとなります。意図した会員情報でログインしているか確認が必要です。
[A-2]登録済み会員IDが「LINE ID」と未連携である場合
複数の会員IDをお持ちの場合、いずれの会員IDも未連携である場合を指します。いずれかが連携済みの場合は[A-1:登録済み会員IDが、「LINE ID」と既に連携済みである場合]の流れとなります。
「LINE ID連携」画面に遷移します。その後の流れについては、はじめてLINE ID連携する場合の流れと同様です。
[B]仮(自動)ログイン状態であった場合
ログイン状態が保持されている状態を指します。
仮ですでにログインしている状態のため、仮ログイン中の会員情報以外の会員情報や連携情報でログインしようとする(連携しようとする)と、すべてエラーとなります。具体的な流れは以下でご確認ください。
[B-1]登録済み会員IDが、「LINE ID」と既に連携済みである場合
- [B-1-1]連携済みの会員IDが、仮ログイン中の会員IDである場合
- 連携ログイン完了となり、「マイページ」などのログイン後の画面へ遷移します。
- [B-1-2](複数の会員IDをお持ちで)連携済みの会員IDが、仮ログイン中とは別の会員IDである場合
- 連携ログインできず、「ログイン」画面に遷移します。
- 以下のように「別のアカウントでログインする場合は一旦ログアウトしてください。」とエラーメッセージが表示されます。
この状態で仮ログイン中の会員情報で本ログインしても連携されません。 -
- <仮ログインしていた会員ID側で連携し直したい場合>
- 以下の手順で行います。
-
- ログアウトします。
- 連携済みの別の会員情報でログインし、「ログイン連携」画面にて連携解除し、ログアウトします。
- 先ほど仮ログイン状態であった会員情報で再度ログインし、「ログイン連携」画面より連携します。
- エラー表示された以降の「ログイン」画面では、仮ログイン中の会員情報以外ではログインできなくなります。
[B-2]登録済み会員IDが「LINE ID」と未連携である場合
複数の会員IDをお持ちの場合、いずれの会員IDも未連携である場合を指します。いずれかが連携済みの場合は[B-1:登録済み会員IDが、「LINE ID」と既に連携済みである場合]の流れとなります。
連携ログインできず、「ログイン」画面に遷移します。
以下のように「別のアカウントでログインする場合は一旦ログアウトしてください。」とエラーメッセージが表示されます。
この状態で仮ログイン中の会員情報で本ログインしても連携されません。
![](/images/sysparts/user-page-login-Linkageerror-logoutmessage.png)
<仮ログイン中の会員IDと連携したい場合>
メールアドレス・パスワードでログインし、「ログイン連携」画面にて連携します。
<複数会員IDをお持ちで、別の会員IDと連携したい場合>
以下の手順で行ってください。
- ログアウトします。
- 再度連携したい会員IDでログインし、「ログイン連携」画面にて連携します。
エラー表示された以降の「ログイン」画面では、仮ログイン中の会員情報以外ではログインできなくなります。
[C]本ログイン状態の場合
「ログイン」画面は表示されません。
「マイページ」内の「ログイン連携」画面から連携可能です。
画面遷移については「ログイン連携」画面からログイン連携の流れ(コマースクリエイター切替後のみ)をご覧ください。
通常のブラウザでECサイトを表示する方法
LINEアプリでメッセージに記載されたURLをタップすると、通常LINEアプリ内ブラウザでECサイトが表示されますが、URLの末尾に「openExternalBrowser=1」とつけると、通常のブラウザ(SafariやAndroid標準ブラウザなど)でECサイトが表示されるようになります。(例:http://example.com/fs/sample/group?openExternalBrowser=1)
Amazon Payご利用店舗の場合、スマートフォン版LINEアプリのメッセージからLINEアプリ内ブラウザでECサイトを表示すると、お届け先・お支払い方法(クレジットカード)選択ウィジェット(LINE IDの登録情報が表示され、選択できる部分)がエラーになる場合があります。こちらはLINEアプリのセキュリティ仕様とAmazon Payの仕様によるものです。
通常のブラウザの場合、LINEログイン時にメールアドレスとパスワードを入力することになりますが、Amazon Payは正常に動作します。
「マイページ」からのLINE ID連携の流れ
マイページトップのメニュー表示
![](/images/line/spMyPageTop.png)
![](/images/sysparts/user-page-mypage-linkArea-full.png)
<「LINE連携する」メニューの表示>
マイページトップに「LINE連携する」リンクが表示されます。
「LINE ID連携」画面に遷移します。
表示方法は、設定>購入者・会員情報>会員設定-マイページ設定-LINE ID連携設定「マイページトップにLINE ID連携へのリンクを表示する」構築>入力項目設定>会員機能に関する設定-アカウントサービスの設定-LINE ID連携の設定「アカウントサービスからLINE ID連携を見られるようにする」にチェックします。
<「ログイン連携」メニューの表示(コマースクリエイター切替後のみ)>
マイページトップに「ログイン連携」リンクが表示されます。
「ログイン連携」画面に遷移します。
表示方法は、設定>購入者・会員情報>会員設定-マイページ設定-ログイン連携設定「マイページトップにログイン連携へのリンクを表示する」にチェックします。
表示手順については、「LINEとのID連携」オプションのはじめかた-マイページに「LINE ID連携」「ログイン連携」メニューを表示するもご参照ください。
「LINE ID連携」画面からのログイン連携の流れ
「マイページトップ」の「LINE ID連携」メニューを押下すると、「LINE ID連携」画面が開きます。
その後の流れは、LINE ID連携する流れと同様です。
「ログイン連携」画面からログイン連携の流れ(コマースクリエイター切替後のみ)
「マイページ」内の「ログイン連携」画面から「LINE ID」と連携が可能です。
「マイページ」トップより[ログイン連携]メニューを押下します。
![](/images/sysparts/user-page-mypage-linkArea_AccountLinkage.png)
「ログイン連携」画面に表示された連携ボタンを押下します。
![](/images/sysparts/user-page-AccountLinkageSC.png)
「LINE ID連携」画面が開きます。
その後の流れは、LINE ID連携する流れと同様です。
「ログイン連携」画面に戻ると、連携済みサービスの表示が切り替わります。
連携済みとなると、連携ステータスと連携ボタンの表示が以下のように切替ります。
「連携中」「停止する」のラベルは変更可能です。 詳しくは、ログイン連携パーツをご覧ください。
![](/images/sysparts/user-page-AccountLinkageSC-OFFLINE.png)
サインインした「LINE ID」が、ログイン中の会員IDとは別会員IDと連携済みである場合
![](/images/sysparts/user-page-AccountLinkageSC-error.png)
ログイン中の会員IDとは、連携できません。左図のようにエラー表示となります。
以下のいずれかの方法で対応してください。
- 連携済みの会員情報で本ログイン後、「ログイン連携」画面から連携解除を行います。
さらにログアウトし、先ほどログイン中だった会員情報にて、再度連携操作を行います。 - ログイン中の会員IDとの連携をキャンセルし、連携済みの会員情報で本ログインしなおして、利用します。
連携解除の流れ
操作画面:マイページ>「ログイン連携」画面
「ログイン連携」画面を表示するには、マイページに「LINE ID連携」「ログイン連携」メニューを表示するを行う必要があります。
![](/images/sysparts/user-page-AccountLinkage-page.linkedAccounts.serviceArea-disconnectLINE.png)
![](/images/sysparts/user-page-AccountLinkageSC-OFFModalLINE.png)
- 「マイページ」から[ログイン連携]メニューを押下し、「ログイン連携」画面に入ります。
- 「連携中」のサービスを確認します。
サービス名欄に「連携中」、および[停止する]ボタンが表示されています。 - [停止する]を押下すると、「ログイン連携停止」モーダルが表示されます。
- [ログイン連携を停止する]を押下すると、連携が解除されます。
- 「ログイン連携」画面の該当サービス欄に「未連携」[各サービスの連携ボタン]が表示されていることを確認してください。
「ログイン連携」画面の、「連携中」「未連携」「停止する」のラベルは変更可能です。詳しくは、ログイン連携パーツをご覧ください。
ログイン連携を解除しても、ログイン状態は継続されます。(ログアウトされるわけではありません。)
本手順での連携解除は、ECサイト側のみの連携解除となります。各サービスでは、連携しているサイトとして情報が残っている場合があります。完全に連携を解除するには、お客様(消費者)が各サービスの管理画面上で連携解除を行う必要があります。
[参考]各「ログイン連携」ボタンの並び替え方法
「Apple」・「Google」・「Amazon」・「LINE」の、すべての連携オプションを利用している場合を例としてご説明します。
マイページ内の「ログイン連携」画面、「ログイン」画面でのボタンの並び順は、CSS、もしくはシステムパーツの並び替えにて変更可能です。
以下のページに、いくつか変更例を記載しておりますので、参考にしてください。
マイページ内の「ログイン連携」画面での並び替え方法
各ログイン連携用のボタンは、初期値では「Apple」「Google」「Amazon」「LINE」の並びで表示されます。
「ログイン」画面での並び替え方法
「ログイン」画面では、「Apple」「Google」「Amazon」について、CSSで変更可能です。
「LINE」は別のシステムパーツで出力されるため、表示位置は一番下か上に限られます。
【参照】LINE「認証」画面での「権限を編集」について
LINE ID連携時に、LINE「認証」画面が表示される場合があります。
このまま「同意する」ボタンを押下すれば、認証は完了します。
![](/images/line/lineAuthStep1.png)
認証画面にある「権限を編集」を押下すると、店舗様によっては、「公式アカウントの友だち追加」が任意項目として表示されます。(LINE ID連携を行う場合、「権限の編集」を押下する必要はありません。)
![](/images/line/lineAuthStep2.png)
「公式アカウントの友だち追加」のチェックをOFFにして「同意する」を押下すると友だち追加されず、LINE
ID連携機能を正しくご利用いただけなくなります。
必要に応じて、お客様へ告知や注意をしていたけますようお願いします。
![](/images/line/lineAuthStep3.png)
LINEアプリの設定(歯車アイコン)>個人情報-アカウント>連動アプリから、店舗様のアカウントを選択すると、「権限を編集」メニューが表示されます。こちらで「公式アカウントの友だち追加」チェックをONにすることもできます。
【futureshop omni-channelご利用時】LINE ID連携と同時に会員登録後、会員カードへの画面遷移について
新規会員登録から「会員バーコード」が表示できる会員カード画面までの画面遷移は以下となります。
- ECサイトの「LINE
ID連携」画面にて、にてID連携ボタンを押下します。
「LINEログイン」した後、「ログイン」画面に遷移します。 - 会員登録ボタンを押下します。
- 会員カードをお持ちの場合は、カード認証を行います。
- 会員情報を入力し、会員登録すると会員登録完了画面へ遷移します。
- マイページから「会員カードの表示」を選択すると、会員カード画面へ遷移し、会員バーコードを表示できます。
関連するマニュアル
活用方法や画面遷移、表示イメージなどに関するマニュアル
- 「LINEとのID連携」オプションのはじめかた
- LINE ID連携 各画面の遷移と解説(スマートフォン)
- 「LINE ID連携」画面(スマートフォンのみ)
- 【開店ガイド】LINE ID連携紹介ページを変更する
- LINE公式アカウントの運用について:LINE for Business>マニュアル
- 友だちの増やし方などについて:LINE for Business>コラム
- その他「ログイン連携」に関するマニュアル
設定に関するマニュアル
関連する機能活用マニュアル
LINE ID連携によって、以下の機能がご利用いただけます。
- LINEメッセージ配信(販促用)
- LINE ID連携会員に向けて、LINEメッセージが配信できます。
運用>LINEメッセージ>LINEメッセージ配信(絞込み) - LINEメッセージ配信(配信アドレスCSVデータ一括登録)
- LINEメッセージ配信用ファイル(CSV形式ファイル)を利用して、LINEメッセージを配信できます。
運用>LINEメッセージ>配信アドレスCSVデータ一括登録 - LINEメッセージ設定(お買い物通知用)
- LINE ID連携会員がご購入または定期・頒布会商品をお申し込み、また商品発送時にメールと同時にLINEメッセージを自動配信できます。
運用>LINEメッセージ>LINEメッセージ設定 - 会員検索
- LINE ID連携済みかどうか(連携済み・未連携)、またはLINE ID連携日を条件に会員を検索できます。
運用>会員管理>会員検索 - LINE ID連携ポイント付与
- LINE ID連携した会員にLINE ID連携ポイントを付与できます。
設定>ポイント>ポイント基本設定運用>ポイント管理>ポイント基本設定 - LINE ID連携クーポン付与
- LINE ID連携した会員が利用できる、LINE ID連携クーポンを付与できます。
運用>クーポン管理(CC)>クーポン発行(コマースクリエイター) - 特別ポイント付与
- 特別ポイントの付与対象会員の検索条件に、LINE ID連携済みかどうか(連携済み・未連携)、またはLINE ID連携日を指定できます。
また、特別ポイントを付与したことをお知らせするLINEメッセージを配信できます。
運用>ポイント管理>特別ポイント付与
運用>ポイント管理>特別ポイント履歴 - 特定会員クーポン付与
- 特定会員クーポンの付与対象とする会員の検索条件に、LINE ID連携済みかどうか(連携済み・未連携)、またはLINE
ID連携日を指定できます。
また、クーポン告知・クーポン未利用お知らせをLINEメッセージで配信できます。
運用>クーポン管理>クーポン付与(特定会員絞込み) 運用>クーポン管理>クーポン付与(特定会員絞込み)(コマースクリエイター)
運用>クーポン管理>クーポン履歴一覧 運用>クーポン管理>クーポン履歴一覧(コマースクリエイター) - メールマガジン発行
- LINE ID連携済みかどうか(連携済み・未連携)、またはLINE ID連携日を条件に会員を検索し、メールマガジンを配信できます。
運用>メールマガジン>メールマガジン発行(絞込み)
運用>デコメールマガジン>デコメールマガジン発行(絞込み)
関連する分析・計測機能活用マニュアル
- LINE ID連携済会員登録数の確認
- LINE ID連携済み会員数を確認できます。
管理TOP>管理トップ>店舗状況-顧客管理状況 に「LINE連携済会員登録数」として表示されます。 - LINE ID連携済会員登録数の推移や傾向の確認
- reports>顧客レポート>顧客数(ID連携別)をご利用すると、 期日を区切り、ID連携会員数の推移を確認できます。
- reports>注文レポート>注文(ID連携別)を利用すると、ID連携会員がどれくらい注文を行ったかを確認できます。
- 上記2レポートを組み合わせ、ID連携会員数がどれくらい注文に寄与しているか、相関関係(関係性)を確認することもできます。
詳しくは、reports>顧客レポート>顧客数(ID連携別)をご覧ください。