店舗や施設の情報を掲載し、利用者が口コミを投稿・閲覧できるWebシステムを開発しました。
利用者向けの口コミ投稿画面だけでなく、店舗情報やアカウントを管理する一般ユーザー画面、システム全体を管理する管理者画面まで実装しています。
口コミサイトとして必要となる、店舗情報、利用者からの評価、投稿内容、ユーザー権限などを一元管理できる構成です。
個人開発として、画面設計、データベース設計、認証・権限管理、フロントエンド、バックエンド、クラウド環境への公開まで一通り対応しました。
システムのデモ
実際に操作できるデモ環境を公開しています。
デモサイト
https://spotory-web-psi.vercel.app
管理者アカウント
- メールアドレス：
admin@spotory.local - パスワード：
password123
一般ユーザーアカウント
- メールアドレス：
user1@spotory.local - パスワード：
password123
管理者と一般ユーザーでは、表示される画面や操作できる機能が異なります。
※デモ環境は一般公開されています。実在する個人情報、顧客情報、機密情報などは入力しないでください。
開発したシステムの概要
このシステムでは、店舗・施設の情報と、利用者から投稿された口コミをWeb上で管理できます。
主に、次の利用者を想定して設計しました。
口コミを投稿・閲覧する利用者
店舗や施設の情報を確認し、利用後の評価や感想を投稿します。
投稿された口コミを閲覧することで、店舗や施設を選ぶ際の参考情報として利用できます。
店舗・施設を管理する一般ユーザー
自身が管理する店舗・施設の情報、口コミ、アンケート設定などを管理します。
管理対象となる店舗の情報だけを確認・編集できるよう、ユーザーと店舗データを関連付けています。
システム全体を管理する管理者
登録ユーザー、店舗・施設、投稿内容など、システム全体を管理します。
一般ユーザーの管理画面も確認できる構成とし、問い合わせ対応や運用確認を行いやすくしています。
主な機能
店舗・施設情報の管理
店舗名、施設情報、案内文、画像、口コミ投稿先など、口コミサイトに掲載する情報を登録・編集できます。
登録された情報は、利用者向けの店舗・施設ページへ反映されます。
口コミの投稿
利用者が店舗や施設について、評価や感想を投稿できます。
投稿時の操作をできるだけ少なくし、スマートフォンからでも入力しやすい画面構成を意識しました。
口コミの閲覧
店舗・施設ごとに投稿された口コミを一覧で確認できます。
評価と投稿内容をまとめて表示することで、利用者が店舗を比較・検討しやすい構成にしています。
ユーザー認証
メールアドレスとパスワードを使用したログイン機能を実装しています。
ログインしているユーザーの種類に応じて、利用できる画面や機能を切り替えます。
ロール・権限管理
管理者と一般ユーザーのロールを分け、それぞれに必要な操作だけを許可しています。
画面を非表示にするだけでなく、サーバー側でも権限を確認し、許可されていないデータへアクセスできないように設計しました。
管理者画面
管理者は、登録ユーザーや店舗・施設の情報を横断的に確認できます。
システム全体の利用状況を把握し、アカウントや掲載情報を管理するための画面です。
一般ユーザー画面
一般ユーザーは、自身が管理する店舗や施設に関する情報を確認・編集できます。
他のユーザーが管理している店舗情報を操作できないよう、データの取得・更新範囲を制御しています。
開発でこだわったこと
1．利用者ごとに画面と権限を分離
口コミを投稿する利用者、店舗を管理する一般ユーザー、システムを管理する管理者では、必要な機能が異なります。
そのため、すべての利用者に同じ管理画面を提供するのではなく、ロールごとに画面、メニュー、操作権限を分けました。
管理者だけが利用できる機能については、URLを直接入力した場合でも一般ユーザーがアクセスできないようにしています。
2．店舗ごとのデータを分離
複数の店舗や事業者が同じシステムを利用することを想定し、それぞれのユーザーが自身の店舗データだけを操作できる構成にしました。
店舗情報、口コミ、設定情報などを店舗単位で関連付け、データ取得時と更新時の両方で対象範囲を確認しています。
将来的に複数店舗へ展開する場合にも、機能を拡張しやすいデータ構造を意識しています。
3．管理者が運用状況を確認しやすい構成
システムを継続して運用するためには、一般ユーザーからの問い合わせや設定状況を管理者が確認できる必要があります。
管理者がユーザーや店舗の登録状況を確認できるだけでなく、一般ユーザー側の情報も把握できる構成にしました。
問題が発生した際に、どのユーザー、店舗、データに関する問題なのかを追いやすくしています。
4．機能追加を想定した設計
口コミサイトは、運用開始後に必要な機能が増えることがあります。
そのため、次のような機能を後から追加しやすい構成を意識しました。
- 口コミの承認・非公開機能
- 口コミへの返信
- 評価項目の追加
- 口コミの検索・絞り込み
- 店舗カテゴリや地域による検索
- 通報・違反報告
- お気に入り登録
- メール通知
- 複数店舗管理
- 口コミデータの集計・分析
- CSV出力
- AIを利用した口コミ文章の作成支援
機能ごとの責務を分けることで、既存機能への影響を抑えながら拡張できるようにしています。
使用した技術
- TypeScript
- Next.js
- Neon
- PostgreSQL
- Vercel
Next.jsを使用して、利用者向け画面と管理画面を一つのWebアプリケーションとして構築しました。
NeonとPostgreSQLを使用し、ユーザー、店舗・施設、口コミ、設定情報などのデータを管理しています。
Vercelへ公開することで、パソコンやスマートフォンのブラウザから利用できるWebシステムとして提供しています。
担当した範囲
- 要件整理
- 画面構成の検討
- データベース設計
- 認証・権限設計
- フロントエンド開発
- バックエンド開発
- 管理画面開発
- 動作テスト
- クラウド環境への公開
画面を作るだけでなく、ユーザーの種類、データの管理単位、将来的な機能追加まで考慮してシステム全体を設計しました。
この開発経験を応用できるシステム
今回の開発で使用した仕組みは、店舗・施設向けの口コミサイト以外にも応用できます。
- 飲食店の口コミサイト
- 美容室・サロンの口コミサイト
- 整体院・クリニックの口コミサイト
- スクール・講座の評価サイト
- 宿泊施設のレビューサイト
- 商品・サービスのレビューサイト
- 会員制の評価・アンケートシステム
- 社内サービスのフィードバック管理
- 複数店舗を管理するWebシステム
掲載対象、評価項目、投稿フロー、管理者機能などを変更することで、用途に合わせた口コミ投稿・管理システムへカスタマイズできます。
店舗・施設向けWebシステムの開発について
この開発実績と同様に、利用者向け画面と管理者向け画面を備えたWebシステムの設計・開発に対応しています。
「口コミを投稿できるサイトを作りたい」「複数の店舗情報を管理したい」「既存サービスでは業務に合わない」といった段階から、必要な機能やデータ構造を整理します。