LINEが明かす、福岡市「粗大ごみ受付Bot」の仕組み　快適なUXを実現するために工夫したこと

福岡市が粗大ごみ受付Botを導入した背景

中嶋一樹氏（以下、中嶋）：今日は福岡市さん、および我々、あるいは開発パートナーの方々など、このチャットボットを作った全メンバーがこちらに来ています。

さらには、そのチャットボットの中で使っている新しい機能メインで開発しているエンジニアであったりプロダクトマネージャーの方が来てくれているので、後半はそのテクノロジー部分の深掘りをしていただければと思っております。

では最初に、このチャットボットのプロジェクトがどのように始まったのか、その概要や背景について、福岡市さんからお話をいただこうかと思います。では、稲永さんおよび小椋さんよろしくお願いします。

（会場拍手）

稲永麻子氏（以下、稲永）：ただいまご紹介にあずかりました、福岡市企画調整部の稲永と申します。よろしくお願いいたします。

では、最初に今回の粗大ごみBotについて、LINE Fukuokaさんからご提案いただいたんですが、そのご提案についてご説明します。

福岡市では「Fukuoka AI Community」というコミュニティを持っていまして、今年の3月、こちらで「行政サービスをより使いやすくするような何かをご提案ください」ということで公募をいたしました。

そちらにLINE Fukuokaさんが応募したいということで、今回のご提案をいただいています。

そのときのご提案のチームが、LINE Fukuokaさんとオルターブースさん、さくらインターネットさんの3社になります。こちらの3社からご提案いただいて、福岡市で今回の粗大ごみBotの取り組みを実証実験させていただいています。

ここで「Fukuoka AI Community」の紹介をさせていただきます。「Fukuoka AI Community」は市内の企業や、市内の企業となにかしたいという企業に会員になっていただき、AI関連のイベントを、月1回程度開催させていただいたり、実証実験の支援をさせていただいたり、新サービスの広報を支援させていただいています。

今回の粗大ごみBotについては、先週9月28日に、AI Communityのイベントでも中嶋さんたちからお話しいただいています。こちらは会員を随時募集しておりますので、まだ会員になっていない方は入っていただければと思います。ここから小椋に替わります。

小椋潤氏（以下、小椋）：みなさんこんばんは。福岡市企画調整部の小椋と申します。

稲永からも説明いたしましたが、ここから私が引き続きでお話しさせていただきます。

いま、AI Communityのお話がありましたが、広報支援というところもありますので、左下ご注目いただくと、この写真は福岡市で実証実験していますキャッシュレス実証実験の採択式の写真です。こちらは包括連携協定等を結んで広く取り組ませていただいております。

粗大ごみ受付の現状

小椋：ここから、福岡市の粗大ごみの収集の現状についてご説明をさせていただきます。

福岡市には粗大ごみの受付センターがございまして、年々ごみの量が増えています。所管をしているのが環境局になるんですが、私もこれをやって初めて知ったのですが、思った以上にどんどん増えている現状がございました。

右側の表がございますけれども、その中で、まだまだみなさん電話を使われる方が多いみたいなんですね。この場のみなさんはネットを主に使われているとは思いますが、まだまだその移行が進んでいないのが現状で、8割がまだ電話だというところがございました。

そのなかで、先ほど稲永より話があったように、実証実験のご提案をいただいて協議させていただきまして、サービスの向上と行政の効率化を目指して、9月19日から実証実験を開始させていただいたという経緯でございます。

その利用状況についてご紹介させていただきます。友だち数については、初速でも2,000弱の友だち追加があって、翌日も新聞等で紹介されて4,000を突破するということで、かなり勢いが高かったんですけれども、現在でも毎日100〜200件ぐらい友だちが増えていっています。10月2日時点では6,800人だったのですが、いま見たらちょうど7,000に到達していました。

実際友だち数は増えているんですが、ちゃんと利用されているのかというところを最後ご説明して終わりにしたいと思いますが。

もともとは電話とPCで8割・2割ぐらい申し込みがあったところでしたが、実証実験を始めてからは、それぞれ10パーセントずつ減った上で、LINEさんのチャットボットに20パーセント流れています。

目論見ではもうすこし時間かかるかと思ったんですけれども、9月中にここまでいってしまったので、今後どんどん進んでいくんじゃないかと思います。

