「きれいなLP」を作ってから、もう一度作り直した話——工務店の相談ページに必要だったのは見た目じゃなかった

Web制作の打ち合わせで「きれいなサイトにしてください」と言われることがよくあります。ですが、実際にきれいなだけのページを作ってみると、業種によっては物足りなさが残ることがあります。工務店向けの相談獲得LPをデモとして作り直したときに、それをはっきり実感しました。

何をしたか

Nompassでは、業種ごとの制作テンプレートを検証するデモとして、工務店（リフォーム・新築)向けの「相談獲得LP」を作りました。構成はヒーロー→不安解消→施工事例→お客様の声→FAQ→問い合わせの順で、問い合わせにつながるボタン(CTA)をヒーロー・施工事例の後・問い合わせ直前の3か所に置き、それぞれ計測できるようにしました。

最初のバージョンを作った段階では、画像生成の仕組みが一時的に使えず、比率や見え方を確認するための仮素材を入れていました。その後、施工後のLDK・打ち合わせの様子・施工中の様子という3枚のイメージ写真（実在の物件ではなく、AIで生成したデモ用の画像）を用意し、WebP形式に変換してヒーロー画像を差し替えました。実際の案件では、ここに工務店ご自身の施工写真が入ります。

途中、開発環境で古いプロセスが残ったままになっていて、ページの一部が読み込めなくなるトラブルにも遭遇しました。原因は使っていないポートに古いビルドの参照が残っていたことで、プロセスを止めてビルドを作り直すことで解消しています。

最終的に、375px・768px・1280pxの3つの画面幅で横スクロールが出ないこと、問い合わせボタンから実際にフォームまでたどり着けることを確認し、依存パッケージの脆弱性チェック(npm audit)でも重大な指摘がないことを確かめて完成としました。

なぜそうしたか

最初のバージョンは、要件としては間違っていませんでした。ヒーローも施工事例もお客様の声も揃っていて、見た目としては十分に整っていました。ですが、工務店へのリフォームや新築の相談は、他の業種に比べて金額が大きく、決断までの時間もかかります。検討している人が本当に知りたいのは「このサイトがきれいかどうか」ではなく、「見積もりはどう決まるのか」「工事中も住み続けられるのか」「現地調査では何を見られるのか」「相談したらどう進むのか」という、判断のための材料です。

そこで、見た目を磨き込む方向ではなく、検討している人が比較のときに気にする内容を前半に置く方向へ構成を組み替えました。見積もりの分解・現地調査で見る場所・住みながら工事できるかどうかを先に伝え、そのうえで施工事例とお客様の声で裏付ける、という順番です。写真も、雰囲気を出すための素材から、施工後の空間や打ち合わせの様子が想像できるイメージ写真に差し替えました。

結果

これはあくまで社内の制作テンプレートを検証するためのデモであり、実際の工務店のお客様からいただいた反響の数字ではありません。そのうえで、確認できた事実として次のことが言えます。

• 構成をヒーロー→不安解消→施工事例→お客様の声→FAQ→問い合わせの順に組み替え、問い合わせへの導線を3か所に配置した
• 施工後のLDK・打ち合わせ風景・施工中の様子という3枚の写真を新たに用意し、WebP化してページに組み込んだ
• 375px/768px/1280pxのいずれの画面幅でも横スクロールが出ないこと、問い合わせボタンから実際にフォームへ到達できることを確認した
• 依存パッケージの脆弱性チェックで重大な指摘が0件であることを確認した

数字として出せるのはここまでですが、「きれいに見えるか」ではなく「必要な情報がすぐ見つかるか」を検証の軸にしたことで、直すべき場所がはっきりしました。

この経験から言えること

きれいなサイトを作ることは、目的ではなく手段だと改めて思いました。特に工務店のように、金額が大きく決断に時間がかかる業種では、見た目の前に「何を確認すればいいか」「相談したらどう進むのか」を渡すことのほうが、信頼につながるはずです。

Nompassでは、こうした業種ごとの検討のクセをテンプレートの構成に落とし込む検証を、今後も一つずつ積み重ねていきます。