皆さん「倉敷美観地区」ってご存じですか？
岡山県倉敷市にある観光地で、白壁の町家や倉敷川沿いの柳など昔ながらの町並みが残っている場所です。
観光地なので休日になるとかなりの人が歩いています。外国人観光客も珍しくありません。
そんな場所を普段から見ていて、あるとき思いました。
「美観地区を歩くための使いやすいWebアプリがあったら便利なのでは？」
そこから個人開発を始めて、先日ようやく公開したのが「KuraWalk」です。
今回はKuraWalkを作った経緯と、個人開発で実際にやったことを書いてみます。
美観地区には思った以上にいろいろある
美観地区というと倉敷川沿いの風景を想像する人が多いと思います。
でも実際に歩いてみるとかなり色々あります。
美術館があります。
古い町家があります。
カフェがあります。
食べ歩きのお店があります。
お土産屋があります。
一本裏の道に入ると、表通りとは雰囲気が全然違います。
観光客がよく歩いている場所から少し離れたところにも店があります。
地元に住んでいる私でも
「ここにこんな店あったんだ」
となることがあります。
逆に観光客の立場になると
「どこを歩けばいいのか」
「あと1時間あるけど何をすればいいのか」
「近くにトイレはあるのか」
「駐車場はどこなのか」
みたいなことを、その都度調べる必要があります。
Googleマップはもちろん便利です。
ただ、美観地区を観光することだけに絞ったサービスがあってもいいんじゃないかと思いました。
アプリをインストールさせたくなかった
最初からWebアプリにしようとは決めていました。
理由は単純です。
観光に来た人が、その場所のためだけにアプリをインストールしてくれるとは限らないからです。
私自身が旅行するときもそうです。
「この観光地を見るにはまずアプリをインストールしてください」
と言われると少し面倒に感じます。
Webなら検索結果やQRコードからそのまま開けます。
会員登録も必要ありません。
KuraWalkも
開く → 地図を見る → 行き先を決める
くらいの気軽さを目指しました。
作ったのは「施設一覧」だけではない
最初は地図に施設を載せれば十分だと思っていました。
でも作っているうちに
「これだけだとGoogleマップでいいな」
となりました。
そこでKuraWalkでは、地図以外の使い方もできるようにしています。
今、何する？
個人的に気に入っている機能です。
観光していると
「あと30分だけ時間がある」
みたいな場面があります。
そこで空いている時間や興味などから行き先を探せるようにしました。
30分なら近くを少し見る。
1時間あるなら少し離れた場所まで歩く。
雨なら屋内を優先する。
そんな使い方を想定しています。
モデルコース
「初めて来たけどどこを歩けばいいのか分からない」
という人向けです。
30分程度で歩けるものから、美術館などへの入館を含めたコースまで用意しています。
作っている途中で
「大原美術館の前を10分で通過」
みたいなコースになっていたこともありました。
いや、初めて美観地区に来て大原美術館まで行った人なら普通は入りたくなるだろうと。
こういうところは実際に観光する人の立場で何度も見直しました。
トイレや駐車場も載せる
観光スポットだけではなく、実際に現地で困りそうな情報も載せています。
トイレ。
駐車場。
ATM。
コインロッカー。
Free Wi-Fi。
休憩できる場所。
特に駐車場は美観地区周辺だと重要です。
休日になると駐車場待ちの車で周辺道路が混雑することがあります。
観光名所だけを綺麗に並べるより、こういう情報がちゃんと見つかる方が現地では役立つと思っています。
気付けば232スポットになっていた
最初から232件登録するつもりだったわけではありません。
調べていくうちに増えました。
現在KuraWalkには232スポットを掲載しています。
観光施設だけではありません。
飲食店。
カフェ。
食べ歩き。
お土産。
駐車場。
トイレ。
ATM。
ロッカー。
休憩場所。
こうしたものを含めています。
大変だったのは数を増やすことより
「この情報は本当に正しいのか」
を確認することでした。
営業時間ひとつ取っても、情報源によって違うことがあります。
公式サイトに書いていないこともあります。
SNSにしか最新情報がない店もあります。
確認できない情報は無理に埋めないようにしました。
分からないものは分からないままにしています。
観光中に使うものなので、もっともらしい間違った情報を出す方が困るからです。
5言語対応にした
現在は次の5言語に対応しています。
- 日本語
- English
- 繁體中文
- 简体中文
- 한국어
美観地区を歩いていると外国人観光客をかなり見かけます。
だったら最初から海外の人にも使えるようにしようと思いました。
ただ、単純に日本語を全部翻訳すれば終わりではありませんでした。
施設名には公式の外国語名称が存在する場合があります。
曜日や料金の書き方も違います。
日本語では自然でも、他の言語では変なUIになることがあります。
翻訳自体より
「5言語にしても画面がちゃんと成立するか」
の確認の方が大変だった気がします。
写真が欲しくなった
KuraWalkは地図だけではなく、写真から場所を選べるようにもしています。
そうすると当然写真が必要になります。
インターネット上には美観地区の写真がたくさんあります。
でも、ネットにあるからといって自由に使えるわけではありません。
Googleマップの写真を勝手に持ってくるわけにもいきません。
店舗のInstagramの写真を保存して使うのも違います。
どうしようか考えた結果
「自分で撮ればいいか」
となりました。
朝4時に起きて美観地区へ写真を撮りに行った
普段の美観地区は観光客が多いです。
昼間に写真を撮ると、どうしても人がかなり写ります。
そこで休日の朝4時に起きました。
カメラを持って美観地区へ行きました。
さすがにほとんど人がいません。
いつも観光客でいっぱいの倉敷川沿いも静かです。
中橋。
白壁の建物。
柳。
路地。
店の外観。
ひたすら歩いて撮りました。
早朝の美観地区は昼間とは全然違いました。
普段住んでいる町なのに、観光客がいないだけで別の場所みたいに見えます。
ただ、一つ問題がありました。
曇っていました。
せっかく朝4時に起きたのに空が白い。
写真全体も少し暗い。
結局、建物や柳の形を変えない範囲で空や明るさを調整して使うことにしました。
Webアプリを作っていたはずなのに、途中から早朝にカメラを持って町を歩いていました。
個人開発はこういうこともやるんだなと思いました。
地元の人にも触ってもらった
自分一人で作っていると、だんだん何が分かりやすくて何が分かりにくいのか分からなくなります。
そこで妻にも触ってもらいました。
返ってきたのが
「もっと散歩したくなる感じがいい」
という意見でした。
それまでのKuraWalkは、機能としては便利でも少し「観光情報ツール」っぽすぎました。
そこから写真を大きくしたり、地図だけではなく写真から場所を選べるようにしたりしました。
予算で行き先を選べた方がいいという意見もありました。
また、妻が地元の人から聞いてきた
「観光客ならFree Wi-Fiが分かると便利」
「駐車場の空き状況も見られたら便利」
といった意見もありました。
できるものは調べて取り入れました。
できないものは無理に作りませんでした。
こういうフィードバックはコードを書いているだけでは出てこないので助かりました。
技術構成
技術についても少しだけ書いておきます。
フロントエンドを中心に
- Astro
- React
- Tailwind CSS
- Cloudflare Workers
- Cloudflare D1
- MapLibre
- PMTiles
などを使っています。
PWAにも対応しています。
地図は現在地を取得して、歩いている間も位置が更新されるようにしています。
スマートフォンで現地利用することをかなり意識しました。
細かな内部構成については公開サービスなので、この記事ではあまり書かないことにします。
AIにもかなり手伝ってもらった
今回の開発ではAIをかなり使っています。
ただ
「観光アプリを作って」
と一言お願いして完成したわけではありません。
私が実際にサイトを触って
「これは使いにくい」
「この文章は変」
「観光客ならここで困る」
「この施設を通過するだけのコースはおかしい」
といった部分を確認しながら修正を繰り返しました。
妻や地元の人からも意見をもらいました。
AIが得意なところは任せる。
現地に行かないと分からないことは自分で見る。
最終的に何を作るかは自分で決める。
この役割分担は個人開発とかなり相性が良かったです。
公開して終わりではない
KuraWalkは公開しました。
でも観光情報はどんどん変わります。
店が増えることもあります。
閉店することもあります。
営業時間も変わります。
なので、公開後も定期的に施設情報やリンクを確認する仕組みを作っています。
利用者から
「この店が載っていない」
「営業時間が違う」
と知らせてもらえるフォームも用意しました。
一人で全部の店を毎日確認することはできません。
だから最初から
「公開した後にどう維持するか」
まで考えて作りました。
収益化も試してみる
個人開発なので、運営費くらいは自分で稼いでくれるサービスになってほしいと思っています。
現在はGoogle AdSenseの審査中です。
ただ、地図を操作している途中やトイレを探しているところに広告が出ると邪魔です。
そのため広告を出すとしても、地図や現在地を使う画面には基本的に出さず、読み物や施設情報などを中心にする予定です。
広告だらけにして使いにくくなるのは避けたいです。
まずは実際に使ってもらえるサービスにすることを優先します。
これから
公開したばかりなので、Google検索にもまだほとんど出てきません。
これから
「美観地区 マップ」
「倉敷美観地区 観光」
みたいな検索から見つけてもらえるようになればいいなと思っています。
そして実際に美観地区へ来た人が
「次どこ行こう」
となったときにKuraWalkを開いてくれたら嬉しいです。
まだ改善したいところはたくさんあります。
写真も増やしたいです。
施設情報ももっと充実させたいです。
実際に使ってみて
「ここ使いにくい」
「この情報が欲しい」
というものがあればぜひ教えてください。
KuraWalk
倉敷美観地区の観光マップ・街歩きガイドです。
現在地からスポットを探したり、空き時間に合わせて行き先を決めたりできます。
美観地区へ来る機会があれば、ぜひ使ってみてください。