# Vidéo de démo produit : montrer l’essentiel en moins d’une minute [Canonical HTML page](https://gradiently.design/fr/guide/product-demo-video) Les meilleures démos ne font pas le tour de chaque fonction. Elles montrent une personne qui accomplit une tâche, vite. Voici une structure en soixante secondes, un script à adapter et les détails qui donnent un rendu fini. ## The short version - Une vidéo de démo produit fonctionne le mieux quand elle montre une vraie tâche, du problème au résultat, plutôt qu’un tour de toutes les fonctions. - Moins d’une minute suffit pour une démo sur une landing page ou dans un fil social ; les présentations plus longues ont leur place dans les articles d’aide. - Montrez le résultat dès les premières secondes, pour que le public sache ce qu’il va obtenir avant de voir comment. - Les sous-titres sont indispensables, car les démos produit sont souvent regardées sans le son, sur les landing pages comme dans les fils. - Montez une version verticale à part pour les réseaux au lieu de recadrer la version grand écran. Une bonne **vidéo de démo produit** montre une personne qui accomplit une vraie tâche avec votre produit, du problème au résultat final, en moins d’une minute. Ouvrez sur le résultat, montrez les trois ou quatre étapes qui y mènent et terminez par une seule action à faire. Prévoyez un écran propre, un texte lisible, des sous-titres pour ceux qui regardent sans le son, et un court carton titre et carton de fin à vos couleurs. Résistez au tour des fonctions : on retient un résultat, pas un menu. ## Choisissez une tâche, pas toutes les fonctions Avant d’ouvrir un outil d’enregistrement, écrivez une phrase : « Un [profil] utilise [produit] pour [obtenir un résultat] en [peu de temps]. » Par exemple : une gérante de café utilise une appli de réservation pour remplir une table annulée en deux minutes. Cette phrase, c’est toute la vidéo. Tout ce qui ne la sert pas va dans une autre vidéo. ### Tour des fonctions - Commence sur l’écran de connexion - Visite chaque onglet dans l’ordre - Explique des réglages que personne n’a demandés - Se termine par « et bien plus encore » - Trois minutes, et ça continue ### Démo d’une tâche - Commence sur le résultat final - Suit une vraie tâche du début à la fin - Ne montre que les clics qui comptent - Se termine par une étape suivante claire - Quarante à soixante secondes ## Une structure de vidéo de démo produit en 60 secondes Cette structure convient à une landing page, un post de lancement ou un e-mail commercial. Les durées sont indicatives ; c’est l’ordre qui compte. | Secondes | Temps fort | À l’écran | | --- | --- | --- | | 0 à 5 | Le résultat | La chose terminée : l’agenda rempli, la facture envoyée, la page publiée | | 5 à 12 | Le problème | Le désordre d’avant, en un plan, avec une ligne de voix ou de sous-titre | | 12 à 45 | Trois ou quatre étapes | Uniquement les clics qui font avancer la tâche, pauses coupées | | 45 à 55 | Retour au résultat | Le résultat à nouveau, maintenant qu’on sait comment il a été obtenu | | 55 à 60 | Une étape suivante | Un carton de fin avec une seule action et votre adresse | Résultat, problème, étapes, résultat, action. Montrer le résultat d’abord donne une raison de regarder les étapes. ## Écrire un script de démo qui colle à l’écran Écrivez le script sur deux colonnes : ce qui est dit et ce qui est montré. Chaque ligne de voix doit décrire quelque chose de visible à ce moment-là. Si vous vous entendez expliquer une chose absente de l’écran, coupez la ligne ou changez de plan. ```text À DIRE À MONTRER Vendredi, 7 h du soir. Une table de six annule. Calendrier avec un créneau rouge à 7:30 Avant, cela voulait dire une table vide. Même créneau, photo de la salle calme Ouvrez la liste d’attente. Cliquez sur Liste d’attente Choisissez le créneau. Appuyez sur Proposer. Sélectionnez 7:30, cliquez sur Proposer à la liste d’attente Le premier client qui accepte l’obtient. Notification sur le téléphone, appui sur Accepter Table remplie à nouveau. Deux minutes. Calendrier, créneau rempli, minuteur 1:52 Essayez avec vos propres réservations. Écran final : tablefull.app ``` Un script sur deux colonnes pour une démo de 45 secondes. Chaque ligne est assez courte pour être dite pendant l’action. Lisez-le à voix haute avec un chronomètre avant d’enregistrer. S’il est trop long, coupez des étapes entières plutôt que de parler plus vite. ## Enregistrer une démo propre 1. **Préparez des données de démo réalistes** Remplissez le produit de noms, de chiffres et d’images crédibles. Les écrans vides et les « Test test 123 » donnent l’air d’un produit que personne n’utilise. 2. **Rangez et agrandissez l’écran** Masquez favoris et notifications, fermez les autres onglets et zoomez l’interface à 125 % ou plus, pour que le texte reste lisible sur un téléphone. 3. **Une étape par prise** Les prises courtes se refont et se coupent facilement. Déplacez le pointeur lentement et marquez une courte pause après chaque clic. 4. **Enregistrez la voix à part si possible** Lire le script sur des images déjà montées donne un rythme plus fluide que parler en cliquant. 5. **Zoomez là où ça compte** Recadrez ou agrandissez sur le bouton ou le champ utilisé, pour éviter de chercher dans tout un bureau. [L’enregistrement d’écran](https://gradiently.design/fr/guide/screen-recording-tips) détaille les autorisations, le son et ce qu’il faut partager. ## Sous-titres, carton titre et carton de fin Sur les landing pages, les démos se lancent souvent toutes seules sans le son, et les fils démarrent aussi en muet : ce sont les sous-titres qui portent l’histoire. Limitez chaque sous-titre à une courte ligne qui suit la voix, placée là où elle ne cache pas la partie de l’interface que vous montrez. [Les sous-titres vidéo](https://gradiently.design/fr/guide/video-captions-design) couvrent le style et le placement. Encadrez la démo de deux images conçues à vos couleurs : un carton titre qui nomme le résultat et un carton de fin avec une seule action. Ce sont eux qui font d’une capture d’écran une vraie vidéo produit plutôt qu’un simple enregistrement, et c’est ce que l’on voit comme image d’affiche avant d’appuyer sur lecture. Un carton titre de démo produit en 16:9 avec le texte Remplir une table annulée en 2 minutes, sur un dégradé de marque Le carton titre nomme le résultat, pas la fonction. Il sert aussi d’image d’affiche de la vidéo sur la landing page. Un carton de fin en 16:9 avec le texte Essayez sur vos réservations et l’adresse du produit en dessous, sur le même dégradé Le carton de fin demande une seule chose. Deux boutons et un compte social divisent l’attention en trois. ## Une démo, tous les emplacements Une démo doit souvent vivre à plusieurs endroits : la landing page, un post de lancement, un e-mail commercial et une courte vidéo sociale. Montez d’abord la version grand écran, puis une version verticale pour les réseaux, avec l’enregistrement d’écran centré sur votre fond, un titre au-dessus et les sous-titres en dessous. Recadrer une démo grand écran en vertical coupe la moitié de l’interface. - Landing page 1920×1080: 1920 × 1080 - Fil 1080×1350: 1080 × 1350 - Reels et Shorts 1080×1920: 1080 × 1920 - LinkedIn 1200×1200: 1200 × 1200 Quatre emplacements pour la même démo. L’enregistrement grand écran se place dans chaque format sur votre fond, au lieu d’être recadré. Sur un site, compressez le fichier, donnez une image d’affiche à la vidéo et laissez les visiteurs la lancer eux-mêmes si elle a du son. [La vidéo en fond de site](https://gradiently.design/fr/guide/video-background-website) explique poids et formats, et [le design de landing page](https://gradiently.design/fr/guide/landing-page-design) indique où placer une démo sur la page. Pour les posts qui l’annoncent, voyez [les visuels de lancement](https://gradiently.design/fr/guide/launch-day-graphics). ## Faire la démo dans Gradiently Avec Pro, vous pouvez enregistrer l’écran et votre voix dans le navigateur, revoir les clips, puis les couper sur la timeline de Gradiently, ajouter sous-titres et musique, et créer le carton titre et le carton de fin sur le même Mark pour que chaque image soit cohérente. Les versions verticale et carrée naissent de la même création en une étape, et le Designer peut rédiger les sous-titres et le texte des posts dans le ton de votre kit de marque. ## FAQ ### Quelle durée pour une vidéo de démo produit ? Moins d’une minute pour les landing pages et la vidéo sociale. Les présentations plus longues, de deux à cinq minutes, conviennent aux centres d’aide et aux rendez-vous commerciaux, où le public veut déjà apprendre le produit. ### Que doit contenir une vidéo de démo produit ? Le résultat d’entrée, le problème en un plan, trois ou quatre étapes d’une vraie tâche, le résultat à nouveau et une seule action à faire, avec des sous-titres tout du long. ### Une vidéo de démo doit-elle avoir une voix off ? Elle aide, mais écrivez aussi des sous-titres, car les démos sur les landing pages et dans les fils se lisent en général sans le son. La vidéo doit se comprendre son coupé. ### Quel format pour une vidéo de démo produit ? 1920×1080 pour les sites et YouTube, plus une version verticale en 1080×1920 et une version fil en 1080×1350, avec l’enregistrement posé sur un fond à vos couleurs.