SER & BAT
2つの顧客層、1つのサイト。個人の施主と公営住宅の事業者は、同じページを読みません。
- 年
- 2026
- 制作期間
- 3週間
- 技術スタック
- Next.js · React · Tailwind · Vercel
- デザイン
- 開発
- ローカルSEO
- B2BとB2Cのライティング

- 創業年
- 2008
- つの導線、2つの訴求
- 2
- Lighthouse SEO
- 100/100
解決すべき課題。
背景
SER & BATは、2008年からリヨンで内装リフォームを手がけています。石膏ボード工事、塗装、浴室、キッチン。QUALIBAT(フランスの建設業者認証)を取得しており、ICF HabitatやSACVLといった公的な住宅供給事業者の仕事も請け負っています。
制約
2つの顧客層には共通点がありません。個人は施工事例と工期を見たがります。住宅供給事業者は、認証、公的機関での実績、そして案件を完遂できる体制を求めます。一方にしか語りかけないサイトは、もう一方を失います。
解決策
トップページで2つの導線へとはっきり振り分け、訴求も別々に用意しました。個人向けにはギャラリーと見積もり。法人向けにはQUALIBATの認証、名前を挙げた実績、施工能力。必要な証拠がそれぞれ異なるのです。
納品時に計測したスコア。
本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。
すべての判断に、理由がある。
明示された2つの導線
最初の画面で、個人か法人かをはっきり選んでもらいます。訪問者の属性を推測するのは賭けです。尋ねればクリック1回で済み、見当違いの訴求を避けられます。
認証をデザイン要素に
QUALIBATは、フッターに追いやられたロゴではなく、認証の対象範囲を説明するブロックになっています。住宅供給事業者はそれを読み解けますし、個人はそれを読み解けるようになります。
公的機関の実績を名指しで
ICF HabitatとSACVLの名前を挙げています。建設業のB2B市場では、名前の明かされた実績ひとつが、汎用的な訴求10個分の価値を持ちます。
プロジェクトのカラーパレット
インスティテューショナルブルー
#1F4C73
アイデンティティ、法人向け導線
テラコッタ
#B95F33
アクション、個人向け導線
ライトグレー
#F3F5F7
背景
インク
#1D2126
テキスト
タイポグラフィ体系
見出し用書体
Outfit 700
本文用書体
Inter 400
タイポグラフィのシステムは変えずに、2つのアクセントカラーで2つの導線を区別しています。訪問者は意識せずとも、自分がどこにいるかがわかります。
その裏側にある技術。
- Next.js
- React
- Tailwind
- Vercel
2つのお問い合わせ導線
個人向けフォームでは部屋と面積を、法人向けフォームでは案件の種類と規模を尋ねます。ひとつのフォームでは、どちらにとっても使いにくいものになっていたでしょう。
検索で見つけてもらうための仕組み。
B2CとB2Bのクエリを分ける
一方に「マンション リフォーム リヨン」「石膏ボード業者 リヨン7区」、もう一方に「リフォーム会社 社会住宅事業者 リヨン」「QUALIBAT 左官 ローヌ県」。
業歴を明示
「2008年創業」をタイトルとマークアップに入れています。創業3年程度の会社が多い市場では、業歴は安定性を示すシグナルとして明確に求められています。
納品したもの。
- トップ — 振り分け
- 個人のお客様 — 施工事例と見積もり
- 法人のお客様 — 認証と実績
- サービス内容
- 2008年からの会社の歩み
- お問い合わせ
プロジェクトの流れ。
セグメンテーション
2つの顧客層、2組の証拠。
デザイン
最初の画面での振り分け、色で区別した導線。
開発
それぞれに合わせた2つのお問い合わせ導線。
SEO
B2CとB2Bのクエリ、業歴と認証のマークアップ。


