WIREFRAMETOP入口分岐 比較「リフォーム」×「リノベーション」2入口のレイアウト代替案← WF一覧へ
HOME > WF一覧 > TOP入口分岐 比較

TOP入口分岐 レイアウト比較ENTRANCE LAYOUT VARIATIONS

TOPの第一導線「リフォーム(機能的価値)」と「リノベーション(情緒的価値)」の2入口について、レイアウト4案を比較。現行TOP案は案Aをベースにしています。

各案は構成比較用の簡易モック。実寸・写真・余白は確定デザインフェーズで調整。下のメリット/デメリットを判断材料に。

案 A左右2分割大型パネルを横並び(現行ベース)
MORE LIVING創業150年・東邦ガス連携CONCEPT|SERVICE|WORKS|COMPANY ☰
暮らしのかかりつけリフォーム
~家族に咲顔を、住まいに想い出を~
ENTRANCE A / 機能的価値

リフォーム

水回り・内装・外装・修繕。「困った」をすばやく確実に。

リフォームを見る
ENTRANCE B / 情緒的価値

リノベーション

全面改修・中古+リノベ・二世帯化。暮らしごと描き直す。

リノベーションを見る
MERIT2つの価値を完全に対等・同格で提示。左右対称で迷いが少なく、第一印象で「2つの入口がある」と直感的に伝わる。PCで最も収まりが良い。
DEMERITスマホでは縦積みになり「上=主、下=従」の上下関係が生まれる(順序の検討が必要)。各パネルの情報量が限られる。
案 B上下フルワイド2段横長帯を縦に2段・写真の世界観を強調
MORE LIVING創業150年・東邦ガス連携CONCEPT|SERVICE|WORKS|COMPANY ☰
ENTRANCE A / 機能的価値

リフォーム

水回り・内装・外装・修繕。「困った」をすばやく確実に。

見る
ENTRANCE B / 情緒的価値

リノベーション

全面改修・中古+リノベ・二世帯化。暮らしごと描き直す。

見る
MERIT横長帯で1枚ずつの写真を大きく使え、世界観・情緒を伝えやすい。PC・スマホで見え方が崩れにくく一貫。コピーや要素を多めに置ける。
DEMERIT2段目(リノベ)がファーストビュー外に隠れやすく、スクロール前提になる。上段が有利になりがちで対等感は案Aに劣る。
案 Cタブ切替(1ビュー内)同じ場所でリフォーム/リノベを切替表示
MORE LIVING創業150年・東邦ガス連携CONCEPT|SERVICE|WORKS|COMPANY ☰
あなたの目的に合わせて選ぶ
リフォームリノベーション
機能的価値ゾーン

リフォーム

水回り・内装・外装・修繕。「困った」をすばやく確実に解決する。
キッチン/浴室/洗面/トイレ/給湯器/緊急修理

リフォームを見る
NOTE上のタブは実際に切り替わります(クリックで確認可)。
MERIT1画面に集約でき、片方ずつ大きく見せられる。情報量を多く載せられ、スマホでも省スペース。
DEMERIT初期表示で隠れた側(タブ裏)の存在に気づかれにくく、2入口の対等性が弱まる。どちらを初期表示にするか=優先度の判断が必要。
DEMERIT1クリックの操作が増える。タブUIに不慣れな高齢層には伝わりづらい可能性。
案 Dお悩み起点の質問分岐「どうされましたか?」で振り分け(診断的)
MORE LIVING創業150年・東邦ガス連携CONCEPT|SERVICE|WORKS|COMPANY ☰
MERIT「リフォーム/リノベ」の言葉の違いが分からない層も、自分の状況(困りごと)から直感的に選べる。ロイヤルカスタマーの「まず相談」価値とも親和。コピー次第でブランドの世界観も出せる。
DEMERIT写真より問いかけが主役になり、ビジュアルの第一印象は弱まる。質問文のコピー設計の巧拙に大きく依存する。

比較サマリー SUMMARY

2入口の対等性写真・世界観スマホ適性分かりやすさ
A 左右2分割
B 上下2段
C タブ切替
D 質問分岐

推奨の方向性:PCの収まりとブランド対等性を重視するなら A。情緒・写真訴求を強めるなら B。「言葉が分からない層」への配慮を最優先するなら D(A/Dのハイブリッドも有効=上部に質問、下部に2パネル)。

現行TOP案を見るWF一覧無料見積り