押した先がずれない|公式LINEリッチメニューをCanvaで作る手順

押した先がずれない|公式LINEリッチメニューをCanvaで作る手順

「Canvaで作ったリッチメニューを設定したら、押した場所と開くページがずれてしまった」

公式LINEのリッチメニューは、無料のCanvaで自作できます。つまずきやすいのは、デザインそのものよりサイズと区切りの合わせ方です。

管理画面のテンプレートを先に決め、Canvaで幅2500pxのデザインに区切り線を写してから作り、設定でも同じテンプレートを選べば、押した場所と開く画面のずれは防げます。

テンプレートの選び方から書き出し、管理画面での設定、公開後の差し替えまで、飲食店や整体サロンのLINEを運用してきたsorecomaの手順で並べました。

1枚目を作ったら区切りの目印を残した元デザインを保存しておくと、次からは文字と写真を替えるだけで差し替えられます。

アカウントの開設がまだなら、LINE公式アカウントの作り方と初期設定を先に済ませておくと迷いません。

sorecomaお問い合わせバナー
目次

Canvaで公式LINEのリッチメニューを作る流れ【全体像】

Canvaで公式LINEのリッチメニューを作る流れ【全体像】の図解:Canvaで作る流れ — テンプレートを決める、Canvaでデザインを用意、文字・写真を差し替える、PNGかJPGで書き出す、設定してスマホで確認
図:Canvaで公式LINEのリッチメニューを作る流れ【全体像】

Canvaでの作業は、管理画面で型を決めてから画像を作り、最後に管理画面へ戻って当てはめる流れです。順番を入れ替えると、区切りの合わない画像を作り直すことになります。この手戻りが一番の時間の無駄です。

  1. 管理画面のテンプレート(大・小と分割数)を決める
  2. Canvaでテンプレートのサイズに合うデザインを用意する
  3. 区切りの位置にガイドを引く
  4. 文字・アイコン・写真をお店の内容に差し替える
  5. PNGかJPGで、1MB以下に書き出す
  6. 管理画面で画像をアップロードし、区画ごとにアクションを設定する
  7. スマホで全ボタンを1回ずつ押して確かめてから公開する

リッチメニューとは、トーク画面の下に固定で出る画像のメニューを指します。1枚の画像をいくつかの区画に分け、押したときの動きを区画ごとに決める仕組みです。

Canvaが向いているのは、色や写真まで自分の店らしくデザインしたい人でしょう。管理画面にも文字とアイコンを置くだけの画像作成機能がありますが、Canvaで作ると決めたなら、このまま上の順番で進めて大丈夫です。

リッチメニューの仕組みや、Canvaを使わない作り方は、次の記事で画面に沿って紹介しました。

Canvaを開く前に決める3つのこと

Canvaを開く前に決める3つのことの図解:Canvaを開く前に決める3つ — 管理画面のテンプレート、画像サイズ・形式・容量、載せるボタン
図:Canvaを開く前に決める3つのこと

Canvaを開く前に、テンプレートと画像サイズ、載せるボタンを決めておきます。先にCanvaでテンプレートを探し始めると、作った後で管理画面の区切りと合わないと気づき、作り直しになるからです。6分割か4分割かも、ここで決まります。

管理画面のテンプレート(大・小と分割数)を先に選ぶ

最初に、LINE公式アカウントの管理画面(パソコンで開く「LINE Official Account Manager」で、いつもログインしている画面と同じものです)でテンプレートを選びます。Canvaのデザインは、テンプレートの区切りに合わせて作るものだからです。

テンプレートは大が7種類、小が5種類あり、区画の数と並び方がそれぞれ違います。大なら6分割や4分割、小なら3分割や2分割のように、まずは区画の数で絞るのが早道です。

大は、トーク画面の下半分ほどを占める大きさになります。小はその半分の高さです。トークを読む邪魔をしません。そのかわり、置けるボタンの数は大より少なくなります。区画の数は、管理画面のテンプレート一覧で確かめてください。

ボタンを4つ以上置くなら大、予約とクーポンなど2〜3個で足りるなら小を選びます。テンプレートを決めたら、作成画面を開いたままCanvaに移ると、区切りの位置をいつでも見返せて便利です。

画像サイズ・形式・容量を確かめる|早見表

Canvaのデザインは、幅2500pxで作成します。pxはピクセルと読み、画像の大きさを点の数で表す単位です。小さいサイズで作った画像は、画面の大きいスマホで文字の輪郭がぼやけてしまうためです。大の6分割でも小の2分割でも、幅は変わりません。高さだけが違います。表の「容量」はファイルの重さのことで、書き出した後にパソコンやスマホで確かめられます(確かめ方は1MBを超えたときの直し方に書きました)。

