目次
- イベントサイトではなく、意思決定ツール
- UIとヒーロー画像にこだわった
- 「今知りたい！」をどう形にするか
- 常設スポットとイベントを分けて扱う
- 生活圏でエリアを切る
- 実装している機能
- 裏側の設計
- 管理画面も作っている
- まだ実装していないこと
- 一番大きいリスク
- ぞめきっとで作りたいもの
ぞめきっと は、徳島・香川・淡路島・高知東部のおでかけ情報をまとめて探すためのWebアプリです。
ただのイベント一覧ではなく、目指しているのは 「週末、どこ行く？」が3分で決まる意思決定ツール です。
子どもを連れて行けるか。駐車場はあるか。雨でも動けるか。犬連れでも大丈夫か。今日の混雑や駐車場の雰囲気はどうか。
そういう、出かける直前に本当に知りたいことを、できるだけ迷わず見られる形にしたい。そこがこのプロジェクトの出発点です。
イベントサイトではなく、意思決定ツール
ぞめきっとで一番大事にしているのは、情報量を増やすことではありません。
家族が「今日、どこなら行ける？」を判断できることです。
既存のおでかけ情報は、イベント名や開催日を知るには便利です。ただ、実際に子どもと出かけるときは、もう少し生活に近い条件が必要になります。
- 子連れで行きやすいか
- 犬連れでも行けるか
- 駐車場があるか
- 雨でも楽しめるか
- 無料で寄れるか
- 何歳くらいの子に向いているか
- 滞在時間はどれくらいか
- 常設スポットとして毎週の候補にできるか
ぞめきっとでは、このあたりを最初から検索条件として持たせています。
「映える場所を探す」よりも、「家族で無理なく行ける場所を決める」ことを優先しています。
UIとヒーロー画像にこだわった
今回かなり気合を入れているのが、UIとヒーロー画像です。
ぞめきっとは、技術的にはNext.jsとSupabaseで作っていますが、見た目は開発者向けのツールっぽくしたくありませんでした。
白背景、藍色、黄色のアクセント、手描き風の地域イラスト。徳島・香川・淡路島の風景が少し見えて、家族向けのやわらかさがある画面にしています。
ローカルで確認した現在のホーム画面では、最初のビューに検索フォーム、クイックフィルタ、そして大きなヒーローイラストを置いています。
「イベントを探す」「子連れOK」「雨でもOK」「犬連れOK」「駐車場あり」「無料」など、押した瞬間に探し始められる導線です。
「今知りたい！」をどう形にするか
ぞめきっとの核になるのは、検索条件だけではありません。
もう一つのこだわりが 現地メモ です。
現地メモでは、ユーザーがスポットやイベントに対して、駐車場、混雑、天気、短いメモを投稿できます。
ここで意識しているのは、投稿を重くしないことです。
写真をアップする。長いレビューを書く。星評価を付ける。 そういう機能は便利ですが、子ども連れで現地にいる人には負担が大きいです。
だから、最初は軽くしています。
- 駐車場: 空き / やや混雑 / 混雑 / 不明
- 混雑: 空き / 普通 / 混雑 / 不明
- 天気: 晴れ / 曇り / 雨 / 暑い / 寒い / 不明
- 100文字までのひとことメモ
「今、駐車場が混んでいる」 「雨だけど屋内は動きやすい」 「午前中なら空いていた」
こういう小さな情報が、次に出かける家族の判断材料になります。
常設スポットとイベントを分けて扱う
ぞめきっとでは、常設スポットとイベントを別のデータとして扱っています。
これはかなり重要です。
イベントは日付があります。週末に開催されて、終わったら過去になります。
一方で、公園、道の駅、屋内施設、遊び場、カフェのような常設スポットは、毎週の候補になります。
「今週末のイベントを見たい」と「雨の日に行ける定番スポットを探したい」は、似ているようで違う行動です。
そのため、データベース上も events と spots を分け、検索画面では両方をまとめて扱えるようにしています。
生活圏でエリアを切る
対応エリアも、県単位だけでは考えていません。
ぞめきっとでは、徳島市近郊、徳島県北、徳島県南、東香川、高松周辺、淡路島南部、高知東部のように、家族が実際に移動しそうな生活圏でエリアを分けています。
県境できれいに区切るよりも、週末のおでかけでは「徳島から東香川へ行く」「鳴門から淡路島南部へ行く」のような動きが自然にあります。
ここは、地域で使うアプリとしてかなり大事な設計だと思っています。
実装している機能
現時点で、ぞめきっとには次のような機能を入れています。
- ホーム画面
- URLパラメータベースの検索画面
- スポット詳細
- イベント詳細
- おでかけ記事一覧・記事詳細
- localStorageによるお気に入り
- localStorageによる検索履歴
- 現地メモ投稿、鮮度表示、通報
- LINE共有導線
- Google Maps外部リンク
- OGPとJSON-LD
- Supabase接続時のデータ取得
- Supabase未設定時のモックデータ表示
- 管理画面
- スポット、イベント、ソース、現地メモ、通報、購読者の管理
- メルマガ登録フォームと確認/解除トークンAPI
検索条件も、子連れ、犬連れ、駐車場、雨対応、無料、年齢、滞在時間、遊び要素などを扱えるようにしています。
ホームのピックアップイベントは、単純な登録順ではなく、今週末に近いか、開催中か、期間が短いか、子連れ向けか、駐車場があるか、といった条件でスコアリングして並べています。
裏側の設計
見た目はやさしくしていますが、裏側はかなり真面目に作っています。
技術スタックは次の構成です。
- Next.js App Router
- TypeScript
- Tailwind CSS
- Supabase PostgreSQL / Auth / Storage
- Vercel
Supabaseのマイグレーションでは、ENUM、CHECK制約、RLS、インデックス、updated_atトリガーを最初から入れています。
現地メモは、サーバーアクションからRPCを呼ぶ形です。 honeypot、短時間投稿ブロック、IPハッシュ、ユーザーエージェント保存、同一対象への1時間制限、全体の投稿数制限も入れています。
通報は、同じ投稿への重複通報を避けつつ、一定数で表示状態を変えられるようにしています。
さらに、Vercel Cronで古い現地メモの保持期限処理も呼べる構成にしています。 現地メモは便利ですが、IPハッシュやユーザーエージェントの保持は必要以上に長くしたくないので、運用面も最初から考えています。
管理画面も作っている
ぞめきっとは、公開画面だけでは運用できません。
地域情報を扱うなら、スポットやイベントを追加する管理画面、現地メモを確認する画面、通報に対応する画面が必要です。
管理画面はSupabase Authと admin_users で保護し、管理者だけが入れるようにしています。
スポット、イベント、情報ソース、現地メモ、通報、購読者を確認できる構成です。
「検索できる画面を作る」だけではなく、あとから地域情報を増やしていける運用の土台もセットで作っています。
まだ実装していないこと
一方で、まだ実装していないこともあります。
AIによる自動収集パイプラインは、構想としてはありますが、現時点では実装済みとは言いません。 まずは情報ソース管理と初期データ投入の土台を作っている段階です。
メルマガも、登録フォーム、確認/解除トークンAPI、購読者管理までは入れていますが、実メール配信は次のフェーズです。
一般ユーザーのログイン、お気に入りのDB同期、複数端末対応、メモ画像、星評価、プッシュ通知、レコメンド、多言語対応、埋め込み地図も、現時点ではMVP外にしています。
ここは盛りすぎず、まず「週末どこ行く？」が本当に短くなるところに集中します。
一番大きいリスク
このプロジェクトで一番大きいリスクは、技術ではありません。
初期データをやり切れるか です。
おでかけアプリは、UIが良くても情報が薄ければ使われません。 逆に、情報がある程度そろっていて、検索条件が生活に合っていれば、最初の価値は出せます。
だから、まずは徳島を中心に常設スポットとイベントを入れ、そこから東香川、淡路島南部、高知東部へ広げていく方針です。
ぞめきっとで作りたいもの
ぞめきっとで作りたいのは、地域の家族が毎週使える小さな道具です。
「今週末どこ行く？」
この問いは、毎週出てきます。
そのたびに検索して、公式サイトを見て、SNSを見て、駐車場を調べて、雨でも行けるか考える。 その時間を少し短くしたい。
そして、現地に行った人の小さなメモが、次の家族の判断材料になるようにしたい。
ぞめきっとは、そのためのプロジェクトです。
「今知りたい！」を、ちゃんと使える形にする。 そこに一番こだわって作っています。