Une page d’accueil de site web a un travail unique : faire comprendre, en quelques secondes, ce que vous proposez et pour qui, de telle manière que le visiteur reste et passe à l’étape suivante. Cet article explique comment concevoir cette page, section par section, en partant des questions que se pose le visiteur quand il atterrit sur votre site, plutôt que des modes graphiques de l’année. La structure est valable pour un site WooCommerce, un site vitrine, une landing page ou une SaaS.

1 — Ce que fait votre visiteur dans les huit premières secondes

Quand quelqu’un arrive sur votre site, il ne lit pas. Il scanne en diagonale. Il essaye de répondre à trois questions, dans cet ordre :

Suis-je au bon endroit ? Le site parle-t-il de ce que je cherche ?
Est-ce que je peux faire confiance ? Y a-t-il des signaux qui prouvent que c’est sérieux ?
Que dois-je faire maintenant ? Acheter, contacter, lire un article, m’inscrire ?

Toute la conception qui suit est organisée autour de ces trois questions. Une page qui ne répond clairement à la question 1 fait fuir le visiteur en moins de cinq secondes, indépendamment de la qualité du reste.

2 — La section hero (au-dessus de la ligne de flottaison)

La ligne de flottaison (« above the fold ») désigne la zone visible avant scroll. C’est la portion la plus précieuse de votre page, parce que la moitié des visiteurs ne descendent jamais plus bas. Elle doit, en une phrase et un appel à l’action, dire qui vous êtes et ce que le visiteur peut faire.

Composition recommandée :

Un titre principal (H1) qui exprime un bénéfice concret pour le visiteur, pas un slogan poétique. « Sites web professionnels pour PME ouest-africaines, livrés en 3 semaines » est plus efficace que « Donnons vie à vos rêves digitaux ».
Un sous-titre qui précise pour qui c’est et ce qui rend l’offre crédible. Une à deux phrases.
Un bouton d’action principal avec un libellé d’action concret (« Demander un devis », « Voir les tarifs », « Lire le tutoriel »). Pas « En savoir plus ».
Un visuel ou une preuve — capture d’écran du produit, photo de l’équipe, courte vidéo de 30 secondes montrant le service en action.

Évitez le slider qui défile : chaque slide divise par deux l’attention reçue par le précédent, et personne ne lit la 3e ou 4e slide. Une seule image hero, optimisée en AVIF avec fetchpriority="high", sert le LCP (Largest Contentful Paint, la métrique Google qui mesure le moment où le contenu principal devient visible) et la conversion en même temps.

3 — La barre de logos clients (preuve sociale instantanée)

Juste sous le hero, une bande discrète qui aligne 4 à 8 logos d’entreprises avec qui vous avez travaillé répond à la question 2 du visiteur (« est-ce que c’est sérieux ? ») avant même qu’il ne se la pose explicitement. C’est le mécanisme de crédibilité le plus rapide.

Si vous démarrez sans clients reconnaissables, deux substituts pertinents : compteur de réalisations livrées (« 47 sites livrés depuis 2024 »), ou citation d’un partenariat (école, programme d’incubation, technologie).

Les logos doivent être en niveaux de gris (atténue la dispersion visuelle) et de taille uniforme (sinon le plus gros attire l’œil au détriment de votre message).

4 — Le bloc problème → solution

Une fois que la confiance initiale est établie, vous pouvez commencer à expliquer ce que vous faites. La méthode la plus efficace consiste à formuler le problème de votre client cible avec ses propres mots, puis à présenter votre solution.

Par exemple, pour une agence WordPress sénégalaise :

Problème reconnu : « Vos clients vous demandent un site web depuis 6 mois mais les devis reçus dépassent votre budget ou les délais explosent. »
Promesse de résolution : « On livre votre site WordPress complet (vitrine ou e-commerce) en 3 semaines, à prix fixe en FCFA, avec formation incluse. »

Ce bloc résonne fortement chez les visiteurs qui ont effectivement vécu le problème énoncé. Ceux qui n’ont jamais eu ce problème ne sont de toute façon pas votre cible : laissez-les passer leur chemin.

5 — Le bloc « ce que vous obtenez »

Trois à six bénéfices concrets, présentés sous forme de cartes courtes : icône simple, titre de 3 à 6 mots, deux lignes d’explication. La règle clé est de parler du résultat pour le client, pas de la fonctionnalité technique.

À éviter (orienté technique)	À préférer (orienté résultat)
Hébergement Hostinger Premium	Site qui charge en moins de 2 secondes
Plugin WPForms Pro	Vos prospects vous contactent en 1 clic
Schema HowTo et Article	Vous apparaissez dans les résultats Google avec étoiles

Le visiteur achète des résultats, pas des outils. Vous mentionnez les outils plus loin si vraiment nécessaire (à la rigueur sur une page « Comment on travaille »).

6 — Les témoignages et cas clients

