La Raffinerie
两家门店，一个品牌：网站要同时服务两者，又不能稀释任何一家。
- 年份
- 2026
- 制作周期
- 4 周
- 技术栈
- React · Vite · Tailwind · Framer Motion · Vercel
- 设计
- 开发
- 多门店本地 SEO
- 文案撰写
由Kayzen Web上线在Vercel地址上的演示版本；正式域名归客户所有。
- 家门店，一个域名
- 2
- Lighthouse 性能
- 95/100
- Lighthouse 无障碍
- 100/100
需要解决的问题。
背景
La Raffinerie 是一家精酿啤酒、西班牙小吃（tapas）和鸡尾酒酒吧，在里昂有两家门店：萨克斯（Saxe，里昂三区）和沃伊斯（Vaise，里昂九区）。
限制
两家门店带来一个典型的本地 SEO 难题：要么建两个网站，分散域名权重；要么只建一个，结果在街区级搜索中隐身。此外，啤酒酒单不断轮换，而顾客常常不知道该选什么。
对策
一个域名，每家门店一个专属页面，各自拥有完整的门店信息和独立的结构化标记。啤酒酒单变成一份品鉴指南：每款啤酒都标明风格、苦度、酒精度，并推荐一道搭配的小吃。我们不是在罗列，而是在推荐。
交付时测得的评分。
以下为线上网站的Lighthouse评分。我们如实公布：若某项分数偏低，其原因与改进计划会在下文写明，而不是避而不谈。
每一个设计取舍，及其理由。
是指南，而不是清单
按风格和苦度筛选，每款啤酒都附有推荐的小吃搭配。在四十款酒之间犹豫不决的顾客，最后要么点他常点的那款——要么什么都不点。
每家门店都有自己的个性
萨克斯店和沃伊斯店各有专属的照片、氛围和营业时间，建立在统一的视觉基础之上。两个一模一样的双胞胎页面，无论访客还是 Google，都会视为凑数的内容。
为质感服务的动效
入场动画突出材质感——泡沫、铜器、石板。如果用户设置了减少动态效果，动画将完全消失。
项目配色
石板灰
#22262B
主背景
铜色
#C0763C
行动、强调色
泡沫白
#EFE6D4
正文、浅色表面
啤酒花绿
#6C7A3F
风格标签
字体系统
标题字体
Bebas Neue
正文字体
Inter 400
标题采用窄体大写字母——精酿酒馆的调性——并以在品鉴卡片上极易阅读的无衬线字体加以平衡。
幕后的技术实现。
- React
- Vite
- Tailwind
- Framer Motion
- Vercel
酒单是数据，而不是 HTML
啤酒和小吃存放在一个带类型的数据文件中。新增一款酒，既不用改动页面标记，也不会冒着破坏版式的风险。
有节制的动画
Framer Motion 只由真正需要动画的页面加载。信息类页面（交通、营业时间）一行动画代码都不下载。
网站如何被搜索到。
两份独立的 LocalBusiness 资料
每家门店都有自己的节点，包含地址、地理坐标和营业时间。如果两个地址共用一个区块，Google 就无法正确关联两份商家资料。
街区级搜索
“Bar à bières Saxe”（萨克斯 啤酒吧）、“bar Vaise Lyon 9”（里昂九区 沃伊斯 酒吧），而不是“bar Lyon”（里昂 酒吧）。街区页面能在品牌页面无法覆盖的搜索词上胜出。
可被索引的品鉴内容
啤酒介绍页回应真实的搜索（“bière IPA amère Lyon”（里昂 苦味 IPA 啤酒）、“accord tapas bière ambrée”（琥珀啤酒 小吃搭配）），带来仅靠门店地址无法获得的探索型流量。
人人都能使用。
自2025年6月起，《欧洲无障碍法案》（European Accessibility Act）要求大量在线服务实现数字无障碍。我们在设计阶段就着手处理，而非事后补救。
带交互式筛选器仍达 100/100
筛选器是原生按钮，按下状态会被朗读；每次更改后，结果数量都会在 live region 中播报。
交付了哪些内容。
- 首页
- 萨克斯店（里昂三区）——完整信息
- 沃伊斯店（里昂九区）——完整信息
- 啤酒指南
- 小吃与鸡尾酒
- 联系我们
项目的推进过程。
多门店策略
权衡一个域名 / 两个页面，按门店做结构化标记。
品鉴内容
风格、苦度、搭配：酒单变成指南。
设计
统一基础，各店个性。
开发
带类型的数据，按需加载的动画。
