Kayzen Web
La web de la agencia es su primera referencia: se audita con más rigor que las de los clientes.
- Año
- 2026
- Diseño
- mejora continua
- Stack
- React · Vite · Tailwind · TypeScript · Vercel
- Estrategia
- Design system
- Desarrollo
- SEO
- Accesibilidad
- Redacción
- accesibilidad Lighthouse
- 100/100
- SEO Lighthouse
- 100/100
- rutas prerrenderizadas en el build
- 79
- proyectos documentados, cada uno con su caso de estudio
- 37
Lo que había que resolver.
El contexto
kayzen-lyon.com es el escaparate de la agencia: 79 rutas prerrenderizadas, entre ellas 21 páginas de servicio, 4 páginas geográficas, una tabla de tarifas pública, un changelog, una página de stack técnico y un design system abierto.
La limitación
Una agencia web se juzga por su propio sitio antes que por sus trabajos. El menor defecto (una puntuación de rendimiento mediocre, un contraste insuficiente, un dato estructurado no válido) se convierte en un argumento en su contra. El sitio tenía que resistir, por tanto, la inspección técnica de un cliente potencial exigente.
La respuesta
Hicimos públicos los elementos que las agencias esconden: las tarifas, el stack, el design system y un changelog que enumera las correcciones hechas al propio sitio. La transparencia cumple dos funciones: tranquiliza al cliente potencial y nos obliga a mantener el nivel.
Las puntuaciones registradas en la entrega.
Puntuaciones Lighthouse del sitio en producción. Las publicamos tal cual: cuando una es baja, su causa y su plan de corrección se explican más abajo en lugar de silenciarse.
Cada decisión de diseño, y su porqué.
Un design system documentado y público
Tokens de color, escala tipográfica fluida, cuatro niveles de sombra, un único ritmo vertical. La página /design-system los expone. Un sistema visible es un sistema que no deriva.
Todo el contraste medido
Se calculó cada par de colores. Los bordes de los campos alcanzan 3:1, el anillo de foco está desacoplado del color de acción para seguir siendo visible sobre un botón de color, y los degradados de texto se sustituyeron por colores planos.
Solo animaciones de entrada
Ningún bucle infinito salvo el indicador de carga: coste permanente de GPU, batería y molestias vestibulares. La preferencia del sistema de movimiento reducido se respeta estrictamente.
Paleta del proyecto
Azul marino
#1F3B61
Títulos, estructura
Terracota
#B7481F
Acción — 5,3:1 sobre blanco
Blanco
#FFFFFF
Superficie de página
Gris frío
#F8FAFC
Secciones alternas
Sistema tipográfico
Titulares
Outfit 800
Texto de lectura
Plus Jakarta Sans 400
Dos familias variables autoalojadas, con font-display: optional: ningún desplazamiento de la maquetación durante la carga.
Lo que hay bajo el capó.
- React
- Vite
- Tailwind
- TypeScript
- Vercel
Todas las rutas prerrenderizadas en el build
Una SPA sirve el mismo HTML a todas las URL: los metadatos de cada página son invisibles para cualquier robot que no ejecute JavaScript. Un script de prerrenderizado visita cada ruta y escribe un archivo HTML completo: título, descripción, canónica, Open Graph, JSON-LD.
El build se niega a pasar si hay un defecto
El build falla si una ruta no tiene metadatos, si la página 404 pierde su noindex, si una imagen supera los 1440 px, si la CSP está desactualizada o si una mención «pendiente de completar» llega al HTML generado. Las salvaguardas valen más que la vigilancia.
División por ruta
Cada página es un chunk separado, incluida la de inicio. Una página de aviso legal no tiene ningún motivo para descargar la librería de animación de la página de inicio.
Cómo se hace encontrar la web.
Una entrada por intención
17 páginas de servicio y 4 páginas geográficas, cada una dirigida a una búsqueda distinta. Ninguna es una variante de palabras clave de otra: son contenidos diferentes.
Datos estructurados coherentes
Organization, LocalBusiness, ProfessionalService, WebSite, WebPage y BreadcrumbList, todos vinculados por @id. Se eliminaron los duplicados contradictorios: dos migas de pan que compiten en una misma URL valen más que ninguna, pero por poco.
Ninguna valoración autoatribuida
Se retiró el aggregateRating: las valoraciones que una empresa se atribuye a sí misma están prohibidas por las directrices de Google y exponen a una acción manual. Preferimos perder la estrella que el dominio.
Utilizable por todo el mundo.
Desde junio de 2025, la Ley Europea de Accesibilidad (European Accessibility Act) exige la accesibilidad digital a buena parte de los servicios en línea. La abordamos desde el diseño, no como un parche posterior.
100/100 en Lighthouse, y una auditoría manual
Enlace para saltar al contenido, foco desplazado y anunciado en cada cambio de ruta, áreas táctiles de 44 px, modo de alto contraste, modo OLED y tipografía adaptada a la dislexia disponibles en un panel propio.
Lo que se entregó.
- Inicio
- 17 páginas de servicio
- 4 páginas geográficas
- Portfolio y 37 casos de estudio
- Tarifas, ayudas, cuestionario, cita
- Stack, design system, changelog
- Páginas legales
El desarrollo del proyecto.
Design system
Tokens, contrastes, escala tipográfica, sombras.
Contenido
17 servicios, 4 zonas, tarifas públicas.
SEO técnico
Prerrenderizado, datos estructurados, sitemap, salvaguardas en el build.
Mejora continua
Auditorías sucesivas registradas en el changelog público.
Lo que nos preguntan a menudo.
Otros proyectos
Cumplimiento del RGPD y SaaSKonsent by Kayzen
Un proveedor de banners que audita banners es juez y parte: la independencia era el producto.
Ciberseguridad ofensiva y SaaSSentinel by Kayzen
Vender un producto de seguridad a ingenieros: cada afirmación tenía que poder demostrarse.
Datos y servicio meteorológicoMétéo Climat France
358 páginas indexables, un mapa animado sobre 72 horizontes de previsión y ni una sola línea de framework.
El mismo nivel de exigencia, para su web.
Auditoría gratuita de su web actual, presupuesto en 24 horas y un razonamiento por escrito, como el que acaba de leer. Pago en tres plazos sin intereses; ayudas locales verificadas antes de la firma.