Créer un site avec ChatGPT à partir d’un brief client : méthode et vérifications

Le brief est validé. Vous savez à qui le site doit parler, ce qu’il doit présenter et quelle action vous attendez des visiteurs.

Il reste à donner une forme à tout cela.

Avec ChatGPT, vous pouvez préparer les textes, organiser les pages et demander la création d’une première version du site. Mais entre une interface séduisante et un site que l’on peut confier à un client, plusieurs étapes méritent votre attention.

Un bouton peut sembler fonctionnel sans rien envoyer. Une photo peut être magnifique sans représenter une réalisation réelle. Un formulaire peut afficher « Message envoyé » alors que personne ne reçoit la demande.

Dans ce tutoriel, nous allons créer un site avec ChatGPT en partant d’un brief, puis vérifier ce qui fonctionne réellement. Nous reprenons Atelier Pivoine, notre fleuriste fictive, avec une méthode adaptée à un premier site vitrine.

Documentation consultée le 1er novembre 2026. Le parcours présenté est une méthode de réalisation ; il ne constitue pas un test effectué sur un compte utilisateur.

Le résultat attendu : un site vitrine au périmètre clair

Dans le tutoriel précédent, nous avons transformé les notes d’un rendez-vous en un brief.

Pour Atelier Pivoine, nous retenons ce périmètre fictif :

• Présenter l’activité de la fleuriste.
• Mettre en valeur ses prestations de mariage.
• Montrer une sélection de réalisations.
• Permettre aux visiteurs de prendre contact.
• Faciliter la consultation sur téléphone.

La boutique en ligne est exclue de cette première phase. Aucun compte client ni paiement n’est nécessaire.

Cette décision simplifie le projet : nous pouvons travailler sur un parcours court, depuis la découverte de l’activité jusqu’à la demande de contact.

Critère de réussite : une personne qui découvre Atelier Pivoine comprend ce que l’entreprise propose, peut examiner ses réalisations et sait comment la contacter.

Projets, Space et Sites : qui fait quoi ?

Gardons notre image de la bibliothèque et de la table de travail, puis ajoutons l’atelier de construction.

Environnement	Rôle proposé dans notre méthode
Projet ChatGPT	Conserver les sources, les consignes et les conversations de préparation
Space	Faire relire le brief, les textes et les propositions avec les personnes concernées
Sites	Construire, héberger et partager le site

La documentation officielle de Sites présente la création de sites à partir de descriptions dans ChatGPT ou Codex, sans obligation de commencer par écrire du code.

Space et Sites remplissent donc des fonctions différentes. Un brief partagé dans Space peut servir de source pour la création. Il faut néanmoins fournir le contenu accessible et préciser quelle version utiliser.

Pour ce tutoriel, nous choisissons Sites comme parcours principal. Si cette fonction n’est pas disponible sur votre compte, vous pouvez conserver la préparation et transmettre le dossier à votre outil de création habituel.

Nous ne mélangerons pas plusieurs constructeurs dans les étapes : leurs interfaces et leurs possibilités nécessiteraient des tutoriels distincts.

Étape 1 — Préparer le dossier de construction

Avant de demander un site, rassemblez les éléments qui doivent servir de référence.

Élément	Ce qu’il doit contenir
Brief validé	Objectifs, public, périmètre et exclusions
Textes	Informations confirmées et formulations relues
Identité visuelle	Logo, couleurs et indications typographiques
Photos	Images sélectionnées et utilisables
Coordonnées	Adresse, horaires et moyen de contact vérifiés
Fonctionnement attendu	Comportement des liens, boutons et éventuel formulaire

Donnez des noms explicites aux fichiers :

• brief-valide-v1.md
• textes-site-v1.md
• identite-visuelle.pdf
• coordonnees-verifiees.md

Ces noms sont des suggestions, pas une exigence technique.

Ne pas envoyer toutes les archives du projet

Un dossier de création doit permettre de savoir quoi construire aujourd’hui.

Écartez les anciens tarifs, les propositions abandonnées et les brouillons qui contredisent le brief. Si vous conservez une ancienne source, indiquez clairement son statut.

