某住宅・不動産関連企業 貸オフィス・賃貸事務所検索サイト 大規模リニューアル

先方にシステム開発担当者がいたため、当初は主にコーディング部分を担当する計画でした。

しかし、物件検索に必要な画面や条件、エリア・路線ごとの展開、選択状態の管理など、実装段階で検討が必要な仕様が多くありました。デザインを静的なページとして再現するだけでなく、先方のシステムへ組み込みやすく、数多くの画面へ展開できる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の両面で設計力が求められた案件です。