Manuel vidéo animé

Manuel vidéo

Transformez les captures d'écran d'un produit en une courte vidéo de démonstration sous-titrée : un curseur animé clique à travers les écrans, les surbrillances et les zooms attirent l'attention, et un texte animé explique chaque étape.

Le travail se déroule en quatre étapes. L'utilisateur décide ; vous produisez.

Étape	L'utilisateur	Vous
1. Projet produit	indique à qui le produit est destiné, définit la couleur de la marque, le modèle d'arrière-plan, le logo, le guide de marque	déduisez les règles de voix et ajustez le mouvement
2. Scènes	joint des captures d'écran ou un lien Figma	importez les cadres Figma
3. Ébauche du storyboard	arrête les écrans clés, leur ordre et le texte	rédigez une ébauche pour qu'il la modifie
4. Vidéo	regarde, modifie le texte et l'ordre, commente les cadres	ajoutez les actions, vérifiez chaque cadre, révisez à partir des commentaires, effectuez le rendu

Le texte et l'ordre sont ce qui importe le plus aux utilisateurs, ils sont donc fixés à l'étape 3 avant tout travail de production, et restent modifiables à l'étape 4 jusqu'à ce que le MP4 soit rendu.

Parlez à l'utilisateur dans sa langue. Rédigez les sous-titres dans la langue de l'interface utilisateur du produit, sauf indication contraire.

Deux façons de travailler

Avec le Studio (par défaut). Une application web locale montre les quatre étapes. L'utilisateur y travaille ; les boutons marqués ✦ mettent en file d'attente des demandes que vous prenez en charge, accomplissez et répondez. Lisez references/studio.md avant de le lancer — c'est le protocole pour cette boucle.

Uniquement par conversation. Lorsque l'utilisateur préfère ne pas ouvrir un navigateur, ou que vous ne pouvez pas exécuter un serveur local, effectuez les mêmes quatre étapes en demandant et en montrant dans la conversation. Voir "Sans le Studio" ci-dessous.

Dans les deux cas, les fichiers sont identiques, donc un projet peut passer de l'un à l'autre.

Structure du projet

Tout se trouve sous video-manual/ dans le projet de l'utilisateur, de sorte qu'un seul profil sert chaque manuel réalisé pour le produit :

video-manual/
├── product-profile.json     # un par produit : public, voix, mouvement, arrière-plan
├── brand/                   # guide.md (guide de marque collé), logo
├── requests.json            # demandes mises en file d'attente depuis le Studio
└── <slug-manuel>/           # un dossier par vidéo, ex. create-task/
    ├── screens/             # 01-board.png, 02-new-task.png, ...
    ├── storyboard.json      # d'abord l'ébauche, puis le storyboard complet
    ├── comments.json        # commentaires sur les cadres depuis le Studio
    └── out/                 # manual.html, manual.mp4, stills/, frames/

Configuration

Les scripts se trouvent dans le dossier scripts/ de cette compétence. Le rendu nécessite ses dépendances une fois :

cd <dossier-de-la-competence>/scripts && npm install

Puis lancez le Studio en arrière-plan et donnez son adresse à l'utilisateur :

node <dossier-de-la-competence>/scripts/studio.mjs video-manual --open

Expliquez-lui en une phrase ce qui se passe ensuite : il remplit l'étape 1, et vous prendrez en charge tout ce qu'il enverra avec un bouton ✦. Attendez ensuite les demandes comme décrit dans references/studio.md.

Étape 1 — Projet produit

Si video-manual/product-profile.json a déjà un bloc voice, le produit est configuré : utilisez-le tel quel. La cohérence entre les vidéos d'un même produit importe plus que le réglage individuel.

Sinon, l'utilisateur remplit le formulaire (nom, domaine, B2C/B2B, âge cible, appareil, couleur d'accent, modèle d'arrière-plan, logo facultatif et guide de marque) et envoie une demande profile. Ensuite :

1. Lisez le bloc product et brand/guide.md.
2. Rédigez le bloc voice — le registre, les fins de phrases, la légende la plus longue, les mots à éviter, les termes du produit. Lisez references/voice-guide.md. Le guide de marque de l'utilisateur l'emporte sur ses conseils généraux.
3. Ajustez le mouvement pour le même public. Lisez references/motion-profiles.md. L'utilisateur a choisi le préréglage et l'arrière-plan ; vous ajustez le rythme, les tailles et l'assouplissement là où son public le demande.
4. Ajoutez une rationale d'une ou deux phrases.