項目条件
大のサイズ2500×1686px
小のサイズ2500×843px
形式JPG・PNG
容量1MB以下

大は1200×810pxと800×540px、小は1200×405pxと800×270pxでも設定できます。Canvaでは、大なら2500×1686px、小なら2500×843pxで作るのがおすすめです。決められたサイズと違う画像は、そのままではリッチメニューに設定できません。Canvaのカスタムサイズに表の数字をそのまま入れて作成すれば、この条件は満たせます。

サイズや仕様の細かな決まりは、次の記事にまとめました。

載せるボタンを決める|飲食店・美容院・整体サロン・通販の構成例

主役のボタンは、お店の売上が「予約して来る来店」と「ふらっと来る来店」のどちらで立っているかで決めます。主役を大きい区画に置くので、主役とボタンの数が決まれば、テンプレートもおのずと決まるわけです。

焼肉店や居酒屋の宴会、施術の予約が必須のサロンのように、予約が売上に直結するお店では「予約」を主役にします。sorecomaが支援する焼肉店や居酒屋では、リッチメニューの上段いっぱいに「予約はこちら」「簡単LINEで予約」と大きく置きました。

おでん酒場やカフェのように、ふらっと来るお客様が多いお店は「ショップカード」か「クーポン」が主役になります。支援しているおでん酒場では、来店のたびにポイントが貯まることを一番伝えたかったので、ショップカードを目立つ位置に置きました。ショップカードは、管理画面から作れるLINE公式アカウントのポイントカードの機能です。LINEのプロフィールの一番上にも、ショップカードを載せています。

  • 予約の多い飲食店は「予約」を主役に、クーポン・メニュー・アクセスを添える
  • ふらっと来店の多い飲食店やカフェは「ショップカード」か「クーポン」を大きくする
  • 美容院は「予約」を主役に、クーポンや料金とスタイル写真を並べる
  • 整体サロンは「予約」と「初めての方へ」を目立たせ、料金とアクセスを足す
  • 通販は「商品ページ」を主役にして、新商品とクーポンへの入口も置く

同じ飲食店でも、目的が違えば一番目立たせるボタンは変わります。整体サロンのように予約制のお店は、予約を大きくして問題ありません。ただ、予約ボタンを置くだけでは予約は増えにくいので、配信やクーポンの中にも予約の入口を入れておくと安心です(後半の整体サロンの事例で紹介しています)。押されるデザインの考え方は、支援先の実例と一緒に次の記事で紹介しています。

Canvaでリッチメニューのデザインを用意する方法|テンプレートか白紙か

Canvaでリッチメニューのデザインを用意する2つの方法の図解:テンプレートか白紙か — 向くとき、始め方、見るところ、無料プラン
図:Canvaでリッチメニューのデザインを用意する2つの方法

決めた分割数に合うテンプレートがCanvaにあればテンプレートから、無ければカスタムサイズの白紙から作ります。どちらを選んでも、仕上がりは幅2500pxで、管理画面と同じ位置で区切られた画像になれば問題ありません。

テンプレートから作る|「リッチメニュー」で検索してサイズを確かめる

テンプレートは、見た目より先に区切りとサイズで選びます。気に入ったデザインでも、区切りの位置が管理画面のテンプレートと違えば、押した先がずれるからです。色や写真は後から直せるので心配いりません。

Canvaの検索窓に「リッチメニュー」や「LINE リッチメニュー」と入れると、LINE向けのテンプレートが並びます。選ぶ前に、次の点を見ておきましょう。

  • 区切りの数と位置が、管理画面で選んだテンプレートと同じか
  • デザインのサイズが幅2500pxになっているか(編集画面の「ファイル」を開くと表示されます)
  • 写真が多すぎず、文字を打ち替えやすいか
  • 6つのボタンが全部同じ大きさになっていないか

sorecomaが店舗の自作したリッチメニューを見直すとき、押されにくい形として真っ先に直すのは、6つのボタンが全部同じ大きさで何が大事か分からないものです。おしゃれな写真に店名だけが載り、押すと何が起きるか分からないものも押されません。テンプレートを使う場合も、一番大事なボタンを大きくし、焼肉店のように上段いっぱいに予約を置いて、その下に小さめのボタンを並べる形に直しています。

