職人・建築

BTP EA Rénovation

入力は6項目、それ以上は1つもない。フォームこそが製品です。

年
2026
制作期間
3週間
技術スタック
Next.js · React · TypeScript · Tailwind · Vercel
  • デザイン
  • 開発
  • ローカルSEO
  • コンバージョン導線
  • ライティング
https://www.btp-ea-renovation.com/
BTP EA RénovationのWebサイトのトップページ――職人・建築、Kayzen Web制作
見極めのための項目
6
以内の折り返し連絡を約束
48時間
地域ページ
9+
CAPTCHA
0
出発点

解決すべき課題。

背景

リヨンを拠点とする内装仕上げの職人で、塗装、左官、床・壁の仕上げ、浴室のリフォームを手がけ、リヨン市内とメトロポール(リヨン都市圏)全域に対応しています。

制約

建築業の職人が顧客を逃すのは、知名度が足りないからではなく、問い合わせの見極めができていないからです。成約に至らない電話は何時間も奪っていきます。対応エリア外の現場、合わない予算、扱っていない工事。サイトには、よい問い合わせを遠ざけることなく、電話の前にふるいにかける役割が求められました。

解決策

見積もりフォームはフッターではなく最初の画面に置き、しかも短くしました。工事の種類、面積、部屋、市町村、希望時期、連絡先という、現場を見極めるための6項目です。この見極めこそが折り返しの電話を効率的にします。これがなければ、電話は5分間の質問から始まることになります。

デザイン・アートディレクション

すべての判断に、理由がある。

  1. 見積もりを最初の画面に

    フォームはページの最後ではなく、約束のすぐ隣にあります。職人のサイトを訪れる人は、自分が何を望んでいるかをすでにわかっています。アクションの前に3画面分スクロールさせるのは、純粋な損失です。

  2. 6つの項目を、ひとつずつ吟味して

    項目をひとつ減らせば入力完了率が上がり、ひとつ増やせば見極めの精度が上がります。6つというのが選んだ落としどころです。それを超えると、離脱による損失が情報の増加による利益を上回ります。

  3. 工事中の写真より、ビフォー・アフター

    職人は施工中の現場を見せたがります。しかし顧客が見たいのは仕上がりです。ギャラリーは、工事内容を正確に記したビフォー・アフターの組み合わせで構成しています。

  4. 折り返し連絡の約束を明示

    「48時間以内に折り返しご連絡」は、数字で示した約束としてフォームの上に書かれています。「迅速にお返事します」のようなあいまいな約束では、誰も安心しません。

プロジェクトのカラーパレット

  • サイトブルー

    #1D4E77

    構造、信頼

  • セーフティオレンジ

    #D9601A

    アクション、見積もり

  • コンクリートグレー

    #F2F3F5

    背景

  • インク

    #1C2126

    テキスト

タイポグラフィ体系

見出し用書体

Outfit 700

本文用書体

Inter 400

堅実で飾り気のない書体です。面積や期間の数字は等幅数字にして、見積もりの確認画面で揃うようにしています。

エンジニアリング

その裏側にある技術。

  • Next.js
  • React
  • TypeScript
  • Tailwind
  • Vercel
  1. クライアント側とサーバー側の両方で検証

    フォームは入力を助けるためにリアルタイムで検証し、保存前にサーバー側でも再検証します。クライアント側の検証だけでは10秒で回避でき、どんなデータでも通ってしまいます。

  2. CAPTCHAを使わないスパム対策

    ハニーポット用のダミー項目、送信時刻の記録、レート制限。CAPTCHAを使えば、サイトが守るべき唯一の要素に摩擦を加えることになり、しかもアクセシビリティ上の障壁として広く知られています。

  3. 即時通知

    各問い合わせは、見極めのための情報をすべて件名に入れてメールで送られます。職人は現場の合間にスマートフォンを見ます。必要な情報はプレビューに収まっていなければなりません。

SEO対策

検索で見つけてもらうための仕組み。

  1. 区ごとに1ページ

    リヨンの9つの区と、メトロポールの市町村。各ページには、地区、建物のタイプ、施工事例といった固有のコンテンツがあり、都市名を差し替えただけのものではありません。

  2. 業界ではなく職種のクエリ

    「塗装業者 リヨン3区」「浴室リフォーム ヴィルールバンヌ(Villeurbanne)」。顧客が探すのは職種と市町村であり、「建設会社」で探すことはありません。

  3. HomeAndConstructionBusinessのマークアップ

    専用の型、宣言した対応エリア、Serviceとして列挙したサービス内容。これがローカルパックでの表示を左右します。

アクセシビリティ

誰もが使えるように。

2025年6月から、欧州アクセシビリティ法(European Accessibility Act)により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。

  1. 本当にアクセシブルなフォーム

    関連付けられたラベル、読み上げられて項目に紐付くエラー、確認済みのタブ順序。フォームはサイトで最もアクセシビリティが損なわれやすいコンポーネントであり、ここでは唯一重要なコンポーネントです。

サイト構成

納品したもの。

  • トップ — クイック見積もり
  • サービス(塗装、左官、床、浴室)
  • 施工事例のビフォー・アフター
  • 対応エリア — 9つの区+メトロポール
  • お問い合わせ
進め方

プロジェクトの流れ。

  1. 見極めの設計

    逃した電話を分析し、職人と一緒に6つの項目を決定。

  2. デザイン

    最初の画面に見積もり、ビフォー・アフターのギャラリー、数字で示した約束。

  3. 開発

    二重の検証、CAPTCHAを使わないスパム対策、通知。

  4. ローカルSEO

    区ごとのページ、職種のマークアップ。

Q&A

よくいただくご質問。

離脱率のほうが、情報の質よりも速く上がるからです。6つの項目があれば効率的な折り返しの電話には十分です。10項目にすると、30秒の電話で聞ける2つの詳細を得るために、問い合わせの3分の1を失います。

都市名を変えるだけなら、そうなります。各ページには、異なる地区、建物のタイプ、施工事例が載っています。この作業をしないのであれば、よくできた1ページのほうがましです。

同じ水準のこだわりを、あなたのサイトにも。

現在のサイトの無料診断、24時間以内のお見積もり、そして今お読みいただいたような書面での解説をお届けします。3回分割払い(手数料無料)に対応し、利用できる地域の補助金は契約前に確認します。

共有