Kayzen Web
Le site de l'agence est sa première référence : il est audité plus sévèrement que ceux des clients.
- Année
- 2026
- Conception
- amélioration continue
- Stack
- React · Vite · Tailwind · TypeScript · Vercel
- Stratégie
- Design system
- Développement
- SEO
- Accessibilité
- Rédaction
- accessibilité Lighthouse
- 100/100
- SEO Lighthouse
- 100/100
- routes prérendues au build
- 79
- réalisations documentées, chacune avec son étude de cas
- 37
Ce qu'il fallait résoudre.
Le contexte
kayzen-lyon.com est la vitrine de l'agence : 79 routes prérendues, dont 21 pages de service, 4 pages géographiques, une grille tarifaire publique, un changelog, une page de stack technique et un design system ouvert.
La contrainte
Une agence web est jugée sur son propre site avant de l'être sur ses réalisations. Le moindre défaut — un score de performance moyen, un contraste insuffisant, une donnée structurée invalide — devient un argument contre elle. Le site devait donc supporter l'inspection technique d'un prospect exigeant.
La réponse
Nous avons rendu publics les éléments que les agences cachent : les tarifs, la stack, le design system, et un changelog qui liste les corrections apportées au site lui-même. La transparence sert deux fins — elle rassure le prospect, et elle nous oblige à tenir le niveau.
Les scores relevés à la livraison.
Scores Lighthouse du site en production. Nous les publions tels quels : quand l'un d'eux est bas, sa cause et son plan de correction sont écrits plus bas plutôt que passés sous silence.
Chaque parti pris, et sa raison.
Un design system documenté et public
Tokens de couleur, échelle typographique fluide, quatre niveaux d'ombre, rythme vertical unique. La page /design-system les expose. Un système visible est un système qui ne dérive pas.
Tout le contraste mesuré
Chaque paire de couleurs a été calculée. Les bordures de champ atteignent 3:1, l'anneau de focus est découplé de la couleur d'action pour rester visible sur un bouton coloré, et les dégradés de texte ont été supprimés au profit d'aplats.
Animations d'entrée seulement
Aucune boucle infinie hors indicateur de chargement : coût GPU permanent, batterie, et gêne vestibulaire. La préférence système de mouvement réduit est respectée strictement.
Palette du projet
Navy
#1F3B61
Titres, structure
Terracotta
#B7481F
Action — 5,3:1 sur blanc
Blanc
#FFFFFF
Surface de page
Gris froid
#F8FAFC
Sections alternées
Système typographique
Titrage
Outfit 800
Texte courant
Plus Jakarta Sans 400
Deux familles variables auto-hébergées, en font-display: optional — aucun décalage de mise en page au chargement.
Ce qu'il y a sous le capot.
- React
- Vite
- Tailwind
- TypeScript
- Vercel
Toutes les routes prérendues au build
Une SPA sert le même HTML à toutes les URL : les métadonnées par page sont invisibles pour tout robot qui n'exécute pas JavaScript. Un script de prérendu visite chaque route et écrit un fichier HTML complet — titre, description, canonique, Open Graph, JSON-LD.
Le build refuse de passer sur défaut
Le build échoue si une route n'a pas de métadonnées, si la page 404 perd son noindex, si un visuel dépasse 1440 px, si la CSP est périmée, ou si une mention « à compléter » atteint le HTML produit. Les garde-fous valent mieux que la vigilance.
Découpage par route
Chaque page est un chunk séparé, y compris l'accueil. Une page de mentions légales n'a aucune raison de télécharger la bibliothèque d'animation de la page d'accueil.
Comment le site se rend trouvable.
Une entrée par intention
17 pages de service et 4 pages géographiques, chacune ciblant une requête distincte. Aucune n'est une variante de mots-clés d'une autre : ce sont des contenus différents.
Données structurées cohérentes
Organization, LocalBusiness, ProfessionalService, WebSite, WebPage et BreadcrumbList, tous liés par @id. Les doublons contradictoires ont été supprimés — deux fils d'Ariane concurrents sur une même URL valent mieux qu'aucun, mais de peu.
Aucune note auto-attribuée
L'aggregateRating a été retiré : les notes qu'une entreprise s'attribue sont interdites par les consignes Google et exposent à une action manuelle. Nous préférons perdre l'étoile que le domaine.
Utilisable par tout le monde.
Depuis juin 2025, l'European Accessibility Act impose l'accessibilité numérique à une large part des services en ligne. Nous la traitons à la conception, pas en rattrapage.
100/100 Lighthouse, et un audit manuel
Lien d'évitement, focus déplacé et annoncé à chaque changement de route, cibles tactiles à 44 px, mode contraste renforcé, mode OLED et police adaptée à la dyslexie proposés dans un panneau dédié.
Ce qui a été livré.
- Accueil
- 17 pages de service
- 4 pages géographiques
- Portfolio et 37 études de cas
- Tarifs, aides, quiz, rendez-vous
- Stack, design system, changelog
- Pages légales
Le déroulé du projet.
Design system
Tokens, contrastes, échelle typographique, ombres.
Contenu
17 services, 4 zones, tarifs publics.
SEO technique
Prérendu, données structurées, sitemap, garde-fous de build.
Amélioration continue
Audits successifs consignés dans le changelog public.
Ce qu'on nous demande souvent.
D'autres réalisations
Conformité RGPD & SaaSKonsent by Kayzen
Un éditeur de bandeau qui audite les bandeaux est juge et partie : l'indépendance était le produit.
Cybersécurité offensive & SaaSSentinel by Kayzen
Vendre un produit de sécurité à des ingénieurs : chaque affirmation devait être démontrable.
Data & Service météoMétéo Climat France
358 pages indexables, une carte animée sur 72 échéances — et pas une seule ligne de framework.
Le même niveau d'exigence, pour votre site.
Audit gratuit de votre site actuel, devis sous 24 h et un raisonnement écrit — comme celui que vous venez de lire. Paiement en trois fois sans frais, aides locales vérifiées avant signature.