株式会社COTSUBU

CHAPTER 05

LINEのリッチメニューの設計と作り方

この章で分かること

  • リッチメニューの評価を「見た目」から「タップ数」に置き換える方法と、測れていないメニューを直せない理由
  • ボタンの数・並び・文言の決め方、タブ切替と状態別の出し分けをいつ使うか
  • 画像を作る前に決めること(実機で読める文字・押しやすい分割)と、更新の運用
この章の目次(9)
  1. 1配信は流れる。メニューは残る
  2. 2押されている場所しか意味がない
  3. 3何ボタンにするか、何を置くか
  4. 4タブの切り替えは、必要になってから
  5. 5状態で出し分ける
  6. 6画像を作る前に決めること
  7. 7更新の運用
  8. 8よくある誤解を3つ
  9. 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つだけです。

  1. 各ボタンの直近3ヶ月のタップ数を出す
  2. タップ0のボタンを差し替える(消すか、別のものに変える)
  3. 出口のボタンのタップ数と、その先の完了数を並べる

よくある誤解を3つ

「リッチメニューはデザインが命」 ——命なのは並びと文言です。見た目を整えても、置いてあるものが出口でなければタップ数は動きません。デザインに予算をかける前に、1ヶ月タップ数を取ってください。一番押されているボタンが何かを知らないまま作り直すのが、最も高くつきます。

「ボタンは多いほど親切」 ——多いほど、1つあたりの枠が小さくなり、押し分けにくくなります。そして押されないボタンが増えるほど、どれが効いているかが薄まって見えなくなります。 当社が立て直しで最初にやるのは、ボタンを足すことではなく、タップ0のボタンを消すことです。

「メニューは一度作ったら固定するもの」 ——固定してよいのは分割の型と出口の位置だけです。飛び先の中身は変わりますし、タップ数を見れば3ヶ月で入れ替えたい枠が出てきます。画像に日付と価格を焼き込まないのは、そのためです。焼き込んだ瞬間に、直すコストがデザイナーへの発注になります。

この章の出口

この章を終えたとき、手元に残っているべきものは次の3つです。

  1. メニュー設計表が1枚(枠の位置・文言(動詞)・飛び先URL・出し分けの有無。1枠1飛び先になっている)
  2. タップ数を見る画面が決まっている(どの画面のどの数字を、毎月いつ記録するか。出口のボタンは完了数とセット)
  3. 実機で読めることを確認した記録と、差し替え予定(焼き込んだ日付・価格がある場合は、差し替え日がカレンダーに入っている)

この3つが揃えば、常設の面は設計できています。残っているのは、流れていくほうの配信です。 メニューは置いておけば費用がかかりませんが、配信は送るたびに費用がかかり、送りすぎるとブロックで友だちを失います。次は、その中身と頻度を決めます。

次の章へ:6章 LINEの配信の中身と頻度|ブロックを増やさない

この章の点検リストを開く(自社の状態を○×で判定する用)

点検リスト:リッチメニューの点検(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番が○であることが前提です。

読んでも決めきれないところは、一緒に決めます

30分の相談は無料です。タグと導線の設計から引き受けます。引き受けられる範囲はLINE公式アカウントの設計・運用にまとめています。

30分相談を予約する

更新日 2018年10月20日