Ces trois faits — âge cible, domaine, B2C ou B2B — décident chaque légende. Si le formulaire en laisse un vide ou si les écrans le contredisent, demandez avant d'écrire les règles de voix.

Étape 2 — Scènes

Une image par état d'écran distinct, dans screens/, numérotée dans l'ordre d'apparition. Un état qui change visiblement (une modale s'ouvre, une liste déroulante se déplie, un formulaire est rempli) nécessite sa propre image : la vidéo montre le résultat d'un clic en passant à la capture d'écran suivante.

L'utilisateur télécharge généralement celles-ci dans le Studio. Sur une demande scenes avec un lien Figma, exportez chaque cadre en PNG et enregistrez sa largeur logique pour coordWidth ; lisez également les métadonnées des calques — les limites exactes des éléments sont bien plus fiables que l'estimation à partir des pixels.

Si un état nécessaire à la démonstration manque, dites lequel et demandez-le plutôt que de sauter l'étape. Un saut que le spectateur ne peut pas suivre va à l'encontre du but d'un manuel.

Étape 3 — Ébauche du storyboard

Sur une demande draft, lisez chaque écran et le profil, puis rédigez l'ébauche dans storyboard.json : les scènes dans l'ordre, chacune avec sa caption et une note décrivant ce qui se passe dessus. Pas encore d'actions. Lisez references/manual-script.md pour savoir comment cadrer la vidéo et écrire le texte, et rédigez chaque ligne dans la voix du profil.

L'utilisateur modifie l'ébauche dans le Studio et appuie sur "Demander la vidéo" lorsque le texte et l'ordre sont corrects. Cette demande produce est l'approbation. N'ajoutez pas d'actions avant qu'elle n'arrive.

Étape 4 — Vidéo

Production

Lisez references/storyboard-schema.md et transformez l'ébauche approuvée en storyboard complet : suivez la note de chaque scène, ajoutez les actions, définissez coordWidth. Les légendes restent exactement comme approuvées.

Les coordonnées sont la partie la plus susceptible d'être erronée. Utilisez les limites exactes lorsque vous les avez (métadonnées Figma, rectangles DOM). Lorsque vous n'avez que l'image, regardez attentivement et estimez ; la vérification ci-dessous existe pour détecter ce que vous vous trompez.

Vérification avant que l'utilisateur ne la voie

Construisez, puis effectuez le rendu des images fixes — une image à chaque changement de clic, de texte et de légende, et à la fin de chaque scène :

node <dossier-de-la-competence>/scripts/build.mjs video-manual/<slug>/storyboard.json
node <dossier-de-la-competence>/scripts/render.mjs video-manual/<slug>/out/manual.html --stills video-manual/<slug>/out/stills

build.mjs valide le storyboard, vérifie chaque légende par rapport aux règles de voix du profil et affiche le timing de chaque scène. Corrigez les erreurs. Pour les avertissements de voix concernant le texte écrit par l'utilisateur, conservez son wording et mentionnez l'avertissement dans votre réponse.

Lisez les images fixes et vérifiez chacune :

• La pointe du curseur est-elle sur l'élément que la légende nomme ?
• Le cercle de surbrillance englobe-t-il l'ensemble de l'élément et rien d'autre ?
• Après un zoom, la cible est-elle entièrement visible et lisible ?
• Le texte tapé se trouve-t-il à l'intérieur de son champ et recouvre-t-il le texte indicatif ?
• Chaque légende est-elle entièrement visible, sur deux lignes au maximum ?
• Chaque bulle de texte pointe-t-elle vers le bon élément sans le recouvrir ni recouvrir le curseur ?

Corrigez le storyboard, reconstruisez et effectuez à nouveau le rendu jusqu'à ce que chaque image passe, puis répondez à la demande. Un curseur qui clique à côté du bouton rend l'ensemble du manuel erroné, donc l'utilisateur ne devrait jamais être celui qui le découvre.

Boucle de révision

À l'étape 4 du Studio, l'utilisateur peut :

• modifier toute légende, titre ou texte à l'écran et réorganiser les scènes — enregistré directement dans storyboard.json, sans demande impliquée ;
• s'arrêter sur une image, épingler une position et écrire un commentaire, puis envoyer les commentaires en tant que demande revise.

