Chez Mounier
一家始于1985年的bouchon：网站看起来也要像已经在那里存在了同样久。
- 年份
- 2026
- 制作周期
- 2 周
- 技术栈
- React · Vite · Tailwind · Vercel
- 设计
- 开发
- 本地 SEO
- 文案撰写
由Kayzen Web上线在Vercel地址上的演示版本；正式域名归客户所有。
- 开业年份
- 1985
- 代传承
- 3
- Lighthouse 无障碍与 SEO
- 100/100
需要解决的问题。
背景
Chez Mounier 是位于里昂二区栗树街（rue des Marronniers）的一家家庭经营的里昂传统小馆（bouchon），1985 年开业，已传承三代。菜品全部自制：梭鱼丸（quenelle）、“工兵围裙”（tablier de sapeur，香煎牛肚）、里昂沙拉。
限制
Bouchon 是一种有固定规矩的餐馆类型，它的客人对新东西心存戒备。过于现代的网站会显得格格不入——甚至让人怀疑菜品是否地道。网站需要在技术上与时俱进，在外观上历久弥新。
对策
地道要靠细节来证明：菜单逐道注明哪些是自制的，“关于我们”页面用具体年份讲述三代人的故事，订位依然通过电话——因为这家餐厅就是这样运作的。一家会接电话的店，没必要强加一个表单。
交付时测得的评分。
以下为线上网站的Lighthouse评分。我们如实公布：若某项分数偏低，其原因与改进计划会在下文写明，而不是避而不谈。
每一个设计取舍，及其理由。
格纹桌布，但不刻意模仿
深红、米白，区块背景使用若隐若现的纹样。Bouchon 的视觉符号被引用，但绝不照搬——刻意模仿一眼就能看出，只会适得其反。
逐道菜注明自制
每道现场制作的菜都有标注。这是 bouchon 相对于那些加热预制菜的餐馆的核心卖点，必须能逐行核实。
以电话为主要操作
致电按钮排在第一位，在移动端常驻显示。加一个在线订位模块，就会开辟一个店家不会去查看的渠道——对客人来说，这是最糟糕的情形。
项目配色
小馆红
#8C2E2E
品牌识别
米白
#F7F3EC
背景
墨色
#231F1D
正文
橄榄绿
#5E6440
次要区块
字体系统
标题字体
Bitter 700
正文字体
Inter 400
标题采用温暖的粗衬线（slab serif）字体——有小黑板菜单般的易读性——菜单则使用中性的无衬线字体。
幕后的技术实现。
- React
- Vite
- Tailwind
- Vercel
静态网站，免费托管
没有应用服务器，没有数据库。每年的运行成本只有域名费用。
带类型的菜单
菜品、价格和“自制”标注存放在一个数据文件中。季节性更新无需改动 HTML。
网站如何被搜索到。
“Bouchon lyonnais rue des Marronniers”（栗树街 里昂传统小馆）
栗树街本身就是一个目的地。瞄准街道而不是城市，就能在方圆两百米内捕捉到即时选择的意图。
特色菜被索引
“Quenelle maison Lyon”（里昂 自制梭鱼丸）、“tablier de sapeur”（工兵围裙）：每道特色菜都在结构化内容中被点名。这些是游客在规划用餐时的搜索。
人人都能使用。
自2025年6月起，《欧洲无障碍法案》（European Accessibility Act）要求大量在线服务实现数字无障碍。我们在设计阶段就着手处理，而非事后补救。
纹理背景下仍达 100/100
背景纹样经过充分淡化，所有文字都保持 4.5:1 的对比度。装饰性纹样绝不应以牺牲一分对比度为代价。
交付了哪些内容。
- 首页
- 菜单
- 餐馆历史（始于 1985 年）
- 交通与营业时间
- 订位（电话）
项目的推进过程。
调性
引用 bouchon 的符号而不刻意模仿，使用店家自己的语言。
内容
标注自制的菜单，三代人的故事。
开发
静态网站、带类型的菜单、以致电为主要操作。
