Service / SaaSOverseas / FRPicked 2026.09.26

DriveBerry

サービス / SaaSのWebデザイン参考 — 自動車整備・故障診断サービス

出典: driveberry.fr

Editor's note — 編集部の視点

車の故障の不安を、スマホ画面を見せて解く。

フランスの自動車整備サービスDriveBerryのサイトは、ピンクと苺色のブランドカラーの上でアプリ画面を主役にし、診断から修理予約までの流れを画面ごとに見せていく。

IrisColor & Brand

赤とピンクで、ほんとに苺みたいな配色なのがすき。そこに「Gratuit」のラベルだけ黄緑を差してて、苺のヘタみたい。無料のひとことがいちばん先に目に入る感じがいい。

1FVは車に荷物を積む家族。次にピンク地のスマホ画面が来て、日常から解決策へ視点を移す
2悩みのカードを横に流してから、メーターの目盛りで「安心」を見せる。不安→解決の順が一目で伝わる
3ヘッダー下に「Gratuit」付きの診断ボタンを常設。SPでは画面下の固定CTAに移し、無料の入口を守る

Color

DriveBerryの配色

Typography

使用フォントと無料の代替

見出し・ロゴタイプ

Aa あア

使用: Ubuntu
代替: Ubuntu

本文・ボタン・ナビ

Aa あア

使用: Inter
代替: Inter

実測タイプスケール1440px幅 · 2026-09-26 計測

特大見出しKatapick 型120px · 1.2 · 500
小見出しKatapick 型16px · 1.2 · 700
本文The quick brown fox — 参考を型にする14px · 1.2 · 600
ボタンKatapick 型14px · 1 · 500

Structure

ページ構成（上から順）

01
ヘッダー
白い角丸バーにロゴ、3つのナビ、EN/FR の切替、ログインアイコン。その下に「Je diagnostique mon véhicule」と「Connaitre le tarif de ma réparation」の2連ボタンを固定し、緑の「Gratuit」ラベルを添える。
02
ヒーロー
車に荷物を積む家族の映像に、大きな「DriveBerry」と一文のコピー、「Faites défiler」のスクロール誘導を重ねる。
03
アプリ紹介
ピンク地の中央にスマホのアプリ画面を置き、続くパートで画面を右に寄せて「Vous n’êtes plus seuls」の見出し、診断状況のチップ、対応メーカーのロゴ列を並べる。
04
Fini...
「Angoisse de la panne」「La surfacturation」などの悩みカードを横に流し、メーターの目盛り状の図形の中に「Désormais, gagnez en sérénité…」を置く。
05
Comment ça marche ?
スマホ画面の画像カードと説明カードを左右交互に並べ、オンライン診断・見積もり・修理予約・マイページの手順を紹介する。
06
利用者の声
「Nos utilisateurs sont nos meilleurs ambassadeurs」の見出しと、重なったレビューカードのスライダー。
07
診断チャット
利用者の写真に、音声メッセージや「Diagnostic en cours...」などチャット風の吹き出しを重ねたカード。
08
信頼・記事・フッター
認定ガレージの紹介、記事一覧「Boîte à outils」、「75% des pannes pourraient être évitées」、ニュースレター登録のフッターで締める。

Interaction

アニメーション・インタラクション

スタックに Three.js / WebGL があり、中央のスマホがスクロールに合わせて右へ移動するため、スマホを3Dモデルとして描画しスクロール進捗で位置を補間していると思われる。position: sticky の画像と GSAP ScrollTrigger でも再現可能
悩みカードは同じ見出しが3回ずつ出現するため、複製を並べて translateX でループさせる無限マーキーと思われる
スタックに Lottie があり、アイコンや診断状況のチップなど小さなアニメーションに使われていると思われる
Lenis の慣性スクロールで、スマホの移動やカードの切り替えをなめらかにしている

スクロールのコマ撮りLenis · 200–3000ms

検出された技術:Three.jsLenisWordPressLottieWebGL

Reproduce

再現するときのポイント

01背景は淡いピンク #fcd7f3 を広く使い、ボタンと見出しだけを #fe3144 の苺色で強くする
02説明の主役はアプリ画面。スマホのモックを大きく置き、周りに「Diagnostic en temps réel」のようなチップを浮かべる
03主要な2つのCTAを常に見える位置に固定し、緑の「Gratuit」ラベルで無料を強調する
04見出しは丸みのある Ubuntu、本文は Inter と役割を分ける

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

driveberry.katapick.md

1---
2title: "DriveBerry 再現用デザイン仕様書"
3source: https://driveberry.fr/
4katapick: https://katapick.com/sites/driveberry
5category: サービス / SaaS
6region: 海外 (FR)
7tags: [ビビッド, 角丸, 固定CTA, マーキー, スクロール演出, 3D/WebGL]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 36
13generator: Katapick
14---
15 
16# DriveBerry — 再現用デザイン仕様書
17 
18> 車の故障の不安を、スマホ画面を見せて解く。フランスの自動車整備サービスDriveBerryのサイトは、ピンクと苺色のブランドカラーの上でアプリ画面を主役にし、診断から修理予約までの流れを画面ごとに見せていく。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22