Bref Résumé
Ce contenu présente une méthode pour créer des sites web animés de style Apple en utilisant Claude Code et Nano Banana 2. L'auteur, Thomas Berton, explique tout le processus, depuis la génération des visuels jusqu'au déploiement du site sur le cloud, soulignant l'accessibilité de cette technique auparavant réservée aux grandes agences.
- Créer des sites web de style Apple rapidement et efficacement.
- Utiliser Claude Code et Nano Banana 2 pour générer des images et vidéos produit de haute qualité.
- Déployer le site web en ligne avec un nom de domaine sécurisé.
Introduction : créer des sites web Apple-like avec Claude Code
Thomas présente la possibilité de créer des sites web similaires à ceux d'Apple en peu de temps grâce à Claude Code. Il explique comment il a construit le site en seulement 10 minutes avec une seule requête et fait le lien avec l'importance de ces animations dans la présentation des produits.
Théorie : le processus de création de sites web animés (Nano Banana 2, Kling 3.0, Claude Code)
La théorie derrière la création de sites web animés est abordée, notamment l'utilisation de Cloud Code et Nano Banana 2. Thomas explique l'importance de définir le produit, de générer des images de début et de fin, ainsi que la qualité des visuels obtenus via ces outils.
Pratique : création d'un site web animé pour un stylo de luxe
Thomas propose de créer un site pour un stylo de luxe, montrant les étapes pratiques à suivre. Il met en avant l'utilisation de photos de produits réels pour générer des images d'animation qui donneront vie au site.
Étape 1 : Générer des images produit de haute qualité avec Nano Banana 2
La première étape consiste à utiliser Nano Banana 2 pour générer une image de haute qualité du stylo en version assemblée, ainsi qu'une version déstructurée, mettant en avant la technologie de génération d’image de l’outil.
Étape 2 : Créer la vidéo d'animation entre deux images avec Kling 3.0 et Claude AI
Après avoir généré les images, l'étape suivante est de créer une vidéo d'animation à l'aide de Kling 3.0, qui assure une transition fluide entre les images. Thomas explique le processus de création de cette vidéo, qui sera utilisée pour l'animation du site.
Étape 3 : Installer VS Code + Claude Code et ses "Skills" pour le site web
Thomas guide l'installation de VS Code et de Claude Code, précisant la nécessité d'utiliser l'extension "Skills" pour gérer les fonctionnalités du site. Il montre comment créer l'environnement de développement et préparer le projet.
Étape 4 : Prompt optimisé et génération du site web par Claude Code
Dans cette étape, Thomas explique comment utiliser un prompt optimisé avec Claude Code pour générer le site web. Les images et vidéos sont intégrées, et Craig exécute le processus de création de site en toute autonomie.
Résultat du site web généré par Claude Code et son animation
Thomas dévoile le résultat final du site web créé, mettant en avant les animations en réponse au défilement de la page. Il souligne la fluidité et l’esthétique du produit final.
Étape 5 : Déployer le site web sur Hostinger (VPS et Cloud Panel)
L’étape de déploiement du site sur Hostinger est abordée, avec des conseils sur la configuration du VPS et l'utilisation du Cloud Panel, facilitant ainsi l'accès au site au public.
Étape 6 : Lier le site web à un nom de domaine (OVH) et sécuriser la connexion
Thomas explique comment lier le site à un nom de domaine acheté chez OVH, ainsi que l'importance de sécuriser la connexion avec un certificat SSL pour assurer la confiance des utilisateurs.
Étape 7 : Téléverser le site web statique sur Cloud Panel
Cette étape traite du téléversement des fichiers du site sur Cloud Panel, avec des conseils sur la gestion de la taille des fichiers et l'extraction du contenu pour un déploiement efficace.
Stratégie business : monétiser la création de sites web animés
Enfin, Thomas aborde la stratégie commerciale autour de la création de sites web animés, soulignant les opportunités de vente et l'importance de se constituer un portfolio pour attirer des clients potentiels.
