Case Study — Real Estate

SUMIKA

賃貸物件ポータル「SUMIKA」。数多くの物件の中から「自分の住まい」を迷わず見つけられること——お部屋探しの入口から問い合わせまでが、ひとつの流れでつながる体験を目指しました。

  • Real Estate
  • Design
  • Front-end
デモサイトを見る
SUMIKA トップページのファーストビュー

概要

想定クライアント賃貸物件を扱う不動産仲介サービス「SUMIKA」
種別賃貸物件ポータルサイト(自主制作デモ)
担当範囲情報設計 / デザイン / フロントエンド実装
ページトップ / 物件検索 / 物件詳細 / エリア / こだわり条件 / はじめての方へ / よくある質問 / お問い合わせ
使用技術HTML / CSS(SCSS) / JavaScript

ターゲット

想定したのは、引っ越しを考えはじめたばかりの方。「どんな部屋に住みたいか」はぼんやりあっても、エリアや家賃の条件はまだ固まっていない——そんな段階の人が大半です。

その多くが、通勤の合間や寝る前に、スマートフォンで気軽に物件を眺めます。気に入った部屋に出会った瞬間に、迷わず問い合わせまで進めることを大切にしました。

課題と目標

物件数が多いサイトほど、情報量に押されて「何から見ればいいか分からない」状態に陥りがちです。条件入力が複雑だと、探す前に疲れて離れてしまいます。

そこで目標を二つに絞りました。「探しはじめのハードルを下げること」、そして「気になる物件から問い合わせまで、迷わず進めること」。

解決アプローチ

トップでは、エリア・家賃・間取りといった主要な条件を最初の画面でまとめて選べるようにし、「とりあえず探してみる」が一歩で始められる入口を用意しました。検索結果は写真を大きく、家賃と最寄り駅をひと目で比べられるカードで一覧化しています。

エリアやこだわり条件、はじめての方向けのガイドなど、入口を複数用意することで、条件が固まっていない人も自分のペースで探しはじめられる構成にしました。

物件検索ページ。条件を上部にまとめ、写真主体のカードで結果を一覧化

デザインの工夫

住まい探しに寄り添う落ち着いた印象になるよう、彩度を抑えたアースカラーを基調にしました。物件写真がいちばん美しく見えることを基準に、余白を広く取り、装飾は最小限に。

読みやすさを優先し、家賃や間取りなど比較したい数字は視線が止まる位置へ。スマートフォンでも片手で操作しきれる導線を意識しました。

成果

目指したのは、条件がまだ曖昧な人でも「まず触ってみたくなる」お部屋探しサイト。探しはじめの軽さと、気になった物件への最短の導線——その両立を意図して設計しました。

本案件はポートフォリオ用の自主制作デモです。掲載している物件・会社・情報はすべて架空のものです。

この内容で相談する