Traitez revise comme décrit dans references/studio.md : effectuez le rendu de l'image commentée pour voir ce qu'il a vu, modifiez ce à quoi le commentaire se rapporte et rien d'autre, confirmez sur une nouvelle image que c'est corrigé, et répondez à chaque commentaire. Après qu'il a réorganisé les scènes, vérifiez que chaque clic mène toujours à l'écran qui le suit ; une chaîne cassée est quelque chose dont il faut l'informer, pas à réparer en silence.

Cette boucle se répète jusqu'à ce qu'il soit satisfait.

Rendu

L'utilisateur exporte le MP4 depuis le Studio avec un seul bouton. Pour effectuer le rendu vous-même :

node <dossier-de-la-competence>/scripts/render.mjs video-manual/<slug>/out/manual.html --out video-manual/<slug>/out/manual.mp4

Le rendu prend à peu près le temps de la vidéo elle-même, parfois deux ou trois fois cela sur une machine plus lente ; exécutez-le en arrière-plan pour les manuels de plus d'une minute. Signalez le chemin de sortie, la durée et la taille du fichier.

Sans le Studio

Effectuez les mêmes quatre étapes dans la conversation :

1. Projet — déduisez l'âge cible, le domaine et B2C/B2B à partir des écrans et du texte de l'interface utilisateur, énoncez votre lecture et demandez à l'utilisateur de la confirmer en une question. Ensuite, rédigez l'ensemble du profil vous-même, y compris le préréglage, la couleur d'accent et l'arrière-plan.
2. Scènes — copiez les images que l'utilisateur vous donne dans screens/, ou capturez-les vous-même si vous avez un navigateur ou un outil Figma.
3. Ébauche — rédigez le storyboard d'ébauche, montrez-le sous forme de tableau (étape, écran, ce qui se passe, légende, texte à l'écran) avec la durée estimée, et attendez l'approbation. S'il a dit d'emblée d'aller directement, procédez et dites où se trouve l'ébauche.
4. Vidéo — produisez et vérifiez comme ci-dessus, puis dites-lui où se trouve out/manual.html. Cette page autonome lit la vidéo et possède son propre panneau pour modifier le texte et l'ordre ; "Télécharger les modifications" donne un storyboard.edited.json qu'il peut remettre. Lorsqu'il le fait, listez ce qui a changé afin qu'il puisse confirmer que vous l'avez lu comme il le souhaitait, sauvegardez-le en tant que storyboard.json, reconstruisez et revérifiez les images fixes. Ensuite, effectuez le rendu.

Modifications ultérieures

• Texte ou ordre : l'utilisateur modifie dans le Studio ou vous dit.
• Voix ("trop formel", "nos utilisateurs sont plus âgés que ça") : modifiez le bloc voice du profil, puis réécrivez les légendes en conséquence.
• Sensation ("trop lent", "trop rebondissant") : modifiez les jetons de mouvement dans le profil, pas les scènes individuelles — voir le tableau de réglage dans references/motion-profiles.md.
• Une étape semble erronée : corrigez les actions de cette scène et revérifiez ses images fixes.

Reconstruisez et revérifiez les images fixes après toute modification avant d'effectuer à nouveau le rendu.

Limites

Dites-le clairement lorsqu'une demande se heurte à l'une de ces limites :

• Les écrans sont des images statiques. Le défilement, les états de survol et l'animation dans l'application ne sont pas reproduits ; montrez-les sous forme de captures d'écran séparées.
• Pas de voix off ni de musique. Les légendes et le texte à l'écran portent l'explication.
• Le Studio modifie le texte et l'ordre des scènes. Ce sur quoi un clic ou une surbrillance agit change via un commentaire qui vous est adressé.
• La sortie est en 16:9 par défaut. Définissez meta.width et meta.height dans le storyboard pour d'autres formats.

Dépannage

• playwright-core is not installed : exécutez npm install dans le dossier des scripts.
• no browser found : installez Google Chrome, ou exécutez npx playwright install chromium dans le dossier des scripts.
• ffmpeg not found : installez ffmpeg ou définissez FFMPEG_PATH. npm install en fournit normalement un via ffmpeg-static.
• Une demande reste "en attente" dans le Studio : personne n'exécute studio.mjs wait. Exécutez-le, ou studio.mjs pending.
• L'étape 4 affiche des erreurs au lieu de la vidéo : une scène pointe vers une image manquante ou a une coordonnée en dehors de son écran. build.mjs nomme la scène.
• Une police semble erronée : la vidéo utilise les polices installées sur la machine. Définissez font.family dans le profil sur une police installée.