CHAPTER 05
LINEのリッチメニューの設計と作り方
この章で分かること
- リッチメニューの評価を「見た目」から「タップ数」に置き換える方法と、測れていないメニューを直せない理由
- ボタンの数・並び・文言の決め方、タブ切替と状態別の出し分けをいつ使うか
- 画像を作る前に決めること(実機で読める文字・押しやすい分割)と、更新の運用
この章の目次(9)
- 1配信は流れる。メニューは残る
- 2押されている場所しか意味がない
- 3何ボタンにするか、何を置くか
- 4タブの切り替えは、必要になってから
- 5状態で出し分ける
- 6画像を作る前に決めること
- 7更新の運用
- 8よくある誤解を3つ
- 9この章の出口
リッチメニューは、会社案内の看板ではありません。トーク画面を開くたびに、画面の下半分を占領する常設の面です。 だから評価の基準は「きれいかどうか」ではなく、押されているかどうかの一点になります。そして押されているかは、感想ではなく管理画面の数字で分かります。 この章は、タップ数を先に見られる状態を作り、ボタンの数と並びと文言を決め、状態別の出し分けとタブ切替を判断し、10項目の点検リストで公開の可否を決めるための章です。
この章で分かること
- リッチメニューの評価を「見た目」から「タップ数」に置き換える方法と、測れていないメニューを直せない理由
- ボタンの数・並び・文言の決め方、タブ切替と状態別の出し分けをいつ使うか
- 画像を作る前に決めること(実機で読める文字・押しやすい分割)と、更新の運用
配信は流れる。メニューは残る
| 配信(B・C) | リッチメニュー | |
|---|---|---|
| いつ目に入るか | 送った直後だけ | トーク画面を開くたび毎回 |
| 費用 | 送るたびにかかる | 何回見られてもかからない |
| 作り直す頻度 | 毎回 | 3ヶ月に1回 |
| 効く相手 | 送った相手 | 過去の友だち全員(ブロックしていない人) |
| 失敗したときの影響 | その1回で終わる | 直すまで毎日続く |
配信を1回増やすより、メニューの1つ目のボタンを出口に変えるほうが、費用ゼロで効き続けます。 それなのに後回しになりやすいのは、成果が配信ほど目に見えないからです。見えるようにするのが、この章の前半です。
押されている場所しか意味がない
リッチメニューの議論は、放っておくと「どのデザインが良いか」に流れます。この議論は、タップ数を見れば1分で終わります。
LINE公式アカウントの管理画面には、リッチメニューのエリアごとのタップ数を見る画面があります(画面の名称と項目は提供元のヘルプで確認してください)。Lステップ・エルメを入れている場合は、ツール側でも押した人を個人単位で記録できます。
見る順番は3つです。
| 見る順 | 数字 | 判断 |
|---|---|---|
| 1 | 各ボタンの直近1ヶ月のタップ数 | 0のボタンは、置いている意味がない |
| 2 | タップ数の順位と、置いている位置の対応 | 一番押されているものが一番小さい枠にあるなら、入れ替える |
| 3 | 出口のボタンのタップ数と、その先の完了数 | 押されているのに完了しないなら、原因はメニューではなく飛び先 |
3が最も見落とされます。 メニューの改善を何度やっても予約が増えないとき、原因が飛び先のページにあることは珍しくありません。タップ数と完了数を両方並べないと、どちらを直せばいいか永久に分かりません。
タップ数が出せない状態で、メニューを作り直さないでください。 直した結果が良くなったのか悪くなったのかが分からず、次も感想で決めることになります。これが、点検リストの2番を必須にしている理由です。
何ボタンにするか、何を置くか
当社は6つ以内を出発点にしています(LINEのリッチメニューは分割の型がいくつか用意されており、6分割が最も細かい型です。選べる型と画像の仕様は公式ヘルプで確認してください)。6つを上限にしているのは、当社の決めごとです。理由は2つあります。
- 7つ以上置きたくなる時点で、出口が2つ以上あるか、置く必要のないものを置いています
- 分割が細かいほど1枠が小さくなり、指で押し分けられなくなります
置くもの・置いてはいけないもの
| 置くもの | 置く位置 |
|---|---|
| 出口(予約する・申し込む・空きを見る) | 左上、または最も大きい枠 |
| よくある質問の答え | 2番目以降 |
| 営業時間・アクセス | 小さい枠でよい |
| 相談・問い合わせ | 控えの出口として1つ |
| 会員証・マイページ(LIFFがある場合) | 押す頻度が高いなら上段 |
| 置いてはいけないもの | 理由 |
|---|---|
| 会社概要・代表あいさつ | 押されません。タップ数を見れば分かります |
| SNSのリンクを並べる | LINEの外に出したうえに、出口ではありません |
| 同じ飛び先のボタンが2つ | どちらが押されたか分からず、測れなくなります |
| 日付・価格を焼き込んだ画像 | 期限が来た瞬間に嘘になります(後述) |
| 出口が2つ | 配信もメニューも半分ずつになります(2章) |
左上を出口にするのは、当社の決めごとです。 理由は、日本語のUIを上から左から読む人が多いことと、片手で持ったときに最初に目が行く位置だからです。自社のタップ数で別の結果が出たら、そちらを信じて入れ替えてください。この章の主張は「左上が正しい」ではなく、「タップ数で決めろ」です。
文言は動詞にする
| ×(名詞だけ) | ○(動詞) |
|---|---|
| サービス紹介 | できることを見る |
| ご予約 | 空き枠を見て予約する |
| お問い合わせ | 相談を送る |
| メニュー | 料金を見る |
| キャンペーン | 今月の特典を受け取る |
名詞は「何があるか」しか伝えませんが、動詞は押した後に何が起きるかを伝えます。押す前の不安が減るぶん、タップ数が動きます。文字数は、画像の中で読める範囲(おおむね6〜10文字)に収めてください。
タブの切り替えは、必要になってから
Lステップ・エルメには、メニューの中にタブを置いて面を切り替える作り方があります(機能の呼び名は各社で違います。提供元のマニュアルで確認してください)。1枠を「もっと見る」にして、押すと別のメニュー画像に差し替わる仕組みです。
| 1面(タブなし) | 2面(タブあり) | |
|---|---|---|
| 置けるボタン | 最大6 | 最大10前後(1枠をタブに使うため) |
| 押すまでの手数 | 1回 | 2面目は2回 |
| 向いている場面 | 出口が1つで、案内も少ない | 会員向けの機能が多い/メニュー表・カタログが要る |
| 測り方 | ボタンごとのタップ数 | タブのタップ数も見る(押されないタブは存在しないのと同じ) |
最初は1面で始めてください。 2面目は、1面のボタンがすべて押されていて、それでも置き場が足りないときにだけ足します。押されていないボタンが1つでもある状態で2面目を作るのは、順番が逆です。
状態で出し分ける
Lステップ・エルメには、タグによってメニューを出し分ける機能があります(機能の有無と設定手順は提供元のマニュアルで確認してください)。3章の状態タグが、そのまま使えます。
| 状態 | 出すメニュー | 1つ目のボタン |
|---|---|---|
状態_見込み |
初回向け | 初回の相談/初回限定の特典 |
状態_予約済み |
予約中向け | 予約の変更・キャンセル/当日の持ち物 |
状態_来店済み |
既存客向け | 次回を予約する/会員証 |
状態_休眠 |
呼び戻し | 今やっていること/再開の入口 |
出し分けの効きどころは、予約済みの人です。予約した人のメニューの1つ目が「予約する」のままだと、変更したい人が問い合わせを送ってくることになり、こちらの手間が増えます。
ただし、出し分けには運用の手間がかかります。面の数だけ画像を作り、変更のたびに全部を直すことになります。判断は「出し分ける/出し分けない」のどちらでもよく、決めて理由を書くことが合格条件です(点検リストの6番)。
当社の目安は、状態タグが実際に付け替わっていて、かつ予約や来店の件数が月に数十件を超えてからです。それ以前は、1面で運用して、タップ数を貯めるほうが早く効きます。
画像を作る前に決めること
デザイナーに依頼する前に、次の4つを確定させてください。ここが決まっていないと、作り直しになります。
| 決めること | 決め方 |
|---|---|
| 分割の型 | 何ボタンにするか(管理画面で選べる型の中から) |
| 各枠の文言 | 動詞で、6〜10文字 |
| 各枠の飛び先 | URL/メッセージ送信/クーポン。1枠1飛び先 |
| 差し替える予定 | 何ヶ月後に、どこを変えるか |
実務で効く4つ
- 画像のサイズは公式ヘルプの指定どおりに作ります(大・小の2種類と、選べる分割の型があります。正確な数値は提供元のヘルプで確認してください)。指定外のサイズは、そのまま拡大縮小されて文字がにじみます
- 文字は、実機のスマホで読めるかだけを見ます。 PCの画面で確認すると必ず小さすぎます。書き出した画像を自分のLINEに送って、手に持って見てください。 これが唯一の確認方法です
- 枠の境目を、画像の中で見えるようにします。 押せる範囲と見た目の範囲がずれていると、「押したのに反応しない」と受け取られます。線か余白で区切ってください
- 1枠に入れる要素は、アイコン1つ+文字1行まで。 説明文を入れると、実機では潰れて読めません
押しやすさ
3分割(横3つ)までは、片手の親指で押し分けられます。6分割になると、上段は届きにくい位置に入ります。だから出口は左上ではなく下段の左に置いたほうが押される、という結果が出ることもあります。
どちらが正しいかは、自社のタップ数でしか決まりません。 1ヶ月運用して、上段と下段のタップ数を比べてから入れ替えてください。
更新の運用
リッチメニューが放置される原因は、たいてい画像を作り直さないと直せない作りにしたことです。
| やってはいけないこと | 起きること | 代わりに |
|---|---|---|
| 日付を画像に焼き込む(「11/30まで」) | その日を過ぎた瞬間に嘘になる。直すには画像から作り直し | 飛び先のページに期限を書く |
| 価格を画像に焼き込む | 改定のたびに作り直し | 「料金を見る」にして、飛び先で出す |
| キャンペーン名を焼き込む | 終わるたびに作り直し | 「今月の特典を受け取る」にする |
画像に焼き込んでよいのは、半年変わらないものだけというのが当社の決めごとです。焼き込む場合は、差し替える日をカレンダーに入れてから公開してください。
見直しの周期は3ヶ月に1回を出発点にしています。やることは3つだけです。
- 各ボタンの直近3ヶ月のタップ数を出す
- タップ0のボタンを差し替える(消すか、別のものに変える)
- 出口のボタンのタップ数と、その先の完了数を並べる
よくある誤解を3つ
「リッチメニューはデザインが命」 ——命なのは並びと文言です。見た目を整えても、置いてあるものが出口でなければタップ数は動きません。デザインに予算をかける前に、1ヶ月タップ数を取ってください。一番押されているボタンが何かを知らないまま作り直すのが、最も高くつきます。
「ボタンは多いほど親切」 ——多いほど、1つあたりの枠が小さくなり、押し分けにくくなります。そして押されないボタンが増えるほど、どれが効いているかが薄まって見えなくなります。 当社が立て直しで最初にやるのは、ボタンを足すことではなく、タップ0のボタンを消すことです。
「メニューは一度作ったら固定するもの」 ——固定してよいのは分割の型と出口の位置だけです。飛び先の中身は変わりますし、タップ数を見れば3ヶ月で入れ替えたい枠が出てきます。画像に日付と価格を焼き込まないのは、そのためです。焼き込んだ瞬間に、直すコストがデザイナーへの発注になります。
この章の出口
この章を終えたとき、手元に残っているべきものは次の3つです。
- メニュー設計表が1枚(枠の位置・文言(動詞)・飛び先URL・出し分けの有無。1枠1飛び先になっている)
- タップ数を見る画面が決まっている(どの画面のどの数字を、毎月いつ記録するか。出口のボタンは完了数とセット)
- 実機で読めることを確認した記録と、差し替え予定(焼き込んだ日付・価格がある場合は、差し替え日がカレンダーに入っている)
この3つが揃えば、常設の面は設計できています。残っているのは、流れていくほうの配信です。 メニューは置いておけば費用がかかりませんが、配信は送るたびに費用がかかり、送りすぎるとブロックで友だちを失います。次は、その中身と頻度を決めます。
この章の点検リストを開く(自社の状態を○×で判定する用)
点検リスト:リッチメニューの点検(10項目)
メニューを公開する前、または作り直す前に付けてください。
| # | チェック項目 | ○の条件(合格の状態) |
|---|---|---|
| 1 | 出口のボタンが1つ目に置かれている | 左上または最も大きい枠にある |
| 2 | 各ボタンのタップ数が見えている | 直近1ヶ月のタップ数が全ボタンで出せる(どの画面で見るかが書いてある) |
| 3 | 直近3ヶ月でタップ0のボタンが無い | 0のボタンは差し替えた |
| 4 | ボタン数が6つ以内 | 6つを超えていない(タブを使う場合は1面あたり) |
| 5 | ボタンの文言が動詞になっている | 「予約する」「空きを見る」等。名詞だけのボタンが無い |
| 6 | 状態別に出し分けるかを決めた | 出し分ける/出し分けないと、その理由が書いてある |
| 7 | 外部サイトに飛ばすボタンの離脱を測っている | タップ数と、その先の完了数の両方が見える |
| 8 | 画像の中の文字がスマホ実機で読める | 実機に送って手に持って確認した |
| 9 | 期間限定の内容を画像に焼き込んでいない | 日付・価格が画像に入っていない(入れる場合は差し替え日が決まっている) |
| 10 | 見直しの周期が決まっている | 3ヶ月に1回等、カレンダーに入っている |
合格ライン=10項目中8つ以上。必須項目は 2・6 の2つです。
- 2が×(タップ数が見えない)なら、直す根拠が一生出ません。デザインの議論は感想の応酬になり、作り直すたびに元に戻ります
- 6が×(出し分けを決めていない)なら、予約した人に「予約する」ボタンが出続けます。出し分けないと決めるのは○ですが、決めていない状態は×です
3番は、運用を始めて3ヶ月未満なら「まだ判定できない」として保留で構いません。ただし2番が○であることが前提です。
更新日 2018年10月20日
