# Landing page : la structure des pages qui convertissent

[Canonical HTML page](https://gradiently.design/fr/guide/landing-page-design)

Une landing page est un seul argument avec une seule conclusion. Voici l’ordre dans lequel le dérouler, un exemple concret à reprendre et les choix de design qui font descendre les visiteurs le long de la page.

## The short version

- Une landing page, ou page d’atterrissage, est une page autonome conçue pour un seul objectif : une inscription, une réservation ou un achat.
- Une structure fiable enchaîne hero, problème, fonctionnement, preuves, détails de l’offre, objections et un dernier appel à l’action.
- La page doit correspondre à la publicité, au post ou à l’e-mail qui a amené le visiteur, dans ses mots comme dans son style.
- Supprimer la navigation du site et les liens superflus garde l’attention sur la seule action pour laquelle la page existe.
- Testez les changements un par un face à vos propres chiffres plutôt que de vous fier à des moyennes générales.

Une bonne **landing page** défend un seul objectif, dans l’ordre. Contrairement à une page d’accueil, qui s’adresse à tout le monde, une landing page existe pour un visiteur venu d’un seul endroit et qui doit faire une seule action : réserver le cours d’essai, rejoindre la liste d’attente, profiter de l’offre. La structure qui fonctionne encore et encore est un hero clair, le problème dans les mots du lecteur, le fonctionnement, les preuves, les détails de l’offre, les réponses aux objections et le même appel à l’action à la fin. Le rôle du design est de rendre cet ordre facile à suivre.

## Une page, un objectif

Écrivez l’objectif en une phrase avant de dessiner quoi que ce soit : « Amener les nouveaux visiteurs venus de notre publicité Instagram à réserver un cours découverte gratuit. » Chaque section a alors un test. Aide-t-elle cette personne à franchir ce pas ? Sinon, supprimez-la ou déplacez-la sur le site principal.

### Page d’accueil

- S’adresse à tous les visiteurs
- Navigation complète et nombreux liens
- Plusieurs produits ou services
- Explique toute l’activité

### Landing page

- S’adresse à un public venu d’une seule source
- Pas de navigation, ou seulement un logo
- Une seule offre
- Défend un argument et demande une fois, puis encore

## La structure d’une landing page, section par section

1. **Hero** Un titre qui porte la promesse, une ligne de soutien, un bouton, un visuel. [Le design de la section hero](https://gradiently.design/fr/guide/hero-section-design) détaille cet écran.
2. **Le problème** Deux ou trois phrases qui décrivent la situation du visiteur, avec ses mots. Vous montrez que vous comprenez avant de vendre.
3. **Le fonctionnement** Trois étapes, chacune avec un titre court et une phrase. On s’engage plus facilement quand on se représente le déroulé.
4. **Les preuves** De vrais témoignages avec des noms, des photos de vrais travaux, les logos de vrais clients ou une courte démo. Jamais inventés.
5. **L’offre en détail** Ce que l’on obtient exactement, quand, et ce que cela coûte ou non. Des conditions claires lèvent les hésitations.
6. **Les objections** Une courte FAQ qui répond aux raisons pour lesquelles on n’agit pas : le temps, le prix, l’adéquation, la résiliation, la suite.
7. **Dernier appel à l’action** Reprenez la promesse du titre et le même bouton. Les visiteurs qui lisent jusqu’au bout sont prêts ; ne les obligez pas à remonter.

Toutes les pages n’ont pas besoin de toutes les sections. Une liste d’attente pour un lancement peut se limiter à un hero, trois lignes de fonctionnement et un champ e-mail. Une offre très engageante, comme une formation ou une consultation, demande en général les sept et davantage de preuves.

## Exemple concret : l’offre découverte d’un studio de yoga

| Section | Ce que dit la page |
| --- | --- |
| Hero | « Votre premier cours est offert. » Ligne de soutien : « Petits cours accessibles aux débutants à Bristol, six jours sur sept. » Bouton : « Réserver mon cours gratuit » |
| Problème | « Dans les grands cours en salle, tout va vite et personne ne corrige votre posture. Difficile de commencer quand on ne sait pas ce qu’on fait. » |
| Fonctionnement | Choisissez un cours débutant. Arrivez dix minutes en avance, tapis fournis. Restez cinq minutes pour parler de ce qui vous convient. |
| Preuves | Trois avis courts de vrais membres avec prénoms et photos, et des images du vrai studio. |
| Offre | Un cours gratuit pour les nouveaux élèves, sur n’importe quelle séance débutant, sans carte bancaire. |
| Objections | « Je ne suis pas souple. » « Comment m’habiller ? » « Y a-t-il un parking ? » « Que se passe-t-il après le cours gratuit ? » |
| Dernier appel à l’action | « Venez essayer un cours. » Même bouton : « Réserver mon cours gratuit » |

Chaque ligne répond à une question qu’un débutant inquiet se pose vraiment. La même structure fonctionne pour l’offre de contrôle d’un dentiste ou l’essai d’un logiciel.

## Accordez la page à la publicité d’origine

La plupart des visiteurs d’une landing page arrivent de quelque part : une [publicité Instagram](https://gradiently.design/fr/guide/instagram-ad-design), une publicité LinkedIn, un e-mail, un QR code sur un flyer. Dès leur arrivée, ils vérifient qu’ils sont au bon endroit. Reprenez l’offre exacte de la publicité dans le titre et conservez son style : le même fond, les mêmes couleurs, la même typographie. Une page sans rapport visuel avec la publicité donne une impression de tromperie, même quand ce n’en est pas une.

Une publicité Instagram portrait pour un studio de yoga qui offre le premier cours

La publicité Instagram en 1080×1350.

Un hero de landing page en large qui reprend la même offre de premier cours gratuit et le même fond que la publicité

Le hero de la landing page en 1920×1080 : mêmes mots, même style, pour que personne ne se demande s’il a cliqué sur le bon lien.

Concevoir les deux à partir d’une même source rend cela automatique. Dans Gradiently, avec Pro, une création se décline à toutes les tailles en une seule étape : le post, la story, l’en-tête d’e-mail et le hero de la page partagent un Mark et un titre. [Un style, toutes les tailles](https://gradiently.design/fr/guide/one-look-every-size) montre la méthode, et [la cohérence de marque](https://gradiently.design/fr/guide/brand-consistency) explique pourquoi elle compte au delà d’une campagne.

## Les choix de design qui font défiler

- **Une seule couleur d’accent pour tous les boutons**, utilisée nulle part ailleurs. L’œil apprend où cliquer. [La règle 60 30 10](https://gradiently.design/fr/guide/60-30-10-rule) aide à trouver l’équilibre.
- **De l’espace entre les sections**, pour que chacune se lise comme une idée. Une page chargée semble pénible.
- **Des intertitres qui ont du sens seuls.** Beaucoup de gens ne lisent que les intertitres ; ils doivent raconter toute l’histoire.
- **De vraies photos plutôt que des images de banque.** Votre vraie salle, votre produit, votre équipe ou vos résultats.
- **Des formulaires courts.** Ne demandez que ce dont vous avez besoin maintenant. Une adresse e-mail se donne plus facilement qu’un numéro de téléphone.
- **Pas de menu de navigation**, ou juste un logo, pour qu’il n’y ait nulle part où s’égarer.

- Fond de page: #fbf7f2
- Bande de section: #efe6da
- Texte: #2b2a33
- Texte secondaire: #6b6670
- Boutons uniquement: #c2410c

Une palette de landing page calme : deux fonds chauds qui alternent entre les sections, deux couleurs de texte et un accent réservé à l’appel à l’action.

## Le mobile d’abord, puis les tests

Le trafic venu des réseaux sociaux arrive surtout sur téléphone : concevez d’abord la version de 390 pixels de large. Gardez le titre et le bouton sur le premier écran, donnez aux boutons au moins 44 pixels de haut et n’utilisez un bouton collant que s’il ne masque pas le contenu.

### À éviter

- Changer cinq choses à la fois et deviner ce qui a marché
- Prendre comme objectif un taux de conversion lu sur un blog
- Des popups qui s’affichent avant que le visiteur ait lu quoi que ce soit
- Un formulaire de dix champs pour télécharger un guide

### À faire

- Changer une seule chose, comme le titre, et comparer
- Mesurer face à votre propre version précédente
- Laisser lire l’offre avant de demander quoi que ce soit
- Demander le minimum, puis en apprendre plus ensuite

Il n’existe pas de bon taux de conversion universel : il dépend de l’offre, du prix et du trafic. Ce que vous pouvez toujours faire, c’est rendre la version suivante plus claire que la précédente. Pour les couleurs derrière tout cela, voir [les palettes de couleurs pour site web](https://gradiently.design/fr/guide/website-color-scheme).

## FAQ

### Quelle est la meilleure structure pour une landing page ?

Hero, problème, fonctionnement, preuves, détails de l’offre, objections et dernier appel à l’action. Les offres simples peuvent sauter des sections ; les engagements plus importants les demandent toutes.

### Une landing page doit-elle avoir une navigation ?

En général non. Supprimer le menu garde l’attention sur la seule action pour laquelle la page existe ; un logo suffit.

### Quelle longueur pour une landing page ?

Le temps de répondre aux questions du visiteur. Une liste d’attente gratuite peut tenir sur un écran, alors qu’une formation payante demande souvent une longue page avec des preuves détaillées et une FAQ.

### Quelle différence entre une landing page et une page d’accueil ?

Une page d’accueil s’adresse à tous les visiteurs et renvoie partout. Une landing page s’adresse à un public venu d’une seule source et demande une seule action.

### Ma landing page doit-elle ressembler à ma publicité ?

Oui. Reprenez l’offre de la publicité dans le titre et gardez ses couleurs et son fond, pour que les visiteurs sachent tout de suite qu’ils sont au bon endroit.