Phase 04 / 12 ── UI/UX Analysis Report
🎨 ビジュアルデザイン診断
カラー・タイポグラフィ・余白・グリッド・インタラクションフィードバック
なんでも不動産買取
2026年5月11日
株式会社東京住建
9
現状課題
9
改善提案数
4
優先度:高
3
優先度:中
2
優先度:低

現状の課題 — 5観点から抽出した重要課題

🎨 カラー
CTAボタンの色が統一されておらず訴求力が分散
電話CTAとメールCTAが並列表示されているが、視覚的な優先順位付けがなく、ユーザーがどちらを選ぶべきか判断しにくい。同一CTAブロックが3箇所に繰り返されており、ボタンの「希少性」が失われている。
🎨 カラー
ブランドカラーの階層設計が不明確
ヘッダー・フッター・セクション区切りなど、主要UIパーツに統一されたプライマリカラーが見受けられない。アクセントカラーが装飾的に分散使用されており、視線誘導の設計が弱い。
📝 タイポグラフィ
見出し階層(H2/H3)の視覚的ジャンプ率が低い
H2「豊富な買取相談事例があります!」の直下にH3「こんなお悩みを〜」が連続配置され、情報の重みが不明確。ユーザーはページをスキャンしても情報の優先度を読み取りにくい状態になっている。
📝 タイポグラフィ
日本語本文の行間・字間設定が最適化されていない可能性
不動産相談という「読み込む必要があるコンテンツ」にもかかわらず、本文テキストの行間(line-height)が1.6未満と推定される。日本語ウェブ本文の推奨値は1.7〜1.9であり、長文読解時の疲労感につながる。
📐 余白
繰り返しCTAセクションによる余白の過剰消費
「秘密厳守・相談無料です。まずはご相談ください!」というCTAブロックがページ内に3回同一内容で配置されており、本来コンテンツに割くべき余白・スペースが占有され、ページが間延びした印象を与えている。
📐 余白
サービスカード内部のパディングが不均等
「不動産買取を行っている物件の種類」セクションに7種類のカードが並ぶが、各カード内のテキスト量が大きく異なる。余白設計が均等でないと、視覚的なバランスが崩れカード間の比較がしにくくなる。
🔲 グリッド
7アイテムグリッドの整列崩れリスク
サービス物件種類7件は2・3・4列グリッドのいずれにも均等分割できない(7 = 素数)。最終行に端数が生じ、視覚的な非対称が発生する。モバイル表示では特にカラム崩れが目立つ。
🔲 グリッド
「選ばれる理由」セクションの画像・テキスト配置の非一貫性
case1・case2の画像と本文テキストの縦位置が揃っていない可能性があり、左右交互(ジグザグ)レイアウトが採用されていないため、視線の流れが単調で各項目の独立性が弱く見える。
👆 インタラクション
FAQがアコーディオン非対応で情報が一覧展開
よくあるご質問(4問)が全て常時展開されており、ページの縦スクロール量を増大させている。アコーディオンUIを採用することでFAQ全体を俯瞰でき、ユーザーは自分に関係する質問をすぐに選択できる。

改善提案 — 優先度付きアクション一覧

優先度:高 CTAボタンの優先順位を視覚的に明確化する カラー

現状の問題

電話・メールCTAが同等の視覚ウェイトで並列配置されており、ユーザーの行動を一つに絞れていない。同じブロックが3回繰り返されることで「いつでも押せる」という心理的緩みが生じ、コンバージョン機会を逃している。

