Conception de Landing Page

Aperçu

Construisez des pages d'atterrissage qui convertissent ET captivent. Ce skill combine une structure axée sur la conversion avec un design visuel distinctif pour créer des pages qui se démarquent dans un monde saturé par l'IA. L'objectif : des pages valant 50 à 100 $ dont vous seriez fier de vendre.

OBLIGATOIRE : Découverte d'Ambiance (À Faire en Premier)

AVANT d'écrire le moindre code, vous DEVEZ exécuter le processus de Découverte d'Ambiance. Ce n'est pas une table de correspondance – c'est une invite créative qui génère une direction esthétique UNIQUE à chaque fois.

L'objectif : Aucune page d'atterrissage ne doit se ressembler, même pour des produits similaires.

Le Processus de Découverte d'Ambiance

Posez ces questions à l'utilisateur, puis SYNTHÉTISEZ une direction unique. Ne vous contentez pas de faire correspondre les réponses à des préréglages.

Étape 1 : Recueillir le Contexte (Posez Ces Questions)

Q1 : Quel est un lieu ou un objet du monde réel que cette marque incarnerait ?

Pas "quel secteur d'activité" – une chose concrète et spécifique. Un konbini à Tokyo à 2h du matin. La cuisine d'une grand-mère. Un parking brutaliste. Un récif corallien. Le cockpit d'un 747. Un marché aux puces à Marrakech. Un studio d'enregistrement des années 1970.

Q2 : Quelle est l'UNIQUE émotion que quelqu'un devrait ressentir dans les 3 premières secondes ?

Choisissez UNE : Calme. Énergisé. Curieux. En confiance. Ravie. Impressionné. Rebelle. Nostalgique. Inspiré. Amusé. Sophistiqué. Accueilli. Intrigué. Confiant.

Q3 : Choisissez DEUX influences inattendues à faire entrer en collision :

Exemples : "emballage médical + graphisme skateboard", "tableurs + art de rue", "hôtel de luxe + fanzine punk", "salle de contrôle NASA + maternelle", "konbini japonais + bibliothèque victorienne"

Q4 : À quoi cette page ne doit-elle JAMAIS ressembler ?

Citez 2-3 choses spécifiques à éviter activement. "Un projet crypto", "Une app de bien-être", "Quelque chose fait par une banque", "Tout ce qui a des dégradés violets"

Étape 2 : Inventer l'Esthétique (Ne Cherchez Pas – Créez)

En vous basant sur les réponses, CRÉEZ une ambiance unique en décidant :

