Introduction

Votre visiteur décide en quelques secondes s’il reste. Il ne lit pas : il parcourt. Il cherche trois réponses. Est-ce pour moi ? Puis-je leur faire confiance ? Que dois-je faire maintenant ?

Ce chapitre construit les pages qui répondent à ces trois questions. Il commence par les trois zones que tout visiteur voit : la page d’accueil, l’en-tête et le pied de page. Il continue par les textes, les images et le design, avec l’IA à chaque étape. Il se termine par la génération d’un site avec l’IA, ses promesses et ses limites.

Une règle traverse tout le chapitre. L’IA rédige vite et bien un premier jet. Elle ne connaît ni vos clients ni vos chantiers. Ce qui convainc un visiteur, ce sont vos preuves. Elles ne viennent que de vous.

1. Les trois zones qui comptent

La page d’accueil

C’est la page la plus vue. Elle doit répondre aux trois questions du visiteur dans l’ordre.

Dans la zone visible sans défilement : une phrase qui dit ce que vous faites, pour qui et où. Un appel à l’action visible. Une image qui montre votre travail réel, pas une photo d’illustration générique.

Juste en dessous : vos preuves. Avis clients, nombre de réalisations, logos de clients ou de partenaires, labels et certifications.

Ensuite : vos services, chacun avec un lien vers sa page. Un court paragraphe sur vous. Un dernier appel à l’action en bas de page, pour celui qui a tout lu.

L’en-tête

C’est la bande en haut de chaque page. Elle contient le logo, cliquable vers l’accueil. Elle contient aussi le menu défini au chapitre 1. Elle porte aussi le bouton d’action principal : « Demander un devis », « Prendre rendez-vous ». Pour une activité locale, ajoutez le téléphone, cliquable sur mobile. Sur téléphone, le menu se replie : vérifiez que le bouton d’action reste visible.

Le pied de page

C’est la bande en bas de chaque page. On y cherche les coordonnées complètes, les horaires et la zone d’intervention. On y attend aussi les liens légaux : mentions légales, politique de confidentialité, gestion des cookies. Et, si vous vendez, conditions générales de vente. Ajoutez les liens vers vos réseaux sociaux et, si vous en avez une, l’inscription à votre lettre d’information.

Avec l’IA. Donnez votre fiche projet à un assistant d’IA et demandez : « Propose trois versions de la phrase d’accroche de ma page d’accueil, en quinze mots au maximum, qui disent ce que je fais, pour qui et où. » Lisez les trois à voix haute. Gardez celle qu’un client comprendrait sans explication.

Exemples :

• Accroche : « Menuisier à Saint-Germain-en-Laye : fenêtres et portes en bois posées en une journée. »
• Preuve : « 4,8 sur 5 sur 62 avis Google ».
• En-tête : logo, menu en cinq entrées, bouton « Devis gratuit », téléphone.
• Pied de page : adresse, horaires, zone d’intervention, liens légaux.

2. Rédiger des textes qui font agir

Un bon texte de site parle du client avant de parler de vous. Remplacez « Nous sommes une entreprise dynamique forte de vingt ans d’expérience » par ce que le client y gagne : « Vos fenêtres posées en une journée, sans reprise de peinture ».

Quatre règles suffisent.

Le bénéfice d’abord : ce que le client obtient, puis comment vous y parvenez.

Des phrases courtes : une idée par phrase, des paragraphes de trois ou quatre lignes, des intertitres qui résument.

Des preuves : chiffres, avis, photos de réalisations, étapes du déroulement. Chaque frein relevé au chapitre 1 appelle une preuve.

Un appel à l’action par page : un verbe clair, placé en haut et en bas. « Demander un devis » vaut mieux que « Envoyer ».

Pour transformer les visiteurs en contacts, pensez aussi au lead magnet, un contenu offert en échange d’une adresse électronique : une checklist, un guide, un modèle, un simulateur. Il intéresse le visiteur qui n’est pas encore prêt à appeler.

