# DriveBerry｜サービス / SaaSのWebデザイン参考

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

- URL: https://driveberry.fr/
- 解説ページ: https://katapick.com/sites/driveberry
- カテゴリ: サービス / SaaS / 地域: 海外（FR）/ 業種: 自動車整備・故障診断サービス
- テイスト: ビビッド、角丸、固定CTA、マーキー、スクロール演出、3D/WebGL
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 36 時間）

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

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

## 配色
- #fcd7f3 Berry Milk（背景）
- #fe3144 Strawberry Red（アクセント / 見出し / CTA）
- #ffffff Cream White（カード / ヘッダー）
- #de3f34 Brake Red（画像カードの背景）
- #2c1a1a Espresso（ダーク背景）
- #67e844 Leaf Green（「Gratuit」ラベル）

## フォント
- 見出し・ロゴタイプ: Ubuntu（代替: Ubuntu）
- 本文・ボタン・ナビ: Inter（代替: Inter）

## よくある質問
### DriveBerryのサイトで使われているフォントは？
見出しとロゴタイプに Ubuntu、本文とボタンに Inter が使われています。どちらも Google Fonts で無料で利用できます。

### DriveBerryのようにアプリ画面で説明するLPはどう作る？
スマホのモック画像を大きく配置し、スクロールに合わせて位置を移動させながら、周囲に機能を示す小さなチップを重ねます。position: sticky と GSAP ScrollTrigger、3Dにするなら Three.js を組み合わせるのが一般的です。

### どんな業種の参考になる？
自動車関連サービス、修理・メンテナンスの予約サービス、診断系のアプリなど、利用者の不安を解消するタイプのサービスLPの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/driveberry からダウンロードできます。
出典: Katapick（https://katapick.com）