リッチメニューの作成方法

リッチメニューを使用することで、LINEの下部分にあなたが見せたいコンテンツを常に表示することができます。

＜リッチメニューの作成方法＞

 

リッチメニューを作成するには、事前に表示させる画像を用意する必要があります。
画像はメニューを何分割したとしても、１つのファイル（画像）としてアップロードしなければならないので注意してください。

※リッチメニューの画像の推奨サイズは以下のとおりです。
2500px × 1686px
2500px × 843px
1200px × 810px
1200px × 405px
800px × 540px
800px × 270px

サイズが合わないと、動作しないので注意してください。

ファイルのアップロードをするために、サイドメニューの「画像アップロード」より、ファイル選択を押してください。

その後アップロードボタンを押し、一覧に画像が表示されればOKです。


続いて、メニューの作成にとりかかります。

サイドメニューの「リッチメニュー」を選択肢、画面右上のリッチメニュー作成をクリックします。

＜リッチメニューの編集＞

リッチメニューの表示名と先ほどメディアより取り込んだイメージURLを記入し、表示する画像のサイズを設定します。※タブ付き（画面切り替え）のリッチメニューの作成方法は、後述します。

今回は、6パネルのテンプレートで設定を行います。

＜メニューのエリア追加＞

テンプレートを利用する場合

 

テンプレートを選択すると、画面右上にイメージ画像が表示されます。

今回は、テンプレートの6パネルを選択したので、画面上には6パネルのイメージ画像が表示され、その下に、パネル１～６までのメッセージやURL設定枠が設置されています。

 

それぞれのパネルにメッセーじもしくはURLを設定し、右下の更新ボタンを押してください。

最後に画面右上の「デフォルトとしてLINEにプッシュ」を押せば、公式アカウントを登録しているすべてのユーザーに対して、設定したリッチメニューが表示されます。

※セグメント別に配信したい場合は、「セグメント毎にLINEをプッシュ」ボタンを押し、

設定を実施します。

 

タブ付きのリッチメニューを作成したい場合

 

上記の図のように、タブボタンを押すと画面が切り替わるリッチメニューを作成したい場合、タブ付きのメニューを２枚用意する必要があります。

タブなしのリッチメニューの際と同様に、２枚分のリッチメニューを作成して下さい。

※今回は、６分割+２タブのテンプレートを利用します。

1枚目のタブ

2枚めのタブ

※作成方法は、上記「リッチメニューの作成方法」と同様です。

２枚のリッチメニューの作成が完了したら、それぞれのタブの設定を行います。

 

画面右側のエリア設定から、リッチメニューを変更したいボタンを選びます。

今回は、Tab１に設定をします。

Action項目の、チェンジメニューを選択します。

 

メニューの選択が完了したら、画面上の「リッチメニューの更新」を選択します。

これは、作成しているリッチメニューデータを更新するボタンです。

メニューを複数作成する

 

設定が完了しました。

Tab-２のボタンを押せば、リッチメニューが切り替わります。

 

※リッチメニューを解除したい場合は、「LINE上解除」のボタンを押せば、

設定されたリッチメニューの状態が解除されます。

動画で設定方法を確認したい方はこちら

カスタム（パネルの数や形を自分で決めたい場合）

設定されたテンプレートではなく、自分でパネルの数や形を決めたい場合、エリア作成方法のカスタムを押し、以法」と同様です。

 

下の手順でパネルを作成していきます。

 

メニューのエリア追加を行います。
今回は1200px（W) × 405px（H)の画像を3分割して3つのアクションを作っていきます。
＝高さ（H)405✕幅（W)120/3＝400

画面の405✕400のアクションを作るイメージです。


まずは一番右のメニューをタッチ可能に設定します。


①リッチメニューのタッチ可能範囲（高さと幅）を設定します。
今回のような3分割の場合、
height＝405，width＝400だと隙間なくメニュー画面を作成できます。
※画像では400✕400になっています。
400✕400のタッチ可能な見えないボタンを設定しました。
このままだと、どこにそのボタンを配置するかが決まっていないので、②で座標を設定します。

②作成したボタンの設置位置（座標）を設定します。
右のパネルは、X軸のスタートが800,Y軸のスタートが0になっています。
＜補足＞
左のボタンの設置位置のスタートはx軸が0,Y軸が0
真ん中ボタンは、X軸のスタートが400,Y軸のスタートが0


③メッセージや画像の設定
タッチした際に表示されるアクションを設定できます。
テキストと画像の2パターンの設定が可能です。

Massege=Lineのトーク上で表示されるメッセージを設定。

URI＝表示したい画像や動画（メディアファイルに事前に入れたURLをアップロード）と
　　 labelに表示されるテキストを設定。

上記は3分割ですが、クリッカブルなボタンのサイズ設定と、座標の位置を正しく設定できれば、自由にカスタマイズすることが可能です。