Muller Toiture
雨漏りはリフォーム計画と同じようには扱えない。2つの導線、1つのサイト。
- 年
- 2026
- 制作期間
- 4週間
- 技術スタック
- Next.js · React · Tailwind · Vercel
- デザイン
- 開発
- 概算シミュレーター
- ローカルSEO
Kayzen WebがVercelのアドレスで公開しているデモ版です。正式なドメインはクライアントに帰属します。

- つの独立した導線
- 2
- つの質問で概算
- 3
- Lighthouse SEO
- 100/100
解決すべき課題。
背景
Muller Toitureは、ミオン(Mions)に拠点を置く屋根工事会社で、リヨン東部と北イゼール(Nord-Isère)地域で、屋根葺き、板金、断熱、苔除去を手がけています。
制約
正反対の行動をとる2種類の顧客が、同じサイトにやって来ます。雨漏りしている人は、多くの場合日曜の夜に、今すぐ電話番号を探しています。屋根の葺き替えを検討している人は、価格の目安を探していて、2か月かけて3社から見積もりを取ります。ひとつの導線では、どちらにもうまく応えられなかったでしょう。
解決策
最初の画面から、2つの入り口をはっきりと分けました。スクロールせずに見える、電話番号付きの常設の緊急バナー。そして後者のために、面積と屋根材の種類からすぐに価格の幅を示す屋根の概算シミュレーター。一方は緊急の需要を、もう一方は長期的な検討を捉えます。
納品時に計測したスコア。
本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。
すべての判断に、理由がある。
常設の緊急バナー
タップで発信できる電話番号を常に表示し、スクロールで隠れることもありません。雨漏りの場合、重要な指標はただひとつ、サイトに来てから電話するまでの秒数です。
3つの質問で概算
面積、屋根材の種類、状態。結果は前提条件とともに、あくまで幅として明示されます。正確な価格を示すのは不誠実ですが、何も示さなければ、訪問者は思い切って示している競合他社へ流れてしまいます。
苔除去は別枠で
単価は低いものの件数が多く、単独で検索されることの多いサービスです。一覧の1行ではなく、専用のページを設けています。
プロジェクトのカラーパレット
スレート
#39434D
構造 — 屋根材の色
テラコッタ瓦
#B15A2B
アクション
スカイ
#EEF3F7
背景
エマージェンシーレッド
#C0392B
雨漏りバナー専用
タイポグラフィ体系
見出し用書体
Outfit 700
本文用書体
Inter 400
緊急の赤は、雨漏りのバナーにだけ厳格に使っています。装飾に使われた警告色は、警告の役目を果たさなくなるからです。
その裏側にある技術。
- Next.js
- React
- Tailwind
- Vercel
完全にクライアント側で動く概算シミュレーター
計算はブラウザ内で行われます。サーバーへの呼び出しも待ち時間もなく、ユーザーが決めるまで個人データは一切収集しません。連絡先を尋ねるのは、結果を表示した後だけです。
特定済みのパフォーマンス課題
パフォーマンスは75で、原因は施工事例のギャラリーです。計画はできています。AVIFへの変換、srcset、そしてギャラリーのページ分割です。スコアは公開されており、隠すより説明するほうが有益です。
検索で見つけてもらうための仕組み。
緊急のクエリとプロジェクトのクエリ
「屋根 雨漏り 緊急 リヨン」「屋根業者 ミオン」「屋根 葺き替え 価格 北イゼール」。3つの検索意図に、3つのページ群で応えています。混ぜてしまえば、どれでも上位に入れません。
対応エリアを明示
実際に対応している市町村を列挙し、マークアップしています。「フランス全土」と宣言する職人は、唯一コンバージョンにつながる市町村単位のクエリを失います。
誰もが使えるように。
2025年6月から、欧州アクセシビリティ法(European Accessibility Act)により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。
キーボードで使える概算シミュレーター
ネイティブの入力欄、ライブリージョンで読み上げられる結果、ドラッグ&ドロップに依存するステップはひとつもありません。
納品したもの。
- トップ — 緊急対応+概算シミュレーター
- 屋根葺きと板金
- 断熱
- 苔除去
- 屋根の概算シミュレーター
- 対応エリア
- お問い合わせ
プロジェクトの流れ。
問い合わせの分析
受けた電話から2つの顧客像を特定。
デザイン
緊急バナー、概算シミュレーター、分かれた導線。
開発
クライアント側の概算シミュレーター、フォーム、通知。
SEO
3つのページ群、マークアップした対応エリア。