L’IA est un excellent assistant de rédaction. Donnez-lui un vrai brief : votre client type, ses questions, vos preuves, le ton souhaité. Relisez tout. Supprimez les formules creuses. Ajoutez des faits que vous seul connaissez. Google ne pénalise pas un texte parce qu’il a été rédigé avec l’IA. Il valorise les contenus utiles et fiables, rédigés pour les personnes et non pour les moteurs de recherche.

Avec l’IA. Brief type : « Rédige la page « Pose de fenêtres » pour un menuisier des Yvelines. Client type : propriétaire d’une maison ancienne. Questions : durée, prix, autorisation. Preuves : 300 chantiers, garantie dix ans, avis 4,8 sur 5. Ton : direct, vouvoiement. Structure : accroche, bénéfices, déroulé en quatre étapes, questions fréquentes, appel à l’action. 400 mots. » Puis relisez chaque affirmation : l’IA invente volontiers des chiffres.

Exemples :

• Bénéfice : « un seul interlocuteur du devis à la pose ».
• Preuve : « garantie décennale, attestation disponible sur demande ».
• Appel à l’action : « Recevoir mon devis sous 48 heures ».
• Lead magnet : « Guide : 7 questions à poser avant de changer ses fenêtres ».

3. Des visuels qui rassurent

Les images comptent autant que le texte. Les meilleures sont les vôtres : votre équipe, vos locaux, vos réalisations. Une photo prise au téléphone, bien cadrée et bien éclairée, convainc plus qu’une photo de banque d’images vue sur cent sites.

Trois sources sont possibles.

Vos propres photos : la meilleure preuve. Demandez l’accord écrit des personnes reconnaissables.

Les banques d’images : gratuites (Unsplash, Pexels, par exemple) ou payantes. Lisez la licence et conservez-en une trace. Une image trouvée sur un moteur de recherche n’est pas libre de droits. Le chapitre 4 détaille les risques.

Les images générées par l’IA : utiles pour une illustration, un fond, un schéma. Évitez-les pour représenter votre équipe, vos locaux ou vos réalisations : ce serait tromper le visiteur. Vérifiez les conditions d’utilisation de l’outil. Signalez l’image comme générée par IA lorsqu’elle pourrait passer pour une vraie photo.

Deux réglages techniques s’appliquent à toutes les images. Le poids : compressez-les et préférez le format WebP, sinon vos pages s’affichent lentement. Le texte alternatif : une courte description de ce que montre l’image, lue par les logiciels des personnes aveugles et utilisée par les moteurs de recherche.

Avec l’IA. Donnez à un assistant d’IA la liste de vos photos et demandez-lui de rédiger un texte alternatif de moins de 125 caractères pour chacune, qui décrit l’information utile de l’image. Corrigez-les : il ne voit pas toujours ce qui compte pour votre client.

Exemples :

• Photo réelle : un chantier terminé, avant et après.
• Texte alternatif : « Fenêtre en chêne posée dans une maison de 1930 à Poissy ».
• Image générée par IA : un schéma des étapes d’un chantier.
• À éviter : une équipe souriante tirée d’une banque d’images, présentée comme la vôtre.

4. Design, mobile et accessibilité

Un design sobre vend mieux qu’un design chargé. Le support le résume en quelques erreurs à éviter : trop de couleurs, trop de polices, trop d’animations, des images floues, pas de respiration.

La charte : vos couleurs et votre logo, deux polices au maximum, une couleur réservée aux boutons d’action.

L’espace : des marges généreuses, des blocs aérés, une hiérarchie claire des titres.

Le mobile : une grande partie de vos visiteurs arrive sur téléphone. Un site responsive s’adapte à tous les écrans. Testez chaque page sur un vrai téléphone, pas seulement dans l’aperçu de l’outil. Les boutons doivent se toucher du pouce sans erreur.