Vous pouvez demander à ChatGPT :

Examine les documents fournis pour préparer la création du site.

Liste :
- les sources utilisables comme références actuelles ;
- les contradictions ;
- les informations manquantes ;
- les décisions nécessaires avant construction.

Ne crée pas encore le site.
Ne déduis aucune validation d’un simple brouillon.

Résultat attendu : vous savez quels documents font référence et ce qui reste à préciser.

Étape 2 — Définir les pages et le parcours du visiteur

Un brief décrit le besoin. Il faut maintenant le traduire en organisation du site.

Pour notre exercice, nous proposons quatre pages :

Page	Question à laquelle elle répond	Action proposée
Accueil	Que propose Atelier Pivoine ?	Découvrir les prestations
Mariages	Cet univers correspond-il à mon événement ?	Préparer une demande
Réalisations	Quel travail cette fleuriste a-t-elle déjà réalisé ?	Prendre contact
Contact	Comment expliquer mon besoin ?	Envoyer une demande

Cette organisation doit être validée avant la construction.

Une page unique peut également convenir si l’entreprise possède peu de contenu. Évitez de multiplier les pages qui répètent les mêmes informations.

Décrire un parcours concret

Imaginez une future mariée qui découvre le site sur son téléphone :

1. Elle comprend immédiatement l’activité.
2. Elle voit quelques compositions représentatives.
3. Elle découvre l’accompagnement proposé.
4. Elle trouve comment poser sa question.

Demandez à ChatGPT de vérifier ce parcours :

À partir du brief validé, propose une organisation simple du site.

Pour chaque page, indique :
- son objectif ;
- ses sections ;
- les informations nécessaires ;
- l’action principale attendue.

Vérifie le parcours d’une personne qui découvre l’entreprise sur téléphone.
Signale les pages qui feraient doublon.

Présente la proposition avant de commencer la construction.

Résultat attendu : une structure compréhensible et un rôle précis pour chaque page.

Étape 3 — Préparer les textes sans inventer l’entreprise

ChatGPT peut aider à reformuler les informations, à hiérarchiser les messages et à rendre les textes plus accessibles.

Il doit cependant travailler à partir de ce qui existe.

Pour Atelier Pivoine, nous ne voulons pas voir apparaître une récompense, un nombre de mariages réalisés ou une promesse de réponse sous 24 heures qui n’ont jamais été confirmés.

Rédige les textes du site à partir du brief et des informations confirmées.

Pour chaque page :
- propose un titre principal clair ;
- rédige des paragraphes courts ;
- formule une action cohérente avec le besoin du visiteur ;
- signale les informations manquantes.

N’invente aucun avis client, chiffre, label, tarif, délai ou engagement.
Ne présente pas une suggestion comme une caractéristique réelle de l’entreprise.

Présente les textes pour relecture avant leur intégration.

Préférer une information utile à une formule brillante

« Des émotions florales qui subliment vos instants d’exception » peut donner une ambiance. Cela n’explique pas encore ce que la cliente peut commander.

Ajoutez des informations concrètes, lorsqu’elles sont confirmées : types de compositions, déroulement de l’accompagnement, zone d’intervention et modalités de contact.

Résultat attendu : les textes permettent de comprendre l’offre sans s’appuyer sur des promesses inventées.

Étape 4 — Choisir les images et une direction graphique

Pour ce projet fictif, imaginons une direction douce et florale : fond ivoire, vert profond, touches rosées et photographies généreuses.

Cette palette appartient à Atelier Pivoine. Le site du client doit refléter son identité, même si vous utilisez votre propre méthode de travail pour le construire.

Associer chaque photo à un usage

Préparez une petite sélection :

Image	Emplacement envisagé
Composition florale principale	Haut de la page d’accueil
Décoration de table	Page Mariages
Bouquet de mariée	Galerie de réalisations
Portrait ou vue de l’atelier	Présentation de l’entreprise

Indiquez les recadrages à éviter : un bouquet coupé au mauvais endroit peut perdre tout son intérêt sur mobile.

