<aside> 💡 ここでは、作成した画像上のどこにボタンを設置するか、またどのようなアクションを行うボタンにするのかを設定していきます。

</aside>

https://youtu.be/v_IqMFkeEvw

①基本のリッチメニュー設計方法

手順

  1. まずはじめにLINE Bot Designerをダウンロードしておきます

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/11bc0118-34fd-4020-b2d4-b0327b48c9b5/_2021-05-21_12.37.05.png

  2. ダウンロードしたLINE Bot Designerを立ち上げ「プロジェクトを作成」ボタンを押します

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d53346d9-1dec-4760-8bc9-71364d26fb2a/_2020-11-24_18.40.56.png

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ed819e26-11f0-4fea-b597-266c4928e389/8beadd4626014b039ad55b4d76bf93bb_20210330_133441.png

    ※上記のようなログイン画面が表示された場合は、「LINEアカウントでログイン」をクリックし、ご自身のLINEアプリで設定しているメールアドレス、パスワードでログインしてください。

    <aside> 💡 ビジネスアカウントでは設定不可です。

    LINE公式アカウントと接続されるわけではなく、あくまでツール発行用アプリとして独立して利用するものになります。

    </aside>

  3. プロジェクト名を設定して「OK」ボタンをクリックします。

    (どこにも反映されないので、適当で大丈夫です)

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/37dd25f9-c0ee-47d1-80a9-9de5df0de599/_2021-05-28_16.02.43.png

  4. 「リッチメニュー 」の+ボタンをクリックします。

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/74bea021-6284-46c4-b982-541fe4788820/Group_2_(1).png

  5. 名前のところに管理しやすいタイトルを入力します。

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4729fd82-b03a-4a9b-b2df-772f2b8558b9/_2021-05-28_16.04.34.png

  6. 「📁」マークをクリックし使用したいリッチメニュー画像をアップロードします。

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6d160a07-955e-46fb-ac32-ff9e5de1f616/_2021-05-28_16.06.06.png

  7. トークルームのタイトルバーに希望の文言を設定します

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/83f15d75-5025-46a9-8762-cfc7d7a12500/_2021-05-28_17.38.02.png

    <aside> 💡 リッチメニューのアクションを促すような文言に設定するのがおすすめ! 例:「お問い合わせはQ&Aから」「最新情報はこちらから↑」

    </aside>

    ユーザーにはこのように表示されます。

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/632e7611-f347-457f-96db-6102a079f1c4/S__65019928.jpg

  8. 画像上をドラックし、各ボタンの範囲を設定します

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2ed8ac7b-b948-481d-95dc-de2cd3b0797d/_2021-05-28_16.06.33.png

  9. 範囲ごとのアクションを設定していきます。

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/36e90cb8-036e-4ccb-8275-fdeb3a96a1da/_2021-05-28_16.07.32.png

    <aside> 💡 ・メッセージアクション:「テキスト」内に入力したキーワードに対し、自動応答でシナリオを返したい場合(FAQや新着商品、カテゴリごとの商品一覧を表示させる場合など) 「テキスト」はリッチメニューのデザイン内に記載の文言と揃えるのがおすすめです。

    ・URIアクション:URLに遷移させる場合(サイトやSNS、ショップカードなど)

    </aside>

  10. 右下のJSONコードをショートカットキー(control+Cまたはcommand+C)よりコピーします。※右クリックはできません このあと、チャットブースト管理画面に設定する際に使用します。

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8a62ea15-1b2d-4c84-873a-5abe3cd034ec/_2021-05-28_16.09.31.png

    なお、作成したデータは保存しておきましょう!

    (リッチメニューの動きを変更したい時に便利です。)

任意のボタンを押した際に別のリッチメニューに切り替える

<aside> 💡 複数枚のリッチメニューを使用することで、より多くの情報をユーザーに表示できたり、ユーザーのタイプによってリッチメニューを出し分けることが可能になります。 ここでは、ShopifyとLINEの会員連携を行ったユーザー向けのリッチメニューを設定します。

</aside>