L’accessibilité : un site lisible par tous, y compris les personnes malvoyantes, âgées ou handicapées. Quelques règles de base règlent la plupart des difficultés : un contraste suffisant entre le texte et le fond, des titres hiérarchisés, des textes alternatifs, des liens explicites (« Voir nos tarifs » plutôt que « Cliquez ici »), des champs de formulaire avec leur étiquette. Pour certains sites, l’accessibilité est une obligation légale : le chapitre 4 précise lesquels.

Avec l’IA. Faites une capture d’écran de votre page d’accueil sur téléphone et soumettez-la à un assistant d’IA capable de lire les images. Demandez : « Liste les problèmes de lisibilité, de contraste et de hiérarchie, du plus gênant au moins gênant. » Vérifiez ensuite le contraste avec un outil de mesure dédié.

Exemples :

• Couleurs : bleu nuit pour le texte, orange réservé aux boutons.
• Polices : une pour les titres, une pour le texte.
• Mobile : téléphone cliquable, bouton de devis visible sans défilement.
• Accessibilité : « Découvrir nos réalisations » plutôt que « En savoir plus ».

5. Générer son site avec l’IA

Deux usages de l’IA vont plus loin que la rédaction.

Les générateurs intégrés : la plupart des constructeurs de sites proposent de créer une première version à partir de quelques questions. Le résultat est rapide et souvent présentable. Il reste générique : remplacez les textes, les images et la structure par ceux de votre fiche projet.

Les assistants de programmation (Codex d’OpenAI ou Claude Code d’Anthropic, par exemple) : ils écrivent, modifient et corrigent le code d’un site ou d’un thème WordPress sur mesure. La liberté est totale. Trois précautions s’imposent : travailler sur une copie du site, jamais directement sur le site en ligne ; sauvegarder avant chaque modification ; tester chaque page sur ordinateur et téléphone avant publication. Sans ces réflexes, l’assistant peut casser en une minute ce qui a demandé des jours.

Dans les deux cas, l’IA produit une base. Vous restez responsable du résultat : exactitude des informations, conformité, qualité de ce qui est publié.

Exemples :

• Générateur intégré : première maquette en dix minutes, retravaillée ensuite.
• Assistant de code : ajout d’un bloc « avis clients » dans un thème WordPress, testé sur une copie.
• À éviter : publier un site généré sans relire les textes ni tester le formulaire.

Résumé

La page d’accueil dit ce que vous faites, pour qui et où, prouve que vous le faites bien et indique quoi faire. L’en-tête porte le menu et le bouton d’action. Le pied de page porte les coordonnées et les liens légaux.

Les textes parlent du client, apportent des preuves et se terminent par un appel à l’action. Les images montrent votre travail réel, sont légères et décrites. Le design reste sobre, lisible sur téléphone et accessible.

L’IA accélère chaque étape. Elle ne remplace ni vos preuves ni votre relecture. Construisez maintenant votre page d’accueil et vérifiez-la avec la checklist en annexe.

Questions fréquentes

Que doit contenir la page d’accueil d’un site vitrine ?

Une phrase qui dit ce que vous faites, pour qui et où. Un appel à l’action visible sans défilement. Des preuves (avis, réalisations, labels). La liste de vos services avec un lien vers chaque page. Un dernier appel à l’action en bas de page.

Que mettre dans le pied de page d’un site internet ?

Les coordonnées complètes, les horaires et la zone d’intervention. Les liens vers les mentions légales, la politique de confidentialité, la gestion des cookies et, si vous vendez, les conditions générales de vente. Les liens vers vos réseaux sociaux.

Peut-on rédiger les textes de son site avec ChatGPT ou une autre IA ?

Oui, comme premier jet. Donnez un brief précis, puis relisez tout, supprimez les formules creuses et ajoutez vos faits et vos preuves. Google juge l’utilité et la fiabilité du contenu, pas l’outil qui a servi à l’écrire.