テンプレートに最初から入っている「Instagram」や「アンケート」のボタンは、別の項目に替えるのがおすすめです。ふらっと来るお客様が多いパンケーキカフェとおでん酒場の4店舗で半年間のタップ数を見ると、どの店舗もいちばん押されたのは「クーポン」か「ショップカード」でした。あるパンケーキカフェではクーポンが1,089回、ショップカードが906回押されたのに対し、Instagramは90回、アンケートは119回にとどまっています。「予約」も、いちばん押されたボタンの3分の1から7分の1ほどでした。お客様がLINEを開くのは、ほとんどがお会計でクーポンを見せるときと、ポイントを確かめるときだからです。

カスタムサイズで白紙から作る|合うテンプレートが無いとき

合うテンプレートが無いときは、カスタムサイズで白紙のデザインを作成します。サイズを自分で入れるぶん、区切りの位置も計算しやすいのが利点です。

ホーム画面の「デザインを作成」から「カスタムサイズ」を選び、単位をpx(ピクセル)にして幅2500、高さ1686と入れます。mmやcmのままだと、2500×1686pxの画像になりません。小のテンプレートなら、高さは843です。「新しいデザインを作成」を押すと、白紙が開きます。

気に入ったテンプレートのサイズが合わなくても、無料プランのまま使えます。部品だけを借りる方法が手軽です。テンプレート側でアイコンや飾りを選んでコピーし、白紙のデザインに貼り付ければ、見た目だけを使えます。

Canva Proの「リサイズ」でもサイズは変えられますが、縦横の比率が違うと配置が崩れ、結局は並べ直す手間がかかるでしょう。

Canvaの無料プランでどこまで作れるか

リッチメニューの画像は、Canvaの無料プランだけで完成まで作れます。テンプレートの検索とカスタムサイズ、PNGやJPGでの書き出しは、どれも無料で使えるからです。

ただし、王冠マークの付いた素材とテンプレートには気をつけてください。王冠マークは、Canva Pro向けの印です。無料のままデザインに入れると、編集画面では透かしが入って見えます。書き出すときにも購入かProへの登録を求められます。そうなっても、その素材を無料の素材に替えてから書き出せば、料金は0円のままです。素材を選ぶときに王冠マークが無いかを見ておけば、差し替えの手間も省けます。

書き出しの設定では、画質の調整(JPGの画質やPNGの圧縮)とファイルサイズの上限指定が有料プラン向けです。無料プランのまま容量を減らすなら、JPGを選んで書き出し、それでも重いときは写真を減らすなどデザイン側で軽くします。

タップ領域とずれないように、Canvaで区切り線を引く

タップ領域とずれないように、Canvaで区切り線を引くの図解:分割ごとの区切り位置 — 大の6分割、大の4分割、小の3分割、小の2分割
図:タップ領域とずれないように、Canvaで区切り線を引く

リッチメニューは、1枚の画像の上に管理画面のテンプレートの区切りが重なる仕組みです。区切られた1つひとつの範囲をタップ領域と呼び、押すと設定したアクションが動きます。Canvaのデザインの区切りとタップ領域がずれていると、見た目のボタンと押した先は食い違ってしまうでしょう。

ずれを防ぐには、先に区切り線を引いて、その中にボタンを作成します。大の6分割なら、線は縦に2本、横に1本です。

定規とガイドを表示して、区切り位置を写す

区切りは、Canvaのガイドで写すのが一番正確です。ガイドはデザインの上に出る目印の線で、書き出した画像には写りません。線は何本でも引けるので便利です。

編集画面の「ファイル」から「定規とガイド」を開き、「定規とガイドを表示」を選択します。表示の切り替えは、キーボードでShiftとRを同時に押しても同じです。

同じ「定規とガイド」にある「ガイドを追加」で「カスタム」を選択すると、列と行の数を指定して、等間隔のガイドを置けます。6分割なら3列と2行にし、間隔と余白は0にしてください。ガイドの線は、定規の上からドラッグしても1本ずつ引けます。

ガイドが使いにくいときは、区切りの位置に細長い四角形を置いて目印にする方法でも問題ありません。書き出す前に消す目印です。赤など目立つ色にしておくと、消し忘れに気づけるでしょう。

分割パターンごとの区切り位置の目安

等分のパターンなら、区切りの位置は幅と高さを割り算すれば出ます。管理画面のテンプレートも、等分のものは同じ位置で区切られているからです。

パターン縦の区切り横の区切り
大の6分割833px・1667px843px
大の4分割1250px843px
小の3分割833px・1667pxなし
小の2分割1250pxなし

大は2500×1686px、小は2500×843pxで作った場合の位置で、縦は左端から、横は上端から測った値です。

