- TOP
- Web制作実績
- 住宅・不動産のWeb制作実績
- 某住宅・不動産関連企業 貸オフィス・賃貸事務所検索サイト 大規模リニューアル
某住宅・不動産関連企業 貸オフィス・賃貸事務所検索サイト 大規模リニューアル
貸オフィス・賃貸事務所検索サイト 大規模リニューアル
貸オフィス・賃貸事務所を探すための大規模な物件検索サイトを構築しました。エリア、路線・駅、地図、設備などの複数の検索方法に加え、物件詳細、賃料相場、会員向け画面など、多数のページと表示パターンを実装しています。 先方が開発する物件検索システムへ組み込むことを前提に、HTMLだけではなく、スクラッチPHPによるテンプレート化やデータ展開、JavaScriptによる画面制御まで担当しました。
| クライアント名 | 某住宅・不動産関連企業 |
|---|---|
| 業種 | |
| サイトのカテゴリ | |
| サイトの特徴 | |
| 制作範囲 |
先方にシステム開発担当者がいたため、当初は主にコーディング部分を担当する計画でした。
しかし、物件検索に必要な画面や条件、エリア・路線ごとの展開、選択状態の管理など、実装段階で検討が必要な仕様が多くありました。デザインを静的なページとして再現するだけでなく、先方のシステムへ組み込みやすく、数多くの画面へ展開できるPHPテンプレートとして構築することが求められました。
共通するヘッダー、フッター、検索条件、物件カードなどをPHPの共通パーツとして整理し、多数のページで再利用できる構成にしました。
エリア、路線、駅などの情報はPHP配列やJSONデータとして分離し、画面内へ直接情報を書き重ねるのではなく、データをもとに展開できるよう設計しています。
また、PCとスマートフォンで操作方法や表示範囲が変わる地図検索について、階層の切り替え、選択状態、選択解除、検索条件への反映までを一連の操作として実装しました。
エリア検索、路線・駅検索、地図検索など、異なる検索方法を一つのサイト内で利用できるよう実装しました。
SVG地図では、都道府県、市区、詳細エリアという複数階層を切り替えながら、地域のホバー表示、選択、選択解除、検索条件への反映をJavaScriptで連動させています。
また、エリアや路線などの情報をPHP配列やJSONへ分離し、同じ検索データを複数の画面やパーツで利用できる構成にしました。
オフィス物件検索 / エリア・住所検索 / 路線・駅検索 / SVG地図検索 / こだわり条件検索 / 物件一覧・物件詳細 / お気に入り・閲覧履歴画面 / 賃料相場情報 / 会員登録・ログイン関連画面 / 問い合わせフォーム
先方物件検索システムへの組み込みを想定したPHPテンプレート・フォーム連携
JSONデータによるエリア・相場情報の連携
PHP配列による都道府県・市区・路線・駅データの展開
共通パーツをPHPのincludeファイルへ分割し、多数の画面で同じ構造を再利用できるようにしました。
エリア、路線、駅、相場情報などを表示コードから分離し、PHP配列やJSONを更新することで画面へ反映しやすい構成にしています。
地図にはSVGを採用し、画像を切り替えるだけでは難しい地域単位のホバー、選択、階層移動を実現しました。PCとスマートフォンで異なる表示範囲や操作方法にも対応しています。
長期プロジェクトの中で仕様や画面展開が段階的に増え、単純なコーディングでは対応できない場面が多い案件でした。
特にエリアマップは、Illustratorで作成された地図のレイヤー名を、SVG内のIDやclassとして利用できるよう整理しています。各地域の図形とPHP側のエリアデータ、JavaScript側のクリック・ホバー・選択状態を対応させることで、地図を直接操作して検索条件を指定できるようにしました。
フレームワークに依存しないスクラッチPHPで、多数の画面やデータを破綻なく展開する必要があり、フロントエンドとPHPの両面で設計力が求められた案件です。
（株）中央ビル管理 様
分譲マンション管理会社をお探しのオーナー様・管理組合様向けサービスサイト「ポラスの分譲マンション管理」リニューアル
https://www.chuobuilding-mgt.com/mansion_kanri/
（株）中央ビル管理 様
アパート・マンション管理のオーナー様向けサービスサイト「ポラスの賃貸経営パートナーズ」リニューアル
https://www.chuobuilding-mgt.com/owner/