Peut-on utiliser des images générées par l’IA sur son site ?

Oui, pour des illustrations et des schémas, en respectant les conditions de l’outil. Évitez-les pour représenter votre équipe, vos locaux ou vos réalisations. Signalez-les lorsqu’elles pourraient passer pour de vraies photos.

Qu’est-ce qu’un site responsive ?

C’est un site dont la mise en page s’adapte à la taille de l’écran : ordinateur, tablette ou téléphone. Testez-le sur un vrai téléphone avant la mise en ligne.

Termes clés

• Zone visible sans défilement : partie de la page affichée à l’ouverture, avant tout défilement.
• En-tête : bande en haut de chaque page, avec le logo, le menu et le bouton d’action principal.
• Pied de page : bande en bas de chaque page, avec les coordonnées, les liens légaux et les réseaux sociaux.
• Preuve sociale : élément qui montre que d’autres clients vous ont fait confiance : avis, témoignages, références.
• Texte alternatif : description d’une image lue par les logiciels d’aide aux personnes aveugles et par les moteurs de recherche.
• Responsive : se dit d’un site dont la mise en page s’adapte à la taille de l’écran.
• Contraste : différence de luminosité entre le texte et le fond, qui conditionne la lisibilité.

Références

• Google Search Central — Recommandations sur les contenus générés par IA
• W3C — Règles pour l’accessibilité des contenus web (WCAG), présentation
• Acadigit — Mentions légales : la carte d’identité de votre site
• Acadigit — CGV : le contrat qui protège votre entreprise

QCM (une seule bonne réponse par question)

Question 1 — Que doit dire la zone visible sans défilement de la page d’accueil ?

1. L’historique complet de l’entreprise
2. Ce que vous faites, pour qui et où, avec un appel à l’action
3. La liste des mentions légales

Question 2 — Où place-t-on les liens vers les mentions légales et la politique de confidentialité ?

1. Dans le pied de page de chaque page
2. Uniquement sur la page de contact
3. Dans un fichier à télécharger

Question 3 — Sur téléphone, pour une activité locale, l’en-tête devrait proposer :

1. Une animation d’ouverture
2. Le numéro de téléphone cliquable
3. Toutes les pages du site dépliées

Question 4 — Quel texte d’appel à l’action est le plus efficace ?

1. « Envoyer »
2. « Cliquez ici »
3. « Recevoir mon devis sous 48 heures »

Question 5 — Un lead magnet est :

1. Un contenu offert en échange d’une adresse électronique
2. Un aimant publicitaire distribué en salon
3. Une extension de sécurité

Question 6 — Selon Google, un texte rédigé avec l’aide de l’IA :

1. Est automatiquement pénalisé
2. Est jugé sur son utilité et sa fiabilité, comme tout contenu
3. Doit être supprimé du site

Question 7 — Pour représenter votre équipe sur votre site, il vaut mieux :

1. Une image générée par l’IA
2. Une photo de banque d’images
3. Une vraie photo, avec l’accord des personnes

Question 8 — Le texte alternatif d’une image sert à :

1. Décrire l’image pour les personnes aveugles et les moteurs de recherche
2. Protéger l’image contre la copie
3. Réduire le poids de l’image

Question 9 — Lequel de ces liens est le plus accessible ?

1. « En savoir plus »
2. « Voir nos tarifs de pose »
3. « Ici »

Question 10 — Avant de laisser un assistant de programmation modifier votre site, il faut d’abord :

1. Supprimer les anciennes pages
2. Désactiver le certificat SSL
3. Travailler sur une copie et sauvegarder

Voir les réponses et les explications

Réponses : 1→2 · 2→1 · 3→2 · 4→3 · 5→1 · 6→2 · 7→3 · 8→1 · 9→2 · 10→3

Explications.