上に大きな区画が1つあり、下に小さな区画が並ぶような、大小の混ざったパターンは、表のような割り算では決めません。管理画面にはpxの数字が出ないので、区切り線を実際の画像に重ねて確かめます。

  1. Canvaで、ボタンを置く前の仮の画像(2500×1686pxで、背景と大まかな区切りだけ)を書き出す
  2. 管理画面で使うテンプレートを選び、仮の画像をアップロードする
  3. 画像の上に出た区切り線と、仮の区切りがずれている場所を見る
  4. Canvaに戻ってガイドを線の位置まで動かし、そのあとでボタンを作る

仮の画像は保存しなければ公開されません。何度試しても大丈夫です。区切りを合わせる自信がないときは、等分の6分割のまま主役のボタンだけ色を変える方法でも、主役は目立たせられます。

833pxと834pxのような1pxの違いは、気にしなくて大丈夫です。次の項目のとおりボタンを区画の中央に寄せ、境目から離して置いておけば、1px分の差で押した先が変わることはありません。

ボタンは区画の中央に置き、境目に文字や絵を置かない

文字とアイコンは区画の中央に寄せ、区切り線から離して置きます。指は思ったより広い範囲に触れます。境目の近くにある文字は、隣の区画として押されやすいのです。

区切り線をまたぐ背景写真や帯も避けてください。1枚の写真が2つの区画にかかっていると、友だちはどちらを押せばいいのか迷います。写真を使うなら、1つの区画に1枚で収めるのが無難です。

区画の端には、少し余白を残しておきます。境目に細い線を入れたり区画ごとに色を変えたりすると、ボタンの切れ目が見た目でも分かり、押し間違いが減るのも利点です。

Canvaでリッチメニューをデザインする手順

Canvaでリッチメニューをデザインする手順の図解:デザインを仕上げる3手順 — 文字とアイコンを差し替え、色・フォント・写真を調整、スマホの実寸で確かめる
図:Canvaでリッチメニューをデザインする手順

区切りを写したら、テンプレートや白紙をお店のリッチメニューに仕上げます。デザインのコツは、作業の順番どおりに各手順の中に入れました。

文字とアイコンを店の項目に差し替える

ボタンの文字は、「予約」「クーポン」「メニュー」のような短い言葉に打ち替えます。トーク画面の下に出るリッチメニューは小さな画像です。長い文は読まれません。

1つのボタンには、短い言葉1つとアイコン1つを置くのが基本です。説明を足したくなっても、文字が増えるほど1文字ずつが小さくなります。「初回限定10%オフの割引クーポンはこちら」と入れるより、「10%オフ」の方がスマホでは早く伝わるでしょう。

sorecomaでも、ボタンには必ず「予約」「クーポン」「ポイント」などの言葉を入れ、イラストは言葉を補う程度にとどめてきました。

アイコンは、左のメニューの「素材」で「予約」「クーポン」などと検索して探せます。線の太さや塗りの有無がそろったものを選ぶと、6つ並べてもまとまって見えるのでおすすめです。

色・フォント・写真を店の雰囲気に合わせる

色は、ロゴや看板の色を中心に、多くても3色までに絞ります。色が増えるほど、どれが押してほしいボタンなのかが分からなくなるからです。

主役のボタンだけ色を変えると、ほかのボタンと同じ大きさでも目に入りやすくなります。6分割のままでも、主役は作れます。

フォントは、細い明朝体より太めのゴシック体の方が読みやすいです。飾りの多い書体は避けます。文字の設定で太字にすると、スマホの小さな画面でもつぶれません。

写真は、料理・施術・商品の写真を1つの区画に1枚までにします。写真の上の文字が読みにくいときは、文字の下に白や黒の帯を敷くか、写真の透明度を上げて薄くするのが手早い方法です。

スマホの実寸で文字の大きさを確かめる

文字の大きさは、作業の途中で最低1回、スマホの実寸で確かめます。パソコンの編集画面では拡大して見ているので、小さすぎる文字に気づきにくいからです。

途中まで作成したデザインをPNGで書き出し、自分のLINEに送ってスマホで開くのが手軽でしょう。Canvaのスマホアプリに同じアカウントでログインしていれば、同じデザインをアプリで開いても確かめられます。

スマホの画面に表示したとき、ボタンの言葉をぱっと読めなければ、文字を大きくするか言葉を短くしてください。

Canvaからリッチメニュー画像を書き出す

Canvaからリッチメニュー画像を書き出すの図解:PNGとJPGの使い分け — 向くデザイン、特徴、使う順番
図:Canvaからリッチメニュー画像を書き出す

デザインができたら、右上の「共有」から「ダウンロード」を選んで画像にします。形式と容量の扱いで手が止まりやすいので、選び方と直し方をまとめました。

PNGとJPGはどちらで保存するか

