Net Rénovation
スマートフォンのために設計した石膏ボード職人のサイト。顧客がそこにいるからです。
- 年
- 2026
- 制作期間
- 2週間
- 技術スタック
- React · Vite · Tailwind · Vercel
- モバイルファーストのデザイン
- 開発
- ローカルSEO
- ライティング
- の訪問がモバイルから
- 80%
- 基準となるデザインカンプの幅
- 375px
- パフォーマンス — 対応中、見積もり済みの課題
- 59/100
解決すべき課題。
背景
リヨンの石膏ボード職人で、間仕切り壁、壁の内張り、吊り天井、室内の断熱を、個人のお客様やリフォーム現場向けに手がけています。
制約
訪問の80%以上は、日中に、多くの場合Googleマップでの検索からスマートフォンでやって来ます。以前のサイトはデスクトップ向けに作られており、モバイルでは使いものになりませんでした。フォームは画面の外にはみ出し、電話番号はタップできませんでした。
解決策
すべてをまず幅375ピクセルの画面向けにデザインし、それから広げていきました。電話番号は常にタップでき、フォームは1画面に収まり、サービス内容はお客様の言葉で説明しています。「BA13石膏ボードによる吊り天井」ではなく、「天井をやり直す」です。
納品時に計測したスコア。
本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。
すべての判断に、理由がある。
375ピクセルでデザイン
基準となるデザインカンプは、デスクトップではなくモバイルです。逆の順序で設計すると、必ずモバイルの体験が劣化します。そして訪問者の80%がいるのは、そのモバイルなのです。
お客様の言葉遣い
サービス内容は、お客様が言い表すとおりの名前で呼んでいます。専門用語もありますが、二次的な位置にとどめています。安心感を与えつつ、誰も締め出しません。
電話と見積もりに常に手が届く
画面下部に固定したアクションバー。モバイルでは画面の下部が親指の届く範囲であり、確実にアクセスできる唯一の位置です。
プロジェクトのカラーパレット
スレートブルー
#2C4A63
アイデンティティ
オレンジ
#D96D2B
アクション
プラスターホワイト
#F7F7F5
背景
インク
#1E2226
テキスト
タイポグラフィ体系
見出し用書体
Outfit 700
本文用書体
Inter 400
フォントファミリーは2つで十分です。当初のコンテンツから引き継いだ3つ目は、最適化計画で削除対象として特定されています。
その裏側にある技術。
- React
- Vite
- Tailwind
- Vercel
公言したパフォーマンス課題
パフォーマンスは59です。私たちのスコアの中で最も低い2つのうちの1つで、クライアントから最適化されないまま提供された施工事例のギャラリーと、追加のディスプレイ用フォントが原因です。計画はできています。画像の規格化と3つ目のフォントの削除で、次回の改修で適用します。公開されているスコアを隠しても、サイトがよくなったことは一度もないので、こうして示しています。
寛容なフォーム
電話番号はよく使われるあらゆる形式で受け付け、自動的に正規化します。ドット区切りで書かれた番号をはじくのは、お客様を失うばかげた方法です。
検索で見つけてもらうための仕組み。
「石膏ボード業者 リヨン」と近隣の市町村
実際に対応しているエリアごとに1ページを設け、それぞれに固有の施工事例を載せています。
Googleのビジネスプロフィールとの一貫性
店名、住所、電話番号、営業時間を、モバイルのトラフィックの大半の流入元であるビジネスプロフィールと厳密に一致させています。
納品したもの。
- トップ
- サービス内容
- 施工事例
- 対応エリア
- 見積もり
プロジェクトの流れ。
モバイルファースト
375pxのデザインカンプ、アクションバー、1画面に収まるフォーム。
コンテンツ
サービス内容をお客様の言葉で書き直し。
開発
寛容なフォーム、ローカルSEO。
今後の予定
画像の規格化と不要なフォントの削除。
