Le Galant
手に取れないものを売る。すべてはマクロ撮影にかかっています。
- 年
- 2026
- 制作期間
- 3週間
- 技術スタック
- Next.js · React · Tailwind · Vercel
- アートディレクション
- デザイン
- 開発
- SEO
- ライティング
Kayzen WebがVercelのアドレスで公開しているデモ版です。正式なドメインはクライアントに帰属します。

- Lighthouseパフォーマンス
- 96/100
- Lighthouseアクセシビリティ
- 100/100
- 枚のマクロ写真を各モデルで同じ位置から
- 3
解決すべき課題。
背景
Le Galantは職人の刃物工房です。折りたたみナイフとテーブルナイフをティエール(Thiers)で製造し、ローヌ川のほとり、セリエール(Serrières)にショールームを構えています。
制約
ナイフは手に取って選ぶものです。オンラインでは、触れられないことを補わなければなりません。ハンドルの素材、刃の磨き、組み付けの精度を目に見えるようにする必要があります。これがこのプロジェクト唯一の難題であり、技術の問題である前に写真の問題でした。
解決策
マクロ撮影がサイトの骨格です。各モデルを、ハンドルと刃の接合部、背、口金(ボルスター)という3つのポイントで極端な接写で見せ、素材名と寸法を添えています。ティエールの物語はその後に続きます。主要なセールスポイントとしてではなく、品質の保証として。
納品時に計測したスコア。
本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。
すべての判断に、理由がある。
マクロ写真を基本単位に
1モデルにつき3枚の接写を、常に同じ位置で撮っています。この規則性があるからこそモデル同士を比較でき、ばらばらのギャラリーではそれができません。
素材の名前を明記
木の樹種、鋼材のグレード、口金の種類。職人の刃物を求める顧客はこの用語を知っています。それを伏せることは、別の誰かに向けて話すのと同じです。
ショールームを目的地に
セリエールの店舗を、アクセスと営業時間とともに演出しています。顧客の一部は購入前に実物を見たいと考えます。サイトはその来訪を、受け身で待つのではなく段取りします。
プロジェクトのカラーパレット
スチール
#5A6169
構造
ジュニパー
#7A5E3A
温かみ、素材感
オフホワイト
#F6F3EE
マクロ写真の背景
インク
#191B1D
テキスト
タイポグラフィ体系
見出し用書体
Cormorant Garamond 600
本文用書体
Inter 400
工芸品には細身のセリフ体を、仕様には技術的なサンセリフ体を。2つの雰囲気のコントラストが、製品そのもののコントラストを再現しています。
その裏側にある技術。
- Next.js
- React
- Tailwind
- Vercel
重い画像、軽いページ
マクロ写真は本質的に精細です。段階的読み込み、モダンなフォーマット、優先画像は1枚だけ。ページのほぼすべてがビジュアルでありながら、パフォーマンスは96です。
データで管理するカタログ
モデル、素材、寸法、在庫状況は型付きのファイルで管理しており、商品ページとマークアップの唯一の情報源になっています。
検索で見つけてもらうための仕組み。
産地を示すシグナルとしてのティエール
「職人 ナイフ ティエール」「フランス製 折りたたみナイフ」。この市場では、産地がモデルよりも先に来る第一の検索基準です。
Productのマークアップ
各モデルに、素材、寸法、在庫状況を含むProductのノードを付けています。これにより、検索結果でのリッチな表示が可能になります。
誰もが使えるように。
2025年6月から、欧州アクセシビリティ法(European Accessibility Act)により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。
有用な説明で100/100
各マクロ写真には、「ジュニパー材のハンドルとXC75鋼の刃の接合部」のように正確な説明を付けています。説明的な代替テキストは、スクリーンリーダーと同じくらいSEOにも役立ちます。
納品したもの。
- トップ
- 折りたたみナイフ
- テーブルナイフ
- ティエールの工房
- セリエールのショールーム
- お問い合わせ
プロジェクトの流れ。
写真ディレクション
マクロ撮影の手順:各モデル3ポイント、一定の照明。
コンテンツ
素材、寸法、刃物の専門用語。
デザイン
統一された商品ページ、演出したショールーム。
開発
型付きのカタログ、段階的な画像読み込み、Productのマークアップ。


