Site vitrine local

Playbook vitrine

Une vitrine est un site de présentation d'entreprise (brochure) pour une entreprise locale : quelques pages qui répondent à « Que faites-vous, pour qui, combien, puis-je vous faire confiance, comment vous joindre ». Les visiteurs arrivent depuis Google ou une recommandation, décident en quelques secondes, et repartent s'ils doivent chercher. Ce playbook dit quoi construire et dans quel ordre ; les compétences de domaine contiennent les règles détaillées.

Porte de direction

Faites ceci avant tout code pour une nouvelle page, un écran ou une refonte, même si la demande tient en une ligne. Le reste de cette compétence supprime les erreurs ; elle ne donne pas de caractère d'écran. Si vous sautez cette étape, le résultat est la page médiane que tout modèle produit : correcte dans les détails, mais appartenant à personne.

1. Cinq lignes. Produit : ce qu'il fait, pour qui. Caractère : deux ou trois mots concrets (calme, précis, un peu chaleureux), jamais propre, moderne, élégant, épuré ou premium. Monde : le lieu ou le matériau auquel le produit appartient ; il teinte les neutres et fixe l'accent. Moments : le ou les deux endroits qui reçoivent une couleur riche et des détails : pour une entreprise locale, généralement une photo réelle du travail ou des personnes, ou une grille tarifaire présentée comme le document imprimé utilisé dans le métier. Signature : un petit détail que seul ce produit possède, utilisé de manière cohérente. Un moment est dessiné avec soin, pas seulement nettoyé : un graphique redessiné pour ce qu'il doit dire (lignes lisses, une comparaison en miroir, une échelle réelle), ou l'objet même du produit rendu avec poids et lumière.
2. Inventaire, puis l'idée. Listez 8 à 12 éléments qu'aucun concurrent ne partage (nom, rue, chiffres du brief, matériaux, outils, rituels, documents que le métier imprime). Écrivez : « Sur cette page, [un élément] devient [le dispositif] ». Ce dispositif est le moment.
3. Refusez les défauts de second ordre sauf si la marque les possède déjà. Ce sont ceux qu'un modèle atteint une fois les évidences interdites :
   • un fond crème, pierre ou blanc chaud avec un accent orange brûlé, terre cuite, sauge ou forêt, avec ou sans titre sérif (le style « papier et encre » est le nouveau défaut, pas une direction) ;
   • Fraunces, Instrument Serif, Playfair ou Georgia en police de titre par réflexe ; system-ui comme seule police ;
   • Inter ou Geist sur blanc avec un accent indigo ou bleu ;
   • hero, services, avis, zone de service, contact, dans cet ordre, sans argument ;
   • un eyebrow centré, titre et deux boutons comme premier écran complet.
4. Test d'échange. Remplacez le nom et le métier par ceux d'un concurrent. Si la page convient toujours, changez la proposition, le moment et la signature, et testez à nouveau.
5. Montrez et attendez. Montrez les cinq lignes et l'idée, et attendez le propriétaire. Si vous ne pouvez pas demander (l'utilisateur a dit de simplement construire, ou vous travaillez sans personne), écrivez-les en commentaire en haut du fichier principal et construisez exactement cela.

