BTP EA Rénovation
入力は6項目、それ以上は1つもない。フォームこそが製品です。
- 年
- 2026
- 制作期間
- 3週間
- 技術スタック
- Next.js · React · TypeScript · Tailwind · Vercel
- デザイン
- 開発
- ローカルSEO
- コンバージョン導線
- ライティング

- 見極めのための項目
- 6
- 以内の折り返し連絡を約束
- 48時間
- 地域ページ
- 9+
- CAPTCHA
- 0
解決すべき課題。
背景
リヨンを拠点とする内装仕上げの職人で、塗装、左官、床・壁の仕上げ、浴室のリフォームを手がけ、リヨン市内とメトロポール(リヨン都市圏)全域に対応しています。
制約
建築業の職人が顧客を逃すのは、知名度が足りないからではなく、問い合わせの見極めができていないからです。成約に至らない電話は何時間も奪っていきます。対応エリア外の現場、合わない予算、扱っていない工事。サイトには、よい問い合わせを遠ざけることなく、電話の前にふるいにかける役割が求められました。
解決策
見積もりフォームはフッターではなく最初の画面に置き、しかも短くしました。工事の種類、面積、部屋、市町村、希望時期、連絡先という、現場を見極めるための6項目です。この見極めこそが折り返しの電話を効率的にします。これがなければ、電話は5分間の質問から始まることになります。
すべての判断に、理由がある。
見積もりを最初の画面に
フォームはページの最後ではなく、約束のすぐ隣にあります。職人のサイトを訪れる人は、自分が何を望んでいるかをすでにわかっています。アクションの前に3画面分スクロールさせるのは、純粋な損失です。
6つの項目を、ひとつずつ吟味して
項目をひとつ減らせば入力完了率が上がり、ひとつ増やせば見極めの精度が上がります。6つというのが選んだ落としどころです。それを超えると、離脱による損失が情報の増加による利益を上回ります。
工事中の写真より、ビフォー・アフター
職人は施工中の現場を見せたがります。しかし顧客が見たいのは仕上がりです。ギャラリーは、工事内容を正確に記したビフォー・アフターの組み合わせで構成しています。
折り返し連絡の約束を明示
「48時間以内に折り返しご連絡」は、数字で示した約束としてフォームの上に書かれています。「迅速にお返事します」のようなあいまいな約束では、誰も安心しません。
プロジェクトのカラーパレット
サイトブルー
#1D4E77
構造、信頼
セーフティオレンジ
#D9601A
アクション、見積もり
コンクリートグレー
#F2F3F5
背景
インク
#1C2126
テキスト
タイポグラフィ体系
見出し用書体
Outfit 700
本文用書体
Inter 400
堅実で飾り気のない書体です。面積や期間の数字は等幅数字にして、見積もりの確認画面で揃うようにしています。
その裏側にある技術。
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
クライアント側とサーバー側の両方で検証
フォームは入力を助けるためにリアルタイムで検証し、保存前にサーバー側でも再検証します。クライアント側の検証だけでは10秒で回避でき、どんなデータでも通ってしまいます。
CAPTCHAを使わないスパム対策
ハニーポット用のダミー項目、送信時刻の記録、レート制限。CAPTCHAを使えば、サイトが守るべき唯一の要素に摩擦を加えることになり、しかもアクセシビリティ上の障壁として広く知られています。
即時通知
各問い合わせは、見極めのための情報をすべて件名に入れてメールで送られます。職人は現場の合間にスマートフォンを見ます。必要な情報はプレビューに収まっていなければなりません。
検索で見つけてもらうための仕組み。
区ごとに1ページ
リヨンの9つの区と、メトロポールの市町村。各ページには、地区、建物のタイプ、施工事例といった固有のコンテンツがあり、都市名を差し替えただけのものではありません。
業界ではなく職種のクエリ
「塗装業者 リヨン3区」「浴室リフォーム ヴィルールバンヌ(Villeurbanne)」。顧客が探すのは職種と市町村であり、「建設会社」で探すことはありません。
HomeAndConstructionBusinessのマークアップ
専用の型、宣言した対応エリア、Serviceとして列挙したサービス内容。これがローカルパックでの表示を左右します。
誰もが使えるように。
2025年6月から、欧州アクセシビリティ法(European Accessibility Act)により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。
本当にアクセシブルなフォーム
関連付けられたラベル、読み上げられて項目に紐付くエラー、確認済みのタブ順序。フォームはサイトで最もアクセシビリティが損なわれやすいコンポーネントであり、ここでは唯一重要なコンポーネントです。
納品したもの。
- トップ — クイック見積もり
- サービス(塗装、左官、床、浴室)
- 施工事例のビフォー・アフター
- 対応エリア — 9つの区+メトロポール
- お問い合わせ
プロジェクトの流れ。
見極めの設計
逃した電話を分析し、職人と一緒に6つの項目を決定。
デザイン
最初の画面に見積もり、ビフォー・アフターのギャラリー、数字で示した約束。
開発
二重の検証、CAPTCHAを使わないスパム対策、通知。
ローカルSEO
区ごとのページ、職種のマークアップ。


