JUST FIT OFFICE
シェアオフィス検索サイトの大規模リニューアルからデザイン・開発を担当。企業向け物件一覧のレイアウト刷新で反響数10〜20%増を達成。

担当
デザイナー・フロントエンド開発
期間
3 years
年度
2023
カテゴリ
デザイン / 開発
チーム
4名(デザイナー2名・バックエンド2名。フロントはデザイナーが兼務)
プラットフォーム
Web
Overview
JUST FIT OFFICEは、シェアオフィス・レンタルオフィス・コワーキングスペースを検索できる不動産検索サイトです。
既存サイトのデザインが古くなっていたことから、大規模リニューアルプロジェクトが立ち上がりました。デザインの刷新と同時に、Next.js + React + TypeScript + Storybookによるモダンな技術基盤への移行を行っています。
リニューアル後も継続的に各ページの改善施策を担当し、企業向け物件一覧のレイアウト刷新では反響数10〜20%増を達成しました。
Tech Stack
リニューアルでは、チームのスキルセットと将来的な拡張性を考慮し、Next.jsを中心とした技術スタックを採用しました。
Next.js + React
SSR(サーバーサイドレンダリング)による物件情報の高速表示と、SEOに有利なHTML出力を実現。Reactのコンポーネント設計により、ページ間で共通のUIを効率的に管理できる構成にしました。
TypeScript
型定義によるコードの安全性向上と、エディタ補完による開発効率の改善を実現。物件データやAPI連携の型を厳密に定義することで、デザインと実装の整合性を保ちやすくしました。
Storybook
UIコンポーネントをページから切り離して個別に開発・確認できる環境を構築。デザインレビューやコンポーネントの状態確認が容易になり、デザイナーとエンジニアの連携を効率化しました。
Vercel
Next.jsと親和性の高いVercelをホスティング環境として採用。プレビューデプロイによるレビューの効率化と、高速なCDN配信を実現しています。
My Role
Design
- 各ページおよびコンポーネントのUIデザイン
- リニューアル後の改善施策のデザイン
- 企業向け物件一覧ページのレイアウト刷新
Frontend Development
- Next.js + React + TypeScriptでの画面コーディング
- Storybookでのコンポーネント管理
- GraphQLによるデータ連携
Featured Case Study
企業向け物件一覧のレイアウト刷新により、反響数10〜20%増
Challenge
企業(顧客)向けの物件一覧ページでは、企業のリクエストに合わせた物件情報を、マーケターのコメントと共に一覧表示していました。
しかし、情報が散在して見にくく、物件が縦積みで並ぶレイアウトのため、複数の物件を比較しづらい状態でした。
Solution
一画面で複数の物件を比較・閲覧できるレイアウトに刷新しました。
物件情報とマーケターのコメントの配置を整理し、必要な情報が一目で把握できるデザインに変更。比較に必要な情報を統一した位置に配置することで、複数物件の比較が容易になりました。
Result
レイアウト刷新後、企業からの反響数が10〜20%増加しました。
情報の整理と比較のしやすさを両立したことで、企業がより多くの物件に興味を持ち、問い合わせにつながりやすくなったと考えています。
Results
- 老朽化した既存サイトをNext.jsベースのモダンな技術基盤に移行
- SSRによる物件情報の表示速度を高速化
- Storybookによるコンポーネント管理体制を構築
- 企業向け物件一覧のレイアウト刷新で反響数10〜20%増を達成
- リニューアル後も継続的な改善施策を推進