Damien Mugnier
97、100、100、100。写真の多いサイトで達成した、文句なしのLighthouseスコア。
- 年
- 2026
- 制作期間
- 3週間
- 技術スタック
- React · Vite · Tailwind · Vercel
- デザイン
- 開発
- 写真ディレクション
- ローカルSEO
Kayzen WebがVercelのアドレスで公開しているデモ版です。正式なドメインはクライアントに帰属します。
- Lighthouseパフォーマンス
- 97/100
- アクセシビリティ、ベストプラクティス、SEO
- 100/100
- 枚の優先画像、ほかはすべて遅延読み込み
- 1
解決すべき課題。
背景
Damien Mugnierは、リヨン南西部のボーヴァロン（Beauvallon）を拠点とするタイル職人・石工です。大判タイル、大理石、天然石、テラスを手がけ、高級志向の顧客を相手にしています。
制約
高級志向のポジショニングは、もっぱら画像で証明されます。きれいに施工された大判タイルの良さは、文章ではなく目地やカットの仕上がりに表れます。そのため写真を多用したサイトが必要でしたが、それが遅いサイトの典型的な作り方であることもわかっていました。
解決策
パフォーマンスを、最後に行う最適化ではなく、設計上の制約として扱いました。すべての写真を、実装に入る前にレタッチし、トリミングし、複数の幅で配信できるように準備しています。その結果、コンテンツのほぼすべてがビジュアルであるサイトで、パフォーマンス97を達成し、残りの3項目では満点を獲得しました。
納品時に計測したスコア。
本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。
すべての判断に、理由がある。
素材を配色に
石のベージュ、大理石のグレー、深い黒。配色は施工した素材から採取しています。サイトと施工事例が同じ言葉で語り合います。
大きな画像、寄りの構図
部屋全体を写した引きの写真では、仕事の質が埋もれてしまいます。構図はカット、目地、取り合いに寄せています。単なる施工者と職人の違いが見えるのは、そこだからです。
少ない文章を、とても上手に
このポジショニングでは、長い文章は印象を薄めます。各ページは、素材の正確な用語を使った、いくつかの精緻な文で構成されています。
プロジェクトのカラーパレット
ストーン
#D9CFC0
背景、面
グレーマーブル
#7F8489
構造
ディープブラック
#151719
テキスト、コントラスト
ブラス
#A3813F
細部
タイポグラフィ体系
見出し用書体
Cormorant Garamond 600
本文用書体
Inter 400
ポジショニングには細身で背の高いセリフ体を、情報には控えめなサンセリフ体を。タイポグラフィは写真に仕えるものであり、その逆ではありません。
その裏側にある技術。
- React
- Vite
- Tailwind
- Vercel
実装前に画像の予算を設定
最初にページごとの最大データ量を決め、それに収まるよう画像を準備しました。遅さに気づいてから最適化するという通常の進め方とは逆です。
徹底した段階的読み込み
優先する画像は1枚だけで、ほかはすべて遅延読み込み。サイズを宣言しているので、レイアウトのずれは一切ありません。
アニメーションライブラリは使わない
トランジションは純粋なCSSです。画像がすべてを担うサイトで、アニメーション用のJavaScriptを100キロバイト追加すれば、差をつけるパフォーマンスの点数を失っていたでしょう。
検索で見つけてもらうための仕組み。
素材名のクエリ
「大判タイル 施工 リヨン」「大理石 浴室 リヨン南西部」「天然石 テラス」。高級志向の顧客が探すのは職種ではなく素材です。
説明と名前を付けた画像
説明的な代替テキストと、内容がわかるファイル名。仕上げ工事の職種では、画像検索は現実の集客チャネルです。
誰もが使えるように。
2025年6月から、欧州アクセシビリティ法（European Accessibility Act）により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。
画像主体のサイトで100/100
各写真には、空や重複の代替テキストではなく、素材、サイズ、部屋といった有用な説明が付いています。ビジュアル重視のサイトだからといって、アクセシビリティを諦める必要はありません。
納品したもの。
- トップ
- 大判タイル
- 大理石と天然石
- テラス
- 施工事例
- 見積もり
プロジェクトの流れ。
パフォーマンス予算
実装前に、ページごとの最大データ量を設定。
写真ディレクション
選定、寄りの構図、複数の幅での書き出し。
デザイン
素材から採った配色、短く精緻な文章。
開発
純粋なCSS、段階的読み込み、サイズの宣言。