INVENTION DES COULEURS (N'utilisez pas de palettes mémorisées – dérivez-les du lieu/objet)

Quelles couleurs existent dans ce lieu/objet réel de la Q1 ?
Extrayez 3-4 couleurs qui semblent authentiques par rapport à cette référence
Inventez des codes hexadécimaux spécifiques à chaque fois – ne réutilisez pas les codes de projets précédents
Donnez un nom évocateur à votre palette (pas "bleu et orange" mais "Bodega de Minuit" ou "Matin de la Ceinture de Rouille")

INVENTION TYPOGRAPHIQUE (Faites correspondre la voix à la collision)

À quoi ressemblerait le texte dans cet endroit ?
Trouvez une police d'affichage qui incarne la collision de la Q3
Ne vous rabattez pas sur vos choix habituels – parcourez Google Fonts avec un regard neuf
Considérez : le poids, la largeur, le contraste, les particularités

INVENTION DE LA MISE EN PAGE (Dérivez de l'espace physique)

Comment l'espace est-il organisé dans ce lieu de la Q1 ?
Est-il exigu ou spacieux ? En forme de grille ou organique ? Vertical ou horizontal ?
Quel choix de mise en page inattendu incarnerait la collision de la Q3 ?

INVENTION DU MOUVEMENT (Faites correspondre l'émotion)

Comment l'émotion de la Q2 se manifeste-t-elle ?
Calme = à peine perceptible. Énergisé = cinétique. Sophistiqué = lent et délibéré.
Quel est le mouvement UNIQUE qui définit cette page ?

Étape 3 : Rédigez Votre Spécification d'Ambiance

Avant de coder, écrivez ceci explicitement :

NOM DE L'AMBIANCE : [Inventez un nom de 2-3 mots]
RÉFÉRENCE : [Le lieu/objet de la Q1]
ÉMOTION : [De la Q2]
COLLISION : [De la Q3]
ANTI-MODÈLES : [De la Q4]

COULEURS :
- Primaire : [hex] - [pourquoi cette couleur]
- Secondaire : [hex] - [pourquoi]
- Arrière-plan : [hex] - [pourquoi]
- Accent : [hex] - [pourquoi]
- Nom de la palette : [nom évocateur]

TYPOGRAPHIE :
- Affichage : [nom de police spécifique] - [pourquoi elle convient]
- Corps : [nom de police spécifique] - [pourquoi]
- Caractère : [décrivez la voix]

MISE EN PAGE :
- Densité : [clairsemé/équilibré/dense]
- Formes : [angulaires/arrondies/organiques/mélangées]
- Élément signature : [un choix de mise en page inhabituel]

MOUVEMENT :
- Niveau : [statique/subtil/modéré/dynamique/chaotique]
- Animation signature : [une animation spécifique qui définit cette page]

ÉLÉMENT SURPRISE :
- Un détail inattendu qui ne "correspond pas" mais qui rend la page mémorable

Étape 4 : Le Contrôle de Fraîcheur

Avant de continuer, vérifiez :

Je n'ai PAS réutilisé les codes hexadécimaux de mes 3 derniers projets
Je ne me suis PAS rabattu sur mes polices "confortables" (vérifiez : est-ce que j'utilise Inter ? Nunito ? Space Grotesk ? Si oui, trouvez autre chose)
La collision de la Q3 est réellement visible dans mes choix
Quelqu'un ne pourrait PAS confondre cette page avec mes pages d'atterrissage précédentes
J'ai inclus un élément surprise qui me surprend même moi-même

Exemple de Découverte d'Ambiance

Q1 - Lieu/Objet : "Une gare japonaise à l'heure de pointe"

Q2 - Émotion : "Confiant"

Q3 - Collision : "Signalétique de transport + haute couture"

Q4 - Ne jamais confondre avec : "Une app de méditation, quelque chose de fantaisiste, la tech start-up"

Spécification d'Ambiance Générée :

NOM DE L'AMBIANCE : Piste de Shinjuku
RÉFÉRENCE : Gare japonaise à l'heure de pointe
ÉMOTION : Confiant
COLLISION : Signalétique de transport + haute couture
ANTI-MODÈLES : Pas de dégradés doux, pas d'illustrations ludiques, pas de formes arrondies et amicales

COULEURS :
- Primaire : #1a1a1a - le noir des portes de train
- Secondaire : #f5f5f0 - le béton du quai, usé et lisse
- Arrière-plan : #fafaf8 - le blanc des lumières fluorescentes
- Accent : #e60012 - le rouge de la ligne JR, qui attire l'attention
- Nom de la palette : "Bord de Quai"

TYPOGRAPHIE :
- Affichage : Darker Grotesque - confiant, légèrement condensé, touche européenne
- Corps : Noto Sans JP - utilitaire et propre, inspiré des transports
- Caractère : Autoritaire mais pas froid. Clair. Directionnel.

MISE EN PAGE :
- Densité : Riche mais organisée - comme un plan de gare
- Formes : Angulaires avec des exceptions intentionnellement arrondies (comme les fenêtres de train)
- Élément signature : Des bandes horizontales fortes qui divisent les sections comme des horaires de train

MOUVEMENT :
- Niveau : Subtil mais précis
- Animation signature : Les éléments glissent depuis le côté comme des trains arrivant - horizontaux, fluides, avec un timing exact

ÉLÉMENT SURPRISE :
- Un élément utilise une superposition de texture semblable à du tissu - la collision haute couture

Idées pour Démarrer l'Inspiration (Quand on est Bloqué sur Q1)

Les Règles Anti-Convergence

Pas de mémoire de code hexadécimal - Générez les couleurs à partir de la référence, ne vous souvenez pas de "mon bleu habituel"
Rotation de polices obligatoire - Impossible d'utiliser la même police d'affichage dans des projets consécutifs
La collision doit être visible - Si quelqu'un ne peut pas voir les DEUX influences de Q3, poussez plus loin
L'élément surprise est obligatoire - Chaque ambiance a besoin d'un élément qui ne "correspond pas" mais qui la rend unique
Nommez-la - Une ambiance sans nom devient générique. Une ambiance nommée a une identité.

Questions de Contexte Rapides (Version Minimale)

Si l'utilisateur dit simplement "fais-moi une page d'atterrissage" sans contexte, demandez :

"Quel est un lieu ou un objet qui capture l'énergie de cette marque ?"
"Quelle émotion devrait dominer ?"
"À quoi cela ne devrait-il JAMAIS ressembler ?"

Ensuite, synthétisez une ambiance à partir de ces trois réponses.

OBLIGATOIRE : Stratégie de Copie (À Faire Avec la Découverte d'Ambiance)

Exécutez ceci EN PARALLÈLE avec la Découverte d'Ambiance. La Découverte d'Ambiance vous donne l'apparence. La Stratégie de Copie vous donne les mots. Les deux doivent être faits avant tout code.

L'Équation de Conversion

Chaque décision de copie découle de ceci :

Taux d'Achat = Désir - (Effort + Confusion)

Augmenter le désir → communiquer la valeur clairement et spécifiquement
Diminuer l'effort → concision, structure scannable, actions suivantes évidentes
Diminuer la confusion → dire exactement ce que c'est, rendre les boutons immanquables

Si vous êtes bloqué sur une décision de copie, demandez : "Est-ce que cela augmente le désir ou diminue l'effort/la confusion ?"

Étape 1 : Découverte des Objections

Avant d'écrire le moindre titre, identifiez les objections d'achat. Demandez à l'utilisateur :

"Qu'est-ce qui a failli empêcher vos clients d'acheter ?" "Pourquoi les non-clients n'ont-ils pas encore acheté ?"

Catégories d'objections courantes :

"Je n'ai pas les compétences/le temps pour cela"
"Cela ne fonctionnera pas pour ma situation spécifique"
"C'est trop cher pour ce que j'obtiens"
"Je n'ai pas encore assez confiance"
"Je ne comprends pas ce que cela fait réellement"

Notez les 3 principales objections. Celles-ci guideront l'accroche de votre titre, le texte des fonctionnalités et le cadrage de votre appel à l'action (CTA).

Étape 2 : Formule du Titre

Chaque titre principal suit : Proposition de Valeur + Accroche

La proposition de valeur doit passer ce test décisif :

Si un visiteur ne voit QUE le titre et rien d'autre, saura-t-il exactement ce que vous vendez ?

❌ "Améliorez votre flux de travail" (blabla d'entreprise – flux de travail pour quoi ?) ❌ "L'avenir de la productivité" (ne dit rien de concret) ✅ "Livraison de courses en 1 heure" (spécifique, concret, clair) ✅ "Concevez des sites web visuellement – sans code requis" (ce que ça fait + objection clé traitée)

L'accroche est de l'un des deux types suivants :

Type A – Affirmation audacieuse et spécifique (déclenche la curiosité) :

"Réduisez le temps de déploiement de 4 heures à 12 minutes"
"10 000 équipes ont livré plus vite le mois dernier"

Type B – Objection traitée (supprime le premier frein à l'achat) :

"Aucune carte de crédit requise" (traite l'objection de confiance)
"Fonctionne avec vos outils existants" (traite l'objection de coût de changement)
"Configuration en 5 minutes" (traite l'objection d'effort)

Utilisez votre objection principale de l'Étape 1 pour choisir le type d'accroche.

Étape 3 : Règles du Sous-titre

Le sous-titre fait exactement deux choses :

Explique ce qu'est le produit (si le titre était axé sur les avantages)
Explique comment l'affirmation audacieuse est possible (si le titre faisait une affirmation)

Max : 1-2 phrases. Restez léger. Si vous avez besoin de trois phrases, votre titre ne fait pas assez son travail.

Étape 4 : Structure du Texte des Fonctionnalités

Chaque fonctionnalité reçoit exactement trois éléments :

Élément	Règles
En-tête de la fonctionnalité	Proposition de valeur courte uniquement. Soyez direct. ❌ "Donnez plus de pouvoir à votre équipe" ✅ "Collaboration en temps réel"
Paragraphe de la fonctionnalité	Description concise + traite UNE objection critique. Lien vers les détails si nécessaire – pas de murs de texte.
Image de la fonctionnalité	Montrez le produit EN ACTION. Pour les logiciels : GIFs > captures d'écran > art abstrait. Pour les biens physiques : cas d'utilisation + gros plans sur la qualité de fabrication.

Chaque fonctionnalité doit renvoyer à la proposition de valeur dominante du héros. Les fonctionnalités ne sont pas aléatoires – ce sont des preuves pour l'affirmation que vous avez faite au-dessus de la ligne de flottaison.

Étape 5 : Texte de l'Appel à l'Action (CTA)

Les CTA doivent poursuivre le récit du héros, et non pas être génériques.

❌ "Commencer" / "Demander une démo" / "S'inscrire" (paresseux, hors contexte) ✅ "Trouver un restaurant près de chez moi" (poursuit un récit de livraison) ✅ "Commencer à concevoir" (poursuit un récit d'outil de conception) ✅ "Voir vos économies" (poursuit un récit financier)

Le texte du bouton CTA doit ressembler à la phrase suivante naturelle après la lecture du titre.

Étape 6 : Stratégie de Preuve Sociale

Si vous avez des clients/des presse notables :

Affichez les logos dans un bandeau défilant – crée un sentiment de FOMO ("tout le monde connaît déjà ça")
Mettez en avant des métriques impressionnantes (nombre de clients, revenus traités, etc.)

Si vous n'avez PAS de preuve sociale notable (démarrage à froid) :

Proposez un accès gratuit à 3 à 5 entreprises reconnaissables, puis affichez leurs logos
Utilisez des témoignages spécifiques avec de vrais noms et photos (même issus des utilisateurs bêta)
Montrez des statistiques agrégées ("Utilisé par plus de 500 équipes" bat une barre de logos vide)
Envisagez une section "Vu dans" avec toutes les mentions presse, podcasts ou newsletters

Ne simulez pas. Une section de preuve sociale vide est pire que pas de section du tout.

Étape 7 : Aiguillage Multi-Public

Si votre produit sert des personnalités distinctes (par exemple, particuliers vs. équipes, développeurs vs. designers) :

Ajoutez un élément "choisissez votre propre aventure" près du haut de la page qui aiguille les visiteurs vers les sections pertinentes. Exemples :

Onglets à bascule : "Pour les développeurs" / "Pour les designers"
Héros divisé : "Je suis [Rôle A]" / "Je suis [Rôle B]"
Pages d'atterrissage segmentées liées depuis le héros

Ne forcez pas tout le monde à passer par le même entonnoir s'ils ont des besoins différents.

Spécification de la Stratégie de Copie

Écrivez ceci en parallèle de votre Spécification d'Ambiance :

3 PRINCIPALES OBJECTIONS :
1. [objection] → traitée dans : [titre/fonctionnalité/CTA]
2. [objection] → traitée dans : [titre/fonctionnalité/CTA]
3. [objection] → traitée dans : [titre/fonctionnalité/CTA]

TITRE :
- Proposition de valeur : [ce que vous vendez, concrètement]
- Type d'accroche : [affirmation audacieuse / objection traitée]
- Titre complet : [le texte réel]
- Test décisif : Est-ce que quelqu'un saurait ce que nous vendons à partir de cela seul ? [oui/non]

SOUS-TITRE : [1-2 phrases – ce que c'est + comment l'affirmation fonctionne]

TEXTE DU CTA : [poursuite narrative du titre]

PUBLIC : [unique / multi-personnalité]
- Si multi : [comment nous les aiguillons]

La Règle des 50%

Passez 50% de votre temps sur la section héros. C'est l'image de couverture pour les réseaux sociaux, la première impression, l'accroche. Tout le reste découle d'un héros bien fait.

Composition des Sections (Du Haut en Bas)

1. Section Héros (Objectif Principal)

L'élément qui fait ou défait la page. Doit contenir :

Titre : Proposition de Valeur + Accroche de votre Spécification de Stratégie de Copie (voir ci-dessus). Doit passer le test décisif – si quelqu'un ne voit QUE cela, sait-il ce que vous vendez ?
Sous-titre : Explique ce que c'est + comment l'affirmation fonctionne. 1-2 phrases max, restez léger.
Bouton(s) CTA : Poursuite narrative du titre (pas "Commencer" – voir les règles de texte CTA ci-dessus). CTA secondaire optionnel.
Preuve Sociale : Bandeau de logos, témoignages, ou badges de confiance. En cas de démarrage à froid, voir la Stratégie de Preuve Sociale ci-dessus.
Élément Visuel : Photo du produit, illustration ou fond animé

Variations du Héros :

Mise en page divisée (texte à gauche, visuel à droite)
Centré avec éléments flottants
Fond à fond perdu avec texte en superposition
Asymétrique avec éléments décoratifs

2. Section Fonctionnalités/Avantages

Montrez ce que le produit fait. Chaque fonctionnalité nécessite trois éléments : en-tête (proposition de valeur courte, pas de "Responsabiliser/Révolutionner"...

[contenu tronqué pour la traduction – conservé tel quel du modèle original]

Conception de Landing Pages

Qu'est-ce que Conception de Landing Pages ?

Demander à votre IA préférée

Documentation