割合だけでなく実際の申し込みの件数も増えているようです。例年では3月ごろが繁忙期になるのですが、すでに繁忙期並みの受付を受けているような状況です。中嶋さん曰く「空前のLINE受付ブームがきている」とのことです。

（会場笑）

これらのお話の詳しいところは、みなさんにお話しいただければと思いますので、我々からは以上とさせていただきます。どうもこれからもよろしくお願いいたします。

（会場拍手）

想定の2倍使われている

中嶋：稲永さん小椋さんありがとうございました。では、ここからは私が実際にそのアプリケーションについて、みなさまに見ていただきながら中身をご説明していこうかなと思います。

いま、利用率のお話がありましたが、本当に我々が想定してた以上に使われている状況です。これは実証実験なので、必ずしもここで友だち数をバンバン伸ばすことをターゲットにしているわけではありませんでした。あくまでも、このサービスが安定的に使えるかどうかという部分と、みなさんがこのサービスに満足しているかどうか、サンプリングしながらそれを確認できればいいなと思ってたんですけれども、想定の倍以上の人がいま使われている状態です。

福岡市の場合は、インターネット受付というWebのシステムがもともと存在していたので、ネット上でも申請することはできたんですが、すでにその数を超える件数がLINEから申し込まれているということで、現在の感触としては非常によいのかなと思っています。

先ほど出ていなかった数字としては、友だち数はやはり母数が多くなればなるほど、ブロック数が増えていきます。

とくにこういったLINE公式アカウントは、広告を配信したりキャンペーン情報を配信するアカウントが多いので、例えば「スタンプ無料ダウンロード」というかたちでキャンペーンを始めて、それが終わると一気にブロックされて、半分ぐらいブロックされるという、そんなケースも少なくありません。

今回の例では、最新のデータは見てないものの、おそらくブロック率は2〜3パーセントです。ほとんどの方がそのままアクティブに使われているということで、非常に価値のあるサービスとしてみなさんが認識していただいているんじゃないかなと思います。

実際に粗大ごみ出された方はいますか？　なるほど。（粗大ごみを）出すまではまだいたっていないですね。ぜひ積極的に利用していただけたらと思います。

（会場笑）

LINEで粗大ごみの受付をやってみる

中嶋：実際に今からひととおりの流れをみなさまに見ていただければと思います。ご存じのとおり、とりあえず右下にあるLINEのアプリケーションを起動します。福岡市粗大ごみ受付のアカウントが友だちに追加された状態になっています。追加された直後、このように「ようこそ」と表示されます。

まず、「個人情報の取り扱い」と「ログイン」というボタンが存在しています。チャットボット自体はログインして使う必要はないんですが、友だち追加するだけで使えるのがチャットボットのいいところでもあるのでログインする必要はありませんが、今回は最初にログインをしていただくフローを入れています。

これはなぜかというと、「ログイン」ってタップしてみるとわかると思うのですが、この「権限を確認」というところを見ると、これいわゆるFacebookでログインとかGoogleでログインというものがよくありますが、そのLINE版でLINE Loginというものです。

なぜログインさせるのかというと、ユーザーの情報をLINEからこのチャットボットに連携できるようにしています。

ここで、自分のLINEのアカウントに登録されているメールアドレスや電話番号、住所やお名前などの情報からチャットボットにこの情報をコピーしていいよ、というのをユーザーが許諾する、というステップになります。

今回はスマートフォンで粗大ごみの申請をしていただくことになるわけなんですが、やはりスマートフォンはできるかぎり入力を減らしたいという思いがあります。

のちほどまたご説明しますが、とにかく肝はユーザーエクスペリエンスです。すでにWeb受付が存在していますから、機能としては同じなわけです。ネット上で粗大ごみを申請でき、品目数も同じです。

粗大ごみを申請できる項目も、LINEとWebで同じなんですが、唯一違うのはUXで、ここをすごく大事にしています。なので、できるかぎりユーザーの入力項目を減らすために、今回はLINE Loginを最初に入れています。

トーク上でWebアプリを表示させるLIFF

中嶋：これで「同意する」ボタンをタップしていきます。すると「ログイン完了しました」。ここから粗大ごみの申請ができるということで「粗大ごみの申し込み」というボタンが表示されている状態です。これで「粗大ごみの申し込み」ボタンをタップしますと、「粗大ごみの申し込みですね。少々お待ちください」。

