Capture d'écran de page entière pour ChatGPT : analyser un design avec l'IA

Pourquoi une capture de la seule partie visible renseigne mal l'IA

Un modèle de langage ne raisonne que sur ce que contient l'image. Donnez-lui une capture de la partie visible d'une page d'accueil et il ne voit que le bandeau d'accroche, rien d'autre. Il répondra quand même avec assurance, car c'est ainsi que fonctionnent ces modèles, mais ses conseils porteront sur un fragment de page dont il ignore la suite.

Une capture de page entière supprime ces suppositions. Le modèle reçoit le bandeau d'accroche, les témoignages, les blocs de fonctionnalités, la grille tarifaire et le pied de page en une seule image, dans l'ordre exact où un visiteur les découvre. Cet ordre fait l'essentiel d'un avis sur le design : ce qui vient en premier, ce qui se répète, où l'œil ne trouve aucun point d'appui, où se trouve le prochain appel à l'action.

Elle élimine aussi toute une catégorie de mauvaises réponses. Demandez « mon appel à l'action est-il assez clair ? » à partir d'un simple recadrage de l'écran visible, et le modèle ne peut pas savoir que quatre autres boutons, plus bas, lui font concurrence.

Envoyer une capture d'écran à ChatGPT : la méthode pas à pas

Une fois l'extension installée, il faut bien moins d'une minute.

1. 1

   Laissez la page finir de s'afficher

   Sur les pages avec des images à chargement différé ou des sections animées, faites défiler une fois jusqu'en bas, puis revenez en haut. Ce que le navigateur n'a pas encore affiché ne peut pas être capturé, et une capture à moitié vide donne un avis à moitié utile.

2. 2

   Capturez toute la page

   Cliquez sur l'icône de GoFullScreenshot dans la barre d'outils et choisissez « Full page », ou appuyez sur le raccourci suggéré Alt+Maj+S (Option+Maj+S sur Mac) s'il est attribué. La page défile toute seule, chaque section est capturée et assemblée en une seule image haute, et le résultat s'ouvre dans un nouvel onglet.

3. 3

   Masquez d'abord tout ce qui est privé

   Si la page affiche des noms de clients, des factures, des adresses e-mail ou des données internes, floutez-les ou masquez-les dans l'éditeur intégré avant que l'image ne quitte votre ordinateur. Ce que vous envoyez à un service d'IA relève des conditions de ce service, pas des vôtres.

4. 4

   Exportez en PNG

   Le PNG est sans perte : les contours du texte et les bordures fines restent nets, et le modèle ne lit pas des artefacts de compression JPEG. Ne passez au JPEG ou au WebP que si vous atteignez une limite de taille d'envoi.

5. 5

   Envoyez l'image et posez une question précise

   Faites glisser le fichier dans ChatGPT, Claude, Gemini, Copilot ou votre outil de création par IA. Une demande vague obtient une réponse vague : fixez un objectif. Par exemple : « Voici la page d'accueil complète d'un logiciel SaaS B2B. Analyse la hiérarchie visuelle, la cohérence des espacements et si l'appel à l'action principal reste évident de haut en bas. Propose des modifications concrètes, les plus importantes d'abord. »

Des demandes qui donnent un avis utile

La capture fournit le contexte ; la demande décide si vous obtenez une critique ou un compliment. Donnez au modèle un rôle, un public et un seul axe d'évaluation.

• Hiérarchie : « Parcours cette page section par section et dis-moi sur quoi l'œil se pose en premier dans chacune. Où la hiérarchie se casse-t-elle ? »
• Cohérence : « Liste toutes les incohérences que tu vois sur l'ensemble de la page : espacements, tailles de titres, styles de boutons et arrondis des angles. »
• Parcours de conversion : « Je vends une extension Chrome. Suis le chemin entre le haut de cette page et le bouton d'installation, et nomme chaque endroit où un visiteur pourrait décrocher. »
• Textes : « Réécris le titre principal et le premier paragraphe de chaque section pour qu'un nouveau visiteur comprenne le produit en cinq secondes. »
• Comparaison : envoyez votre capture de page entière et celle d'un concurrent, puis demandez laquelle explique son produit le plus vite, et pourquoi.
• Signaux d'accessibilité : « Signale tout texte de cette page dont le contraste avec le fond semble trop faible pour une lecture confortable. »

Ce qu'une IA peut juger, ou non, à partir d'une capture

Connaître les limites, c'est ce qui rend cette méthode utile. Une image est un rendu, pas la page elle-même.

• Fiable : hiérarchie visuelle, ordre des sections, rythme des espacements, alignement, incohérences évidentes, clarté des titres et des textes, visibilité d'un appel à l'action, densité de la mise en page, problèmes de contraste apparents.
• Peu fiable : valeurs exactes des couleurs et ratios de contraste (le modèle les estime à partir des pixels, il ne lit pas votre CSS), noms des polices, performances de chargement, états au survol et au focus, animations, navigation au clavier, comportement avec un lecteur d'écran, adaptation à d'autres largeurs d'écran.
• Impossible : savoir si de vrais utilisateurs passent à l'action. Une analyse de capture est une critique heuristique, pas un test utilisateur ni un audit d'accessibilité.
• Conseil pratique : capturez la même page en largeur ordinateur et en largeur mobile, et envoyez les deux. La plupart des problèmes de mise en page n'apparaissent qu'à la comparaison.

Pages très hautes : pourquoi l'envoi à l'IA échoue et comment y remédier

Une longue page marketing ou une page de documentation peut mesurer 15 000 pixels de haut. Envoyée en une seule image, elle risque d'être refusée à cause de sa taille, ou réduite jusqu'à rendre le texte courant illisible.

La solution n'est pas de recadrer à la main. Exportez la capture en parties numérotées d'environ 3 000 à 5 000 pixels chacune, avec 160 pixels de chevauchement entre elles. Ce chevauchement compte : sans lui, un titre et le paragraphe qui le suit peuvent tomber de part et d'autre d'une coupure, et le modèle les lit comme deux éléments sans rapport.

Envoyez ensuite les parties dans l'ordre et dites-le dans votre demande : « Voici des sections numérotées d'une même page, qui se chevauchent, dans l'ordre de haut en bas. Analyse-les comme une seule page. » La plupart des interfaces de discussion acceptent plusieurs images par message : vous gardez une seule conversation et une seule critique.

D'autres usages de cette méthode

L'analyse de design est l'usage évident, mais la même capture sert à beaucoup de tâches courantes.

• Revue de design avec un client : annotez la capture de page entière avec des flèches et des notes au lieu de décrire les sections dans un e-mail.
• Veille concurrentielle : gardez un dossier de captures complètes des sites concurrents et demandez à un modèle de résumer le positionnement de chacun.
• De la capture au code (screenshot to code) : confiez une capture de page entière à un outil de création par IA comme point de départ pour la structure et la mise en page, puis affinez dans le navigateur. Considérez le résultat comme un premier jet, pas comme un site terminé.
• Rapports de bug : une image montrant toute la page défaillante vaut mieux que cinq recadrages, car la personne qui l'examine voit l'état de tout ce qui entoure le bug.
• Documentation et passation : capturez un parcours complet, page par page, et rangez-le avec le ticket.
• Archivage : un PNG ou un PDF de la page entière telle qu'elle était à une date donnée, utile pour les pages de tarifs, les conditions générales et les propositions commerciales.

La capture elle-même reste sur votre ordinateur

GoFullScreenshot fait défiler, assemble, retouche et exporte entièrement dans votre navigateur. Il n'y a ni serveur dans le circuit, ni compte, ni outil d'analyse d'audience dans l'extension, ni copie de votre page envoyée en ligne.

C'est d'autant plus important que l'étape suivante de cette méthode est un service d'IA. C'est vous qui décidez quelle image quitte votre appareil, après avoir eu la possibilité de la masquer. L'extension ne prend jamais cette décision à votre place.