観光・街歩きWebアプリ / 本番運用中
KuraWalk
倉敷美観地区で、現在地や空き時間から観光スポット・飲食店・モデルコースを探せる街歩きガイドです。
KuraWalkを開く
概要
倉敷美観地区の観光情報を、地図と一覧から探せるWebアプリです。現在地、空き時間、目的を使って候補を絞り込めます。
観光スポット、飲食店、買い物に加え、トイレ・駐車場・ATM・Wi-Fiなどの実用情報も掲載しています。施設ごとに営業時間、料金、情報の出典を管理しています。
- 想定利用者
- 倉敷美観地区を訪れる旅行者。現地で行き先を探す人と、訪問前に計画を立てる人を想定。
- 制作目的
- 美観地区にいる人が、現在地・使える時間・目的から次の行動を選べるようにすること。
- 現在の状態
- 2026年8月14日に公開し、現在も本番運用中です。2026年8月時点で5言語に対応し、施設情報と出典の確認・更新を継続しています。
主な機能
- 現在地または中橋を基準に、近い施設を探す
- 観光・食事・買い物・実用情報を地図と一覧で比較する
- 30分から2時間30分まで、空き時間に合うモデルコースを選ぶ
- 建物や町並みの背景を5言語のガイドで読む
- 24時間利用、車いす、ベビー設備などの条件から公衆トイレを絞り込む
- 気になる場所を端末内のお気に入りへ保存し、PWAとして利用する
制作範囲
- 個人開発としての企画・要件整理・情報設計
- スマートフォンを中心としたUI設計とフロントエンド実装
- 施設・翻訳・出典を扱うデータモデルと管理機能の設計・実装
- 地図データ、位置情報、PWA、SEO、多言語対応
- Cloudflare環境へのデプロイと公開後のデータ整備・運用
- 自動テスト、端末幅別の画面確認、リリース判定
技術情報
- Frontend
- Astro / TypeScript / React Islands / Tailwind CSS
- Data
- Cloudflare D1。施設、翻訳、カテゴリ、営業時間、出典、ガイド、コースを管理
- Infrastructure
- Cloudflare Workers。静的アセットと地図タイルを同一構成で配信
- Mapping
- MapLibre GL JS / PMTiles / OpenStreetMap・Protomaps由来データ
- PWA
- インストール対応、主要画面のキャッシュ、端末内のお気に入り
- Internationalization
- 日本語・英語・中国語（簡体字／繁体字）・韓国語
- Testing
- Vitest / Playwright。地図、レスポンシブ、データ整合性、公開前スモークテスト
- SEO
- canonical、OGP、構造化データ、sitemap、robots、言語別メタデータ