職人・刃物

Le Galant

手に取れないものを売る。すべてはマクロ撮影にかかっています。

年
2026
制作期間
3週間
技術スタック
Next.js · React · Tailwind · Vercel
  • アートディレクション
  • デザイン
  • 開発
  • SEO
  • ライティング

Kayzen WebがVercelのアドレスで公開しているデモ版です。正式なドメインはクライアントに帰属します。

https://legalant.vercel.app/
Le GalantのWebサイトのトップページ――職人・刃物、Kayzen Web制作
Lighthouseパフォーマンス
96/100
Lighthouseアクセシビリティ
100/100
枚のマクロ写真を各モデルで同じ位置から
3
出発点

解決すべき課題。

背景

Le Galantは職人の刃物工房です。折りたたみナイフとテーブルナイフをティエール(Thiers)で製造し、ローヌ川のほとり、セリエール(Serrières)にショールームを構えています。

制約

ナイフは手に取って選ぶものです。オンラインでは、触れられないことを補わなければなりません。ハンドルの素材、刃の磨き、組み付けの精度を目に見えるようにする必要があります。これがこのプロジェクト唯一の難題であり、技術の問題である前に写真の問題でした。

解決策

マクロ撮影がサイトの骨格です。各モデルを、ハンドルと刃の接合部、背、口金(ボルスター)という3つのポイントで極端な接写で見せ、素材名と寸法を添えています。ティエールの物語はその後に続きます。主要なセールスポイントとしてではなく、品質の保証として。

自己申告ではなく、計測値

納品時に計測したスコア。

本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。

PageSpeed
96
パフォーマンス:100点中96点
100
アクセシビリティ:100点中100点
96
ベストプラクティス:100点中96点
100
SEO:100点中100点
デザイン・アートディレクション

すべての判断に、理由がある。

  1. マクロ写真を基本単位に

    1モデルにつき3枚の接写を、常に同じ位置で撮っています。この規則性があるからこそモデル同士を比較でき、ばらばらのギャラリーではそれができません。

  2. 素材の名前を明記

    木の樹種、鋼材のグレード、口金の種類。職人の刃物を求める顧客はこの用語を知っています。それを伏せることは、別の誰かに向けて話すのと同じです。

  3. ショールームを目的地に

    セリエールの店舗を、アクセスと営業時間とともに演出しています。顧客の一部は購入前に実物を見たいと考えます。サイトはその来訪を、受け身で待つのではなく段取りします。

プロジェクトのカラーパレット

  • スチール

    #5A6169

    構造

  • ジュニパー

    #7A5E3A

    温かみ、素材感

  • オフホワイト

    #F6F3EE

    マクロ写真の背景

  • インク

    #191B1D

    テキスト

タイポグラフィ体系

見出し用書体

Cormorant Garamond 600

本文用書体

Inter 400

工芸品には細身のセリフ体を、仕様には技術的なサンセリフ体を。2つの雰囲気のコントラストが、製品そのもののコントラストを再現しています。

エンジニアリング

その裏側にある技術。

  • Next.js
  • React
  • Tailwind
  • Vercel
  1. 重い画像、軽いページ

    マクロ写真は本質的に精細です。段階的読み込み、モダンなフォーマット、優先画像は1枚だけ。ページのほぼすべてがビジュアルでありながら、パフォーマンスは96です。

  2. データで管理するカタログ

    モデル、素材、寸法、在庫状況は型付きのファイルで管理しており、商品ページとマークアップの唯一の情報源になっています。

SEO対策

検索で見つけてもらうための仕組み。

  1. 産地を示すシグナルとしてのティエール

    「職人 ナイフ ティエール」「フランス製 折りたたみナイフ」。この市場では、産地がモデルよりも先に来る第一の検索基準です。

  2. Productのマークアップ

    各モデルに、素材、寸法、在庫状況を含むProductのノードを付けています。これにより、検索結果でのリッチな表示が可能になります。

アクセシビリティ

誰もが使えるように。

2025年6月から、欧州アクセシビリティ法(European Accessibility Act)により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。

  1. 有用な説明で100/100

    各マクロ写真には、「ジュニパー材のハンドルとXC75鋼の刃の接合部」のように正確な説明を付けています。説明的な代替テキストは、スクリーンリーダーと同じくらいSEOにも役立ちます。

サイト構成

納品したもの。

  • トップ
  • 折りたたみナイフ
  • テーブルナイフ
  • ティエールの工房
  • セリエールのショールーム
  • お問い合わせ
進め方

プロジェクトの流れ。

  1. 写真ディレクション

    マクロ撮影の手順:各モデル3ポイント、一定の照明。

  2. コンテンツ

    素材、寸法、刃物の専門用語。

  3. デザイン

    統一された商品ページ、演出したショールーム。

  4. 開発

    型付きのカタログ、段階的な画像読み込み、Productのマークアップ。

Q&A

よくいただくご質問。

どのモデルでも同じ構成の写真3枚は、ばらばらの写真10枚に勝ります。購入という行為の実体である比較を可能にするからです。重要なのは枚数よりも撮影の手順です。

同じ水準のこだわりを、あなたのサイトにも。

現在のサイトの無料診断、24時間以内のお見積もり、そして今お読みいただいたような書面での解説をお届けします。3回分割払い(手数料無料)に対応し、利用できる地域の補助金は契約前に確認します。

共有