Art Scénic
免费试听课就是核心产品：整个网站都为引导用户走向它而构建。
- 年份
- 2026
- 制作周期
- 3 周
- 技术栈
- React · Vite · Tailwind · Framer Motion · Vercel
- 设计
- 开发
- 转化漏斗
- 本地 SEO
由Kayzen Web上线在Vercel地址上的演示版本；正式域名归客户所有。
- Lighthouse 性能
- 97/100
- 唯一的行动号召
- 1
- 个字段即可预约试课
- 4
需要解决的问题。
背景
L'Art-Scénic 是位于埃屈利（Écully）的一家剧团，由 Anne Kravz-Tarnavsky 创立，提供演出以及面向儿童和成人的戏剧工作坊。
限制
工作坊的报名集中在九月的三周内。一年中的其余时间，网站需要维持知名度。真正促成报名的既不是价格，也不是课程内容，而是试课——它能消除人们对登台的畏惧。
对策
免费试课成为网站唯一的行动目标。一切都指向它：首页、每个工作坊页面、图库。表单很短，并直接提供可选时段。演出排期依然保留，但退居次要位置。
交付时测得的评分。
以下为线上网站的Lighthouse评分。我们如实公布：若某项分数偏低，其原因与改进计划会在下文写明，而不是避而不谈。
每一个设计取舍，及其理由。
处处只有一个行动
“预约免费试课”是网站唯一的行动号召。相互竞争的按钮越多，注意力就越分散，转化率也随之下降。
儿童与成人工作坊分开
两类受众，两种顾虑，两套说服逻辑。家长为孩子报名；成人为自己报名——后者的决定要困难得多，需要换一种说法。
图库展示的是业余学员
照片展示的是工作坊中的学员，而不是专业演员。正是“我也可以”的代入感促成了报名。
项目配色
丝绒红
#5B2233
品牌识别
沙色
#F4EDE3
背景
墨色
#1E1A1B
正文
黄铜
#B08D4A
强调色
字体系统
标题字体
Cormorant Garamond 600
正文字体
Inter 400
有戏剧感而不浮夸：剧团面向的是业余爱好者，而不是剧评人。
幕后的技术实现。
- React
- Vite
- Tailwind
- Framer Motion
- Vercel
带动画仍拿到 97 的性能分
Framer Motion 只在有动画的页面加载；如果用户设置了减少动态效果，所有动画都会被关闭。
极简试课表单
名字、联系方式、期望时段、工作坊。四个字段：如果再询问年龄、水平和动机，报名就会变成填写档案。
网站如何被搜索到。
“Cours de théâtre Écully”（埃屈利 戏剧课）、“atelier théâtre enfant ouest lyonnais”（里昂西部 儿童戏剧工作坊）
本地就近类搜索，在八九月出现非常明显的高峰。相关页面早在报名季之前就已准备就绪。
Course 与 Event 结构化标记
工作坊标记为带课表的 Course；演出标记为带日期的 Event。两种不同的现实，两种不同的类型。
交付了哪些内容。
- 首页——试课
- 儿童工作坊
- 成人工作坊
- 演出
- 图库
- 剧团简介
- 预约试课
项目的推进过程。
分析
确认试课是唯一的报名触发点。
设计
单一行动、两类工作坊受众、业余学员图库。
开发
按需加载动画，四字段表单。
SEO
本地就近搜索，Course 与 Event 结构化标记。
