こんにちは！アナログな町内会運営を変えるべく、「GASで機能拡張した町内会公式LINE」を作りました。たくさんの記事を参考にしながら、オープンソースの文化に触れる中で、助け合いの大切さを実感しつつ、ようやく完成させることができました。
Pay forwardの精神で、これから町内会LINEに追加した機能をシリーズで紹介していきます。初心者なので完璧なコードではないかもしれませんが、少しでも役に立てば嬉しいです！
なお、ブログ通りに作業してもうまく動かない方のために、「ココナラ」でサポートを提供しています。良かったらご覧くださいね♪
今回は複合リッチメニューのデザイン作成について紹介します。
リッチメニューとは
LINEキャンバス
LINE公式アカウントの「リッチメニュー」は、ユーザーがアカウントと簡単にやり取りできるようにするためのメニューです。
画面の下の方に表示され、画像やアイコンを使った見やすいデザインになっています。
このメニューを使えば、ユーザーはワンタップで色々な機能や情報にアクセスできます。
例えば、問い合わせフォーム、商品紹介ページ、最新ニュースやキャンペーン情報などです。
企業や団体は、このリッチメニューを使って、ユーザーに必要な情報を簡単に提供でき、メニューも自由に変更できます。
複合リッチメニューは、LINE公式アカウントのリッチメニューを複数組み合わせて表示できる機能です。これにより、ユーザーはさらに多様な情報や機能にアクセスすることができます。
町内会LINEにおける複合リッチメニューのメリット
町内会・自治会のLINE公式チャネルに複合リッチメニューを導入することは、住民とのコミュニケーションを円滑にし、情報提供を効率的に行うために非常に有効です。
以下に、具体的な理由と例を挙げて説明します。
1. 情報へのアクセスを簡単にする
複合リッチメニューを使用することで、住民が必要な情報に素早くアクセスできるようになります。メニュー内のボタンを押すだけで、関連する情報や機能に直接アクセスできます。
具体例：
- ゴミ出しの日程：複合リッチメニューに「ゴミ出しの日程」のボタンを設置し、クリックすると即座にその週のゴミ出しスケジュールを表示します。
- 防災情報：防災マニュアルや避難場所の情報をまとめたボタンを用意し、緊急時に素早く確認できるようにします。
2. イベント情報の周知
町内会や自治会が主催するイベントや集会の情報を簡単に住民に届けることができます。リッチメニューにイベント情報のセクションを設けることで、住民が一目でイベントの日時や場所を確認できます。
具体例：
- 夏祭りの詳細：リッチメニューに「夏祭り」のボタンを設置し、クリックすると開催日時、場所、プログラムの詳細が表示されるページに遷移します。
- 集会の通知：次回の自治会集会の情報をボタンで提供し、住民が事前に予定を確認しやすくします。
3. 住民との双方向コミュニケーション
リッチメニューを使って、住民からのフィードバックや問い合わせを受け付けることができます。これにより、住民の意見や質問に迅速に対応することができます。
具体例：
- 問い合わせフォーム：リッチメニューに「問い合わせ」のボタンを設置し、住民が簡単に問い合わせフォームにアクセスできるようにします。
- アンケート調査：住民の意見を収集するためのアンケートフォームへのリンクをリッチメニューに追加し、住民が簡単にアンケートに回答できるようにします。
4. 緊急時の対応
緊急時に必要な情報や連絡先をリッチメニューに常に表示しておくことで、住民が迅速に対応できるようになります。
具体例：
- 緊急連絡先：リッチメニューに「緊急連絡先」のボタンを設置し、警察、消防署、自治会の緊急連絡先をすぐに確認できるようにします。
- 避難場所：災害時に役立つ避難場所の情報をリッチメニューにまとめ、住民が緊急時にアクセスできるようにします。
5. 会員専用情報の提供
リッチメニューを使って、会員専用の情報や特典を提供することで、自治会や町内会の活動への参加を促進します。
具体例：
- 会員専用イベント：リッチメニューに「会員専用イベント」のボタンを設置し、会員のみがアクセスできる特別なイベント情報を提供します。
- 会費の支払い案内：会費の支払い方法や期限をリッチメニューに表示し、会員が忘れずに支払いを行えるようにします。
複合リッチメニューはデフォルトのリッチメニュー（最大6項目）よりも多くの項目を設定することができるので、その分できる機能が増えていきます。
町内会・自治会のLINE公式チャネルに複合リッチメニューを導入することで、情報提供の効率化、住民とのコミュニケーションの向上が期待できます。
複合リッチメニューをデザインする
Canvaがおすすめ
リッチメニューのデザインは、LINE Offical Account Managerで直接作ることができます。
しかし、デザインをこだわりたいときや複合リッチメニューにしたいときにはイチからデザインを起こす必要があります。そんな時は、Canvaが便利です！
Canvaは使いやすいデザインツールで、無料の範囲であっても豊富なテンプレートやアイコン、画像を利用できます。
初心者でも直感的に操作でき、プロ並みのデザインを簡単に作成可能です。
また、カスタマイズの幅が広く、ブランドカラーやロゴを取り入れてオリジナルのリッチメニューを作成できます。
時間をかけずにおしゃれデザインが仕上がるので、LINE公式アカウントの見栄えを簡単に向上させられますよ。
リッチメニューのベースを選ぶ
3ページにわたるオリジナルの複合リッチメニューを、Canvaを利用して作成してみます。
Canva ホーム→「リッチメニュー」で検索すると、たくさんのデザインが出てきます。
自分好みのデザインをひとつ選びます。
今回はこのデザインをベースに作ってみます。
ボタン位置を変更する
１ページのリッチメニューであれば、このまま使用できます。しかし、複合リッチメニューを作るにはページを選択するためのインデントの部分が必要ですので、ボタンの位置を変更する必要があります。
既存のデザインをベースに、インデントのあるデザインへ変更します。
具体的には、3ページにわたるメニューにインデックスをつけるため、既存の6分割のエリア分けを9分割にアレンジします。
リッチメニューのサイズは横2500縦1680です。これに、作業しやすいようにガイドをつけましょう。
ファイル → 設定 → ガイドを追加
横をX軸、縦をY軸としたとき、X軸は833、1667の位置、Y軸は336，1011の付近でガイドをつけます。
ガイドに合わせて、ボタン位置を変更します。
素材から好みの画像を背景にするとこんな感じ。
それっぽくなってきましたね～
インデント部分を作る
複合リッチメニューのインデント部分を作ります。
素材 → 図形 → 四角
素材 → 図形 → 下向き三角
これらを同じ色にすれば、インデント部分ができます。
あとは、ボタンのデザインを変更して… 出来上がり！
こんな感じで、あと2ページ分作ります。
作った画像データは、こんな感じでスプレッドシートとともにGoogleドライブの新規フォルダに格納しておくと後で便利ですよ！
リッチメニューで使用できる画像サイズは、1MBまでです。
それ以上だと、アップロードするときにエラーとなります。
まとめ
今回はインデント部分を含めたリッチメニューのページを作成しました。
自分好みのデザインにできるので、楽しくてつい夢中になってしまいますね。
次はいよいよリッチメニューをLINEに実装しますよ！
たくさんコードが出てくるので、プログラミングしてる～！て感じになります。
どうぞお楽しみに。