Topics

Bonjour ! Je suis Hasshi, concepteur d'interfaces utilisateur chez Liberogic Inc.

Ce qui m'inquiète ces derniers temps, c'est que je ne progresse pas beaucoup dans la création d'une nouvelle page de destination pour mon service d'accessibilité.

Heureusement, le PDG, qui est responsable de la conception du site web de notre entreprise, est extrêmement occupé par d'autres dossiers. Mais à ce rythme, nous ne pourrons pas avancer…

« Bon, essayons au moins de faire un brouillon pour faciliter un peu la relecture par le président ! »

Tout a commencé avec cette idée,Production rapide de LP grâce à l'IA (Gemini) et à un outil d'automatisation de la conception (FigmaMake)Cette fois-ci, je vais partager avec vous l'intégralité du processus et mes réflexions sincères du point de vue d'une designer !

Notre objectif cette fois-ci : obtenir du président des commentaires critiques sur la conscription !

Il est impossible de créer quelque chose de parfait dès le départ ! Oui ! Avant tout, il est important de proposer quelque chose sur lequel le président puisse facilement donner son avis, c'est certain !

Le processus complet pour créer un LP ultra-rapide (encore plus rapide une fois qu'on a pris le coup de main !)

Voici la répartition du temps réel pour le flux de production que nous avons testé cette fois-ci : la partie qui a pris le plus de temps était la partie « répétition », qui consistait à améliorer la précision de la conception.

1. 【analyser】Gemini-sensei, que pensez-vous de ce LP ?(15 points)
2. [Génération de texte]Demandez à Gemini de créer le texte de la page d'accueil, y compris les améliorations.(15 points)
3. [Création d'invite]Laissez Gemini lancer le « sortilège magique » que vous souhaitez sur FigmaMake(5 points)
4. [Génération de conception]FigmaMake, je l'ai commandé en premier !(5 points)
5. [Répéter en boucle]Amélioration de la précision grâce à un aller-retour entre l'analyse et la génération(1,5 heure)
6. [Conversion Figma]Importer dans Figma avec le plugin Html to Design(5 points)
7. [Correction Figma]Ajustements finaux concernant les problèmes de mise en page(30 points)

Examinons chaque étape de plus près !

ÉTAPE 1 : [Analyse] Gemini-sensei, que pensez-vous de ce LP ? (15 minutes)

Tout d'abord, nous demandons à Gemini de lire nos pages d'accessibilité existantes et d'obtenir un retour d'information honnête.

[Exemple de consigne pour les Gémeaux]

Veuillez analyser l'accessibilité web de la page d'accueil à l'URL ci-dessous et lister les avantages et les inconvénients.

Les résultats de l'analyse sont arrivés en quelques secondes : « Il n'y a pas d'études de cas ni de témoignages clients, il est donc difficile d'imaginer les avantages concrets de la mise en œuvre du service… » Waouh, c'est tellement juste que ça fait mal ! Mais je n'aurais pas pu le dire moi-même, alors merci, Gemini ! Ils ont su mettre des mots précis sur les problèmes que j'avais vaguement pressentis.

Bon, tout d'abord, essayons de comprendre la situation actuelle. J'ai créé cette page, mais de toute façon, je laisserai Gemini-sensei me signaler tout ce que je n'aurais pas remarqué moi-même !

ÉTAPE 2 : [Génération de texte] Demandez à Gemini de créer le texte LP en incluant les améliorations (15 minutes)

Nous allons copier-coller les résultats de l'analyse de l'ÉTAPE 1 et vous demander de rédiger un texte contenant des suggestions d'amélioration.

[Exemple de consigne pour les Gémeaux]

À partir des résultats de l'analyse ci-dessus, veuillez créer une proposition de structure textuelle pour la page d'accueil relative à l'accessibilité web. (Omission) Veuillez clairement indiquer les éléments ajoutés par la mention [Texte d'exemple].

En incluant un texte précis comme « Exemple de témoignage client : XXXX Co., Ltd. : Les demandes de renseignements via le site web ont augmenté de 50 % ! », votre page prend instantanément des allures de page d'atterrissage. Rien que ça, vous avez le sentiment d'avoir atteint votre objectif.

Bon, je vais juste donner la liste des critiques à Gemini et leur demander d'en faire quelque chose de génial. C'est l'utilisation idéale de l'IA ! …Oups, il faut que je vérifie qu'ils l'indiquent comme « [Texte d'exemple] » pour éviter toute confusion. J'ai tendance à tirer des conclusions hâtives…

ÉTAPE 3 : [Créer une invite] Demandez à Gemini de lancer un « sort magique » sur FigmaMake (5 minutes)

Il vous sera demandé de fournir la proposition de structure de texte que vous avez créée à l'ÉTAPE 2 et l'image du design que vous souhaitez créer, et une invite en anglais sera générée pour FigmaMake.

Une fois le texte terminé, place à la conception ! C'est la partie la plus amusante ! Mais avant cela, je dois créer une consigne pour FigmaMake. Mon anglais approximatif ne me permet pas de me faire comprendre, alors je laisse cela à Gemini-sensei. Je compte sur lui !

ÉTAPE 4 : [Génération du design] FigmaMake, on s’occupe du reste ! (5 minutes)

Maintenant, copiez-collez la formule magique et appuyez sur Entrée ! … du moins, c’est ce que vous dites. Peut-être que j’obtiendrai un design divin du premier coup ? … Peut-être pas. Ou peut-être que si ? Cette excitation me fait penser aux jeux de hasard, et c’est amusant.

Copiez et collez l'invite générée, puis cliquez sur le bouton « Générer le design ». Ces quelques secondes d'attente sont étonnamment angoissantes. Et puis, le premier design apparaît.

Waouh, c'est terminé ! Mais c'est encore un peu simple… Nous allons continuer à apporter des modifications au design et au texte.

Mais c'est là que les choses sérieuses ont commencé.

ÉTAPE 5 : [Boucle répétée] Améliorer la précision en alternant entre l'analyse et la génération (1,5 heure)

À partir de là, nous avons entamé une phase de brainstorming avec l'IA. En analysant la maquette générée par FigmaMake, nous avons consulté Gemini sur les points à améliorer et travaillé sans relâche à l'optimisation des invites.

« Oh non, pas comme ça ! » murmurai-je plus fort. Ma voix résonna sans doute dans tout le bureau. Mais étrangement, je commençais à apprécier de plus en plus ce rassemblement.

Oui, ça n'a pas marché du premier coup ! Je m'en doutais ! Mais j'avais encore un peu d'espoir ! C'est là que les choses sérieuses commencent : une course à trois jambes contre l'IA. Un peu comme si j'étais le réalisateur et Gemini l'entraîneur.

Voici le résultat final

C'est bien mieux que le premier dessin. Cependant, c'est pénible d'effacer ou d'ajouter des éléments inutiles (probablement parce que les instructions sont traduites du japonais vers l'anglais, et que l'intention n'est souvent pas bien transmise...).

Je pensais qu'il serait peut-être impossible d'en faire plus sur FigmaMake, alors j'ai eu recours à la méthode de la force brute consistant à le convertir en données Figma, puis à effectuer les corrections.

ÉTAPE 6 : [Figmaize] Importer dans Figma avec le plugin Html to Design (5 minutes)

Une fois l'orientation du design suffisamment définie, il est temps de transférer les données dans Figma. Les étapes sont décrites ci-dessous.

1. Le design généré par FigmaMake est d'abord publié sous forme de page web.
2. Lancez le plugin Figma « Html to Design ».
3. Saisissez l'URL du fichier FigmaMake publié et exécutez l'importation !

Il vous suffit d'utiliser l'extension « Html to Design ». Copiez et collez l'URL de la page que vous avez publiée dans FigmaMake, puis cliquez sur le bouton. C'est tout ce qu'il faut pour convertir la page web en calque dans Figma. Quel monde pratique !

Lancement de FigmaMake

Commencez par publier le fichier FigmaMake. Cliquez sur « Publier » et le statut passera à « Publié ».

Lancez le plugin Figma « Html to Design », entrez l'URL du FigmaMake que vous avez publié, puis importez !

Lancez l'extension et collez l'URL que vous venez d'obtenir. Cliquez ensuite sur le bouton Importer et c'est terminé !

Après quelques minutes, le design final s'affichera sur Figma.

Enfin, changez le statut public en privé.

Une fois toutes les étapes terminées, dépubliez le message pour le rendre privé.

Préoccupations

Actuellement, il n'existe aucune fonction permettant de définir un mot de passe pour l'état public ou de créer un environnement de développement. Par conséquent, si vous l'utilisez pour refaire le site web d'une entreprise, vous devez être vigilant quant aux fuites d'informations.

En résumé, je ne pense pas que cela aura d'impact si vous créez du contenu limité à votre propre entreprise ou si vous créez une ébauche à l'aide d'informations fictives. Je pense donc qu'il est préférable de l'utiliser en fonction du projet (ne jamais l'utiliser pour des projets qui n'autorisent pas la diffusion externe).

Ok, ça commence à être plutôt bien ! Allez, place à Figma, mon terrain de prédilection ! Désolé de t'avoir fait attendre, mon pote !

ÉTAPE 7 : [Correction Figma] Ajustements finaux concernant les problèmes de mise en page (30 minutes)

Les données nouvellement importées sont encore perfectibles, avec des regroupements mystérieux et des zones de texte qui débordent, laissant beaucoup de place à l'amélioration.

À partir de là, tout repose sur un travail de révision constant : relancer la mise en page automatique, recomposer les éléments disjoints en composants, ajuster les marges générales… Ce petit effort améliore considérablement la qualité du design et le transforme en une « ébauche correcte ».

Voici le produit fini

La granularité de la conception diminue à mesure que l'on descend dans le LP, mais je ne sais pas si c'est un aspect inévitable de l'IA ou si mes instructions sont mauvaises... Je vais continuer à expérimenter avec différentes options.

Importé, et… Eh bien, la mise en page est plus dynamique et originale que prévu ! C’est le fruit du travail acharné de l’IA. Il est temps maintenant de peaufiner le tout.

Résumé : Ce que j'ai appris en le créant : les points clés de la « conception collaborative par IA »

Ce que j'ai compris grâce à ce flux de production, c'est que l'IA n'est pas une « baguette magique », mais un « excellent partenaire ».

• Le gain de temps permis par la création d'un brouillon est énorme :C'est beaucoup plus rapide que de concevoir un plan de composition à partir de zéro.
• La clé réside dans la boucle d'essais et d'erreurs :Créer de bons designs exige de la patience et un dialogue répété avec l'IA.
• La touche finale :La qualité dépend de la capacité du concepteur à ne pas se contenter d'accepter aveuglément ce que l'IA a créé, mais à le finaliser intentionnellement.

D'ailleurs, lorsque j'ai timidement montré ce brouillon au président...« Oh, c'est intéressant ! Cela facilitera la poursuite de la discussion ! Avoir un point de départ fait toute la différence, merci ! »C'est ce qu'ils disent.

Ouiii ! Ça valait le coup… ! La bière est délicieuse ce soir !

C'est tout pour le moment ! La partie LP proprement dite sortira en deuxième partie, une fois que le président aura fini d'y ajouter sa touche personnelle !

Pourquoi ne pas essayer de créer de nouveaux designs en collaboration avec l'IA ?