デザイン開発

JUST FIT OFFICE

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

JUST FIT OFFICE - 1

担当

デザイナー・フロントエンド開発

期間

3 years

年度

2023

カテゴリ

デザイン / 開発

チーム

4名(デザイナー2名・バックエンド2名。フロントはデザイナーが兼務)

プラットフォーム

Web

URL

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%増を達成
  • リニューアル後も継続的な改善施策を推進

Tech Stack

Next.jsReactTypeScriptStorybookGraphQLFigmaVercel