Distinguer illustration et réalisation

Une image générée peut servir à explorer une ambiance ou une maquette.

Elle ne doit pas devenir, sans explication, la preuve d’un travail que la fleuriste aurait réalisé. Pour la galerie, utilisez les photos de réalisations autorisées.

Si une image manque, prévoyez un emplacement temporaire explicitement identifié pendant la préparation. Retirez-le ou remplacez-le avant publication.

Résultat attendu : chaque image possède une fonction et son statut est clair.

Étape 5 — Demander une première version du site

Ouvrez Sites dans votre environnement ChatGPT, si cette fonction est disponible, ou sélectionnez l’outil correspondant.

Joignez le brief, les textes et les ressources utiles. Ne vous contentez pas d’écrire « fais le site dont nous avons parlé » : vérifiez que l’outil a bien accès à la matière nécessaire.

Voici un prompt de départ :

Crée une première version du site vitrine d’Atelier Pivoine avec Sites.

SOURCES
Utilise le brief validé, les textes relus, le logo et les photos joints.
Si un fichier est inaccessible ou si une information manque, signale-le.
N’invente aucune information sur l’entreprise.

OBJECTIF
Présenter l’activité et les prestations de mariage.
Aider les visiteurs à comprendre l’univers de la fleuriste puis à prendre contact.

STRUCTURE
- Accueil
- Mariages
- Réalisations
- Contact

DIRECTION VISUELLE
Respecte les ressources graphiques fournies.
Prévois une présentation élégante, lisible et adaptée au téléphone.
Évite les effets qui gênent la lecture ou la navigation.

PÉRIMÈTRE
Aucune boutique, aucun paiement et aucun compte client.
Utilise uniquement les photos autorisées pour représenter les réalisations.

CONTACT
Pour cette première version, prévois un lien e-mail visible.
N’affiche pas de faux formulaire fonctionnel.
Utilise l’adresse vérifiée fournie ; si elle manque, demande-la.

LIVRAISON
Prépare une version à examiner avant publication.
Explique comment la consulter.
Si une prévisualisation nécessite un déploiement, explique-le avant d’agir.
Ne publie pas sans mon accord explicite.

À LA FIN
Indique ce qui est réalisé, ce qui reste à configurer et ce qui n’a pas été testé.

Pourquoi commencer avec un lien e-mail ?

Cela permet de contrôler une première version sans développer immédiatement un circuit de traitement des demandes.

Un lien e-mail ouvre normalement l’application de messagerie configurée du visiteur. Il n’envoie pas le message à sa place et peut être moins pratique sur un appareil sans messagerie configurée.

Le formulaire pourra être ajouté ensuite, si son intérêt et son fonctionnement sont validés.

Résultat attendu : une première version consultable, avec ses limites clairement annoncées.

Étape 6 — Corriger par petites interventions

Examinez d’abord les grandes priorités :

1. L’activité est-elle comprise ?
2. Les pages correspondent-elles au brief ?
3. Les textes et les images sont-ils corrects ?
4. Le moyen de contact est-il visible ?

Demandez ensuite des modifications ciblées :

Sur la page d’accueil uniquement :
- raccourcis le texte d’introduction ;
- donne davantage de place à la photo principale ;
- conserve le titre et le bouton de contact ;
- ne modifie pas les autres pages.

Après correction, indique les éléments modifiés.

Ou :

Corrige la navigation mobile.

Le menu doit rester utilisable sur un petit écran.
Vérifie son ouverture, sa fermeture et l’accès aux quatre pages.
Conserve l’apparence de la navigation sur ordinateur autant que possible.

Indique les tests réellement effectués et leurs résultats.

Évitez de mélanger une refonte graphique, une nouvelle fonctionnalité et la correction d’un bug dans une seule consigne.

Résultat attendu : chaque modification peut être examinée et reliée à une demande précise.

Étape 7 — Ajouter un formulaire seulement si son circuit est défini

Un formulaire comprend plusieurs éléments : les champs visibles, la validation des réponses, la transmission et éventuellement le stockage.

