Ambiance lisible
Photographies sur le vif, palette charbon-crème-laiton, matières crédibles. On ne vend pas un concept, on montre le salon tel qu'il est.
Projet 13 · Coiffeur-barbier · Nantes
Barber Concept Nantes.
Projet conçu pour illustrer mon savoir-faire
Une vitrine soignée pour un salon hybride coupe homme et barbier traditionnel à Nantes : transmettre l'univers du fauteuil, valoriser la précision du geste et capter les rendez-vous 24h sur 24 depuis le quartier Decré.
01 · Métier
Un salon de coiffure vend une ambiance, avant de vendre une coupe.
Le client choisit son coiffeur sur une intuition : la lumière, le fauteuil, la matière des miroirs, la posture du barbier dans la vitrine. Avant même de regarder un tarif, il décide s'il a envie de pousser la porte ou pas. Pour un salon comme Barber Concept Nantes, la création de site internet pour coiffeur / barbier doit transmettre cet univers dès le premier scroll.
Le positionnement de la maison est clair : un salon hybride installé dans le quartier Decré, qui réunit la coupe homme moderne et le geste du barbier traditionnel — rasage à la lame, taille de barbe à la cire, serviette chaude. Maxime Léon a ouvert en 2019, après dix ans à apprendre la coupe puis la barbe dans la région nantaise. L'équipe compte aujourd'hui trois personnes, et le carnet de rendez-vous se remplit surtout depuis Planity.
Coupe + barbier
Deux gestes distincts présentés côte à côte : la coupe homme et le barbier traditionnel. Chaque page de prestation décrit ce qui se passe au fauteuil, durée incluse.
Quartier ancré
7 rue de Verdun, à quelques minutes à pied de la place du Bouffay. Le quartier Decré n'est pas un mot-clé : c'est l'adresse du fauteuil principal.
02 · Objectifs
Transformer une recherche locale en rendez-vous pris en ligne.
Pour un salon de coiffure en centre-ville, la conversion-clé n'est pas la demande de devis : c'est le rendez-vous calé sur Planity à 22h le dimanche soir, sans appel téléphonique. Le site doit donc rassurer assez vite pour que ce clic soit naturel — adresse claire, prestations chiffrées, photos crédibles, bouton réservation toujours visible.
- Faire monter la part de rendez-vous pris en ligne et libérer le téléphone du salon en journée.
- Capter les nouveaux habitants du centre qui cherchent un coiffeur ou un barbier dans leur quartier.
- Valoriser le geste du barbier traditionnel (rasage à la lame, taille de barbe à la cire) qu'on ne trouve plus partout.
- Faire exister le salon en dehors de la fiche Google : un site qui rassure, des prestations qui parlent, des transformations qui prouvent.
Travailler les recherches autour de coiffeur Nantes centre, barbier Nantes Decré, coupe homme Nantes, rasage à la lame Nantes, taille de barbe Nantes, et l'ouverture vers les communes proches comme Saint-Herblain et Orvault d'où viennent une partie des habitués.
03 · UX/UI
Une interface chaude et précise, comme la matière du métier.
La direction artistique s'appuie sur trois tons : charbon profond pour ancrer, crème chaud pour respirer, laiton vieilli pour signer. Les titres en Fraunces — un serif moderne expressif — rappellent les enseignes anciennes ; le corps de texte en Inter garde la lisibilité écran. Les photographies privilégient le geste, jamais la pose en studio : ciseaux dans la main, lame contre la peau, lumière chaude des suspensions du salon.
Comme pour le projet Atelier Ondine, l'enjeu visuel est central : un métier qui se voit doit se montrer, et le site doit servir de prolongement à la vitrine de la rue. Le compare slider, présenté en section suivante, est le module qui porte cette logique le plus directement.
Une fiche Google active, des publications Instagram qui partaient au gré des semaines, et un téléphone qui sonnait à chaque coupe. La clientèle de quartier était là, mais aucune vitrine indexable ne portait l'histoire du salon en dehors des avis.
Un site six pages qui montre l'ambiance, détaille les prestations, prouve les transformations et envoie les rendez-vous directement sur Planity. Les habitués gardent leurs habitudes ; les nouveaux clients arrivent déjà briefés.
04 · Compare slider
Un module avant / après pour prouver la transformation.
Sur un site de coiffeur, le module avant / après est presque aussi décisif que la prise de rendez-vous. Il prouve la coupe, la barbe et la coloration sans tomber dans la galerie statique qu'on parcourt en deux secondes. La version intégrée à Barber Concept Nantes est construite en HTML / CSS / JS vanilla, sans dépendance, sans framework — juste une variable CSS pilotée par un curseur draggable.
L'image avant est posée par-dessus l'image après et masquée par un clip-path ajusté en temps réel. Le curseur, géré en Pointer Events, fonctionne à la souris, au doigt et au clavier — flèches gauche / droite pour ajuster, Home et End pour basculer aux extrêmes. Quatre transformations défilent : une refonte coupe, une taille de barbe à la cire, une coloration avec soin réparateur, et l'accompagnement d'un groupe de cinq hommes avant cérémonie.
Un seul gestionnaire couvre souris, trackpad et écran tactile. Pas de duplication de code pour mobile, pas d'événements legacy à maintenir.
L'image avant est rognée en temps réel par clip-path: inset(0 calc(100% - var(--split)) 0 0). Le rendu est lissé par le GPU, sans repaint coûteux.
Le curseur est un vrai bouton avec rôle slider, valeurs ARIA mises à jour à chaque déplacement, et focus visible signé laiton. Les claviers seuls accèdent au composant sans effort.
05 · SEO local
Nantes Decré, ce n'est pas un mot-clé — c'est un quartier vivant.
La requête « coiffeur Nantes » est saturée. Y entrer en force avec une page d'accueil bourrée de variantes prend deux ans et beaucoup d'avis. La stratégie retenue est plus pragmatique : viser les recherches longues qui croisent une spécialité et un quartier — coiffeur visagiste Nantes, barbier centre-ville Nantes, rasage à la lame Nantes Decré, taille de barbe à la cire Nantes — et laisser la fiche Google Business Profile faire le gros du travail local pendant les premiers mois.
Le site complète Google Business Profile, il ne le remplace pas. Une page d'accueil qui raconte le salon, une page services qui détaille les tarifs et les durées, une page zone qui assume une clientèle venue aussi de Saint-Herblain et d'Orvault, une page réalisations qui prouve, une page à propos qui présente Maxime et l'équipe, une page contact qui réserve. Chaque page travaille un angle long-tail différent.
Coupe homme, dégradé, coupe enfant, taille de barbe à la cire, rasage à la lame, coloration grisons, mèches discrètes, accompagnement mariage et tournage.
Nantes centre, quartier Decré, place Graslin, tramway Hôtel Dieu, parking Decré-Bouffay, et l'ouverture vers Saint-Herblain à l'ouest et Orvault au nord.
Balisage HairSalon avec adresse complète, horaires, geo et zone desservie, doublé d'un WebSite et d'une FAQPage côté contact pour structurer les questions récurrentes.
06 · Captures
Trois aperçus qui montrent le ton et la précision du parcours.
Plutôt qu'une vingtaine de captures qui finissent toutes par se ressembler, on garde trois moments qui racontent le site : l'accueil qui pose l'univers, la page services qui cale les durées et les tarifs, et le compare slider qui valide le geste.
07 · Résultat
Résultat attendu : plus de rendez-vous pris en ligne, moins de coups de fil au mauvais moment.
Le site doit faire deux choses simples : capter le client qui cherche un coiffeur à 22h, et libérer Maxime du téléphone qui sonne pendant qu'il tient la lame. Le compare slider et la page prestations chiffrée règlent l'essentiel des questions avant le rendez-vous. Le reste se joue au fauteuil.
Un visiteur comprend en moins d'une minute ce que le salon propose, combien dure une coupe, et comment réserver sans appel. La clientèle hors-Nantes — Saint-Herblain, Orvault — y trouve l'info pratique qui lui manquait pour franchir le pas.
Un contenu métier riche, une implantation locale crédible et des données structurées propres autour du salon de coiffure et de la prestation barbier.
Votre salon mérite mieux qu'une fiche Google sans site derrière.
Je conçois des sites rapides, humains et crédibles pour transformer la recherche locale en rendez-vous pris la veille à 22h.