文字とアイコンが中心のデザインはPNG、写真の多いデザインはJPGで保存します。PNGは文字の輪郭がくっきり残り、JPGは写真が多くても容量がふくらみません。

迷ったときは、まずPNGで1回書き出してみるのがおすすめです。容量が1MBを超えたときだけ、JPGに切り替えれば済みます。

形式を選ぶ場所は、ダウンロードの画面にある「ファイルの種類」です。PDFやSVGはリッチメニューに使えません。背景を透明にする設定も、リッチメニューには不要です。

1MBを超えたときの直し方

1MBは、スマホのLINE公式アカウントアプリで画像を設定するときの容量の上限です。パソコンの管理画面で使う場合も、1MB以下にそろえておくと、あとで作り直さずに済みます。超えたら、書き出しの設定から順に軽くしていきます。デザインを直すより、書き出しの設定を変える方が手早く済むからです。

  1. JPGで書き出し直す
  2. 有料プランなら、JPGの画質を少しずつ下げる
  3. 写真の枚数を減らすか、写真を小さくする
  4. 背景の写真やグラデーションを、単色に近いものに替える

画質を下げすぎると、文字の周りがにじみます。画質を変えたら、1回ずつ書き出して文字を拡大して見ておくと失敗しません。

書き出したファイルの容量は、Windowsならファイルを右クリックして「プロパティ」で、Macなら「情報を見る」で分かります。iPhoneは写真アプリで画像を開き、下の「i」を押せば容量まで確かめられます。Androidは機種ごとに操作が違うので、ギャラリーやファイルのアプリで画像の詳細を開いてみてください。見つからなければ、パソコンで容量を見てから送れば十分です。

書き出す前に確かめること|ガイドの目印・有料素材・サイズ

ダウンロードを押す前に、次の4点を見ておくと、アップロードでの手戻りがなくなります。どれも、書き出した後では気づきにくいものです。

  • 区切りの目印に置いた四角形や線を消したか
  • 王冠マークの付いた有料素材が残っていないか
  • デザインのサイズが幅2500pxのままか
  • ページが複数あるとき、書き出すページだけを選んだか

ページが複数あるデザインをPNGで書き出すと、全ページがZIPファイルにまとめて保存されます。ZIPファイルは複数のファイルを1つにまとめた形式で、ダブルクリックで開くと中の画像を取り出せます。最初から「ページを選択」で1ページだけにしておけば、出てくるのは画像1枚です。

スマホアプリ版Canvaで作るときに違う操作

スマホアプリ版Canvaで作るときに違う操作の図解:スマホだけで作る流れ — カスタムサイズを指定、細い四角形で目印、目印を消して保存、LINE公式アプリで設定、全ボタンを押して確認
図:スマホアプリ版Canvaで作るときに違う操作

スマホのCanvaアプリでも、作る手順はパソコンと同じです。パソコンが無くても、Canvaアプリで画像を作り、LINE公式アカウントアプリで設定まで終えられます。ここでは、操作が違うところだけを並べました。

Canvaアプリでのサイズ指定・区切りの目印・保存

アプリでは、画面下の「+」から「カスタムサイズ」を選び、幅2500px、高さ1686pxを入れます。テンプレートから作る場合も、検索の仕方はパソコンと変わりません。

アプリでは、区切りの目印をガイドの代わりに細い四角形で付けるのが確実です。アプリの小さな画面ではガイドの線を合わせにくいので、素材の四角形を細く伸ばし、画面を指で拡大しながら区切りの位置に置きます。

目印を消したら、右上の共有のボタンから「ダウンロード」を選んでください。画像は、スマホの写真アプリに保存されます。

保存した画像をLINE公式アカウントアプリで設定する

設定に使うのは、LINE公式アカウントアプリの「ホーム」にある「リッチメニュー」です。「作成」を押してテンプレートを選び、写真アプリに保存した画像を選んでから、区画ごとのアクションを決めます。保存までアプリの中で終わるので、パソコンが無くても公開できます。

ただ、アプリの画面は小さいのが難点です。区画とボタンの重なりを見比べにくくなります。パソコンが無いときは、公開した後にスマホで全部のボタン(6分割なら6つ)を押して確かめれば足ります。パソコンが使えるなら、管理画面でも一度見比べておくと取り違えに早く気づけるでしょう。

Canvaで作った画像を管理画面に設定する

Canvaで作った画像を管理画面に設定するの図解:管理画面での設定手順 — リッチメニューを開く、タイトルと表示期間、同じテンプレートを選ぶ、画像をアップロード、アクションを設定
図:Canvaで作った画像を管理画面に設定する

