はじめに
札幌でエンジニアをしていると、「電源とWi-Fiがあって、コーヒーが美味しくて、しかも遅くまでやっているカフェ」を探すのに苦労することがありませんか？ Googleマップだと「Wi-Fiあり」で絞り込んでも、実際に行ってみると使えなかったり、雰囲気が作業向きじゃなかったり…。
そんな悩みを解決するために、札幌特化型の作業カフェ検索エンジン「Kazesift Search」 を作りました。 構想からリリースまで、AIペアプログラミングを活用して 実質1週間 で作り上げました。その開発の裏側と、技術スタックについてまとめます。
成果物: 🔍 Kazesift Search https://kazesift-search.vercel.app
💻 GitHub (期間限定公開中) https://github.com/kazesift/kazesift-search
🚀 技術スタック
爆速開発を実現するために、以下のモダンな構成を採用しました。
Framework: Next.js 16 (App Router)
Language: TypeScript
Styling: Tailwind CSS
Deployment: Vercel
Icons: Lucide React
Map: Leaflet / Mapbox (検討中)
Analytics: Google Analytics 4
なぜこの構成か？
Next.js 16: 最新の機能を試したかったのと、SEO（OGP画像自動生成など）を強化したかったため。
Vercel: デプロイの手間をゼロにするため。GitHubにPushするだけで本番反映される体験は最強です。
Tailwind CSS: デザインに悩む時間を減らし、統一感のあるUIを素早く構築するため。
💡 こだわりの機能
-
「信頼できる」カフェだけのフィルタリング
Googleマップの評価が 4.0以上 かつ、レビュー数が 500件以上 のカフェを「High Trust」として抽出する機能を実装しました。 「行ってみたら期待はずれだった」を極限まで減らすための工夫です。 -
インフルエンサー推奨スポット
札幌のカフェ事情に詳しいインフルエンサー（@sp.cafe.pu さんなど）が実際に訪れて推奨しているお店をデータベース化。 機械的なデータだけでなく、「人の温かみ」があるレコメンドを取り入れました。 -
実地検証バッジ (Verified by Kazesift)
開発者自身が実際に足を運び、作業環境として優れているかを確認した店舗には「青いチェックマーク」を付与。 第一弾として、大通エリアの『FAbULOUS』を認証しました。 -
日英バイリンガル対応
札幌には海外からのノマドワーカーも多いため、ボタン一つで英語/日本語が切り替わるように設計しました。
🛠️ 開発の裏側 (AIとの共創)
このプロジェクトは、AIアシスタントとペアプログラミング形式で進めました。
データ構造の定義:
json
ファイルでカフェデータを一元管理。
座標の自動推定: Google Maps APIのコストを抑えるため、住所からおおよその座標を計算するロジックを実装。
自動化: ゆくゆくは n8n や Python スクリプトを使って、新しいカフェの情報を自動収集・PR作成するフローも構築中です。
苦労した点
デプロイエラー: TypeScriptの型定義が厳密すぎて、ローカルでは動くのにVercelでビルド落ちすることが何度かありました。（Cafe 型に新しいフィールドを追加した際の連携ミスなど）
情報の鮮度: 閉店した店や営業時間の変更をどう追うか。ここはコミュニティの力を借りるべく、Googleフォームでの情報提供窓口を設置しました。
🌏 今後の展望と募集
現在はまだベータ版ですが、今後は以下の機能を実装予定です。
ユーザーによる写真投稿・レビュー機能
現在地からの距離検索
エンジニア仲間募集！
「ここ直したほうがいいよ！」「この機能ほしい！」などあれば、ぜひ GitHub に Pull Request を投げてください！ Issue も大歓迎です。札幌のエンジニアコミュニティで、このプロジェクトを一緒に育てていけたら嬉しいです。
Tags: #Nextjs #TypeScript #個人開発 #札幌 #初心者エンジニア #OpenSource