改善アクション

  • Primary CTA(電話)を高彩度の主カラー(例:#E84040)で塗り、大きなボタンに
  • Secondary CTA(メール)をアウトライン(枠線)スタイルに変更
  • CTAブロックの繰り返しを最小限(1〜2回)に削減し、希少性を演出
CVR向上視線誘導強化
優先度:高 見出し階層のタイプスケールを再設計する タイポグラフィ

現状の問題

H2・H3のフォントサイズ差が小さく、ページをスキャンしても情報の優先度が伝わらない。不動産買取という複雑な意思決定を支援するページでは、情報の「重み付け」を視覚的に明示することが必須。

改善アクション

  • H1: 32px / H2: 24px / H3: 18px / 本文: 15px のスケール比(1.33)を徹底
  • H2には左ボーダーアクセントまたはアンダーライン装飾を追加し視覚的ランドマークに
  • 本文 line-height を1.8以上に設定(日本語Web標準)
可読性向上離脱率低下
優先度:高 FAQにアコーディオンUIを導入する インタラクション

現状の問題

FAQ4問が全て常時展開されており、ページの縦スクロール量を増加させている。ユーザーは自分に関係しない回答文を読み飛ばすコストが発生し、ページ全体の閲覧効率が低下している。

改善アクション

  • 質問行クリックで回答をスライドイン表示するアコーディオンを実装
  • 開閉状態を「+ / ー」または矢印アイコンで明示
  • ホバー時に質問行の背景色を変化させ、クリック可能であることをフィードバック
UX向上ページ体感短縮
優先度:高 ブランドカラーシステムを3色に整理する カラー

現状の問題

ヘッダー・バナー・カード・CTAの各パーツで使用色が統一されておらず、「信頼・安心感」を訴求する不動産サービスとして、視覚的なブランド一貫性が弱い印象を与えている。

改善アクション

  • Primary(信頼・誠実): 紺系 #1A3A5C
  • Accent(行動喚起): オレンジ〜赤系 #E84040
  • Neutral: グレー系 #F4F6F9 〜 #2C2C2C
  • 上記3色のみでUI全体を統一し、デザインガイドラインを策定
ブランド信頼性向上認知一貫性
優先度:中 繰り返しCTAブロックを廃止し文脈CTAに置換する 余白・インタラクション

現状の問題

全セクション後に同一文言の「秘密厳守・相談無料」CTAが3回挿入されており、ユーザーが「また同じ広告か」と感じてスキップする習慣が生まれる(バナーブラインドネス現象)。

改善アクション

  • ページ末尾の1箇所のみにメインCTAを集約
  • 各セクション末尾には文脈に沿ったミニCTA(例:「この物件種別を査定する→」)を設置
  • 余白を有効活用し、コンテンツの視認性向上に充てる
ページ軽量化コンテンツ訴求力向上
優先度:中 サービスカード(7種)を偶数化しグリッドを均等化する グリッド

現状の問題

買取物件7種が素数のため、2列・3列・4列どのグリッドでも最終行に端数が生じる。端数カードが左寄せで孤立するとプロフェッショナルな印象が損なわれる。

改善アクション

  • 物件種類を8件(または6件)に調整、あるいは「その他・なんでも相談」カードを追加して8件に
  • PCは4列×2行、モバイルは2列×4行のレスポンシブグリッドを設計
  • 各カード高さを統一するため、テキスト量に応じた最小高さを設定
視覚的整合性モバイル体験向上
優先度:中 「選ばれる理由」セクションに交互レイアウト(ジグザグ)を導入 グリッド・余白

現状の問題

case1・case2が同方向(画像左・テキスト右)に並列配置されており、視線の流れが単調。「秘密厳守」「責任なし」という2つの強みが独立したメッセージとして目に留まりにくい。

改善アクション

  • 奇数番目: 画像左・テキスト右 / 偶数番目: テキスト左・画像右 のジグザグ配置に変更
  • 各ブロックに十分なpadding(上下56px以上)を設け読み応えのある印象に
  • 強みを表すアイコン(盾・星など)をテキスト上部に追加しスキャナビリティを向上
訴求力向上リズム感の改善
優先度:低 買取フロー(01〜05)をビジュアルタイムラインに強化 グリッド・インタラクション

現状の問題

「不動産買取の流れ」はステップ番号と文字のみで構成されており、プロセスの進行感・完結性が視覚的に伝わりにくい。初めて不動産売却を検討するユーザーには不安感が残る。

改善アクション

  • 各ステップをカード化し、ステップ間を矢印・線でつなぐタイムライン表示に変更
  • 各ステップにアイコン(📞査定・📝契約・🏠引渡等)を追加
  • ホバー時に「目安期間(例:最短3日)」などのサブ情報をツールチップで表示
不安解消期待値マネジメント
優先度:低 ナビゲーションのホバー・アクティブ状態フィードバックを追加 インタラクション

現状の問題

グローバルナビゲーションのホバー時のフィードバック(色変化・下線・背景色)が現状確認できない。ユーザーがどのリンクにカーソルを当てているか視覚的に認知しにくい。

改善アクション

  • ホバー時にアクセントカラーの下線(border-bottom)を0.2sトランジションで表示
  • 現在地(アクティブページ)を太字+下線で常時強調
  • モバイルメニュー開閉時にスライドアニメーション(ease-in-out 0.3s)を追加
操作感向上現在地の明確化

まとめ — 改善施策サマリーと優先対応ロードマップ

優先度 観点 改善提案 期待効果
カラー CTAボタンの視覚的優先順位を明確化 CVR向上・視線誘導強化
タイポグラフィ 見出し階層タイプスケールの再設計 可読性向上・離脱率低下
インタラクション FAQアコーディオンUIの導入 UX向上・ページ体感短縮
カラー ブランドカラーを3色に整理・統一 ブランド信頼性・認知一貫性
余白/インタラクション 繰り返しCTAを廃止・文脈CTAに置換 ページ軽量化・コンテンツ訴求向上
グリッド サービスカード7種→偶数化・グリッド均等化 視覚的整合性・モバイル体験向上
グリッド/余白 「選ばれる理由」ジグザグレイアウト導入 訴求力向上・リズム感改善
グリッド/インタラクション 買取フローをビジュアルタイムラインに強化 不安解消・期待値マネジメント
インタラクション ナビゲーションのホバー・アクティブフィードバック追加 操作感向上・現在地の明確化

総括コメント

「なんでも不動産買取」は訳あり物件・事故物件などセンシティブな不動産案件を扱うサービスであり、 ユーザーは「信頼できるか」「本当に秘密を守ってもらえるか」を短時間でジャッジしながらページを閲覧している。 現状のデザインは情報量・誠実さという点では一定水準を満たしているが、 ビジュアル設計の一貫性・情報階層の明確さ・インタラクションの洗練度においては改善余地が大きい。 特に優先度「高」4件(CTAの優先順位化・タイプスケール・FAQアコーディオン・カラー統一)を 先行実施するだけで、ユーザーの信頼感とコンバージョン率を大幅に引き上げられると見込まれる。

最重要アクション
CTAの優先順位化
最高コスパ施策
FAQアコーディオン化
ブランド強化
3色カラー統一
次フェーズ推奨
CTA文言A/Bテスト