Un témoignage écrit non sourcé n’a aucun effet ; on s’en méfie par défaut depuis dix ans. Pour qu’un témoignage convertisse, il doit comporter trois éléments minimum : le nom complet du client, le nom de son entreprise, sa photo. Idéalement, ajoutez un résultat chiffré (« nos commandes en ligne ont augmenté de 40 % en 3 mois »).

Pour collecter ces témoignages, deux pratiques :

Demande post-livraison — un email à J+30 après la livraison du projet, avec 3 questions courtes : « qu’est-ce qui vous a décidé à nous choisir ? quel résultat avez-vous observé ? que diriez-vous à quelqu’un qui hésite ? ». Les réponses brutes font de bons témoignages.
Vidéo courte 30 secondes — encore plus puissant, et de plus en plus accessible avec un smartphone et l’éclairage de jour. Demander explicitement la permission de l’utiliser sur le site.

Si vous ne pouvez pas obtenir trois témoignages d’ici un mois, c’est un signal que votre offre n’est pas encore assez aboutie pour le marché. Travaillez le service plutôt que la page.

7 — La FAQ qui lève les objections

Une FAQ bien conçue répond aux questions qu’un visiteur a en tête mais que personne ne pose à voix haute. Pour les identifier, regardez les emails de prospects qui n’ont pas signé : les phrases « j’ai peur que… », « est-ce que… », « et si… » sont des objections déguisées. Chacune mérite une question dans votre FAQ.

Format recommandé :

Liste à dérouler (accordéon) sur mobile pour gagner de l’espace
5 à 8 questions maximum (au-delà, le visiteur scanne sans lire)
Réponses courtes, 2 à 4 phrases
Une dernière question type « Vous avez une autre question ? » qui pointe vers WhatsApp ou le formulaire de contact

Ajoutez le schéma FAQPage en JSON-LD dans le <head>. Google peut afficher les questions/réponses directement dans les résultats de recherche, ce qui augmente la visibilité et le CTR (Click-Through Rate, le taux de clic depuis Google).

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "Combien de temps pour livrer un site WordPress ?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Un site vitrine standard est livré en 3 semaines à compter de la signature du devis et du versement de l'acompte."
    }
  }]
}
</script>

8 — Le CTA final de clôture

Le visiteur arrivé en bas de la page est qualifié : il a lu, il est intéressé, il faut lui rendre l’action évidente. La section finale reprend la promesse principale et propose deux options :

Une option « engagée » — demande de devis, achat, prise de rendez-vous
Une option « tiède » — newsletter, lecture d’un article, contact WhatsApp

Évitez les pages d’accueil qui se terminent en biais sur les articles de blog ou le footer générique. Le dernier écran avant la sortie doit donner une raison de rester ou de revenir.

9 — Hiérarchie visuelle et lisibilité

Trois principes d’ordre visuel à maintenir tout au long de la page :

Taille — le titre H1 est 2,5 à 3 fois plus grand que le texte courant. Les sous-titres (H2) 1,5 à 2 fois. Sans hiérarchie de taille, l’œil ne sait pas où regarder.
Espacement — chaque section est isolée par 80 à 120 px de marge verticale. Sans ce blanc, deux sections se mélangent visuellement et perdent leur effet propre.
Couleur — une couleur d’accent unique réservée aux éléments cliquables (boutons, liens). Si trois couleurs concurrentes signalent l’action, aucune ne le fait clairement.

10 — Performance et mobile-first

Plus de 80 % du trafic en Afrique de l’Ouest est mobile, et la 4G d’entrée de gamme a un débit réel de 5 à 15 Mb/s. Si votre page d’accueil pèse 8 Mo, elle met 8 secondes à charger sur ce profil. Vous perdez la moitié des visiteurs avant même qu’ils voient votre titre.

Cibles à atteindre, mesurées sur PageSpeed Insights en mode mobile :

LCP sous 2,5 s — l’image hero apparaît rapidement
INP sous 200 ms — la page répond vite aux interactions
CLS sous 0,1 — pas de mouvement intempestif après chargement
Poids total sous 1,5 Mo — atteignable avec AVIF, lazy load, pas de slider

Les techniques précises pour atteindre ces cibles sont décrites dans optimiser les images WordPress et optimiser le taux de conversion.

11 — Pièges courants à éviter

Slider en hero — chaque slide diluant l’attention. Préférez une seule image avec une promesse claire.
Pop-up newsletter immédiat — fait fuir avant que le visiteur ait compris ce que vous proposez. À déclencher au scroll 50 % ou à l’intention de sortie.
Vidéo qui se lance avec son — interdite par défaut sur la plupart des navigateurs et perçue comme intrusive sur mobile. Si vidéo, mute par défaut.
Trop de menus dans le header — au-delà de 6 entrées, l’utilisateur ne lit plus. Sur mobile, un menu hamburger remplace.
Boutons qui se ressemblent — un seul bouton primaire (couleur d’accent), les autres en secondaire (contour).
Texte sur image sans contraste — vérifier ratio 4,5:1 minimum (WCAG 2.2 AA).

Concevoir une page d’accueil qui convertit — méthode et structure 2026