À quoi sert Site Vitrine Studio ?
Un site vitrine présente ton activité, rassure et donne envie de te contacter. Site Vitrine Studio le construit avec toi : tu remplis des champs simples, l'aperçu se met à jour en direct sur ordinateur, tablette et mobile, et l'outil vérifie le site sur 5 axes avant que tu le publies.
Le site obtenu est une page d'accueil complète (jusqu'à 9 sections), une page de mentions légales et confidentialité et une page 404, avec tout ce qu'il faut pour Google et le partage sur les réseaux. C'est du HTML et du CSS simples : pas de base de données, pas d'extension à mettre à jour, et le site t'appartient.
Avec les autres outils Yok-Kod
- Textes de Page de Vente Studio rédige des textes de vente plus poussés, à recopier dans les sections ;
- Identité de Marque Studio fixe ta couleur et tes polices : reporte ta couleur principale dans « Couleur personnalisée » ;
- Balises SEO Studio et Audit SEO Studio vérifient le site une fois en ligne ;
- Nom de Marque Studio t'aide à trouver un nom et un nom de domaine libre.
Pour qui ?
Artisans
Prestations, zone d'intervention et demande de devis.
Commerçants
Horaires, adresse, accès et produits phares.
Restaurants
Formules, horaires et réservation.
Indépendants
Une offre claire et un contact facile, en une journée.
Bien-être et santé
Soins, tarifs et prise de rendez-vous.
Freelances du web
Livrer vite un site propre à un petit client.
Les étapes, une par une
Découvre l'outil avec la démo
Bouton 🎁 Démo : toutes les sections se remplissent avec un studio web fictif. Regarde l'aperçu, change de style, passe en mobile. Les membres Pro peuvent partir d'un des 8 modèles par métier (📋 Modèles).
Remplis le brief
Nom, slogan (ta promesse en une phrase), phrase d'accroche, activité, clients visés et nom de domaine si tu l'as. Choisis la langue du site : elle règle les textes fixes (menu, boutons, mentions légales).
Choisis l'apparence
Un des 8 styles, une couleur d'accent (ou la tienne), une police et ton logo. Le haut de page passe en deux colonnes si tu ajoutes une photo principale.
Remplis les sections
Services, à propos, chiffres clés, galerie, avis, tarifs, FAQ, appel à l'action et contact. Une section vide n'apparaît pas. Dans 🧩 Sections et ordre, coche ce que tu veux afficher et change l'ordre avec les flèches.
Suis les recommandations et publie
Le score et les priorités se mettent à jour à chaque modification. Complète les mentions légales, puis télécharge le ZIP (Pro) et mets-le en ligne.
Styles et couleurs lisibles
L'outil calcule les contrastes selon la méthode WCAG 2 :
- le texte des boutons est blanc ou noir, selon ce qui se lit le mieux sur ta couleur ;
- si ta couleur est trop pâle (ou trop sombre) pour du texte sur le fond du style, l'outil utilise automatiquement une variante de même teinte qui atteint 4,5:1 pour les petits titres, les prix et les liens. Le code de cette variante s'affiche sous les couleurs.
Les polices « système » s'affichent instantanément et ne contactent aucun service externe. Les polices Google Fonts sont plus variées, mais transmettent l'adresse IP des visiteurs à Google : c'est alors indiqué dans la page de confidentialité.
Le contact et le formulaire
Trois modes au choix dans la section 📞 Contact :
- Boutons « Écrire un email » et « Appeler » : rien à configurer, ça marche partout ;
- Formulaire avec le service gratuit Formspree : crée un formulaire sur formspree.io, copie son identifiant (la fin de l'adresse, par exemple
xyzabcde) et colle-le dans l'outil. Les messages arrivent dans ta boîte mail. Le formulaire comprend une case de consentement et un piège à robots ; - Coordonnées seules.
L'option « Voir sur la carte » ajoute un lien vers OpenStreetMap, sans traceur ni cookie.
Le score sur 5 axes
| Axe | Ce qui est vérifié |
|---|---|
| Contenu | Nom, slogan de 15 à 90 caractères, accroche, au moins 3 services décrits, à propos, photos, FAQ |
| Référencement | Titre Google de 30 à 65 caractères, description de 70 à 160, nom de domaine, activité citée, textes des photos, adresse pour une activité locale |
| Conversion | Moyen de contact, formulaire, bouton orienté action, appel à l'action, prix affichés, avis clients |
| Confiance et obligations | Mentions légales complètes, avis authentiques avec accord, contenus d'exemple remplacés, logo |
| Accessibilité et technique | Contraste des boutons et de l'accent, polices sans service externe, images hébergées avec le site, nombre de sections |
Chaque vérification compte en entier (✓), à moitié (!) ou pas du tout (✗). La version découverte montre le score, les 5 axes et les 3 recommandations prioritaires ; le Pro donne toutes les recommandations et le conseil de chaque vérification.
Les mentions légales
La section ⚖️ remplit une page « Mentions légales et confidentialité » : éditeur du site (raison sociale, forme, adresse, immatriculation, TVA, directeur de la publication), hébergeur, propriété intellectuelle, données personnelles et cookies. Les informations manquantes y apparaissent surlignées « À compléter ».
Avis et chiffres : les règles
- Ne publie que de vrais avis, avec l'accord de leur auteur (coche la case prévue). Inventer ou acheter des avis est une pratique commerciale trompeuse.
- Les modèles et la démo contiennent des avis marqués « (exemple) » : l'outil les signale en rouge tant qu'ils ne sont pas remplacés ou supprimés.
- Dans les chiffres clés, n'affiche que ce que tu peux prouver : année de création, projets livrés, zone couverte. Pas de « 98 % de satisfaction » sans enquête.
Ce que contient le ZIP (Pro)
| Fichier | Rôle |
|---|---|
index.html | Page d'accueil avec menu mobile, données structurées (entreprise, FAQ) et balises de partage |
mentions-legales.html | Mentions légales et confidentialité |
404.html | Page pour une adresse introuvable |
images/ | Tes photos et ton logo, réduits à 1600 px |
favicon.png, favicon-32.png, apple-touch-icon.png | Icônes générées à partir du logo (ou de tes initiales) |
og-image.jpg | Image affichée quand le site est partagé (1200 × 630) |
robots.txt, sitemap.xml, llms.txt | Moteurs de recherche et assistants IA (le sitemap demande un nom de domaine) |
site.webmanifest, .htaccess, README.md | Installation sur mobile, HTTPS / cache / page 404 chez un hébergeur Apache, mode d'emploi |
Tu peux aussi télécharger un fichier HTML unique (images intégrées) ou copier le code pour le coller dans un autre outil.
Mettre le site en ligne
Chez ton hébergeur (LWS, OVH, o2switch, Hostinger…) : décompresse le ZIP, ouvre ton logiciel FTP (FileZilla) avec les codes de l'hébergeur et envoie tous les fichiers, dossier images compris, dans le dossier racine du site (souvent www ou public_html). Active le certificat SSL gratuit dans l'espace client si le HTTPS ne marche pas encore.
Sur Netlify (gratuit) : bouton 🚀 dans l'outil, puis glisse le dossier décompressé sur la page Netlify Drop. Tu obtiens une adresse en .netlify.app, que tu peux ensuite relier à ton propre domaine.
L'IA (optionnelle, Pro)
Avec ta propre clé (Agnes, OpenAI, Claude, Mistral, Groq, Gemini, DeepSeek, OpenRouter ou un service compatible), l'assistant peut rédiger tous les textes à partir du brief, proposer 6 slogans, réécrire tes services, écrire 5 questions fréquentes et proposer ton titre et ta description Google. Il a pour consigne de ne jamais inventer d'avis, de chiffres, de diplômes ni de garanties. Tu choisis ensuite de remplir seulement les champs vides ou de tout remplacer.
Ta clé reste dans ton navigateur ; elle n'est jamais enregistrée sur nos serveurs. Tout le reste de l'outil fonctionne sans IA.
Version découverte ou Pro ?
Le site est découpé en sections : l'en-tête de l'accueil, chaque section active de l'accueil (services, à propos, avis, tarifs, FAQ…), puis les mentions légales et la page 404. En version découverte, l'aperçu montre environ un tiers de ces sections, les premières dans l'ordre du site (par exemple 4 sur 11) ; les suivantes gardent leur titre et affichent un aperçu verrouillé. Le compteur au-dessus de l'aperçu indique lesquelles.
| Découverte (gratuit) | Pro | |
|---|---|---|
| Éditeur complet | ✓ saisie, 8 styles, toutes les couleurs, ordre des sections | ✓ |
| Démo | ✓ | ✓ |
| Aperçu du site | Environ un tiers des sections | Le site complet |
| Score sur 5 axes | Score et 3 recommandations | Toutes les recommandations et le conseil de chaque vérification |
| Téléchargement | — | ZIP complet, fichier HTML unique, copie du code, mise en ligne sur Netlify |
| Modèles par métier | — | 8 |
| Projets | 1 | 30, avec sauvegarde et import JSON |
| Assistant IA | — | ✓ |
Le Pro s'achète une fois, sans abonnement : 49 € pour cet outil seul, ou inclus dans le Pack Créatif + Dev (99 €) et dans l'offre Accès complet (179 €, tous les outils).
Où sont mes données ?
Tes projets et tes photos sont enregistrés dans ton navigateur, automatiquement. Le serveur reçoit le contenu le temps de générer l'aperçu et les fichiers, sans le conserver. Les membres Pro peuvent sauvegarder un projet en JSON (photos comprises) et le réimporter sur un autre appareil.
La version découverte garde 1 projet ; le Pro en garde 30.
Problèmes fréquents
- « Stockage du navigateur plein ».
- Le navigateur garde environ 5 Mo par site. Retire des photos, supprime un ancien projet, ou exporte-le en JSON avant de le supprimer.
- Le formulaire n'apparaît pas sur le site.
- En mode formulaire, il faut l'identifiant Formspree (4 à 20 lettres et chiffres). Sans lui, la section contact n'affiche que tes coordonnées.
- Les liens du menu ne mènent nulle part dans l'aperçu.
- Dans l'aperçu, les pages sont affichées une par une : utilise les onglets Accueil, Mentions légales et Page 404. Sur le site en ligne, tous les liens fonctionnent.
- Pourquoi certaines sections de l'aperçu sont-elles verrouillées ?
- La version découverte montre environ un tiers du site (l'en-tête et les premières sections de l'accueil). Le Pro affiche le site complet et permet de le télécharger.
- Le sitemap n'est pas dans le ZIP.
- Il demande des adresses complètes : renseigne le nom de domaine dans le Brief et exporte à nouveau.
- Une photo ajoutée par URL a disparu.
- Le site d'origine l'a retirée. Importe plutôt tes fichiers : ils sont rangés dans le ZIP.
- L'IA répond « clé invalide ».
- Vérifie que le fournisseur choisi correspond à ta clé, puis reteste-la. Les clés gratuites sont limitées à quelques requêtes par minute.
- Je ne retrouve plus mon projet.
- Vérifie que tu utilises le même ordinateur, le même navigateur et le même compte.
Une autre question ? Écris-nous, on répond rapidement. Voir le prix du Pro →