その次に「粗大ごみの品目を選択してください」と出てきて、その下に「リストを表示」というボタンがあります。このボタンをタップしますと、このようなかたち、下からニョキッとWebのフォームが現れます。

「リストを表示」は完全に違うアプリケーションに遷移しているわけではなくて、このトーク上でWebフォームが現れているようなかたちになります。ここで品目を検索して選んで入力できるようになっています。

当然これは、リストから選ばず直接「扇風機」と入力いただいても良いのですが、なるべく入力を減らしたいという思いで、この「リストを表示」からタップするだけでその項目をトーク上に送信できるようなかたちになっています。

例えばここで「換気扇」が真ん中にありますが、こちらをタップすると、この「換気扇を申し込みます」というメッセージが、Webフォームから私が送信したかのようにトークルームの中にメッセージを送信できるような、そんな機能が備わっています。

この一つひとつの機能についてはより深く後半のセッションに出てきますが、いま出てきたWebフォームというか、このトーク上でWebアプリケーションを表示する枠組みのことをLINE Front-end Frameworkの略で「LIFF」と呼んでいます。

クイックリプライで選択肢をスマートに表示

中嶋：さらに、そのあと「換気扇の個数を選択してください」と出てきていて。ここでは数字を直接入力してもいいんですが、クイックリプライという機能を使って、ユーザーがタップするだけで入力できるような、そんなボタンが動的に表示されています。これは横スクロールで全項目を表示させることができます。

いままでは、この選択式を出そうと思うと個数に限りがありました。もともとあったTemplate Messageでは4個までしかボタンが表示できず、選択項目が限られていました。

いまはFlex Messageが出てきたので、事実上ほぼ無限にボタンを置くことができるようになりました。ただ、レイアウト上はあまりよくないということで、このクイックリプライを使うことでかなり多くの項目を出すことができるようになっています。

ここで「1」と入力してあげて、「こちらの品目を承りました」と。10個まで追加できるので、このあと追加や削除をしていただくこともできるのですが、今回は「以上」というボタンをタップしていきます。

Profile+を用いて個人情報を入力

中嶋：次に「連絡先・ご住所を入力ください」という画面が出てくるので、そのリンクをまたタップします。そうすると、先ほどと同じようにLIFFのWebフォームが現れます。

ここで自分の連絡先情報はほぼ埋まっている状態になっていると思います。これは私が、LINEの「Profile+」という画面において、自分の名前や電話番号、Email、それに郵便番号を登録しているので、それらがすべて事前にこちらに連携されているような状態になります。

なので、私が入力しなければいけないのは、「町名」「番・番地」「号・枝番」というところだけなんですね。なので、仮にこのオフィスの住所でも入れておきましょうか。

これで「アパート・マンションに住んでいる」というところをチェックしていただくと、自分のマンション名も入れられるようになっていますが、実際に送信すると本当に申請されてしまうので、市の方がテストをやっているとわかるように「LINE Test」という呪文を入れておこうと思います。

これで「送信」としてあげると「ご連絡先・住所はこちらでよろしいですか？」と出てくるので、「はい」と解答します。「このまま少々お待ちください」というメッセージが出てきて、しばらくすると、直近でごみを出せる4つの日時が出てきますので、その中から1つを選択します。今回は「10月18日」を選択してみましょう。

そうすると、住居のタイプに応じて「搬出場所を選択してください」と出てくるので、適当な搬出場所を選択します。

最終的に「収集日と搬出場所はこちらでいいですか？」というのが出てきますので、こちらでも「はい」というボタンをタップすると、これですべての入力申請項目が完了しますので、最終的な申請内容を確認して「はい」というボタンをタップしていただければ、粗大ごみの申請が完了します。

既存のシステムは変えずに運用

中嶋：これはあくまでも申請が完了した状態で、最終的に受け付けられるためには、このあと仮受付メールが来て、さらには本受付メールが来て完了というかたちになります。

本来であれば、こういった確認メールがここから来るのではなく、当然ながらLINEで応答が来てほしいところではありますが、当然こういったシステムはいまある市のシステムと統合しながら作っているので、すべてを一気に統合していくのはなかなか難しいところがあります。

なので、Emailのところは既存の運用をそのまま残しつつ、段階的にLINEへの移行を進めていこうと計画しています。なので、「LINEで申請しているのに、なんでLINEでメッセージが来ないんだろう？」というのがちょっと不思議なところではありますが、そこはいわゆる大人の事情というやつなんですね。

