LINE: 公式アカウント入門(4) - トーク画面にリッチメニューを表示する

LINE

Posted at 2025-05-18

実施環境：

Microsoft Edge 134.0.3124.72 (64bit)
iOS 16.7.10
LINE 15.2.3

0. 概要

公式アカウントにおいてはしばしば、外部の Web サイトなどと連携した利用をさせたい場合があります。
もちろん連携したい Web サイトなどへのリンクを投稿メッセージに入れることもできますが、複数の投稿メッセージがある場合などはどうしても埋もれてしまい、ユーザが必要なリンクを探すのが非常に大変になります。

ではどうすればよいのかというと、このようなときはトーク画面下に固定で表示されるメニューである、「リッチメニュー」を活用します。
これなら、いちいち投稿メッセージを探さなくとも、必要な機能にユーザがすぐにアクセスすることができます。
今回はこのリッチメニューの作成方法について紹介します。

1. リッチメニューの作成

リッチメニューを作成するには、まず公式アカウントの管理画面に入った後「ホーム」タブを選択し、左のメニューから「トークルーム管理」⇒「リッチメニュー」を選択します。

次に、「リッチメニューを作成」をクリックします。

これで、リッチメニューの作成画面が開きました。

既に作成済みのリッチメニューがある場合は、作成ボタンは右上に表示されます。

2. リッチメニューの編集

さて、ではリッチメニューの編集項目を見ていきます。

2.1. 基本設定

2.1.1. タイトル

「基本設定」⇒「タイトル」には 30 文字以内で内部管理用のタイトルを設定できます。
内部管理用なので、ユーザに見えることはありません。
なお、公開または公開予約済みのリッチメニューと重複するタイトルをつけてもエラーにはなりませんが、管理が複雑になるのでできれば異なるタイトルを付けたほうがよいでしょう。

2.1.2. 表示期間

「基本設定」⇒「表示期間」にはメニューの表示期間を分単位まで指定できます。
開始時刻には過去の時間も未来の時間も指定でき、入力は必須です。
終了時刻には未来の時間のみ指定でき、こちらも入力は必須です。
なお、公開または公開予約済みのリッチメニューと重複する表示期間を設定することはできません。

2.2. テンプレート

次に、メニューのテンプレートを選択します。
「コンテンツ設定」⇒「テンプレート」の「選択」をクリックします。

とりあえず今回は小さいテンプレートのうち、範囲を 3 等分しているものを選択してみます。
テンプレートを選択した後「選択」をクリックすることで、テンプレートが反映されます。

なお、プレビューの枠線はプレビュー下の「テンプレートの枠線を表示」によって表示するかどうかを切り替えできます。
表示を確認するのに枠線が邪魔な場合はこれで枠線を非表示にできます。

2.3. 画像

2.3.1. 画像編集画面

「コンテンツ設定」⇒「画像」の「設定」をクリックすると、メニューに表示する画像を編集できます。

一応 1 つの背景画像として丸ごと画像をアップロードすることも可能ですが、今回は「エリアごとに画像を作成」をクリックします。

画像の編集画面に移ります。

LINE 公式サイトでは、リッチメニューのテンプレート画像もいくつか配布しています。
こちらは「背景全体の画像をアップロード」で使用する形のものが多いです。

https://campus.line.biz/line-official-account/courses/template/

2.3.2. 編集エリアの選択

左のプレビューで編集したいエリアをクリックすると、編集エリアを移動できます。

2.3.3. その場で画像を作成

画像の編集画面ではいくつかのツールが使えるので、事前に画像を用意していなくてもごく単純な画像ならその場で作成できます。

2.3.3.1. 背景色

右から 4 番目のボタンを使うと、背景色を変更できます。

2.3.3.2. 枠線

右から 3 番目のボタンを使うと、枠線を作成できます。
枠線は形状、色、太さが変更できます。

2.3.3.3. アイコン

右から 2 番目のボタンを使うと、アイコンを追加できます。
アイコンを追加した場合は、アイコンに紐づくテキストも一緒に追加されます。

アイコンに対して移動やサイズ変更はできませんが、アイコンの色や塗りつぶしの有無だけは変更できます。

アイコンと一緒に追加されるテキストについては、個別に追加するテキストと同じように扱われます。

なお、アイコンは 1 つのエリアに 1 つまでしか指定できません。
新しいアイコンを追加した場合、古いアイコンは削除されます。

2.3.3.4. テキスト

左から 3 番目のボタンを使うと、テキストを追加できます。

テキストはドラッグ & ドロップで移動でき、また四隅をドラッグ & ドロップすることで拡大縮小も可能です。
なお、文字のサイズは枠に合わせて自動的に調整されます。

テキストの位置を端や真ん中に揃えたい場合は、ボタンでも移動できます。

アイコンなどと一緒に表示する場合は、前後の位置関係もボタンで調整可能です。

文字列部分をクリックすることで、文字列の編集ができる状態になります。

太字・斜体・下線も利用できるほか、テキストの色も変更可能です。

テキストは 2 つ以上追加することもできます。

2.3.3.5. 元に戻す・やり直す

一番左のボタンを使うと、作業を 1 手前に戻せます。

左から 2 番目のボタンを使うと、作業を戻したことを戻せます。

2.3.3.6. 削除

一番右のボタンを使うと、今選択しているアイコンやテキストなどが削除できます。

2.3.4. 事前に用意していた画像を使用

もちろん、事前に用意していた画像を使用することもできます。
画像を追加するには、左から 4 番目のボタンをクリックし、追加したい画像を選択して「開く」をクリックします。

追加した画像はドラッグ & ドロップで自由に動かせるほか、四隅や線上のツマミをドラッグ & ドロップすることで拡大縮小することもできます。
エリアからはみ出た部分はメニュー上で表示されなくなります。

画像の位置を端や真ん中に揃えたい場合は、ボタンでも移動できます。

画像を一部だけ切り取ることも可能です。
切り取りボタンを押した後切り取り枠を 8 個のツマミで調整し、再度切り取りボタンを押すことで画像を切り取れます。

画像を複数追加したり、先述のアイコンやテキストなどと併用することもできます。
画像やアイコンなどの前後関係はボタンで調整します。

2.3.5. 画像のダウンロード

右上の「ファイルに保存」をクリックすると、編集した画像をダウンロードできます。

2.3.6. 画像の適用

右上の「適用」をクリックすることで、編集結果を適用できます。

編集した画像をダウンロードしていない場合は以下のようなメッセージが表示されますが、必要ない場合はそのまま「適用」をクリックしてしまってかまいません。

これで画像が適用されました。

2.4. ボタンの動作設定

さて、これでメニューの外見だけは整いましたが、この状態だとまだメニューのボタンをクリックしても何も起きません。
各ボタンにクリックしたときの動作を設定する必要があります。
ボタンクリック時の動作は「コンテンツ設定」⇒「アクション」から設定できます。

選択できる動作タイプには以下のようなものがあります。

リンク：設定した URL が開きます
クーポン：設定したクーポンが開きます
テキスト：設定した 50 文字以内のテキストがユーザからのメッセージとして投稿されます、単独ではあまり意味をなさず主に Messaging API と一緒に使います
ショップカード：設定したショップカードが開きます
設定しない：何も動作しません

今回はリンクを選択してみました。
適当な URL とアクションラベルを設定して完了です。