はじめに

私は2025年5月よりエンジニアへの転職を目指し学習をしています。そしてこの度、自身初となる個人開発でオリジナルプロダクツを開発したため、その内容をまとめようと思います。

↓こちらが今回作成したプロダクツです。(PWA実装したので、ホームに追加するとアプリのように使用できます。)

1.テーマ

ユーザーが自分の旅を記録し、他人の旅からインスピレーションを得られる旅行特化型SNSです。
ユーザーは旅の思い出や記録、旅行日程を　投稿・閲覧することができます。
また、旅のスタイルや目的、予算に合わせて、自分に合った旅を検索することができます。

2.課題定義

誰のどんな課題を解決するのか？

現在のSNSや旅行系アプリでは、旅行情報は動画・写真・レビュー・地図などが分散しており、YouTubeでは動画を見ながらでないと情報が得られず、Instagramでは写真は豊富でも場所やルート、詳細な情報が不足しており、旅行情報サイトでは一般的な情報ばかりで、自分の旅行スタイルに合った情報が見つかりにくいです。また、どこに何があるのか位置関係が分かりづらく、直感的に旅程を立てることが難しいのが現状です。
当サービスは、旅行好きな人々が、自分に合った旅行情報を効率的に探せず、計画に時間がかかる・迷ってしまうという課題を解決します。

なぜそれを解決したいのか？

旅行情報の主役はUGCへ――変化する消費者行動

近年SNSは情報収集の際、なくてはならない存在となりました。それは当然、旅行情報を調べる際も同様で、ユーザー行動からみる観光業界のSNS戦略調査レポートによると、「旅行先を選ぶときSNSの情報をどの程度重視するか」という質問に対して、「かなり重視する(17%)」、「重視する(43.8%)」という回答が集まりました。これまでは、旅行に関する情報を収集する際にはWeb検索が重宝されていましたが、昨今のSNSの発展に伴いユーザーはSNSを活用するようになり、「SNSで旅行情報をリサーチする」という新習慣が生まれたと考えられます。

また、Travel decision making through blogs and vlogs: An empirical investigation on how user-generated content influences destination image によると、
特に頻繁に旅行する人の間では、観光局公式情報や旅行会社の情報よりもblogやvlogなどのUGC（ユーザー生成コンテンツ）の方が信頼性が高いことが示されています。

私自身、旅行先の情報を調べる際、主にUGCを参考にすることが多いです。もちろん旅行会社の情報も参考にしますが、有名な観光地以外の情報はなかなか見つからなかったり自分の旅行スタイルとは合わなかったりと、最終的にはblogやvlogを観てユーザーの生の声を参考にしています。

UGCから旅行情報を取集する煩雑さ

SNSやブログ、動画などに散在するUGC（ユーザー生成コンテンツ）は、旅行者にとって魅力的な情報源である一方で、以下のような課題が存在します：

情報の断片化
旅行情報が複数のプラットフォーム（Instagram、YouTube、ブログなど）に分散しており、必要な情報を得るために複数の媒体を横断しなければならない。
位置情報の不足・曖昧さ
多くのUGCは、地図との連動がなく、写真やテキストだけでは場所の特定やルート設計が困難。直感的に旅行計画を立てるには不十分。
自分に合った情報へのアクセス性の低さ
UGCはパーソナライズされておらず、旅行者の目的やスタイル（例：女子旅、低予算、子連れ）に合った情報を見つけづらい。検索精度も低く、効率的な情報収集が難しい。

どうやって解決するのか?

すべての投稿は地図と連動しており、ユーザーは投稿を見ながら位置関係やルートを直感的に把握できるため、旅程計画の効率が大幅に向上します。
加えて、「ジャンル」「旅スタイル」「地域」「予算」などの詳細フィルターと検索機能を備えることで、ユーザーは自分に合った旅行情報に素早くアクセスでき、個々のニーズに合った旅のインスピレーションを得ることができます。

3.要件定義

優先度

P0：必須
P1：ここまで実装することを想定
P2：可能であれば実装したい

機能要件

ログイン機能

・会員登録ができる(P0)
・ユーザー名、メール、パスワードを登録する(P0)
・メール認証、パスワードリセット機能(P0)
・ユーザーアイコン（画像）が設定できる(P1)
///ログイン状態でのみ、以下の機能が利用できる
・好きなユーザーをフォローすることができる(P1)
・新規投稿・編集・削除(P0)
・投稿への「いいね」やコメント(P1)
・お気に入りの情報を保存(P1)

プロフィールページ

