Kayzen Web
Il sito dell'agenzia è la sua prima referenza: viene verificato con più severità di quelli dei clienti.
- Anno
- 2026
- Progettazione
- miglioramento continuo
- Stack
- React · Vite · Tailwind · TypeScript · Vercel
- Strategia
- Design system
- Sviluppo
- SEO
- Accessibilità
- Copywriting
- accessibilità Lighthouse
- 100/100
- SEO Lighthouse
- 100/100
- route prerenderizzate al build
- 79
- lavori documentati, ciascuno con il suo caso studio
- 37
Cosa c'era da risolvere.
Il contesto
kayzen-lyon.com è la vetrina dell'agenzia: 79 route prerenderizzate, tra cui 21 pagine di servizio, 4 pagine geografiche, un listino prezzi pubblico, un changelog, una pagina sullo stack tecnico e un design system aperto.
Il vincolo
Un'agenzia web viene giudicata dal proprio sito prima che dai suoi lavori. Il minimo difetto (un punteggio di performance mediocre, un contrasto insufficiente, un dato strutturato non valido) diventa un argomento contro di lei. Il sito doveva quindi reggere l'ispezione tecnica di un potenziale cliente esigente.
La risposta
Abbiamo reso pubblici gli elementi che le agenzie nascondono: i prezzi, lo stack, il design system e un changelog che elenca le correzioni apportate al sito stesso. La trasparenza serve a due scopi: rassicura il potenziale cliente e ci obbliga a mantenere il livello.
I punteggi rilevati alla consegna.
Punteggi Lighthouse del sito in produzione. Li pubblichiamo così come sono: quando uno è basso, la causa e il piano di correzione sono spiegati più sotto invece di essere taciuti.
Ogni scelta di design, e il suo perché.
Un design system documentato e pubblico
Token di colore, scala tipografica fluida, quattro livelli d'ombra, un unico ritmo verticale. La pagina /design-system li espone. Un sistema visibile è un sistema che non deriva.
Tutto il contrasto misurato
Ogni coppia di colori è stata calcolata. I bordi dei campi raggiungono 3:1, l'anello di focus è separato dal colore d'azione per restare visibile su un pulsante colorato, e le sfumature sui testi sono state eliminate a favore di tinte piatte.
Solo animazioni d'ingresso
Nessun ciclo infinito tranne l'indicatore di caricamento: costo GPU permanente, batteria e disturbo vestibolare. La preferenza di sistema per il movimento ridotto è rispettata rigorosamente.
Palette del progetto
Navy
#1F3B61
Titoli, struttura
Terracotta
#B7481F
Azione — 5,3:1 su bianco
Bianco
#FFFFFF
Superficie di pagina
Grigio freddo
#F8FAFC
Sezioni alternate
Sistema tipografico
Titoli
Outfit 800
Testo corrente
Plus Jakarta Sans 400
Due famiglie variabili in self-hosting, con font-display: optional: nessuno spostamento del layout al caricamento.
Cosa c'è sotto il cofano.
- React
- Vite
- Tailwind
- TypeScript
- Vercel
Tutte le route prerenderizzate al build
Una SPA serve lo stesso HTML a tutti gli URL: i metadati di ogni pagina sono invisibili per qualsiasi robot che non esegue JavaScript. Uno script di prerendering visita ogni route e scrive un file HTML completo: titolo, descrizione, canonical, Open Graph, JSON-LD.
Il build si rifiuta di passare in caso di difetti
Il build fallisce se una route non ha metadati, se la pagina 404 perde il noindex, se un'immagine supera i 1440 px, se la CSP è scaduta, o se una dicitura «da completare» arriva nell'HTML prodotto. I controlli automatici valgono più della vigilanza.
Suddivisione per route
Ogni pagina è un chunk separato, home compresa. Una pagina di note legali non ha alcun motivo di scaricare la libreria di animazione della home.
Come il sito si fa trovare.
Un ingresso per ogni intenzione
17 pagine di servizio e 4 pagine geografiche, ciascuna mirata a una ricerca distinta. Nessuna è una variante di parole chiave di un'altra: sono contenuti diversi.
Dati strutturati coerenti
Organization, LocalBusiness, ProfessionalService, WebSite, WebPage e BreadcrumbList, tutti collegati tramite @id. I duplicati contraddittori sono stati eliminati: due breadcrumb concorrenti sullo stesso URL sono meglio di nessuno, ma di poco.
Nessuna valutazione autoattribuita
L'aggregateRating è stato rimosso: le valutazioni che un'azienda si attribuisce da sola sono vietate dalle linee guida di Google ed espongono a un'azione manuale. Preferiamo perdere la stellina che il dominio.
Utilizzabile da tutti.
Da giugno 2025 l'Atto europeo sull'accessibilità (European Accessibility Act) impone l'accessibilità digitale a una larga parte dei servizi online. La affrontiamo in fase di progettazione, non come rimedio a posteriori.
100/100 Lighthouse, più un audit manuale
Link per saltare al contenuto, focus spostato e annunciato a ogni cambio di route, aree tattili di 44 px, modalità ad alto contrasto, modalità OLED e font adatto alla dislessia proposti in un pannello dedicato.
Cosa è stato consegnato.
- Home
- 17 pagine di servizio
- 4 pagine geografiche
- Portfolio e 37 casi studio
- Prezzi, agevolazioni, quiz, appuntamenti
- Stack, design system, changelog
- Pagine legali
Lo svolgimento del progetto.
Design system
Token, contrasti, scala tipografica, ombre.
Contenuti
17 servizi, 4 zone, prezzi pubblici.
SEO tecnica
Prerendering, dati strutturati, sitemap, controlli automatici al build.
Miglioramento continuo
Audit successivi registrati nel changelog pubblico.
Cosa ci chiedono spesso.
Altri lavori
Conformità GDPR e SaaSKonsent by Kayzen
Un fornitore di banner che verifica i banner è giudice e parte: l'indipendenza era il prodotto.
Sicurezza offensiva e SaaSSentinel by Kayzen
Vendere un prodotto di sicurezza agli ingegneri: ogni affermazione doveva essere dimostrabile.
Dati e servizio meteoMétéo Climat France
358 pagine indicizzabili, una mappa animata su 72 scadenze e nemmeno una riga di framework.
Lo stesso livello di rigore, per il tuo sito.
Audit gratuito del tuo sito attuale, preventivo entro 24 ore e un ragionamento scritto, come quello che hai appena letto. Pagamento in tre rate senza interessi; agevolazioni locali verificate prima della firma.