パソコンでは、LINE Official Account Managerの「トークルーム管理」から「リッチメニュー」を開き、「作成」を押して設定します。ここでは、Canvaで作った画像を正しく当てはめるための要点に絞りました。

Canvaで区切りを写したのと同じテンプレートを選んでアップロードする

管理画面で選ぶテンプレートは、Canvaで区切りを写したときと同じものです。分割数が同じでも区切りの位置が違うテンプレートを選べば、そこでずれが生まれてしまいます。大の6分割で区切りを写したなら、管理画面でも大の6分割を選ぶのが正解です。

作成画面では、先にタイトルと表示期間を入れます。タイトルは管理用の名前で、友だちには見えません。「2026年春メニュー」のように、いつのものか分かる名前にしておくと、差し替えのときに迷わずに済みます。表示期間は、友だちにリッチメニューを見せる期間を指します。ずっと出したいときの終了日は、入力欄で選べる範囲を見て決めると迷いません。

テンプレートを選んだ後は、画像のアップロードからCanvaで書き出した画像を選ぶだけです。アップロードした画像の上には、テンプレートの区切りが線で出ます。その線とCanvaのボタンの境目が重なっていれば、区切りは合っている証拠です。

区画ごとにアクションを設定し、プレビューで見比べる

アクションは、A、B、Cと記号の付いた区画ごとに1つずつ設定します。選べるのはリンクやクーポン、テキスト、ショップカードです。何もしない区画は「アクションなし」にできます。ただし、全部の区画をアクションなしにはできません。リンクは押すとWebページが開き、テキストは押すと決めておいた言葉が友だちからのメッセージとしてトークに送られます。大の6分割なら、設定も6つです。

設定が終わったら、プレビューでCanvaのボタンの文字と区画の記号を1つずつ見比べてください。「予約」と書いたボタンにクーポンのアクションが入っているような取り違えは、ここで見つかります。

メニューバーは、トーク画面の一番下に出る帯で、押すとリッチメニューが開いたり閉じたりします。ここに出す言葉には、「メニューはこちら」のように押したくなるものを入れましょう。最後に「保存」を押さないと、リッチメニューは公開されません。表示期間の開始日が先の日付になっていないかも、保存の前に見ておきます。

Canvaで作ったリッチメニューがうまくいかないときの直し方

Canvaで作ったリッチメニューがうまくいかないときの直し方の図解:症状別の原因と直し方 — アップロードできない、1MBを超える、画像全体が粗い、文字の周りがにじむ、押した先がずれる、文字が読めない
図:Canvaで作ったリッチメニューがうまくいかないときの直し方

Canvaで作った画像が原因のトラブルは、書き出しが原因か配置が原因かで、直す場所が変わります。症状ごとに、戻る場所を表と手順にまとめました。

アップロードできない・画像が粗い|書き出しが原因のとき

アップロードできないときは、サイズと形式、容量のどれかが条件から外れています。管理画面が受け付けるのは決められたサイズのJPGかPNGで、スマホのアプリから設定するときは1MB以下という決まりもあるからです。

症状直し方
サイズが違ってアップロードできない2500×1686pxで作り直す
1MBを超えてアップロードできないJPGにする(有料プランなら画質も下げる)
画像全体が粗い幅2500pxで作り直す
文字の周りがにじむPNGで書き出し直す

幅1200pxや800pxの画像も仕様の範囲には入ります。ただ、文字の多いデザインでは輪郭が甘く見えるので、作り直すなら幅2500pxにそろえるのがおすすめです。

押した先がずれる・文字が読めない|配置が原因のとき

押した先がずれるときは、管理画面のテンプレートとCanvaの区切りが違うか、ボタンが区切りをまたいでいます。区画の記号とアクションの対応の取り違えも、原因としてよくあるものです。

直すときは、管理画面のプレビューで区切りの線とボタンの境目を見比べるところから始めます。線がボタンの上を通っていたら、Canvaに戻ってガイドを引き直し、ボタンを区画の中央に寄せてください。線が合っているのにずれるなら、アクションの設定を見直します。6分割のつもりで4分割のテンプレートを選んでいた、という取り違えも珍しくありません。

文字が読めない原因は、文字の小ささか、背景との色の差の弱さです。言葉を削って文字を大きくするか、文字の下に帯を敷きます。白い文字には、濃い色の帯が合うはずです。

画像は正しいのに、リッチメニューそのものが出てこないなら、原因は設定の側でしょう。リッチメニューの一覧で表示中になっているかどうか(ステータス)や表示期間など、設定側の原因は次の記事の5項目から確かめると早く見つかります。

公開後にやること|スマホで確かめ、Canvaで複製して差し替える

