WORK 01
観光・街歩きWebアプリ
KuraWalk
制作のポイント
- 何のために
- 現在地や空き時間をもとに、倉敷美観地区で次に訪れる場所を選べるように制作しました。
- 担当した範囲
- 企画・データ整備・地図や多言語画面の実装から、公開後の情報確認まで担当しました。
- 工夫した点
- 営業時間や料金と一緒に出典を管理し、現地確認と一次情報の確認を重ねて整備しました。
ABOUT
概要
倉敷美観地区を歩く人に向けて、行き先を地図と一覧から探せるWebアプリを制作しました。現在地を基準に近くの場所を探したり、空き時間に合うモデルコースを選んだりできます。
観光施設や飲食店に加え、トイレ・駐車場・ATMなどの実用情報も扱います。施設の営業時間や料金、情報の出典をデータとして管理し、現地確認と一次情報の確認を重ねて整備しています。
- 想定利用者
- 倉敷美観地区を訪れる旅行者。現地で行き先を探す人と、訪問前に計画を立てる人を想定。
- 制作目的
- 美観地区にいる人が、現在地・使える時間・目的から次の行動を選べるようにすること。
- 現在の状態
- 本番運用中です。日本語・英語・中国語（簡体字／繁体字）・韓国語の5言語に対応しています。2026年9月の全件監査では296スポットを確認しました。
主な機能
- 01
現在地または中橋を基準に、近い施設を探す
- 02
観光・食事・買い物・実用情報を地図と一覧で比較する
- 03
30分から2時間30分まで、空き時間に合うモデルコースを選ぶ
- 04
建物や町並みの背景を5言語のガイドで読む
- 05
24時間利用、車いす、ベビー設備などの条件から公衆トイレを絞り込む
- 06
気になる場所を端末内のお気に入りへ保存し、PWAとして利用する
制作範囲
- 倉敷美観地区を対象にした企画、要件・画面・情報設計
- 施設・営業時間・翻訳・出典のデータ整備と、更新用管理機能の実装
- 現在地検索、地図、モデルコース、PWA、多言語画面の実装
- Cloudflareへの公開と、施設情報・出典の公開後の確認
- 自動テスト、端末幅別の画面確認、リリース判定
TECHNOLOGY
技術情報
- 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、言語別メタデータ