Profondeur : playbook anti-slop §2 (direction) et §12 (écrans d'application) ; la compétence design-inspiration-index pour des références réelles.

Ce dont une vitrine a besoin

1. Une offre claire par page. Le premier écran dit ce qui est vendu, à qui et où, en mots simples, avec une action principale. Un lecteur qui saute tout le reste sait quand même. Des pages séparées pour des services séparés battent une page qui vend tout.
2. Des prix, ou un prix « à partir de ». Les acheteurs comparent. Un prix de départ et ce qu'il inclut filtre les mauvais prospects et construit la confiance ; « contactez-nous pour un devis » seul fait perdre des clients aux concurrents qui affichent un chiffre. Indiquez ce qui fait varier le prix. Gardez les montants dans un fichier de données pour que chaque page et les données structurées soient cohérentes.
3. Réservation ou contact en une étape. Un lien téléphonique visible et un court formulaire ou lien de réservation sur chaque page. Ne demandez que ce qui est nécessaire pour répondre (nom, contact, ce qu'ils veulent). Dites quand ils auront une réponse. Confirmez clairement après l'envoi. Appel en un clic sur mobile.
4. Preuves. Des projets réels avec un résultat, des avis réels avec noms et dates (ou liens vers eux), des logos seulement si autorisés. Quelques preuves spécifiques valent mieux que beaucoup de preuves vagues. Pas d'équipe en stock-photo, pas de témoignages inventés.
5. Bases du SEO local.
   • Une page par zone de service qui mérite un classement, chacune avec un contenu véritablement local (pas le même texte avec la ville changée).
   • LocalBusiness (ou un sous-type plus spécifique) JSON-LD avec nom, adresse ou zone de service, téléphone, horaires et tranche de prix cohérente avec les prix affichés. Ajoutez FAQPage uniquement sur une page canonique.
   • Un Google Business Profile complet : même nom, adresse et téléphone que le site, catégories, horaires, photos, un lien vers la bonne page, et une habitude de répondre aux avis.
   • Un h1 par page, titres et meta descriptions descriptifs, hreflang pour les deux langues, un sitemap, des URLs lisibles.
6. Un budget de vitesse. Les visiteurs locaux sont sur des téléphones avec des connexions moyennes. Préchargez l'image LCP et dimensionnez-la correctement (format moderne, largeur et hauteur explicites) ; polices auto-hébergées, une ou deux familles, font-display défini, sous-ensemble ; pas de 3D lourde, de vidéos en fond ou de grosses bibliothèques JS pour la décoration ; scripts tiers seulement s'ils gagnent leur place. Le contenu est présent au chargement. Visez un LCP inférieur à 2,5 s sur mobile et testez avec un throttling réel.
7. Bilingue FR/EN quand le marché l'exige. Une source de message par langue avec la même structure et parité de contenu, un sélecteur de langue visible qui conserve la page courante, des URLs localisées et hreflang. Le texte français est environ 20 % plus long, donc les mises en page ne doivent pas casser. Appliquez la compétence french-typography à chaque chaîne française et ajoutez son garde-fou CI.
8. Québec : Loi 25. Un site qui collecte des informations personnelles au Québec (un formulaire de contact suffit) exécute la compétence loi-25-website : politique de confidentialité, personne responsable affichée, avis lors de la collecte, suivi désactivé par défaut, révision des outils hors Québec. Traitez-le comme partie intégrante de la construction, pas comme une réflexion après coup ; choisissez les outils d'analyse et de formulaire en gardant cela à l'esprit.
9. Motion : un seul moment signature au maximum. Une interaction mémorable et intentionnelle (un sélecteur de projet avec fondu enchaîné, un avant/après) plus un retour de pression et de survol simple. Pas de défilements révélés, de bibliothèques de défilement fluide ou d'ornements en boucle. Utilisez la compétence motion ; la réduction de mouvement affiche l'état final.

Pages suggérées

Accueil, Services (ou une page par service), Projets avec études de cas, Tarifs, Contact. Ajoutez des pages de zone et quelques guides seulement si vous les maintiendrez honnêtes et à jour. Sautez une page « À propos » sauf si elle apporte des preuves ; intégrez une courte présentation humaine dans l'accueil ou le contact.

Ordre de travail

1. Offre et preuves. Écrivez l'offre en une phrase, les lignes de prix, trois preuves et le chemin de contact avant tout design. Utilisez la compétence ux pour la copie simple.
2. Direction et tokens. Exécutez la porte de direction ci-dessus, puis palette, une ou deux polices auto-hébergées, espacement, rayons, avec la compétence ui (défauts de bon goût si le projet n'en a aucun).
3. Maquette, desktop et 390 px. Accueil d'abord, puis une page intérieure. Le propriétaire juge ; itérez avant de construire (compétence ui, maquette d'abord).
4. Construisez les pages avec du contenu réel. Photos et textes réels, pas de lorem ipsum. Vérifiez les longues chaînes françaises.
5. SEO et schéma. Titres, meta, JSON-LD, sitemap, hreflang, pages de zone, Google Business Profile aligné sur le site.
6. Langue et loi. Exécutez french-typography sur tout le texte français, puis loi-25-website pour le rapport d'audit.
7. Passage vitesse. Mesurez LCP, CLS et transfert total sur un profil mobile throttlé et corrigez le plus gros élément en premier.
8. Motion, puis passage anti-slop. Ajoutez le moment signature unique, puis exécutez anti-slop et son détecteur.

Erreurs courantes

• Un hero qui dit « Bienvenue » ou un slogan au lieu de l'offre.
• Des prix cachés derrière un formulaire, ou d'anciens prix laissés dans le schéma et les pages de ville après un changement.
• Cinq méthodes de contact sans primaire évidente.
• Des pages de ville qui sont la même page avec le nom de la ville changé.
• Des bannières de cookies ajoutées pour la décoration alors que le suivi se charge encore par défaut.
• Un sélecteur de langue qui renvoie les visiteurs à la page d'accueil.

Checklist de finition

• Le premier écran indique l'offre, le public, le lieu et une action principale.
• Un prix de départ et sa portée apparaissent sur la page des tarifs et correspondent au JSON-LD.
• Le téléphone et le formulaire de contact fonctionnent en une étape sur mobile ; la confirmation indique la suite.
• Au moins trois preuves réelles et spécifiques.
• JSON-LD LocalBusiness valide ; Google Business Profile correspond au nom, à l'adresse, au téléphone.
• Les pages de zone ont un contenu local distinct ; sitemap et hreflang corrects.
• Image LCP préchargée ; polices auto-hébergées ; LCP inférieur à 2,5 s sur mobile throttlé ; pas de 3D lourde.
• FR et EN ont le même contenu ; la vérification french-typography réussit.
• Le rapport loi-25-website n'a aucun élément de correction ouvert (sites Québec).
• Au plus un mouvement signature ; la réduction de mouvement est respectée.
• Détecteur anti-slop propre ; vérifié à 390 px et desktop ; tsc, lint et tests verts.