現在実証実験中なので、これが便利だったかどうかというアンケートが2問ほど出てきます。「便利でしたか？」「コメントがあればどうぞ」と。いまはテストなので「テスト」と入れておきます。

こんなかたちで粗大ごみの申請が完了できます。その中でいくつかキーとなる技術や機能がありますので、それを見ていきたいと思います。

UXを担保する仕組み

中嶋：冒頭でも申し上げましたとおりで、今回のアプリケーションで一番重要視しているのはユーザーエクスペリエンスです。

これをどのように担保するためにさまざまな機能を使っていますが、これはもう最初に申し上げたとおりで、LINE Loginを使ってできるかぎり情報の入力を省略していくという工夫をしております。

あとはFlex Messageですね。ほとんどのメッセージがFlex Messageというフォーマットを使っています。

LINEのチャットボットの中ではかなり多くのフォーマットでメッセージを送信できます。おそらくふだん友達とやりとりしているときには「えっ、こんなメッセージあったの？」というものがあると思うんです。

実質的にはこのFlex Messageを使うことによって、HTMLを組み立てるかのようにメッセージを組み立てることができますので、かなり自由度の高い表現ができるようになっています。

なので、下に1個だけボタンが出ているものも、いままではTemplate Messageを使って作るものだったんですが、こういうものをすべてFlex Messageを使って構築できるようになっています。

なので、こういった純粋なプレーンテキストのもの以外はチャットボットの中ではすべてFlex Messageを使って、できるかぎりユーザーがわかりやすいようなかたちのメッセージを送信しています。

動的なリッチメニュー

中嶋：あとはリッチメニューですね。

これもユーザー同士でやりとりしているときには出てこないと思いますが、チャットボットとやりとりするとき、要は公式アカウントとやりとりするときは、画面の下のほうにパネルのようなものが表示されることがあります。これをリッチメニューと言っているんですが、これをデベロッパーが設定できるようになっています。

先ほどのデモの中では見えていなかったかもしれませんが、これは実は出たり消えたりするようなかたちになっています。いまは出ている状態になっており、これがデフォルトのステータスです。

ここから「粗大ごみの申し込み」というボタンをタップすると、こんな感じで消えます。ちょっともう1回やりますね。ここの画面から「粗大ごみの申し込み」というボタンをタップすると、こんなかたちでリッチメニューが消えるようになっています。これは意図的に手動で消しているのではなく、勝手に消えているんですね。

これはリッチメニューのAPIという専用のAPIが存在していて、それを使うことによって、このシーンでリッチメニューを外す。またはつける、外す、また変えるとか、そういったことができるようになっています。

すごく重要なのは、このリッチメニューが出ているときは、逆に、なにをしたらいいのかはわかりやすいですよね。このチャットボットでどんなことができるのかすごくわかりやすいですが、一方で、キーボードを出そうと思ったときに、どこから出せばいいのかわかりにくいという話があったりします。

なので、キーボードで入力をしてほしいときや、画面を広く使いたいときは、いったんリッチメニューを外してあげることで、キーボードで入力するためのフォームが簡単に確認できます。

他のユーザーとやりとりしているときの通常のデザインになりますので、この状態に戻してあげることでユーザーのエクスペリエンスを高めてあげるということも意識して、リッチメニューを設定しています。

LIFFによるトーク上でのフォーム入力

中嶋：先ほど少し言及しましたが、LIFFですね。チャットボットのやりとりは基本的には対話ベースなので、なにかを聞かれてなにかを答えるかたちになります。なので、構造的なデータをチャットボットに渡してあげるのは、これまでは困難な作業でした。

なので、多くの方がWebフォームと連携したり、外部のWebフォームと連携してなんらかのかたちでチャットボットに情報を渡すという取り組みをされていました。ですが現在はトーク上でLIFFの画面を出すことができるようになり、Webの画面を出すことができるようになりました。

この画面は、のちのち詳しいご説明があると思いますが、サイズも調節できますし、ここからメッセージを送信するようなJavaScriptのSDKが提供されていますので、そういった意味でシームレスにこのWebフォームとトークをつなげることができるようになっています。

クイックリプライは先ほど申し上げましたとおりで、多くの選択肢を出すときには、非常にコンパクトに数ある選択肢の中から選ぶという行為をユーザーに対してサポートできます。

これも使いどころによっては非常に便利な機能ではないかなと思います。