Kayzen Web
公司的网站是它的第一个案例：它所受的审核比客户网站更严格。
- 年份
- 2026
- 制作周期
- 持续优化
- 技术栈
- React · Vite · Tailwind · TypeScript · Vercel
- 策略
- 设计系统
- 开发
- SEO
- 无障碍
- 文案撰写
- Lighthouse 无障碍
- 100/100
- Lighthouse SEO
- 100/100
- 条构建时预渲染的路由
- 79
- 个有据可查的项目，每个都附有案例研究
- 37
需要解决的问题。
背景
kayzen-lyon.com 是我们这家网站设计公司自己的门面：79 条预渲染路由，其中包括 21 个服务页面、4 个地区页面、一份公开的价格表、一份更新日志、一个技术栈页面和一套开放的设计系统。
限制
一家网站建设公司，在别人看它的作品之前，先会被它自己的网站评判。任何一点瑕疵——平庸的性能分数、不达标的对比度、无效的结构化数据——都会成为反对它的理由。因此，网站必须经得起挑剔的潜在客户的技术审视。
对策
我们公开了同行们通常隐藏的内容：价格、技术栈、设计系统，以及一份列出网站自身修正记录的更新日志。透明有两个作用——它让潜在客户安心，也迫使我们始终保持水准。
交付时测得的评分。
以下为线上网站的Lighthouse评分。我们如实公布：若某项分数偏低，其原因与改进计划会在下文写明，而不是避而不谈。
每一个设计取舍，及其理由。
有文档、公开的设计系统
颜色 token、流式字号比例、四级阴影、统一的垂直节奏。/design-system 页面把它们全部公开。看得见的系统，才是不会走样的系统。
所有对比度都经过测量
每一组颜色搭配都经过计算。表单字段边框达到 3:1，焦点环与操作色解耦，以便在彩色按钮上依然清晰可见；文字渐变被移除，改用纯色。
只有入场动画
除加载指示器外，没有任何无限循环动画：它们会持续消耗 GPU 和电量，还会引起前庭不适。系统的“减少动态效果”偏好设置得到严格遵守。
项目配色
藏青
#1F3B61
标题、结构
赤陶色
#B7481F
行动——白底对比度 5.3:1
白
#FFFFFF
页面底色
冷灰
#F8FAFC
交替区块
字体系统
标题字体
Outfit 800
正文字体
Plus Jakarta Sans 400
两款自托管的可变字体，采用 font-display: optional——加载时不产生任何布局偏移。
幕后的技术实现。
- React
- Vite
- Tailwind
- TypeScript
- Vercel
所有路由在构建时预渲染
单页应用（SPA）会向所有 URL 返回同一份 HTML：对于任何不执行 JavaScript 的爬虫来说，各页面的元数据都是不可见的。预渲染脚本会访问每一条路由，并写出一个完整的 HTML 文件——标题、描述、canonical、Open Graph、JSON-LD。
一有缺陷，构建即失败
如果某条路由缺少元数据、404 页面丢失了 noindex、某张图片超过 1440 px、CSP 已过时，或者生成的 HTML 中出现“à compléter”（待补充）字样，构建都会失败。防护机制胜过人的警觉。
按路由拆分代码
每个页面都是一个独立的 chunk，首页也不例外。法律声明页面没有任何理由去下载首页的动画库。
网站如何被搜索到。
每种意图一个入口
17 个服务页面和 4 个地区页面，各自瞄准一个不同的搜索词。没有任何一个页面是另一个页面的关键词变体：它们是不同的内容。
一致的结构化数据
Organization、LocalBusiness、ProfessionalService、WebSite、WebPage 和 BreadcrumbList，全部通过 @id 相互关联。相互矛盾的重复项已被删除——同一个 URL 上两条互相冲突的面包屑，比没有面包屑好不了多少。
不自我评分
aggregateRating 已被移除：Google 的指南禁止企业给自己打分，这样做有遭受人工处罚的风险。我们宁可失去星级，也不愿失去域名。
人人都能使用。
自2025年6月起，《欧洲无障碍法案》（European Accessibility Act）要求大量在线服务实现数字无障碍。我们在设计阶段就着手处理，而非事后补救。
Lighthouse 100/100，外加人工审计
跳转链接、每次路由切换时焦点都会移动并被播报、44 px 的触控目标，以及在专门面板中提供的高对比度模式、OLED 模式和适合阅读障碍者的字体。
交付了哪些内容。
- 首页
- 17 个服务页面
- 4 个地区页面
- 作品集与 37 篇案例研究
- 价格、补贴、测评问卷、预约
- 技术栈、设计系统、更新日志
- 法律页面
项目的推进过程。
设计系统
Token、对比度、字号比例、阴影。
内容
17 项服务、4 个区域、公开价格。
技术 SEO
预渲染、结构化数据、站点地图、构建防护机制。
持续优化
历次审计均记录在公开的更新日志中。
