文化与戏剧

Compagnie l'Entr'Axes

性能98分:剧团没有预算养一个慢网站。

年份
2026
制作周期
3 周
技术栈
Next.js · React · Tailwind · TypeScript · Vercel
  • 设计
  • 开发
  • 本地 SEO
  • 文案撰写
网站已交付——即将在该剧团的域名下上线
Compagnie l'Entr'Axes网站首页——文化与戏剧,由Kayzen Web制作
Lighthouse 性能
98/100
年度托管费用
0 欧元
剧团成立年份
2009
出发点

需要解决的问题。

背景

La Compagnie l'Entr'Axes 是里昂的一个业余剧团,自 2009 年起由 Agnès Faye 领导:演出、工作坊、保留剧目。

限制

业余剧团既没有维护预算,也没有网站管理员。网站必须能独自运行好几个月,在演出日期不断变化的情况下保持更新,还要让人产生订票的冲动——而且不能有任何持续性成本。

对策

静态渲染、免费托管、内容存放在易读的数据文件中。演出排期使用真实日期:已结束的演出会自动转入保留剧目,而不会一直显示为“即将上演”。网站不可能在无人干预的情况下变得过时。

实测,而非自称

交付时测得的评分。

以下为线上网站的Lighthouse评分。我们如实公布:若某项分数偏低,其原因与改进计划会在下文写明,而不是避而不谈。

PageSpeed
98
性能:98分(满分100分)
94
无障碍:94分(满分100分)
100
最佳做法:100分(满分100分)
100
搜索引擎优化:100分(满分100分)
设计与艺术指导

每一个设计取舍,及其理由。

  1. 戏剧化的视觉语域

    高对比度衬线字体、深黑、幕布红。戏剧有着强烈的视觉符号;为了通用设计而忽略它们,会让剧场失去自己的身份。

  2. 演出排期放在最前面

    近期演出日期排在剧团介绍之前。访问剧团网站的人想知道演什么、什么时候演;剧团的历史,他们随后才会感兴趣。

  3. 工作坊作为第二支柱

    工作坊与演出同样是剧团的生命线。它们拥有自己的页面,写明时段、价格和报名方式——而不只是“关于我们”页面里的一行字。

项目配色

  • 舞台黑

    #141013

    背景

  • 幕布红

    #A32639

    品牌识别、强调色

  • 象牙白

    #F3EEE7

    正文

  • 聚光金

    #C9A24B

    细节点缀

字体系统

标题字体

Playfair Display 700

正文字体

Inter 400

迪多内(Didone)风格衬线体用于海报感标题,无衬线体用于演出排期。日期采用等宽数字,在日历中保持对齐。

工程

幕后的技术实现。

  • Next.js
  • React
  • Tailwind
  • TypeScript
  • Vercel
  1. 演出日期自动切换

    每场演出都带有自己的日期。最后一场演出结束后,它会自动离开演出排期、进入保留剧目,无需任何人工操作。正是这一点,让一个没有管理员的网站始终保持准确。

  2. 性能得分 98

    静态网站、两款自托管字体、不使用任何动画库、图片尺寸精确设定。以最低的预算,拿下了作品集中最高的性能分数。

  3. 零运行成本

    没有应用服务器,没有数据库,免费托管。对一个协会来说,网站能否长久存续,首先取决于它的成本。

搜索引擎优化

网站如何被搜索到。

  1. 带日期的 Event 结构化标记

    每场演出都带有一个 Event 节点,包含日期、地点和订票链接。正是它让演出得以出现在活动类搜索结果中。

  2. 休闲出行类搜索

    “Théâtre amateur Lyon”(里昂 业余剧团)、“spectacle Lyon ce week-end”(里昂 本周末演出)、“atelier théâtre adulte Lyon”(里昂 成人戏剧工作坊)。三种不同意图,三个页面。

无障碍

人人都能使用。

自2025年6月起,《欧洲无障碍法案》(European Accessibility Act)要求大量在线服务实现数字无障碍。我们在设计阶段就着手处理,而非事后补救。

  1. 黑色背景上的对比度经过核验

    得分 94:深黑背景上的幕布红已调亮,使正文文字达到 4.5:1 的对比度。剩余扣分项涉及已明确识别的装饰性元素。

网站结构

交付了哪些内容。

  • 首页
  • 演出排期
  • 保留剧目
  • 工作坊
  • 剧团简介
  • 订票
  • 联系我们
方法

项目的推进过程。

  1. 约束条件

    没有任何维护预算:网站必须能自动保持更新。

  2. 设计

    戏剧化视觉语域,演出排期置顶。

  3. 开发

    静态网站、日期自动切换、免费托管。

  4. SEO

    Event 结构化标记,三组搜索词。

问答

客户常问的问题。

与其依赖人的细心,不如让内容过时变得不可能。日期只需录入一次,演出就会自动从排期转入保留剧目。唯一剩下的工作,是添加下一个演出季。

同样严格的标准,用于您的网站。

免费审核您现有的网站,24小时内报价,并附上书面分析——就像您刚刚读到的这篇。可分三期免息付款;可申请的地方补贴在签约前核实。

分享