・ユーザー名、ユーザー画像を登録・編集(P0)
・投稿一覧(P1)
・訪れた国を設定できる(P2)
・フォロー/フォロワー数の表示(P1)
・総獲得いいね数(P2)
・SNS共有ボタン(P2)

検索機能

・国や地域名で投稿を検索できる(P0)
・「ジャンル」「旅スタイル」「予算」などの詳細フィルター(P1)
・並び替え機能(P2)

投稿機能

・国、地域、訪れた場所、日付、人数、予算、旅スタイルなどを登録できる(P0)
・各訪れた場所に対して、写真や詳細を加えることができる(P2)
・投稿に記載されている場所がマップ上で表示されている(P1)
・場所情報はgoogleマップと紐付いている(P1)
・投稿者が刊行したルートがマップ上に表示される(P2)
・下書きの作成(旅行後そのまま投稿できる)(P0)
・公開か非公開を選ぶことができる(P2)
・SNS共有ボタン(P2)

問い合わせ機能

・ユーザーが開発者に対し問い合わせを送信できる(P1)
・問い合わせ内容が記載された確認メールがユーザーに送信される(P2)

非機能要件

・スマホ対応(P0)
・PC対応(P1)
・タブレット対応(P2)
・エラーを監視し、早期に対応できるようにする(P2)

4.画面遷移図

5.画面設計図(デモ)

6.ユーザーフロー図

7.ER図

8.使用技術

フロントエンド

言語
JavaScript
実行環境: Node.js v22.16.0 / npm 11.4.1
フレームワーク・ライブラリ
React.js 18.3.1
Inertia.js（クライアント: @inertiajs/inertia 0.11.1、React アダプタ: @inertiajs/react 2.2.0、サーバ: inertiajs/inertia-laravel v2.0.5）
react-select 5.10.2
@react-google-maps/api 2.20.7
react-cropper 2.3.3 / cropperjs 1.6.2
dayjs 1.11.18
axios 1.12.2
ビルド/開発ツール
Vite 7.1.7
laravel-vite-plugin 2.0.1
UI
Tailwind CSS 3.4.17
開発支援
ESLint 9.36.0
Prettier 3.6.2

バックエンド

言語
PHP 8.3.22
フレームワーク・ライブラリ
Laravel Framework 12.23.1
inertiajs/inertia-laravel v2.0.5
laravel/breeze 2.3.8
laravel/sanctum 4.2.0
tightenco/ziggy 2.5.3
テスト / 開発ツール
phpunit 11.5.32, laravel/pint 1.24.0

外部API

Geocoding API
Maps JavaScript API
Places API
Directions API
REST Countries

開発環境

Docker / Docker Compose（Laravel Sail）
MySQL
Mailpit

本番環境

AWS (EC2、RDS for MySQL、Route 53、S3)
Nginx、Redis
Docker / Docker Compose(EC2上)
Mailgun

CI/CD

Github Actions

インフラ構成図

9.学んだこと

git flow, github flow

これまで、なんとなく git add や git push などのコマンドを使っていましたが、体系的なブランチ運用ルール（Git Flow や GitHub Flow）を理解していなかったため、開発環境から本番環境への反映時にコンフリクトが発生したり、どのブランチに何を反映すべきかが曖昧になることがありました。

今回の開発を通して、

開発ブランチでの実装
本番ブランチへのマージ手順
Pull Requestによるコードレビューや確認フロー
を明確にすることで、チーム開発だけでなく個人開発でも
「変更履歴の見える化」や「デプロイの安全性向上」を実感しました。

本番環境構築のタイミング

本番環境構築を開発後半に行った結果、
環境差異（例：Nginx設定、ファイル権限、.env構成など）によるエラーが多発しました。

この経験から、本番環境は開発初期に構築し、CI/CDを回しながら段階的に検証することの重要性を学びました。
次回以降は、早期にデプロイ基盤を整備し、小さく反復して検証を重ねていきます。

実装する機能の優先度

制作期間を3ヶ月と定めたため、要件定義段階で**優先度(P0〜P2)**を設定しました。
これにより、実装の順序が明確になり、スケジュールの遅延を防ぐことができました。

また、WBSを用いて進捗を可視化し、
「限られた時間内で価値の高い機能を完成させる」開発管理の重要性を学びました。

まとめ

今回初めての個人開発ということもあり、多くの新しい技術に触れることができました。特に開発環境から本番環境へ実際にデプロイしたことで、自分のエンジニアに対する解像度がとても高まったと感じています。
今後は、ユーザーのフィードバックをもとに機能を改善し、
将来的には React Native を用いたモバイルアプリ化も目指していきます。

実装で手こずった部分は別の記事で詳しくまとめています。
興味を持っていただけた方は、ぜひそちらもご覧ください。