公開後にやること|スマホで確かめ、Canvaで複製して差し替えるの図解:公開後の確認と差し替え — 実機で全ボタンを押す、違う機種でも見る、元デザインを複製、新しいメニューを予約、クリック数を見直す
図:公開後にやること|スマホで確かめ、Canvaで複製して差し替える

リッチメニューは、公開した後に確かめて、季節ごとに差し替えるところまでを1セットと考えてください。一度作った区切りを使い回せば、2回目からの作業は文字と写真の入れ替えだけになります。

スマホ実機で全ボタンを押して確かめる

公開した日のうちに、スマホの実機で全部のボタンを1回ずつ押すのが鉄則です。管理画面のプレビューでは、リンク先のページが開くかどうかまでは分かりません。

  1. 自分のLINEで、公式アカウントのトーク画面を開く
  2. 画面を拡大しなくても、ボタンの文字が読めるか
  3. 全部のボタンを1つずつタップして、開いた画面とボタンの文字が合っているか
  4. リンク先のページが、LINEの中のブラウザで崩れずに表示されるか
  5. メニューバーのテキストを押すと、リッチメニューが閉じて開くか

スマホが1台なら、まずは自分のスマホで全部のボタンを確かめれば大丈夫です。機種によって画面の幅が違い、文字の見え方も変わるので、スタッフや家族のスマホを借りられるときに、自分と違う機種(iPhoneとAndroid)でも見てもらうと確実でしょう。

Canvaのデザインを複製して、季節・キャンペーンごとに差し替える

差し替えの画像は、Canvaで元のデザインを複製し、文字と写真だけを変えて作成します。区切りの位置がそのまま残るので、ずれを合わせる作業をもう一度しなくて済むからです。

1枚目を作ったら、区切りの目印を残した元デザインを1つ保存しておきます。書き出す用のデザインはその複製から作れば、次の季節メニューも目印付きの状態から始められるので、目印を付け直す手間もかかりません。複製は、Canvaのホームでデザインの「…」から「コピーを作成」を選ぶだけです。

管理画面では、差し替え用に新しいリッチメニューを作成し、表示期間を入れておきます。開始日時を季節メニューの初日、たとえば3月1日に合わせておけば、当日に手で切り替える必要はありません。作った後はリッチメニューの一覧で、前のメニューの表示期間と新しいメニューの表示期間が重なっていないかも見ておくと安心です。

公開から1ヶ月たったら、管理画面の「分析」でリッチメニューのクリック数も見ておきます。季節ごとに年4回差し替えるなら、そのたびに押されていないボタンの言葉や位置を変えて、前回と比べるのがおすすめです。

リッチメニューの作成からLINE運用までならsorecomaにお任せ

sorecomaお問い合わせバナー

sorecomaは、リッチメニューの作成を含めて、LINE公式アカウントの運用を引き受けています。飲食店を中心に、美容院や整体サロン、通販の事業者まで全国で支援してきました。

Canvaで画像は作れても、どのボタンを置き、押した先で何をしてもらうかで成果は変わります。「リッチメニューは作ったのに予約につながらない」「季節ごとの差し替えや配信まで手が回らない」というご相談も少なくありません。

sorecomaでは、決めた順番で自動で届く配信(ステップ配信)やクーポンの設計で、再来店の仕組みを整えます。友だちを集めるSNS運用や広告、ボタンの先で開く案内ページやバナーの制作まで1社で対応でき、1ヶ月だけや一部だけのご依頼も可能です。

LINEアカウントはお店側で作っていただき、sorecomaは運用に要る権限だけを受け取ります。契約が終わっても、LINEがお店の資産として残るようにするためです。外注先を選ぶときは、相手がフリーランスでも会社でも、次の点を最初に確かめておくと失敗しません。

  • 管理者の権限をお店側が持てるか
  • 画像の元データや設定の中身を共有してもらえるか
  • 毎月の数字の報告と、次の打ち手の提案があるか
  • 何が料金に含まれるか

sorecomaが月1回の打ち合わせとレポートを必ずセットにしているのは、数字を見て次の打ち手を決める場をお店の中に作るためです。

自分で作るか任せるかで迷ったら、sorecomaのサービスページから無料相談をお申し込みください。

リッチメニューと配信を組み合わせた支援先の例です。

事例:整体サロン シンユウ|予約しやすいリッチメニューを新設し、運用2ヶ月で休眠顧客5名が予約

事例:整体サロン シンユウ|予約しやすいリッチメニューを新設し、運用2ヶ月で休眠顧客5名が予約

