新規メニュー #
コミュニケーション > メニュー > LINE > 新規メニュー
①新規リッチメニューの作成
新しいリッチメニューを追加するボタンです。
クリックすると、メニュータイトルやカテゴリー、メニューバーなどの入力フォームが表示されます。
リッチメニューの新規作成では、LINE公式アカウントのトーク画面下部に常時表示されるインターフェースを設定します。画像ベースでボタン領域を自由にレイアウトし、ユーザーを特定のページや機能に誘導する導線として活用できます。
作成の流れとしては、まず使用する画像を用意し、その後「エリアの分割」や「アクションの設定(リンクやタグ追加など)」を行い、必要に応じてターゲット(表示対象者)を指定して公開します。
はじめに:リッチメニュー用の画像を用意します #
- 画像サイズ:必ず指定のピクセル数で作成する必要があります。
- 大サイズ:横2500px × 高さ1686px(6分割など)
- 小サイズ:横2500px × 高さ843px(横長タイプ、大サイズの高さが半分のもの)
- ファイル形式:JPG / JPEG / PNG いずれか
- ファイルサイズ:1MB以内
- テキストやアイコンを含めたデザイン:
画像上に「ボタン名」や「アイコン」をあらかじめレイアウトしてください。後から配置するテキストボタンなどは使用しません。 - 余白・視認性:
スマートフォン表示を前提とし、文字は大きめ・コントラストは強めにすると視認性が高まります。
①リッチメニューの新規作成 step1 #
① メニュータイトル(必須)
管理用にメニューのタイトルを設定します。ユーザーには表示されません。複数メニューを運用する場合は、識別しやすい名称にしておくと便利です。
② カテゴリー(任意)
メニューをカテゴリで分類管理したい場合に指定します。カテゴリー設定を行っておくと、後からの整理や検索がしやすくなります。
③ メニューバー(任意)
ユーザーがトーク画面でリッチメニューを開いたときに、画面下部に表示されるバーの名称です。トーク画面上での視認性を考慮し、短くわかりやすい名前を設定しましょう。
④ 初期メニュー表示設定(必須)
リッチメニューをトーク画面表示時に初期表示させるかどうかを設定します。
・「メニューを表示する」:メニューが常に表示される
・「メッセージ入力欄を表示」:初期状態では非表示で、タップで表示される
⑤ メニュー画像(必須)
表示するリッチメニュー画像をアップロードします。
対応フォーマットは JPG / JPEG / PNG、ファイルサイズは 1MB以下。
画像サイズは以下のいずれかに対応:
・2500px × 1686px
・2500px × 843px ※サイズ超過、サイズ不足。容量オーバーの画像はアップロードが出来ません。
⑥ 次へ
入力が完了したら「次へ」ボタンをクリックして、次のステップ(メニュー領域設定)に進みます。
②リッチメニューの新規作成 step2 #
リッチメニューの表示エリアの分割数や、タブのレイアウト(上下・左右)を設定する画面です。ユーザーの操作しやすさやデザインに応じて、エリア数とタブ配置を柔軟に調整できます。
- タブレイアウト(上下)[任意]
リッチメニュー上部または下部に表示するタブのレイアウトを設定します。タブの数は最大6個まで設定でき、配置位置は「上」または「下」から選択できます。 - タブレイアウト(左右)[任意]
リッチメニューの左端または右端に縦方向で表示するタブの設定です。こちらも最大6個まで登録可能で、配置位置は「左」または「右」から選択します。 - メニューレイアウト[必須]
リッチメニューのエリア数を指定します。1~8の範囲で選択でき、選択に応じて下のエリアパターン(分割パターン)が表示されます。タップ領域の分割数やサイズに応じた最適なレイアウトを選択してください。 - 「次へ」ボタン
レイアウト設定が完了したら、[次へ]ボタンをクリックしてエリアごとのアクション設定画面へ進みます。
③リッチメニューの新規作成 step3 #
この画面では、アップロードしたリッチメニュー画像に対して、タブエリアやクリックエリア(ボタン)の位置とサイズをピクセル単位で調整することができます。
①【タブ1・タブ2】
水色枠で囲まれた部分が上下タブの領域を表します。
各タブをクリックすることで表示するメニューを切り替える設定を付与することが出来ます。
②【タブ3・タブ4】
黄緑枠で表示された部分が、左右タブが配置される領域です。
③【エリア1〜エリア4】
赤枠で囲まれた部分がメニューボタン等を配置できるエリアです。
【上下タブの高さ】
上下に配置されたタブの高さをpx単位で調整します(例:686px)。
【左右タブの幅】
左右にタブを表示した場合の横幅を指定します。
【行の高さ】
ボタン領域(メニューエリア)の高さを設定します。複数行に分かれている場合、1行ごとの高さを決めます。
【リアルタイムプレビュー】
変更内容はプレビューエリアに即時反映され、最終的な表示イメージを確認しながら調整できます。
【アクション設定画面の説明】
この画面では、リッチメニュー上の「タブ」および「エリア」に対して、クリック時に実行されるアクション(リンク遷移やメッセージ送信など)を設定します。
⑫ アクション(必須)
このセクションでは、各タブやエリアに対するアクションを個別に設定します。未設定のままでは保存できません。
■ タブアクション
タブ1・タブ2 など、上部やサイドの切り替え用タブに対して、それぞれ別のリッチメニューを表示させるアクションを設定できます。タブ名やリンクは、編集ボタンから任意に変更できます。
■ エリアアクション
「エリア1」「エリア2」など、ユーザーが実際にタップするボタン部分に設定するアクションです。
設定例)
- リンク:指定のURLに遷移
- メッセージ:指定したメッセージを送信(自動送信)
- 電話発信:タップで電話をかける(スマホ環境向け)
- マイページリンクなど:システムで指定された動的リンク
各アクションの右にある「編集」ボタンから内容の修正ができ、「削除」ボタンで該当設定を消去できます。
⑬ 次へ
すべてのアクション設定が完了したら「次へ」ボタンをクリックして、最終確認画面へ進みます。
④リッチメニューの新規作成 step4 #
【最終確認画面での確認】
⑭ メニュータイトル
管理画面上で識別するためのメニュー名です。LINE上には表示されません。
⑮ メニューバー
トーク画面下部に常時表示されるメニューバーのタイトルです。
⑯ 初期メニュー表示設定
友だちがトークを開いたときに最初にメニューを表示するか、メッセージ入力欄を表示するかの設定です。
⑰ プレビュー
作成した画像・タブ・エリアの設定レイアウトが表示されます。指定した表示位置やサイズが正しいか確認します。
下部のボタン「レイアウトをダウンロード」より、レイアウト情報をExcelで出力できます。
⑱ アクション
各タブ・エリアに設定されたリンクやメッセージなどのアクション一覧が表示されます。
⑲ 下書き保存
現在の内容を一時保存します。すぐに有効化しない場合はこちらをクリックします。
⑳ 有効化
このボタンをクリックすると、設定したリッチメニューが即座にLINEで有効となり、ユーザーへ表示されます。