Une marque de ramen bâtie autour d’un chat, du logo au site en ligne

Cette fois, c’est une marque de ramen. Le logo au chat, l’univers visuel, le site et la mise en ligne : j’ai tout fait avec l’IA. En ouvrant le site, la première chose qu’on voit, c’est un chat en train de manger des ramen. En faisant défiler, on trouve le menu, l’histoire de la boutique et comment s’y rendre, en japonais, en chinois et en anglais. Voici la vidéo, ou lisez la suite pour la version écrite.

Play video

Ce que je veux montrer, c’est comment un seul personnage porte tout le projet : comment le chat a été choisi parmi une pile de pistes, puis décliné en devanture, en packaging et en boucle animée de nouilles tout en haut du site.

Le brief

La mission : repenser une marque de ramen autour d’un chat comme personnage principal, puis porter cette identité jusque sur le site de la marque.

Le site lui-même est simple. Les clients doivent ressentir l’esprit de la boutique, parcourir le menu, trouver l’adresse et les horaires. Et dès le premier jour, il lui fallait trois langues : japonais, chinois et anglais.

Le menu compte pas mal de plats (ramen en bouillon, aburasoba sans bouillon, garnitures, une formule), donc une partie du travail consistait à l’organiser pour qu’il se lise d’un coup d’œil.

Ceci posé, la première question était le personnage. À quoi ce chat devait-il ressembler, au juste ?

Des références à un chat au regard vide

J’ai commencé par rassembler des références de chats dans des styles très variés, simplement pour voir ce qui me plaisait avant de choisir une direction.

Puis j’ai importé ma sélection et dit à l’IA : je veux une marque de ramen avec un chat pour visage ; génère des pistes de logo à partir de ces références.

À ce stade, je garde volontairement un prompt assez ouvert. Un chat, des ramen, une idée approximative du style, et de la place pour explorer. Si une série ne donne rien qui me plaise, je relance ou je change de références. La sélection que vous voyez dans la vidéo s’est constituée ainsi, série après série.

Chaque chat avait une silhouette, une expression et une façon de s’associer aux nouilles légèrement différentes. Pour choisir, je me suis posé deux questions :

• Ce chat est-il mémorable ?
• Fonctionnera-t-il au-delà du logo, sur le menu, le packaging, le site ?

Nous avons retenu ce chat noir. Il a l’air un peu dans la lune, et c’est précisément cette expression qui m’a donné envie de poursuivre avec lui.

Faire d’un chat une marque

Ensuite, j’ai étendu le logo en une identité visuelle complète.

J’ai conservé le chat entier, et j’ai aussi isolé ses yeux en un signe plat d’une seule couleur. Chaque support a ainsi deux options : le chat entier quand il y a la place, ou seulement les yeux quand il n’y en a pas — et le personnage reste reconnaissable.

Autour de ces deux éléments, j’ai généré une enseigne, un caisson lumineux, le menu, un sac à emporter et la vaisselle.

Mises côte à côte, ces déclinaisons répondent vite à la vraie question : ce chat peut-il porter toute une marque, et tous ces éléments semblent-ils faire partie du même univers ? (Précision : ce sont des maquettes qui montrent l’application de l’identité, pas des photos d’une boutique terminée.)

Planifier le site, puis un design system

Avant tout design, j’ai défini la structure. C’est un site d’une seule page en quatre parties, de haut en bas :

1. Hero, pour que le chat soit la première chose qu’on retienne
2. Menu
3. À propos
4. Adresse, avec un plan et les horaires

Puis la mise en place : un nouveau dépôt sur GitHub, un dossier de projet local et un nouveau Design System dans Claude Design.

Je lui ai fourni le brief et importé les éléments de marque : le logo, le chat, les maquettes de déclinaison. Le brief détaillait le contenu du site, les trois langues et la façon dont je voulais utiliser les visuels. Tout ce qui avait été conçu jusque-là devenait la matière de cette étape.

J’ai reçu un document de design assez complet : le style général, les détails clés et les règles du projet. À partir de là, le développement pouvait s’y référer.

Transmettre le design à Claude Code

Une fois le fichier de design prêt, j’ai cliqué sur Partager, choisi l’envoi vers Claude Code, sélectionné le mode local avec les fichiers concernés, et copié le prompt de transmission proposé.

Puis une nouvelle session, avec le projet local comme répertoire de travail. J’ai collé le prompt de transmission et l’URL du dépôt GitHub, et ajouté mes propres notes de développement : la structure en une page, les trois langues et l’usage des éléments de marque.

