Products
Apalog
全国のアパレルショップを、訪れた人が登録・編集し、口コミを投稿できるレビューサイトです。企画から設計・開発・公開まで一人で担当しました。
Overview
どんなサービスか
お店の情報をサイト運営者だけが書くのではなく、訪れた人が登録・編集し、口コミを投稿していくwiki型のレビューサイトです。「行きたいお店を、条件で絞って探せる」ことを軸に、検索・詳細・投稿・画像アップロード・管理者による確認までを実装しています。
Scope
担当した範囲
- 企画・要件
- 何を作るか、どこまで作らないかの線引きから
- UI設計・デザイン
- 画面構成・遷移・見た目まで
- データベース設計
- 投稿・口コミ・画像の持ち方と権限の設計
- 実装
- 画面側・サーバー側の両方
- SEO・公開
- 検索エンジン向けの設定と、公開後の運用まで
Stack
使用技術
Next.js 16（App Router）React 19TypeScriptSupabaseTailwind v4 + shadcn/uiVercel
開発手法は Claude Code を使ったAI駆動開発。 設計判断とコードレビューは自分で行い、生成されたものをそのまま採用することはしていません。
Highlights
技術的なこだわり
表示速度と検索対策の両立
ログイン機能を持つサイトは、ページを作り置きできず表示が遅くなりがちです。ログインの仕組みと公開ページの読み込みを分ける構成にして、公開ページだけを作り置き（ISR）できるようにしました。
大事なデータを3層で守る
誰でも編集できる仕組みでは、住所などの重要項目が荒れます。画面・サーバー・データベースの3か所で同じ制限をかけ、どこかをすり抜けても最後のデータベース側で止まるようにしています。
失敗したときの後始末まで
画像の保存が途中で失敗したときに不要なファイルが残らないよう、取り消し処理を入れています。件数の上限などの制限も、アプリ側だけでなくデータベース側でも成立させています。