1. Le visiteur doit savoir en quelques secondes s’il est au bon endroit et quoi faire.
2. Le pied de page est présent partout : c’est là qu’on cherche ces liens.
3. Sur mobile, appeler en un geste est souvent l’action la plus naturelle.
4. Un verbe et un bénéfice concret disent au visiteur ce qu’il obtient.
5. Il intéresse le visiteur pas encore prêt à appeler et permet de garder le contact.
6. Google valorise les contenus utiles rédigés pour les personnes, quel que soit l’outil.
7. Une image d’IA ou de banque présentée comme votre équipe tromperait le visiteur.
8. Il rend l’image compréhensible sans la voir et aide le référencement.
9. Un lien explicite dit où il mène, même lu hors de son contexte.
10. Un assistant peut casser un site en une minute : copie, sauvegarde, tests.

Exercices

Exercice 1 — Auditer vos trois zones (20 min) Ouvrez votre site actuel, ou celui d’un concurrent si vous n’en avez pas, sur un téléphone. Passez la checklist de l’annexe. Notez les trois manques les plus gênants.

Exercice 2 — Rédiger votre page d’accueil (25 min) Rédigez, avec ou sans IA : l’accroche, trois preuves, la liste des services, l’appel à l’action principal. Relisez à voix haute et supprimez chaque phrase qui pourrait figurer sur le site d’un concurrent.

Exercice 3 — Préparer vos images (15 min) Choisissez cinq images pour votre page d’accueil. Pour chacune, indiquez sa source, sa licence et son texte alternatif.

Corrections des exercices

Exercice 1 — Exemple fictif d’un paysagiste. Manques relevés sur mobile : aucun appel à l’action visible sans défilement, téléphone non cliquable, aucun lien vers la politique de confidentialité dans le pied de page. Les deux premiers coûtent des contacts chaque jour. Le troisième expose à un manquement au RGPD.

Exercice 2 — Même paysagiste. Accroche : « Paysagiste à Rambouillet : jardins créés et entretenus, sans mauvaise surprise sur le devis. » Preuves : « 18 ans d’activité », « 4,9 sur 5 sur 41 avis », « devis détaillé poste par poste ». Services : création, entretien, élagage, arrosage automatique. Appel : « Demander une visite gratuite ». La phrase « Des jardins à votre image » a été supprimée : n’importe quel concurrent pourrait l’écrire.

Exercice 3 — Même cas. Trois photos de jardins réalisés (source : le paysagiste, accord des propriétaires), une photo de l’équipe (accord écrit des salariés), un schéma des saisons d’entretien généré par IA. Texte alternatif exemple : « Jardin en terrasses avec murets en pierre sèche réalisé à Rambouillet ». Aucune image de banque : les photos réelles suffisent et prouvent davantage.

Annexe — Checklist des trois zones

Zone	Point à vérifier	Oui / Non
Accueil	Ce que je fais, pour qui et où, visible sans défilement
Accueil	Appel à l’action visible sans défilement
Accueil	Au moins trois preuves (avis, réalisations, labels)
Accueil	Chaque service mène à sa page
Accueil	Dernier appel à l’action en bas de page
Accueil	Photos réelles, légères, avec texte alternatif
En-tête	Logo cliquable vers l’accueil
En-tête	Menu de cinq à sept entrées
En-tête	Bouton d’action principal visible sur mobile
En-tête	Téléphone cliquable (activité locale)
Pied de page	Coordonnées, horaires, zone d’intervention
Pied de page	Mentions légales
Pied de page	Politique de confidentialité et gestion des cookies
Pied de page	CGV (si vente)
Pied de page	Réseaux sociaux, lettre d’information
Général	Deux polices au maximum, contraste suffisant
Général	Testé sur un vrai téléphone

Unsplash, Pexels, OpenAI, Anthropic, Google sont cités à titre d’exemple. Acadigit n’est ni affiliée, ni sponsorisée, ni approuvée par ces sociétés. Ce module a été rédigé avec l’aide de l’IA, puis relu, amélioré et validé par Acadigit.