学園祭で使用した屋台会計システム - LINEbot編 -

屋台会計システムの全体概要はこちらから↓
（まだ完成していないため、公開でき次第載せます）

この記事は、屋台会計システムで来場者に使用してもらったLINEbotについてのまとめです。

概要

学園祭での長い屋台待ち時間でもお客さんに学園祭を楽しんでもらいたい！という思いから、注文完了通知をLINEbotから送れるようにしました。

使用技術

使用言語: TypeScript, JavaScript
フレームワーク： Next.js
サーバ : さくらサーバ
DB: mongoDB
デプロイ環境: Railway

機能

機能は大きく分けると

• メニュー表確認
• 注文情報との連携
  の２つあり、リッチメニューのボタンから操作できます。

以下機能の詳細を説明していきます。

メニュー表確認

リッチメニュー左側の黄色いボタンをタップするとメニュー表の画像が確認できます。

メニュー表のデザインもこだわって個人的にかわいくできたので載せたかったのですが念のためぼかしておきます。雰囲気だけでも見てくださると喜びます。

UXの向上とサーバへの負担軽減のため、ボタンをタップしてから画像送信が完了するまでの間にローディングアニメーションを追加しました。

注文情報との連携

注文したときに発行される注文番号と登録した名前を入力すると、LINEbotで注文情報との連携ができます。

↑連携画面

↑調理完了通知画面

連携後にできること

• 自分の注文したメニューの確認と目安の待ち時間を確認
• 屋台側で調理が完了すると調理完了通知を受け取ることができ、通知画面を屋台側に見せることによってスムーズに受け取りを完了できる

工夫した点

LINEbotを開発する上で軸としていたことは、「どんな年齢層の方にとっても分かりやすく使いやすいこと」です。学園祭には生徒の兄妹から親、祖父母まで来ていただくので、分かりやすいことを重視しました。

その他細かい工夫点は以下です。

• どんな世代でも見やすいように全体のデザインは大きめに
• キーパッド切り替えボタンを分かりやすく
• 説明文や指示語を分かりやすい文章にした
• 屋台利用者の目線を集めやすい場所に利用方法が書かれたポスターを貼った
• ローディングアニメーションの追加
• 完了通知はぱっと見でどの注文をしたか、どんな屋台かをわかるようにした
• 緊急時用のブロードキャストメッセージ送信webページを作成
• リッチメニューのデザインに関して、スマホの小さな画面でどんな世代でも見やすい大きさや直感的に分かりやすいデザインとして作成した。ちょっとレトロ感を出して学園祭のテーマである「タイムスリップ」を意識した

ブロードキャストを送るwebページを作成したことは、当日とても助かりました、、、。LINE側だけでなく屋台側でのトラブルも大勢に通知することができたので作って大正解！！

使用後のフィードバック

学園祭終了後にLINEのアンケート機能を利用してアンケートを取りました。

質問１: メニュー表をLINEで見ることをどう感じたか

昨年までの学園祭ではメニュー確認をどこで行えばいいかわからないという意見があったため、やはりLINEで確認できるようにしたのは成功だったのではと思いました。

質問2: リッチメニューのデザインはどうだったか

分かりづらかったと回答された方は全員保護者の方でした。やはり幅広い層の方に分かりやすいデザインは難しい、、、。どこが難しかったのかを考えて来年には改善したいです。

質問3: 注文完了通知のデザインはどうだったか

注文完了画面はお客さんだけでなく、屋台側の人もどの番号でなんの注文したのかがすぐわかるようなUIにしたのですが、LINEという小さい画面に情報を詰め込みすぎたということが反省点です。そこで分かりづらく感じたのかな

質問4: 注文情報との連携方法はどうだったか

これは思ったより簡単だったと回答してくれた方が多いなと感じました。
最初の予定では注文時にQRコードを表示して、それを読み込むだけで友達追加と連携を完了させようとしたのですが、実装にはLINEミニアプリを利用する必要があり、登録に事業番号が必要なことや許可が下りるまで時間がかかることもあり断念しました。来年こそは実装して全員に非常に簡単だったと感じてもらいたいです。

質問5: 調理完了通知はきたか

ネットワークが安定していない可能性があったので確認でアンケートを取りました。
こなかった原因として運営側とLINE側でリポジトリを分けていたため、changeStreamというmongoDBの機能を使っていたからというのが考えられるため、統合したら解決すると思います。最初からそうしておけばいろいろ楽だった、、、。
複数回来た理由としてもchangeStreamが原因と考えられます。

質問6:このLINEbotを来年も使用したいか

来年も使用したいと思ってくれた方が多くてうれしい。うれしすぎる。モノづくりに対するモチベが上がりました。問題点を改善していき、よりユーザーに寄り添ったものが作れるようにがんばるぞー！！って感じです。

まとめ

初めてちゃんとユーザーに使ってもらうものを作れてとてもいい経験になりました。
技術的、企画的、チームとの連携でまだまだ学ぶことが大きなと感じたとともに、ユーザーに寄り添ったものを作ることの楽しさをとても感じました。こだわりもをって行うモノづくりは作ったものに愛着が持てるのでとても楽しかったです。