川越市の整体サロン シンユウは、売上が以前より2〜3割落ち、外部の集客媒体に頼る体制に不安を抱えていました。LINE公式アカウントはあっても、3ヶ月以上来院が途切れた方へ声をかける手段にはなっていない状態です。

予約ボタンを置くだけでは、リッチメニューからはあまり押されません。予約は「行こう」と決めた後の行動なので、配信やクーポンの中に「ご予約はこちら」を入れ、来院のきっかけと予約をセットにする方が予約につながります。

sorecomaは、予約への動線を分かりやすく整えたリッチメニューを新設し、週1回の投稿代行と組み合わせました。一人で運営するサロンなので、来院の直後とその数日後にフォローの配信を送る流れも作っています。数日たって体の状態を思い出してもらい、次の予約につなげるためです。

運用2ヶ月ほどで2回目・3回目の来院率が上がり始め、3ヶ月以上来ていなかった友だちのうち5人が予約につながりました。一人で運営するサロンで、来院が途切れていた方が戻ってきた人数です。リッチメニュー単体ではなく、投稿とフォロー配信をセットで整えた成果といえます。

事例:株式会社エイチ・アンド・ジェイ|商品購入導線を整理したリッチメニューで、友だち追加11,831人・商品ページ遷移6,470回

事例:株式会社エイチ・アンド・ジェイ|商品購入導線を整理したリッチメニューで、友だち追加11,831人・商品ページ遷移6,470回

YouTube「週末ビフォーアフター」を運営する株式会社エイチ・アンド・ジェイは、ファンとの接点がYouTubeやSNSに分かれていました。LINE公式アカウントは未開設で、ECやイベント申込みへつなぐ導線も弱い状態です。

sorecomaはアカウントの立ち上げから入り、片づけタイプ診断を設置しました。商品購入までの道筋を整理したリッチメニューを作り、日常で役立つ片づけ情報も定期的に配信しています。

友だち追加数は11,831人、商品ページへの遷移数は6,470回に達し、投稿の開封率は平均83.41%を記録しました。診断を入口に、ファンが自分から情報や商品ページへ進む流れが生まれています。

よくある質問

Canvaのリッチメニューテンプレートは商用利用できますか?

お店の販促に使うリッチメニューなら、無料のテンプレートも商用で使えます。テンプレートをそのまま商標やロゴにすることや、テンプレート自体を売ることは認められていません。細かな決まりは、Canvaの公式サイトにあるライセンスの説明で確かめられます。

Canvaで画像を作り直したら、リッチメニューの設定も最初からやり直しですか?

同じテンプレートのままなら、編集画面で画像だけを入れ替えられます。アクションの設定はそのまま残るので、やり直しは不要です。テンプレートを変えたときだけ、アクションを設定し直してください。

Canvaのデザインを、スタッフと一緒に編集できますか?

デザインの「共有」から、スタッフを編集できる権限で招待すれば一緒に直せます。お店用のCanvaアカウントで作っておくと、担当者が替わっても元データが手元に残るので確実です。

予約システムが無い店は、予約ボタンに何を設定すればいいですか?

予約フォームや予約のページがあれば、そのURLをリンクで設定します。どちらも無いなら、アクションの「テキスト」で「予約したい」と送られるようにしておき、届いたメッセージにトークで返信して日時を決める方法があります。

リッチメニューにGIFや動画は使えますか?

使えません。管理画面で設定できるのは、JPGかPNGの静止画だけです。動きのある見せ方をしたいなら、ボタンの先のページで動画を見せます。

リッチメニューをタブのように切り替える形は、Canvaと管理画面だけで作れますか?

画像はCanvaで作れますが、切り替えの動きは管理画面だけでは設定できません。タブの切り替えには、Lステップなどの拡張ツール(LINE公式アカウントに機能を足す別のサービス)が要ります。料金や使える機能は、各ツールの公式サイトで確かめると確実です。

まとめ

Canvaで公式LINEのリッチメニューを作るときは、管理画面のテンプレートを先に決め、そのサイズと区切りに合わせてデザインします。今の作業の段階に合わせて、次のことから始めてください。

  • これから作る人は、管理画面でテンプレートを選び、Canvaで幅2500pxのカスタムサイズを開く
  • デザインの途中なら、ガイドで区切りを写し、ボタンが線をまたいでいないかを見る
  • 書き出したら、容量が1MB以下かを確かめてから管理画面にアップロードする
  • 公開した日のうちに、スマホで全部のボタンを1回ずつ押して確かめる
  • 公開した後は、区切りの目印を残した元デザインを複製し、次の季節メニュー用に取っておく

区切りを写した元デザインが1枚あれば、次からの差し替えは文字と写真を替えて書き出すだけで終わります。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次