Avant de le construire, décidez :

• Quelles informations sont nécessaires ?
• Où la demande arrive-t-elle ?
• Qui peut la consulter ?
• Faut-il la conserver ?
• Que se passe-t-il si l’envoi échoue ?

Pour notre fleuriste, une demande pourrait contenir le nom, l’e-mail, la date envisagée de l’événement et un message. Vérifiez l’utilité de chaque champ.

Prépare une proposition pour ajouter un formulaire de demande de mariage.

Avant toute mise en œuvre, explique :
- les champs proposés et leur utilité ;
- le service de réception ou le stockage nécessaire ;
- les accès et paramètres à configurer ;
- les coûts éventuels ;
- les cas d’erreur à gérer ;
- les tests permettant de vérifier la réception.

Ne collecte aucune donnée réelle à ce stade.
Ne crée pas un message de réussite simulant un envoi.

Ne collez pas de mot de passe ou de clé secrète dans le code public d’une page.

Faire un test de bout en bout

Utilisez des coordonnées de test que vous contrôlez :

1. Remplissez le formulaire.
2. Envoyez une demande.
3. Vérifiez sa réception à destination.
4. Contrôlez le contenu reçu.
5. Essayez un champ obligatoire vide.
6. Vérifiez le comportement en cas d’erreur.

Résultat attendu : la demande parvient réellement à la bonne personne. L’apparition d’une confirmation à l’écran ne suffit pas.

Étape 8 — Tester le site comme un visiteur

Demandez à ChatGPT d’effectuer les contrôles qu’il peut réaliser, puis complétez-les manuellement.

Contrôle	Ce que vous vérifiez
Navigation	Chaque lien mène au bon endroit
Mobile	Textes, images et boutons restent utilisables
Contact	L’adresse est correcte et le parcours fonctionne
Formulaire éventuel	Réception réelle et erreurs correctement gérées
Contenus	Aucune invention ni information provisoire
Images	Affichage correct et recadrages acceptables
Clavier	Les éléments interactifs sont accessibles et le focus visible
Chargement	Les images ne rendent pas la consultation pénible
Adresse directe	Une page interne peut être ouverte et actualisée

Testez si possible sur un vrai téléphone. Réduire la fenêtre du navigateur est utile, mais ne reproduit pas toutes les conditions d’un appareil.

Vous pouvez demander un rapport :

Contrôle le site par rapport au brief validé.

Classe les résultats :
- bloquant avant publication ;
- correction importante ;
- amélioration facultative.

Pour chaque problème, indique :
- la page ;
- les étapes pour le reproduire ;
- le comportement attendu ;
- le comportement observé.

Distingue les tests exécutés des recommandations non vérifiées.
N’annonce pas une conformité ou une sécurité complète à partir de contrôles partiels.

Étape 9 — Préparer les informations de publication et le référencement

Pour chaque page, préparez :

• Un titre précis.
• Une description adaptée au contenu.
• Une adresse lisible.
• Des titres structurés.
• Des descriptions alternatives pertinentes pour les images informatives.
• Un aperçu de partage cohérent.

Vérifiez que ces éléments sont effectivement intégrés au site. Les écrire dans une conversation ne les ajoute pas automatiquement à la page publiée.

Pour un site local, renseignez les coordonnées, la zone desservie et les prestations réelles.

Ne supposez pas que Rank Math sera présent : il s’agit d’un outil WordPress. Dans Sites, demandez la configuration des métadonnées et contrôlez le résultat avec les possibilités disponibles.

Préparez également les informations de l’entreprise et les textes relatifs au fonctionnement réel du site. Ne publiez pas des coordonnées juridiques fictives ou une politique de confidentialité décrivant des outils absents.

Une vérification dédiée des obligations applicables reste à prévoir pour le site réel, notamment s’il collecte des données.

Combien coûte un site créé avec ChatGPT ?

Séparez les différents postes :

