はじめに - 開発のきっかけ-

　
引っ越しは人生における大きなイベントの一つです。特に、住む場所を選ぶ際には、様々な情報を集めて比較検討する必要があります。私も引越しをする際に、どの地域に住むのが自分にとって最適なのかを判断するために、様々な情報源を頼りました。

はじめは気になっている地域の交通の便や家賃の相場、治安などの気になることを友人に聞いたり、ネットで検索したりしていましたが、せっかくの引っ越しなのでより多くの情報が知りたいと思い、地域ごとに引越しに役立つ情報がまとめてあるアプリやサイトがないかを探しましが、私が探していたようなものは見つかりませんでした。
そこで、「ないなら自分で作ってしまおう！」 と思い立ち、開発を始めたのが、「LiveSpot」です。

URL ➡　https://www.live-spot.com/

アプリの概要と主な機能

　このアプリは、引っ越しを検討している方が後悔しない住まい選びをするための地域情報検索アプリです。インターネット上の情報だけでなく、実際にその地域に住んでいる人の声や、客観的なデータ（統計情報、ハザードマップなど）をまとめて確認できるのが特徴です。引っ越し前にその地域の特徴を理解し、自分に合った場所かどうかを判断する手助けをします。

地域名から簡単検索

トップ画面中央にある検索窓に興味がある地域名を入力し、「検索」ボタンをクリックします

検索結果の一覧を表示

するとこのように入力した文字を住所に含む地域の一覧が表示されます。

この一覧画面で表示されるのは以下の3点です

• 住所
• 家賃の相場
• 約1km以内にある近くの駅

また、画面左にある絞り込み条件を操作することで、表示されている地域からさらに絞り込むこともできます。
このページで地域ごとの概要を知ることができますが、より詳細な情報を知るためには「詳細を見る」ボタンをクリックしてください

地域詳細画面

地域詳細画面で知ることができる情報は以下のとおりです。

• 概要
  検索結果一覧画面で表示した内容に加え、その地域の地図、約5km以内の駅の一覧とAIによる地域レビューが確認できます。

• 統計情報
  ここでは人口、世帯数、部屋の広さごとの家賃の相場をグラフで確認できます。

• 災害情報
  ここでは土砂崩れ、洪水、高潮などの災害リスクが確認できます。LiveSpot上ではこれらの情報のみに対応していますが、より詳細な情報が気になる方は 「ハザードマップを確認する」 ボタンをクリックすると対象地域のハザードマップを表示する外部のサイトに遷移することができます。

• レビュー
  最後がレビュー画面です。ここでは、ユーザーからの意見を見ることができます。

地域名から検索

少し戻りますが、トップ画面の「地域名から検索」ボタンをクリックすると以下の画像のような画面に遷移するので、気になる都道府県を選択します(現在は東京にのみ対応しています)

さらに気になる市区町村を選択し、「検索」ボタンをクリックします

すると、その市区町村内の地域の一覧を表示できます。

駅名から検索

再びトップ画面に戻り「駅名から検索」をクリックすると、画像のような画面に遷移します

気になる駅のチェックボックスにチェックを入れ、「地域を検索」ボタンをクリックすると、先ほどの地域の一覧画面に遷移することができます(UIが見づらくすみません。Command (Control) + Fでも気になる駅のチェックボックスに移動できます)

アカウント登録・ログイン機能

LiveSpotは基本的にログインせずにご利用いただけますが、お気に入り地域登録とレビュー投稿はアカウント登録とログインが必須となります。

• アカウント登録・ログイン

ヘッダーの「新規登録」ボタンからアカウントの登録を行なってください

アカウント登録とログインが完了すると「マイページ」という表記に変更されます

• お気に入り地域登録

この状態で先ほどと同じように地域の検索をし、右下のハートボタンをクリックすると画像のように赤い表記に変わります。

この状態でヘッダーの「マイページ」をクリックします。

お気に入りタブを選択するとお気に入りに登録した地域の一覧が表示されます。また、この中で詳細を確認したい場合は地域名をクリックするとその地域の詳細画面に遷移します。

• レビュー投稿

ログインした状態で地域の詳細画面に遷移します

「レビューを書く」ボタンをクリックするとモーダルが表示されるので、評価とコメントを記入し、「送信する」ボタンをクリックします

すると、地域詳細画面でコメントが反映されていることが確認できます。(現在画面をリロードしないと反映されないので修正します)

「⚪︎件のレビューを見る」ボタンをクリックするとレビューの一覧確認用のモーダルが表示されます

技術的に工夫したポイント

せっかくなので技術的に工夫したポイントもいくつか紹介します

• レスポンシブデザイン
  全体的なUIもまだまだみにくい箇所が多いですが、ある程度レスポンシブ対応もしています。具体例を紹介すると、まずはヘッダーです

このように画面幅が小さい端末ではハンバーガーメニューで表示するようにしています

次は絞り込み条件です

画面幅が小さい場合はサイドバーによる表示ではなく画面右下のボタンをクリックすると画像のようなモーダルが開くようにしました

• ページネーション
  検索結果の一覧表示画面ですが、最初に作成していたときは一度にすべての地域を表示していたので、該当地域が多い場合はデータの取得にかなり時間を要してしまいました。そこで、ページネーションを導入して1ページあたりのデータ量を制限しました

使用技術

• Django
• React
• PostgreSQL
• Docker
• Render
• Vercel

ER図

ちなみにこの図はdbdiagram.ioと言うサービスを使って作成しました。このサービスを使うと画像のようなテーブルをコードから生成し、様々な形式で出力できるので個人的には使いやすいと思っています。

改善したいポイント

• レビュー投稿
  レビューの投稿はログインユーザーに限定はしていますが、ログイン後は同じ地域に何度も投稿できる状態となってしまっているので、同一地域へのレビューは1つに制限したいと思います

• 駅名から検索画面のUI
  トップ画面から遷移した後のUIが非常に駅を探しにくいので改善したいと思います

• 賃貸情報の追加
  本来であればアプリを作り始めたときに最初に思いついていたのですが、地域詳細画面において、その地域にある賃貸などの物件情報を載せることができればユーザーは地域の検索から物件の選択までをLiveSpot内で行うことができると思いますが、物件データがないので断念しました。

おわりに

今回の開発は私にとっての初めての個人開発であり、企画から最低限の機能を備えたアプリのリリースまで行えたことは非常に良い経験になりました。これからも引き続き改善は続けていくので、このアプリが少しでも引越しを検討している方のお役に立てば嬉しいです!
また、他にも作ってみたいアプリの案はあるので、新しいアプリを作る時には今回の経験を活かしたいと思います!