鯖江ハウジング

https://github.com/takerucam/teamB

Next.js

Figma

TypeScript

鯖江のお家を周辺施設から探すアプリ

ふっけ / ハックツ

推しアイデア

「周辺施設からお家を探す」という新しいアプローチ。 友人の家からの近さで選んだり、オフィスからの近さ、スーパーの近くなどで任意の距離でお家を探すことができます。

作った背景

従来の賃貸アプリは間取りや駅から徒歩何分で賃貸の絞り込みができます。 しかし実際鯖江に住むことになり、駅からの近さよりもオフィスからの近さやスーパーが近くにあるかが気になりました。それを実現するプロダクトとなっています。

推し技術

フロントはNext.js、コンテンツ管理はmicroCMSを利用しています。 ヘッドレスCMSを用いることでコンテンツ管理と表示ロジックの責務分離ができています。

プロジェクト詳細

鯖江のお家を周辺施設から探すアプリ

お家を探しているとき「駅から徒歩5分」のような表示をよく目にします。 しかしもっと重要なのは「オフィスからの近さ」だったり「近くにスーパーがあるか」だと思います。

「鯖江ハウジング」では任意の施設からの距離でお家を探すことができます。

機能紹介

施設マップ

Desktop  6.png

施設一覧

Desktop  4.png

施設詳細

Desktop  5.png

チームメンバー

  • 三宅武将 (Webフロント)
  • 日笠歩輝 (コンテンツ管理)
  • 富家和樹 (デザイン、Webフロント)

デザイン

figmaを用いてUIデザインを行いました。デザインはこちら 最初にカラー構成を考え、その後各コンポーネントを作成しました。

Image from Gyazo

作成したコンポーネントを用いて各画面を設計しました。

Image from Gyazo

技術構成

Desktop  2.png

コンテンツ管理

コンテンツ管理にはヘッドレスCMSのmicroCMSを用いました。

賃貸データの管理 スクリーンショット 20211009 21.10.39.png

周辺施設データの管理

スクリーンショット 20211009 21.09.51.png

ふっけ / ハックツ

@fukke0906