建築・リフォーム

SER & BAT

2つの顧客層、1つのサイト。個人の施主と公営住宅の事業者は、同じページを読みません。

年
2026
制作期間
3週間
技術スタック
Next.js · React · Tailwind · Vercel
  • デザイン
  • 開発
  • ローカルSEO
  • B2BとB2Cのライティング
https://www.seretbat.fr/
SER & BATのWebサイトのトップページ――建築・リフォーム、Kayzen Web制作
創業年
2008
つの導線、2つの訴求
2
Lighthouse SEO
100/100
出発点

解決すべき課題。

背景

SER & BATは、2008年からリヨンで内装リフォームを手がけています。石膏ボード工事、塗装、浴室、キッチン。QUALIBAT(フランスの建設業者認証)を取得しており、ICF HabitatやSACVLといった公的な住宅供給事業者の仕事も請け負っています。

制約

2つの顧客層には共通点がありません。個人は施工事例と工期を見たがります。住宅供給事業者は、認証、公的機関での実績、そして案件を完遂できる体制を求めます。一方にしか語りかけないサイトは、もう一方を失います。

解決策

トップページで2つの導線へとはっきり振り分け、訴求も別々に用意しました。個人向けにはギャラリーと見積もり。法人向けにはQUALIBATの認証、名前を挙げた実績、施工能力。必要な証拠がそれぞれ異なるのです。

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

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

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

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

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

  1. 明示された2つの導線

    最初の画面で、個人か法人かをはっきり選んでもらいます。訪問者の属性を推測するのは賭けです。尋ねればクリック1回で済み、見当違いの訴求を避けられます。

  2. 認証をデザイン要素に

    QUALIBATは、フッターに追いやられたロゴではなく、認証の対象範囲を説明するブロックになっています。住宅供給事業者はそれを読み解けますし、個人はそれを読み解けるようになります。

  3. 公的機関の実績を名指しで

    ICF HabitatとSACVLの名前を挙げています。建設業のB2B市場では、名前の明かされた実績ひとつが、汎用的な訴求10個分の価値を持ちます。

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

  • インスティテューショナルブルー

    #1F4C73

    アイデンティティ、法人向け導線

  • テラコッタ

    #B95F33

    アクション、個人向け導線

  • ライトグレー

    #F3F5F7

    背景

  • インク

    #1D2126

    テキスト

タイポグラフィ体系

見出し用書体

Outfit 700

本文用書体

Inter 400

タイポグラフィのシステムは変えずに、2つのアクセントカラーで2つの導線を区別しています。訪問者は意識せずとも、自分がどこにいるかがわかります。

エンジニアリング

その裏側にある技術。

  • Next.js
  • React
  • Tailwind
  • Vercel
  1. 2つのお問い合わせ導線

    個人向けフォームでは部屋と面積を、法人向けフォームでは案件の種類と規模を尋ねます。ひとつのフォームでは、どちらにとっても使いにくいものになっていたでしょう。

SEO対策

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

  1. B2CとB2Bのクエリを分ける

    一方に「マンション リフォーム リヨン」「石膏ボード業者 リヨン7区」、もう一方に「リフォーム会社 社会住宅事業者 リヨン」「QUALIBAT 左官 ローヌ県」。

  2. 業歴を明示

    「2008年創業」をタイトルとマークアップに入れています。創業3年程度の会社が多い市場では、業歴は安定性を示すシグナルとして明確に求められています。

サイト構成

納品したもの。

  • トップ — 振り分け
  • 個人のお客様 — 施工事例と見積もり
  • 法人のお客様 — 認証と実績
  • サービス内容
  • 2008年からの会社の歩み
  • お問い合わせ
進め方

プロジェクトの流れ。

  1. セグメンテーション

    2つの顧客層、2組の証拠。

  2. デザイン

    最初の画面での振り分け、色で区別した導線。

  3. 開発

    それぞれに合わせた2つのお問い合わせ導線。

  4. SEO

    B2CとB2Bのクエリ、業歴と認証のマークアップ。

Q&A

よくいただくご質問。

クリック1回のコストで、トラフィックの50%に見当違いの訴求をすることを避けられます。判断基準が正反対の2つの層を納得させなければならないサイトにとって、これは非常によい交換条件です。

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

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

共有