建築・屋根工事

Muller Toiture

雨漏りはリフォーム計画と同じようには扱えない。2つの導線、1つのサイト。

年
2026
制作期間
4週間
技術スタック
Next.js · React · Tailwind · Vercel
  • デザイン
  • 開発
  • 概算シミュレーター
  • ローカルSEO

Kayzen WebがVercelのアドレスで公開しているデモ版です。正式なドメインはクライアントに帰属します。

https://mullertoiture.vercel.app/
Muller ToitureのWebサイトのトップページ――建築・屋根工事、Kayzen Web制作
つの独立した導線
2
つの質問で概算
3
Lighthouse SEO
100/100
出発点

解決すべき課題。

背景

Muller Toitureは、ミオン(Mions)に拠点を置く屋根工事会社で、リヨン東部と北イゼール(Nord-Isère)地域で、屋根葺き、板金、断熱、苔除去を手がけています。

制約

正反対の行動をとる2種類の顧客が、同じサイトにやって来ます。雨漏りしている人は、多くの場合日曜の夜に、今すぐ電話番号を探しています。屋根の葺き替えを検討している人は、価格の目安を探していて、2か月かけて3社から見積もりを取ります。ひとつの導線では、どちらにもうまく応えられなかったでしょう。

解決策

最初の画面から、2つの入り口をはっきりと分けました。スクロールせずに見える、電話番号付きの常設の緊急バナー。そして後者のために、面積と屋根材の種類からすぐに価格の幅を示す屋根の概算シミュレーター。一方は緊急の需要を、もう一方は長期的な検討を捉えます。

自己申告ではなく、計測値

納品時に計測したスコア。

本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。

PageSpeed
75
パフォーマンス:100点中75点
97
アクセシビリティ:100点中97点
100
ベストプラクティス:100点中100点
100
SEO:100点中100点
デザイン・アートディレクション

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

  1. 常設の緊急バナー

    タップで発信できる電話番号を常に表示し、スクロールで隠れることもありません。雨漏りの場合、重要な指標はただひとつ、サイトに来てから電話するまでの秒数です。

  2. 3つの質問で概算

    面積、屋根材の種類、状態。結果は前提条件とともに、あくまで幅として明示されます。正確な価格を示すのは不誠実ですが、何も示さなければ、訪問者は思い切って示している競合他社へ流れてしまいます。

  3. 苔除去は別枠で

    単価は低いものの件数が多く、単独で検索されることの多いサービスです。一覧の1行ではなく、専用のページを設けています。

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

  • スレート

    #39434D

    構造 — 屋根材の色

  • テラコッタ瓦

    #B15A2B

    アクション

  • スカイ

    #EEF3F7

    背景

  • エマージェンシーレッド

    #C0392B

    雨漏りバナー専用

タイポグラフィ体系

見出し用書体

Outfit 700

本文用書体

Inter 400

緊急の赤は、雨漏りのバナーにだけ厳格に使っています。装飾に使われた警告色は、警告の役目を果たさなくなるからです。

エンジニアリング

その裏側にある技術。

  • Next.js
  • React
  • Tailwind
  • Vercel
  1. 完全にクライアント側で動く概算シミュレーター

    計算はブラウザ内で行われます。サーバーへの呼び出しも待ち時間もなく、ユーザーが決めるまで個人データは一切収集しません。連絡先を尋ねるのは、結果を表示した後だけです。

  2. 特定済みのパフォーマンス課題

    パフォーマンスは75で、原因は施工事例のギャラリーです。計画はできています。AVIFへの変換、srcset、そしてギャラリーのページ分割です。スコアは公開されており、隠すより説明するほうが有益です。

SEO対策

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

  1. 緊急のクエリとプロジェクトのクエリ

    「屋根 雨漏り 緊急 リヨン」「屋根業者 ミオン」「屋根 葺き替え 価格 北イゼール」。3つの検索意図に、3つのページ群で応えています。混ぜてしまえば、どれでも上位に入れません。

  2. 対応エリアを明示

    実際に対応している市町村を列挙し、マークアップしています。「フランス全土」と宣言する職人は、唯一コンバージョンにつながる市町村単位のクエリを失います。

アクセシビリティ

誰もが使えるように。

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

  1. キーボードで使える概算シミュレーター

    ネイティブの入力欄、ライブリージョンで読み上げられる結果、ドラッグ&ドロップに依存するステップはひとつもありません。

サイト構成

納品したもの。

  • トップ — 緊急対応+概算シミュレーター
  • 屋根葺きと板金
  • 断熱
  • 苔除去
  • 屋根の概算シミュレーター
  • 対応エリア
  • お問い合わせ
進め方

プロジェクトの流れ。

  1. 問い合わせの分析

    受けた電話から2つの顧客像を特定。

  2. デザイン

    緊急バナー、概算シミュレーター、分かれた導線。

  3. 開発

    クライアント側の概算シミュレーター、フォーム、通知。

  4. SEO

    3つのページ群、マークアップした対応エリア。

Q&A

よくいただくご質問。

何も表示しないよりはリスクが小さいです。目安が見つからない訪問者は、よそで探して戻ってきません。前提条件を明記した価格の幅は、職人を守り、話し合いの枠組みをつくり、予算外の問い合わせを除いてくれます。

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

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

共有