桐生環境計画 / 改善サイト提案

同じ住まいを、
3つの見せ方で。

施工事例と相談への導線は共通です。構図、写真の大きさ、日本語の文字組みを変えて比較できます。初期検討時の3案を保存しています。B案を採用した現在の完成案は、下のリンクからご覧いただけます。
B案の完成版を見る

A / 推奨 1位

佇まいを伝える

文字と写真を左右に分け、余白と明朝体で家づくりの姿勢を伝えます。

A案を見る
長所
写真に文字を重ねず、建物とメッセージをそれぞれ見せられる。
弱点
全面写真の案に比べ、写真の第一印象は穏やか。
スマホ
短い見出しの次に施工写真。下部に事例と相談の入口を固定。
B / 推奨 2位

一枚に惹かれる

最初の画面を施工写真で満たし、見出しを重ねる。住まいの印象を先に届けます。

B案を見る
長所
写真が持つ空間の魅力を、最初の画面で大きく伝えられる。
弱点
写真の明暗とトリミングに左右される。高解像度の元写真で確認が必要。
スマホ
縦長の写真上に見出し。施工事例への入口を最初の画面に配置。
C / 推奨 3位

住まいから選ぶ

短い導入から、すぐに施工事例へ。横並びの写真とゴシック体で比較を助けます。

C案を見る
長所
事例が目的の人が、少ないスクロールで住宅を見比べられる。
弱点
冒頭の大きな施工写真がなく、第一印象が控えめ。
スマホ
導入の直後に事例を縦に配置。各事例から相談内容を引き継げる。

改修内容の確認用デモです。写真は公開v2のローカル画像を保持しています。このページは初期検討案の記録です。フォームは入力確認まで動作しますが、企業への送信・保存は行いません。写真の再掲載条件と企業情報は公開前に確認します。