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）设有展厅。
限制
刀要握在手里才选得出来。在网上，必须弥补无法触摸的缺憾：刀柄的材质、刀身的抛光、组装的精度，都必须变得肉眼可见。这是项目唯一的难点，而它首先是摄影问题，其次才是技术问题。
对策
微距摄影构成了整个网站的骨架。每款刀都在三个部位以极近距离展示——刀柄与刀身的接合处、刀背、刀枕——并附上具体的材料名称和尺寸。蒂耶尔的品牌故事放在其后，作为品质保证，而非主要卖点。
交付时测得的评分。
以下为线上网站的Lighthouse评分。我们如实公布：若某项分数偏低，其原因与改进计划会在下文写明，而不是避而不谈。
每一个设计取舍，及其理由。
以微距为基本单元
每款三张特写，拍摄部位始终相同。这种一致性让不同款式之间可以相互比较——而风格杂乱的图库做不到这一点。
写明材料名称
木材品种、钢材牌号、刀枕类型。手工刀具的客户熟悉这些术语；不用这些词，等于在跟另一类人说话。
把展厅打造成目的地
精心呈现塞里耶尔的展厅，附上交通方式和开放时间。一部分客户希望先看后买；网站主动组织这次到访，而不是被动应付。
项目配色
钢灰
#5A6169
结构
杜松木
#7A5E3A
温度、质感
米白
#F6F3EE
微距照片背景
墨色
#191B1D
正文
字体系统
标题字体
Cormorant Garamond 600
正文字体
Inter 400
纤细的衬线字体呈现手工艺品，偏技术感的无衬线字体呈现规格参数。两种语域的对比，恰如产品本身的对比。
幕后的技术实现。
- Next.js
- React
- Tailwind
- Vercel
图片厚重，页面轻盈
微距照片天生细节丰富。渐进式加载、现代图片格式、只有一张优先加载的图片：尽管页面几乎全是视觉内容，性能得分仍达 96。
以数据驱动的产品目录
款式、材料、尺寸和库存状态集中在一个带类型的文件中，是产品页和结构化标记的唯一数据源。
网站如何被搜索到。
以蒂耶尔作为产地信号
“Couteau artisanal Thiers”（蒂耶尔 手工刀）、“coutellerie française pliant”（法国 折叠刀）：在这个市场上，产地是首要搜索标准，排在款式之前。
Product 结构化标记
每款刀都带有一个 Product 节点，包含材料、尺寸和库存状态。正是它让搜索结果得以展示富媒体摘要。
人人都能使用。
自2025年6月起，《欧洲无障碍法案》（European Accessibility Act）要求大量在线服务实现数字无障碍。我们在设计阶段就着手处理，而非事后补救。
以有用的描述拿到 100/100
每张微距照片都有精确描述——“杜松木刀柄与 XC75 钢刀身的接合处”。描述性的替代文本对搜索引擎和屏幕阅读器同样有用。
交付了哪些内容。
- 首页
- 折叠刀
- 餐刀
- 蒂耶尔工坊
- 塞里耶尔展厅
- 联系我们
项目的推进过程。
摄影指导
微距拍摄规范：每款三个部位，光线恒定。
内容
材料、尺寸、刀具行业术语。
设计
格式统一的产品页，精心呈现的展厅。
开发
带类型的产品目录、渐进式图片、Product 结构化标记。