Techniquement, c’est un site Next.js exporté en fichiers statiques, avec GSAP et Lenis pour les animations au défilement. Chaque langue a sa propre URL (/ja/, /zh/, /en/), et tout le menu tient dans un seul fichier où chaque plat porte son nom dans les trois langues.

La première version s’approchait du style général, et la structure suivait le plan. Mais en descendant, il manquait beaucoup : le menu n’était que du texte, l’adresse et les horaires étaient vides. Elle me montrait la forme du site. Il fallait maintenant donner à chaque section son vrai contenu et ses visuels.

Faire manger des ramen au chat

J’ai commencé par le hero. C’est ce que tout le monde voit en premier, et c’est là que je voulais le plus donner de la personnalité au chat. Je voulais qu’il bouge : un chat qui mange vraiment des ramen.

J’ai donc découpé le hero en trois calques : le texte, le fond et le chat. Séparés ainsi, le chat peut être animé seul pendant que le texte et le fond restent parfaitement immobiles.

Puis j’ai généré deux images du chat dans des poses légèrement différentes, pour servir de première et de dernière image d’une animation en boucle.

J’ai donné les calques à Claude, décrit le mouvement du chat et sa position finale dans la page, et je lui ai fait appeler Higgsfield pour créer l’animation. Concrètement, deux courts clips : l’un de la pose A à la pose B, l’autre de B à A. Enchaînés, ils forment une boucle. Les deux ont été générés sur un fond bleu uni pour détourer proprement le chat, avec quelques images de fondu à chaque raccord.

Fournir une première et une dernière image ne garantit pas une bonne boucle pour autant. Observez le mouvement réel, surtout l’instant où il se termine et repart au début. C’est là qu’une boucle paraît fluide… ou cassée.

Voici la version mise en ligne :

Sur la page, elle tourne sur fond transparent au-dessus du hero, avec une image fixe en secours. Comparé au hero statique d’origine, le site a soudain une vraie personnalité. C’est ma partie préférée de tout le projet : le personnage choisi tout au début qui s’anime enfin sur le site.

La même astuce a resservi dans le pied de page : un chat qui pointe le bout du nez depuis le bas de la page, avec une seule image comme première et dernière image, pour que la boucle se referme sur elle-même.

Compléter le reste

Après le hero, j’ai traité les autres sections une par une. Je trouve utile de découper les demandes : d’abord le menu, puis l’adresse, en désignant à chaque fois un endroit précis et ce qui doit changer, avant de retourner voir la page.

Chaque langue mérite sa propre relecture. Un même titre s’allonge ou raccourcit d’une langue à l’autre : au-delà des mots, surveillez les retours à la ligne, la mise en page du menu, les boutons et la navigation.

Et avant la mise en ligne, vérifiez séparément l’ordinateur et le mobile. Le menu doit être facile à lire, et les infos pratiques comme le plan et les horaires faciles à trouver. C’est ce dont les clients se servent vraiment.

Le déploiement sur Railway

Pour l’hébergement, j’ai choisi Railway, que je trouve simple à prendre en main. J’ai donné à Claude l’URL du guide de déploiement de Railway et lui ai demandé de déployer le projet en le suivant. Les étapes qui dépendent de vous — choisir le projet, autoriser votre compte, remplir les réglages — je les ai faites moi-même au fil des invites.

Une fois en ligne, ouvrez la vraie URL et refaites le tour. Vérifiez que les pages et les images se chargent, que l’animation tourne, que le changement de langue et les liens principaux fonctionnent. Un site qui marche en local ne prouve pas que la version déployée marche aussi.

Le fil conducteur

Avec le recul, des premières références de chats au logo, aux éléments de marque et maintenant à un site qu’on peut visiter, ce qui a fait la différence, c’est de garder les étapes reliées entre elles :

1. Explorer large au début. Laissez l’IA tester beaucoup de directions pendant la phase de recherche.
2. S’engager sur un seul personnage. Une fois le chat choisi, chaque visuel a été construit autour de lui.
3. Transmettre les éléments avec un brief clair. Le design system comme le développement partaient de ce qui précédait.
4. Juger le résultat réel, section par section, jusqu’à ce que ce soit juste.

Vous pouvez voir davantage de la marque finale et la page d’accueil complète sur la page projet de Neko Ramen.

L’IA a participé à chaque étape de ce projet. Mon travail a surtout consisté à choisir la direction, rédiger les besoins et juger si chaque résultat collait à la marque.

Sur quelle partie voulez-vous que j’aille plus loin : le design de marque, la création du site, ou l’animation du chat ? Dites-le-moi dans les commentaires YouTube, et abonnez-vous ci-dessous pour recevoir le prochain article.