Poste	Ce qu’il faut examiner
Création et modifications	Usage consommé pendant la construction
Hébergement	Trafic et ressources nécessaires
Stockage	Images, fichiers et éventuelles données enregistrées
Domaine personnalisé	Enregistrement, renouvellement et éventuel coût de connexion
Services externes	Formulaire, envoi d’e-mails ou autres intégrations
Maintenance	Corrections et mises à jour futures

Au 1er novembre 2026, la documentation Sites annonce un hébergement gratuit jusqu’au 31 décembre 2026, puis une mesure de l’usage à partir du 1er janvier 2027, avec une allocation selon le forfait et des dépassements possibles. La construction et l’édition comptent dans l’usage Codex. Les conditions doivent être revérifiées avant engagement.

Évitez donc de promettre au client « gratuit pour toujours ». Pour les tarifs actualisés, consultez la rubrique de tarification officielle de Sites.

Pour notre exemple, commencez avec le périmètre le plus simple qui répond au besoin. N’ajoutez une base de données que si une fonction la nécessite.

Étape 10 — Publier puis vérifier l’adresse finale

Avant publication, obtenez la validation des contenus et des fonctions prévues.

Confirmez aussi :

• Le compte qui possède et gère le site.
• La personne responsable du domaine.
• Les personnes autorisées à publier des modifications.
• Les modalités de maintenance.

Dans les contrôles de publication disponibles, choisissez l’audience prévue et vérifiez le résultat depuis l’expérience d’un visiteur. Les domaines personnalisés dépendent des possibilités proposées ; leur connexion nécessite notamment de pouvoir modifier les enregistrements DNS du domaine.

Si Atelier Pivoine possède déjà un domaine et une messagerie, préparez la connexion avec attention : ne remplacez pas tous les enregistrements DNS sans examiner leur rôle.

Après mise en ligne :

1. Ouvrez l’adresse finale hors de votre session d’édition.
2. Contrôlez les pages et les images.
3. Testez à nouveau le contact.
4. Vérifiez l’accès sur téléphone.
5. Relevez les problèmes éventuels.

Résultat attendu : le site est accessible au public prévu et ses fonctions essentielles marchent sur l’adresse finale.

Préparer les futures modifications

Conservez une fiche de suivi comprenant l’adresse, la version publiée, les fonctions actives et les points à surveiller.

Lors d’un changement, donnez une demande limitée :

Prépare une mise à jour des horaires à partir du document fourni.

Repère tous les emplacements concernés.
Signale les contradictions.
Ne modifie aucune autre information.

Présente les changements et les contrôles à effectuer avant publication.

Après une intervention, refaites les tests concernés. Une modification du menu appelle un contrôle de navigation ; une modification du formulaire exige un nouvel essai de réception.

Questions fréquentes

Faut-il savoir coder ?

Vous pouvez commencer avec des consignes en langage naturel. Pour un site professionnel, il faut néanmoins comprendre les fonctions demandées et savoir vérifier leur résultat.

Peut-on obtenir le site en une seule demande ?

Une première version peut être produite à partir d’une demande détaillée. Le nombre de corrections dépend du projet. Prévoyez une phase de relecture et de test.

Une boutique en ligne serait-elle simplement une page supplémentaire ?

Elle ajoute des sujets propres : produits, commandes, paiement, livraison et suivi. Notre tutoriel se limite volontairement au site vitrine d’Atelier Pivoine.

Space publie-t-il le site ?

Dans cette méthode, Space sert à préparer et relire les documents. Sites assure la construction et l’hébergement du site.

Comment savoir si le site est prêt ?

Lorsque les contenus sont validés, que les fonctions essentielles ont été testées sur l’adresse finale et que la gestion du site est définie.

Votre exercice : construire une première version maîtrisable

Reprenez votre brief validé et préparez un site avec peu de pages, des contenus confirmés et un moyen de contact simple.

Travaillez ensuite dans cet ordre : structure, textes, images, première version, corrections et tests.

Avant de commencer, si votre besoin reste encore flou, retrouvez notre tutoriel « Du rendez-vous client au brief : utiliser les Projets ChatGPT et Space ».

Un bon brief donne une direction. Les vérifications vous permettent de savoir si le site l’a réellement suivie.