不動産住宅情報サイトのUI比較分析

不動産住宅情報サイトのランキング記事で上位のSUUMO・at HOME・LIFULL HOME’SからUIについて勉強させていただきました。

チェック条件

  • SPとPC それぞれTOPページのFVを比較する
    (近年は年代問わずSPで不動産情報を調べる方が多いようだが、PCは情報量の多さが勉強になるので両方比較する)
  • 装飾美<機能美に視点を向ける
  • GoodポイントだけでなくBadポイント(改善点)だと感じた点に対して自分なりに改善案を絞り出す

SP比較

1.SUUMO

Good
  • 画面右下の「エリアから探す」ボタンがとても便利。スペースが有効活用されているのと、デザインも地図にピンがささっていて直感的に「エリアで探せるボタン」とわかりやすい
  • ヘッダーが季節に合わせたバナーに更新されていて、「お月見だ」と気づくだけで、心理的にサイトと距離感が縮まり、好感度が湧く。かつ「丁寧に更新されているサイトだな」と信頼度が高まる
  • 「借りる」「買う」など大項目はブラウンで境界線がはっきりとわかりやすく、「新築マンション」「中古マンション」などの小項目はアイコンわけされているのと、右矢印「>」がタップを促す親切な役割だと感じた

Bad
  • 「新築」「中古」の三角帯の色が青の同系色なので、スマホの小さい画面で見た時に個人的に少し識別しづらく感じた。どんな色なら見やすいのか自分なりに考えてみた

 「新築」でクリーンなイメージの青に対して
 「中古」(だけど「古い」などの悪いイメージを抱かない)色で黄色系を選択
 かつトンマナを考えて#CBB33Dを選択

 <反省点>
 季節限定のお月見バナーにイメージを寄せてしまいました。。
 色の引き出し不足を感じ、今後もっと配色について学んでいこうと思います

2.at Home

Good
  • ヘッダーに「検索履歴」があり、改めて見たときに操作がスムーズ
  • 情報量がすっきりしていて、文字が大きめで見やすい
  • ウォーリーとワンちゃんが差し込まれていてユニークさを感じる

Bad
  • 「借りる」「買う」が大きくてとても見やすいが、個人的には「マンション」「一軒家」などの選択肢が表示されている方が親切に感じた。
    「借りる」をタップすると、下のキャプチャのように画面遷移せず同ページでウィンドウが展開される仕様なので、
  • 「借りる」「買う」ボタンにタップを促す矢印などの記号を配置すると親切だと感じた

3.LIFULL HOME’S

Good
  • 情報が絞られていて、余白があってとても見やすい
  • イメージカラーのオレンジ色の文字が視認性が高く読みやすい
  • 写真があることによって、よりはっきりとイメージが湧く

Bad
  • 検索履歴やお気に入り機能が表示されていない(ハンバーガーメニューもない)のが個人的に不便に感じた

PC比較

1.SUUMO

Good
  • TOPページから太枠で囲んでいる「エリアから探す」が目に飛び込んできて、「家を探すモード」に入りやすい
  • ヘッダー上部の背景イラストが明るい住宅のイメージ感を出していて、家探しのワクワク感が増す
  • 「関東」などエリアの文字を大きなブロックにして、都道府県名は小さくなっているのでゴチャゴチャせず見やすい
  • 中央縦列の「借りる」「買う」「建てる」「リフォームする」の大項目と小項目がタブでレイアウトされていて、識別しやすい
  • ヘッダー背景によって奥行き感がでるのと、各項目の下部に影があるので立体的に感じる(心理的にクリックしたくなる)
Bad
  • 「閲覧履歴」はあるが、「お気に入り」情報はページを進まないと表示されないので、改めて見た時に一手間かかる

at Home

Good
  • ヘッダーに「お気に入り」「保存した検索条件」があり、改めて見たときに操作がスムーズ
  • ブランドイメージの赤背景に白のブロックでくっきりと見やすい
  • 右側のバナーが「アプリで探す」の1つのみなので、視点が検索条件に集中する
  • 「売る」「不動産会社を探す」「引っ越す」「調べる」がアイコン別になっていて見やすい

Bad
  • 「借りる」「買う」の小項目が全て文字でアイコンが無いため、ややゴチャゴチャしているように見える
  • リンクの文字は個人的には青より黒の方が見やすいと感じ、試しに検証ツールで#2A2A2Aをあててみました

LIFULL HOME’S

Good
  • 文字よりアイコンが大きく、直感的に選択しやすい
  • TOPページの情報が絞られている、項目がグリッドに沿っている、余白が多いといった点がとても見やすい
  • カラーもまとまっていて「シンプル・ミニマム」なおしゃれ感が出ている

Bad
  • 画面下にスクロールすると詳細な選択肢が見やすく並んでいるが、個人的にはFVからもう少し情報があった方が探しやすいと感じた
  • ヘッダーのSNSアイコンをクリックすると投稿のポップアップウィンドウが表示されるが、SNS投稿者へのプレゼントキャンペーンなど無い限り投稿をされる方は多くないと思うので、情報量が絞られているシンプルなTOPページには不要な情報に感じた(SNSの位置に「閲覧履歴」機能を配置する方が便利に感じた)

とても素敵なWebサイトで勉強させていただきました。ありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA