Maquette site web
Le générateur de maquette site web place une capture d'écran d'une page web publique dans une fenêtre de navigateur, un cadre d'ordinateur portable ou de téléphone. Vous obtenez une image PNG que vous pouvez utiliser dans un portfolio, une étude de cas ou un aperçu pour un client. Une utilisation anonyme nécessite une vérification de sécurité, et les utilisateurs connectés paient avec des crédits.
- Seul le premier écran de la page est capturé. Le contenu situé plus bas n'apparaît pas dans la maquette.
- Saisissez uniquement une adresse publique. Vous ne pouvez pas importer votre propre capture d'écran, et une page derrière une connexion affiche l'écran de connexion.
- L'image de la page est compressée avant d'être encadrée, si bien que les petits textes peuvent paraître flous.
Une maquette de site web nécessite 2 rendus : un pour capturer la page, un pour la placer dans le cadre. Connecté, cela coûte 2 crédits au total. Sans compte, les deux comptent dans les limites gratuites et la vérification de sécurité est effectuée deux fois.
La page est capturée uniquement en haut de page, puis placée dans un cadre dessiné en CSS simple. La capture est compressée pour respecter la limite de taille de l'outil gratuit.
Effectuez la vérification de sécurité pour activer le bouton.
Résultat
Votre image apparaîtra ici.
L'outil web gratuit capture au maximum 2000px de hauteur. Pour les captures plus hautes, utilisez l'API.
Conservation : les résultats des outils web sont supprimés après 10 minutes. Les résultats de l'API sont conservés 1 jour avec la formule gratuite et 7 jours avec Starter et Pro (30 jours avec Business et Scale). Un historique de chaque tâche (type, heure, statut et crédits, mais pas ce que vous avez envoyé) est conservé pendant 30 jours sans compte, ou tant que votre compte existe si vous êtes connecté.
Aucun compte nécessaire
10 par minute et 50 par jour gratuitement.
Rendu dans un vrai navigateur
Chromium sans interface (headless), le même moteur que l'API.
Supprimés automatiquement
Les résultats de l'outil web sont supprimés après 10 minutes.
Confidentialité : ce que vous envoyez sert uniquement à créer ce fichier. Ce que vous envoyez est supprimé à la fin de la tâche, y compris de l'historique de la tâche, et le résultat est supprimé après 10 minutes. Voir la politique de confidentialité.
Faites la même chose depuis votre code
La même requête, construite à partir de l'entrée et des options ci-dessus. Créez un compte pour obtenir une clé API.
curl -X POST https://api.aiipworld.com/v1/render \
-H "Authorization: Bearer $AIIPWORLD_API_KEY" \
-H "Content-Type: application/json" \
-d '{"html":"","output":"pdf","options":{}}'
# returns {"job_id": "...", "status": "queued"}; then poll:
curl https://api.aiipworld.com/v1/jobs/JOB_ID -H "Authorization: Bearer $AIIPWORLD_API_KEY"Lots
L'outil web traite 1 document à la fois. L'API prend une requête par document, vous pouvez donc automatiser autant de requêtes que votre formule le permet.
Plus de contrôle
La capture de la page entière (full_page), le recadrage sur une zone, les en-têtes de requête et un user agent personnalisé sont des options de l'API. Voir la documentation.
Conservation
Les résultats des outils web sont conservés 10 minutes ; les résultats gratuits de l'API 1 jour ; les résultats de Starter et Pro 7 jours ; Business et Scale 30 jours. L'outil web permet 10 conversions par minute et 50 par jour et par visiteur.
En une phrase
Un outil gratuit en ligne qui place une capture d'écran d'une page web publique dans un cadre de fenêtre de navigateur, d'ordinateur portable ou de téléphone, et enregistre un PNG.
Points clés
- Entrée : une adresse publique http ou https ; seul le premier écran de la page est capturé.
- Les cadres sont dessinés en CSS par nos soins ; arrière-plans : dégradés Ocean, Sunset et Mint, Ardoise, Blanc ou Transparent.
- Sortie : un PNG à une densité de pixels de 1x ou 2x.
- Gratuit sans compte : chaque maquette utilise deux rendus, et les deux comptent dans les limites de 10 par minute et de 50 par jour et par visiteur, avec la vérification de sécurité effectuée deux fois ; le premier rendu charge une adresse web, il compte donc aussi dans la limite de 5 adresses web par jour. Connecté, une maquette coûte 2 crédits (2 rendus).
- Les fichiers sont supprimés automatiquement : 10 minutes après la conversion sans compte, 1 jour avec un compte gratuit.
- Les développeurs peuvent effectuer le même rendu avec POST https://api.aiipworld.com/v1/render et une clé API (voir la page API de capture d'écran).
Sources
Dernière vérification:
Fonctionnement
- Saisissez l'adresse d'une page web publique. Elle doit commencer par http:// ou https://.
- Choisissez un cadre : Fenêtre de navigateur, Ordinateur portable ou Téléphone.
- Choisissez un arrière-plan et réglez la marge intérieure. Ajoutez une attente supplémentaire si la page se charge tardivement.
- Choisissez une densité de pixels 1x ou 2x, puis lancez la maquette et attendez le résultat.
- Téléchargez le PNG. Lorsque vous êtes connecté, le résultat affiche aussi les crédits facturés.
Exemple de résultat
Comment réaliser une maquette site web
Une maquette de site web montre une page à l'intérieur d'un cadre d'appareil, pour que le spectateur voie la page comme elle apparaîtrait sur un écran. Le générateur de maquette site web la réalise en deux étapes, sans logiciel de design.
Commencez par saisir l'adresse d'une page publique. L'outil charge la page dans un navigateur sans interface sur notre serveur de rendu. Le JavaScript s'exécute pendant la capture par défaut, si bien qu'une page qui construit son contenu avec des scripts apparaît dans l'image.
Utilisez l'attente supplémentaire lorsque la page se complète après son premier chargement. Cette attente est courte et laisse à la page le temps de finir son affichage avant la capture.
Ce que montrent les trois cadres
Le cadre Fenêtre de navigateur capture la page en 1280 x 800 pixels. La barre d'adresse affiche le nom d'hôte de l'URL, pour que le spectateur voie d'où vient la page.
Le cadre Ordinateur portable capture aussi la page en 1280 x 800 pixels. L'écran est affiché à 75 % dans un châssis et une base en forme d'ordinateur portable.
Le cadre Téléphone capture la page en 390 x 844 pixels et la place dans un cadre de téléphone aux coins arrondis. Utilisez-le pour les pages que vous voulez montrer dans une mise en page mobile.
Pourquoi cela coûte deux rendus
Une maquette est réalisée en deux rendus. Le premier rendu capture votre page en JPEG à la qualité 85. Votre navigateur compresse ensuite cette image pour qu'elle tienne dans la limite HTML gratuite de 256 KB, puis la place dans le cadre. Le second rendu transforme ce HTML en PNG que vous téléchargez.
Chaque rendu est facturé. Lorsque vous êtes connecté, une maquette utilise 2 rendus, soit 2 crédits.
Sans compte, les deux rendus comptent dans les limites gratuites, et la vérification de sécurité s'effectue deux fois. Lorsque vous êtes connecté, le résultat affiche les crédits facturés.
Arrière-plans, marges et taille
Choisissez un arrière-plan : dégradés Ocean, Sunset ou Mint, Ardoise, Blanc ou Transparent. Un arrière-plan transparent vous donne un PNG sans fond, pour placer l'appareil sur votre propre visuel.
La marge intérieure définit l'espace autour de l'appareil. Augmentez-la lorsque vous voulez que le cadre se place au centre d'une image plus grande, avec de l'espace autour.
La densité de pixels est de 1x ou 2x. La densité 2x crée davantage de pixels, donc le fichier est plus lourd, et elle convient aux images que vous afficherez en pleine taille.
L'étape de compression rend les textes fins flous. Prévoyez-le lorsque la page contient de petits caractères que vous voulez faire lire clairement.
Pages qui nécessitent une connexion
L'outil charge la page comme un visiteur non connecté. Une page derrière une connexion affiche son écran de connexion, et non le contenu qui se trouve derrière.
L'adresse doit être publique. Les réseaux privés, localhost et les adresses de métadonnées cloud sont bloqués, si bien qu'une page sur votre propre appareil ne peut pas être capturée.
Si vous avez besoin d'une maquette d'une page qui exige normalement une connexion, utilisez une page de démonstration publique ou de préproduction que vous avez le droit de montrer.
À quoi servent les maquettes
Les designers utilisent les maquettes dans leurs portfolios pour montrer une page finie dans un cadre d'appareil.
Une étude de cas peut utiliser une maquette pour montrer le résultat d'un projet à côté du texte qui le décrit.
Une maquette peut figurer dans une publication sur les réseaux sociaux ou dans un aperçu pour un client, pour que le client voie la page en contexte avant sa mise en ligne.
Montrez uniquement les pages que vous possédez ou que vous avez le droit de montrer. Une maquette doit présenter la vraie page, et non une copie modifiée pour ressembler à un autre site.
Générateur de maquette site web par le code
Les mêmes deux étapes fonctionnent avec l'API. Envoyez une requête de capture d'écran avec l'adresse de la page pour obtenir la première image. Puis envoyez une requête de capture d'écran avec du HTML qui place cette image dans un cadre, pour obtenir le PNG.
Envoyez votre clé API sous la forme Authorization : Bearer suivi de la clé. Les requêtes sont asynchrones : un POST vers /v1/render renvoie 202 avec un job_id. Interrogez GET /v1/jobs/:id jusqu'à ce que le statut soit succeeded, failed ou timeout.
Lorsque la tâche réussit, téléchargez le fichier depuis download_url. Ce lien est de courte durée, téléchargez donc le fichier peu après son apparition. Les crédits des tâches échouées et des tâches au délai dépassé sont restitués, et les webhooks ne sont pas encore disponibles ; l'interrogation est donc le seul moyen de savoir quand une tâche se termine.
Choisir un cadre pour votre maquette
Choisissez le cadre qui convient à la page. Un résultat de générateur de maquette de navigateur dans le cadre Fenêtre de navigateur convient à un site web, tandis que le cadre Téléphone convient à une mise en page mobile. Le cadre Téléphone capture la page à la taille d'un téléphone, si bien que son premier écran peut différer des cadres ordinateur.
Avant d'utiliser une maquette, vérifiez que la page est publique et que le premier écran montre ce que vous voulez présenter. Téléchargez le PNG et conservez une copie, car les résultats sont supprimés après 10 minutes.
Une capture de maquette est une seule image, vous pouvez donc la réutiliser dans une proposition, une publication ou une diapositive sans autre étape.
Capture d'écran encadrée, cadre et arrière-plan
Une maquette de capture d'écran place l'image d'une page dans un cadre. Cet outil fonctionne comme un simple créateur de cadre de capture d'écran pour les pages web : il capture la page, ajoute le cadre et un arrière-plan, et vous donne un PNG. On appelle aussi ce type d'outil un générateur de cadre d'appareil, bien que les cadres ici soient dessinés par nos soins et ne soient pas des photos d'appareils réels.
Si vous voulez embellir une capture d'écran pour un portfolio, les arrière-plans en dégradé et la marge intérieure font l'essentiel du travail. En tant qu'embellisseur de capture d'écran, il se limite aux pages web saisies par adresse, car il ne peut pas traiter une image que vous importez.
Questions
Comment placer une capture d'écran de site web dans un cadre de navigateur ?
Saisissez une URL publique, choisissez le cadre Fenêtre de navigateur, sélectionnez un arrière-plan et lancez la maquette. L'outil capture la page et la place dans une fenêtre de navigateur, avec le nom d'hôte de l'URL dans la barre d'adresse.
Pourquoi utilise-t-il deux rendus ?
Le premier rendu capture la page sous forme d'image. Le second rendu construit le cadre autour de cette image et la transforme en PNG. Chaque rendu est compté séparément, donc une maquette utilise 2 rendus.
Combien coûte une maquette en crédits ?
Lorsque vous êtes connecté, une maquette coûte 2 crédits. Sans compte, les deux rendus comptent dans les limites gratuites et la vérification de sécurité s'effectue deux fois. Lorsque vous êtes connecté, le résultat affiche les crédits facturés.
Puis-je capturer la page entière ?
Non. La maquette ne capture que le premier écran de la page, si bien que le contenu situé plus bas n'apparaît pas dans l'image. Le cadre montre le haut de la page tel qu'un visiteur le voit en premier.
Puis-je importer ma propre capture d'écran ?
Non. L'outil prend une adresse web publique et capture lui-même la page. Il n'accepte pas les images importées, vous ne pouvez donc pas encadrer une capture d'écran prise sur votre propre appareil.
Les cadres viennent-ils d'un fabricant d'appareils ?
Non. Les cadres sont dessinés par nos soins en HTML et CSS simples. Ils n'utilisent ni photos d'appareils, ni images de marque, ni visuels de tiers.
Pourquoi la capture d'écran est-elle légèrement floue ?
La page est d'abord enregistrée en JPEG, puis le navigateur compresse cette image pour la faire tenir dans la limite HTML gratuite de 256 KB. Les petits textes peuvent en paraître moins nets, utilisez donc des caractères plus grands sur la page lorsque c'est possible.
Puis-je faire une maquette d'une page derrière une connexion ?
Pas directement. L'outil charge la page comme un visiteur non connecté, si bien que c'est l'écran de connexion qui apparaît dans le cadre. Utilisez une page publique que vous avez le droit de montrer.
Combien de temps le résultat est-il conservé ?
Les résultats sont supprimés après 10 minutes. Téléchargez le PNG dès que le résultat apparaît. Un enregistrement de chaque tâche est conservé, et les utilisateurs connectés peuvent consulter leurs tâches dans le tableau de bord.
L'outil est-il gratuit ?
Vous pouvez utiliser l'outil gratuit sans compte, et une utilisation anonyme nécessite une vérification de sécurité. Les utilisateurs connectés utilisent des crédits à la place. Nous n'ajoutons aucun filigrane à la maquette.
Puis-je créer la même maquette avec l'API ?
Oui. Vous pouvez envoyer les mêmes deux étapes de capture d'écran par l'API, une requête pour la page et une pour le HTML encadré. Chaque étape est une tâche asynchrone, que vous interrogez jusqu'à ce qu'elle réussisse.
Quelle est la taille de l'image obtenue ?
La sortie est un PNG. Sa taille dépend du cadre, de la marge intérieure et de la densité de pixels choisie. La densité 2x produit un fichier plus lourd que la densité 1x.
Qu'est-ce qu'une maquette de page web ?
Une maquette de page web montre une page publique à l'intérieur d'un cadre d'appareil ou de navigateur, pour que la page paraisse posée sur un écran. Cet outil crée un PNG à partir d'une adresse web. Vous pouvez l'utiliser pour un portfolio, une étude de cas ou un aperçu pour un client.
Puis-je créer une maquette web pour un client sans logiciel de design ?
Oui. Saisissez l'adresse d'une page publique, choisissez un cadre et un arrière-plan, puis téléchargez le PNG. Aucun logiciel de design n'est nécessaire. L'outil ne capture que le premier écran de la page, si bien que le haut de la page est ce que votre client voit dans l'image.
Puis-je placer une maquette de capture d'écran dans une étude de cas ?
Oui. Enregistrez le PNG et placez-le dans votre étude de cas ou votre portfolio. Choisissez le cadre Fenêtre de navigateur pour un rendu de bureau, le cadre Ordinateur portable pour un rendu de portable ou le cadre Téléphone pour une page mobile. Le résultat est une seule image, la mise en page reste donc la même où que vous l'utilisiez.
S'agit-il d'un générateur de maquette iPhone ou MacBook ?
Pas au sens strict. Les cadres Téléphone et Ordinateur portable sont des formes génériques dessinées en HTML et CSS. En tant que générateur de maquette iPhone ou générateur de maquette MacBook, il n'affichera pas d'appareil de marque, seulement un cadre en forme de téléphone ou d'ordinateur portable autour de votre page.
Besoin de ceci dans votre application ou en masse ?
Cet outil fonctionne sur l'API de rendu, donc le même image représente une seule requête HTTP depuis votre code. Un compte gratuit inclut 100 crédits par mois.