1時間で作ったLINEバスアプリが利用者2000人になってました！

:::note info
この記事は[ZOZO Advent Calendar 2023](https://qiita.com/advent-calendar/2023/zozo) シリーズ6の16日目の記事です。
:::

## はじめに
今年の5月に京都産業大学のシャトルバスアプリを開発しました！

この記事では、作ってからどのように利用者を増やしていったか、大学アプリの運用面の課題をどう乗り越えていくかを書きました！

本アプリは、Twitterおよび学内メディア、掲示板で拡散されるなどして、現在は京都産業大学の学生の約10人に1人が使用するLINE botアプリとなっています。

制作時間1時間とありますが、初期のプロダクトにするまでの時間で、なんだかんだメンテナンスや都度不具合の修正を含めると、もう少し時間はかかっていると思います。

https://liff.line.me/1645278921-kWRPP32q/?accountId=906nthqp

また、並行して運用している見やすい時刻表アプリも月間1万PVの広告メディアとなっています。

https://kyoto-su-bus.vercel.app/

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">／<br>📣 神山シャトルン 本日リリースしました！👏<br>＼<br><br>上賀茂 and 二軒茶屋シャトルバスの時間がLINE上で見れるようになります！🎉<br><br>web上ですぐに見れる時刻表アプリも近日公開予定！✨<br><br>下のリンク or QRコードから追加してみてください！<br>追加→<a href="https://t.co/ElpT1DK1zg">https://t.co/ElpT1DK1zg</a><br><br>1/2<a href="https://twitter.com/hashtag/%E4%BA%AC%E7%94%A3?src=hash&amp;ref_src=twsrc%5Etfw">#京産</a> <a href="https://twitter.com/hashtag/%E7%A5%9E%E5%B1%B1%E3%82%B7%E3%83%A3%E3%83%88%E3%83%AB%E3%83%B3?src=hash&amp;ref_src=twsrc%5Etfw">#神山シャトルン</a> <a href="https://t.co/5fjktDbRRV">pic.twitter.com/5fjktDbRRV</a></p>&mdash; ワンキャンパスの10人1人が使う広告が載せれるバスアプリ 【神山シャトルン】 (@kyosan_bus) <a href="https://twitter.com/kyosan_bus/status/1663870438844375042?ref_src=twsrc%5Etfw">May 31, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 自己紹介
京都産業大学、4年生の🦊です。
個人開発で行いました。

これまではフロントエンドが主でしたが、最近は、SREとしてk8sやAWSなどを内定者アルバイトで扱っています。
またUI/UXやマーケティングなども好きで勉強しています。

## サービスの概要
早速重要なポイントなのですが、神山シャトルンは、LINE botとWebの2つで１つのサービスとなっています。

それぞれの機能としては、以下のようになっています。（なぜこのような構成にしているかは、後述する考えなければいけない観点に記載しています。）
- 次のバスの時間を教えてくれる -> LINE bot
- 見やすい時刻表 -> Web
- 広告掲載 -> Web

以前取材していただいた際に作成して下さったアプリ説明動画がとてもわかりやすいので記載します！
<iframe width="560" height="315" src="https://www.youtube.com/embed/phlVLEQw1zo?si=OV5FsYQ2WJPIxtJo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

## 制作背景
作成した背景は大きく２つあります。
- 既存時刻表ページの使いにくさ
- 公式にイベント集客などができない

### 既存時刻表ページの使いにくさ
既存の時刻表ページが見にくく、毎回検索する必要があり、手軽に見ることができなかったことがプチストレスでした。

同時に、大学が特別に運用するシャトルバスであるため、**Yahoo乗換案内などでは時刻表が見れない**ことも大きな課題でした。

また、周りの学生からもシャトルバスの時刻表は見るのが難しいという意見が多く、その見にくさから時刻を間違えてしまったこともしばしばありました。

どれくらい見にくいかというと、一枚のPDFに無理やり時間を記載しているので、スマホで見たときの視認性がかなり辛いことになっています。

![Videotogif (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212014/e0aaf3ce-321e-245d-36f2-7551088761f3.gif)



### 公式にイベント集客などができない
また、有志団体を運営する経験から、学内の掲示板にイベント告知や集客目的の広報を載せれないなど広報や集客の難しさも痛感していました。

しかし、学内の多くの学生が使用するアプリを作れば、広告を載せることもでき自分たち以外のサークルや団体・飲食店・賃貸など幅広く広報に活用でき団体・組織の広報面の課題を解決できると考えました。

## 考えなければいけない観点
ここでは、技術選定における要件がいくつかあったので紹介します。

### 1. ユーザの離脱とSEOの観点

実は、大先輩たちの努力によって、これまでも多くのシャトルバスアプリが存在していました。

しかし、そのほとんどはユーザに使われる頻度が少なく、次第に管理されなくなっていたイメージがありました。（そもそも知られていない）

要因を考えた際、ブラウザという観点では、ユーザがいちいち検索する必要があり、SEOの観点でも大学と戦わないといけないという壁があると思いました。その点、LINEアプリであれば、今の時代誰でも必ず1回は使うアプリであるため、こちらから一定の訴求をすることができれば、使用頻度が減少することはあるが、少なくともユーザの頭の片隅には残ると考えました。

また、現状作成したLINE botでは次のバスの時間しか見ることができないため、2本・3本先のバスを知りたい場合は、Web時刻表を見る必要があります。
そのため、LINEの登録者にユーザがいる間は、Web時刻表に誘導することができるというのもポイントです。

ここは2本、3本先のバスも知りたいとの要望がやはりあったのですが、キングコング西野さんの「不便益を売る」という概念を知り、あえてこの設計にしています。

https://chimney.town/8778/

### 2. 長期運用とマネタイズの課題
これも学内アプリのデメリットだと考えていますが、長期的に運用しようと考えると、マネタイズの面がかなり重要になってきます。

この観点で、モバイルアプリはユーザの獲得をしやすいが、App Storeへの申請に1万程度払う必要があり、IOSアップデートによって強制的にメンテナンスのコストがかかってしまうといった問題があります。

そのため、利益 < メンテナンスコストとなってしまうため、卒業後の運用がかなり難しいと考えていました。

一方、LIneアプリ✖️Webアプリであれば、アップデートなどはほぼしなくていいため、メンテナンスコストがかからないといった利点があります。

負担があるとすれば、不規則なイベント時のダイヤ変更の管理がありますが、これは実装コストの面から現在は見送っています。

## 技術選定
個人開発ということで、色々新しい技術を使ってみたいと思っていましたが、今回は前述の要件を満たすため、LINE bot✖️GASの構成としています。時刻表はスプレッドシートで管理し、特別ダイヤなどの切り替えもシート上で管理しています。おかげで、今は、メンテナンスコストは最小限に抑えることができています。

今回[Clasp](https://qiita.com/Syuparn/items/80c4f48c66ca53ef12b8)を用いて、App Script上にコードをPushしているのですが、GASのgit管理が超絶しにくい問題も解消しました。（拡張機能もあるが微妙でした・・）

- **LINEアプリ**
    - Google App Script（コード管理, デプロイ）
    - Clasp（GASコードの運用）
    - Jest（テストツール）
    - スプレッドシート（時刻表管理）
    - GitHub（コード管理）
    - GCPロギング（ログ・エラー管理）

また、広告掲載機能はmicroCMSを使用しています。
- **Web時刻表**
    - microCMS（広告・お知らせ機能）
    - Typescript（言語）
    - React（フレームワーク）
    - Tailwind CSS（UI）
    - Github（コード管理）
    - Github Actions（CI/CD）
    - Google App Script（時刻表API）
    - ESlint, Prettier（開発管理）

また作成するにあたって、下記の記事を参考にさせて頂きました。ありがとうございます🙇

https://qiita.com/kaonashikun/items/7619dcfc8b3105a613a0
## 使ってもらうためにやったこと
どうせ作るなら使ってもらいたいという思いのもと考えたこと・実際に行動したことは２つあります。
- 信頼を得る
- 許可を得る

### 信頼を得るために
アプリを使ってもらうためには、信頼性が重要だと考えていました。

**では信頼性とは何か。手っ取り早く信頼を得るためにどうするか。**

それは、**信頼性 = 溢れ出る公式感** だと自分は考えました。

そのため、アプリの名前も神山という大学が表に出している確率が高いワードとシャトルバスのアプリだとすぐにわかるシャトルンというワードを組み合わせています。

おかげで、Twitterをエゴサしていると、大学と共同で作っているっぽいなというツイートを散見しました。（嬉しい）

### 許可を得る
また、前述した信頼を得るためには、学内の掲示板で広報してもらうのが手っ取り早いと思いました。なので、とりあえず事務室に行って粘り強くお願いし、広報して頂きました。
その甲斐もあって、今では学内にもサービス名名が浸透しつつあり（？）、開発者としても取材を何件か受けさせていただく機会がありました。

お忙しい中、ご相談の会議を開いていただいた事務室の方や、色々な大人の方にはこの場を借りて感謝申し上げます。🙇‍♀️

## 今後について
このアプリは現在融資で開発を行っていますが、これからも使ってくれるユーザは多いと思います。
また、大学生にダイレクトに広告を発信できる媒体としても優秀なので、広告を出したい方はぜひご連絡ください！

## 最後に
この記事では、最小構成で作成したbotアプリを学内で普及させるためにしたことを書きました。
個人開発をしたい学生や使ってもらうための１つの例として誰かの参考になれば嬉しいです！

少しでも参考になっていれば、いいねを押してください！！！シェアでも嬉しいです！

アドベントカレンダー17日目は、@schectman-hellさんです！