Livrable agence
Refonte du site Emballage de l'Ouest — Cahier des charges
Client : Emballage de l'Ouest (EDO) — ZA la Hallerais, Allée du Communel, 35770 Vern-sur-Seiche Projet : Refonte complète du site institutionnel et catalogue B2B Budget : 50 000 € HT — Horizon : 12 semaines Version : 1.0 — juillet 2026 · Document accompagné d'un démonstrateur fonctionnel : le site que vous parcourez.
1. Synthèse & objectifs
Emballage de l'Ouest est une PME saine (2,64 M€ de CA, croissance régulière depuis 2007) dont la présence digitale ne reflète ni le niveau de service, ni l'expertise technique, ni l'engagement environnemental. Les acheteurs industriels et responsables logistiques — cible exclusive du site — recherchent aujourd'hui leurs fournisseurs en ligne avant tout premier contact : le site doit devenir le premier technico-commercial de l'entreprise.
Objectif unique et mesurable : transformer des visiteurs professionnels en leads qualifiés — demandes documentées, orientées par types de produits (familles, secteur, fréquence du besoin) et appels téléphoniques directs.
| Indicateur | Situation actuelle | Cible à 6 mois |
|---|---|---|
| Demandes qualifiées / mois | non mesuré | 25+ |
| Taux de conversion visite → contact | non mesuré | ≥ 3 % |
| Core Web Vitals (mobile) | dégradés | 100 % « vert » |
| Position locale « emballage industriel Rennes » | absente | top 3 |
| Empreinte carbone / page vue | non mesurée | ≤ 0,3 g CO₂e |
Trois partis pris structurants :
- Le carton traité comme un produit d'ingénierie — pas comme une commodité brune et poussiéreuse.
- La conversion avant l'esthétique — chaque écran conduit vers la demande ou le téléphone ; l'esthétique est au service de la confiance.
- L'éco-responsabilité prouvée, pas proclamée — des chiffres, des certifications, des substitutions concrètes ; jamais de greenwashing.
2. Concept créatif — « Le carton, produit d'ingénierie »
L'imaginaire de l'emballage est encombré : entrepôts sombres, palettes floues, marron triste. Nous prenons le contre-pied complet. Le concept créatif installe EDO dans l'univers des marques techniques premium : lumière, précision, matière noble.
- Le patron de découpe comme signature graphique. Les traits de coupe et de rainage (ces fines lignes techniques des plans FEFCO) deviennent un motif d'interface : fonds quadrillés discrets, transitions, soulignements. Le site « parle » le langage technique du métier.
- La matière kraft magnifiée. Le kraft n'est pas caché — il est présenté comme un matériau design : textures mates subtiles, grain fin, associé au vert forêt profond qui évoque la ressource (la forêt gérée) et à un blanc chaud, jamais clinique.
- Le geste d'emballage chorégraphié. L'animation phare du site (§4) montre un carton qui se plie, se scelle, pivote — l'acte d'emballer transformé en ballet mécanique de précision. Le message implicite : « chez EDO, chaque pli est pensé ».
- Le rouge EDO, utilisé comme un sceau. Le rouge historique de la marque n'inonde plus l'écran : il signe — logo, ruban adhésif de l'animation, CTA, micro-accents. Rare, donc précieux, donc visible.
3. Direction artistique
3.1 Palette
| Rôle | Couleur | Hex | Usage |
|---|---|---|---|
| Fond principal | Blanc crème chaud | #F7F3EA |
fonds de pages |
| Fond secondaire | Sable mat | #EFE7D6 |
sections alternées, cartes claires |
| Matière | Kraft | #D9C7A7 / #C9B48D |
textures, la boîte 3D, accents chauds |
| Profondeur | Vert forêt | #0C2B1C / #123A28 |
bandeaux, footer, blocs immersifs |
| Vivacité | Vert engagement | #2A6A4B |
badges éco, validations, liens |
| Texte | Encre verte | #10201A |
typographie courante |
| Signature | Rouge EDO | #E2001A |
logo, CTA, ruban, micro-accents — jamais en aplat de fond |
Contrastes vérifiés AA (RGAA) sur tous les couples texte/fond. Aucune couleur criarde, aucun dégradé gratuit.
3.2 Typographies
- Titres : Space Grotesk (500/600/700) — sans-serif géométrique, dessin technique et contemporain, parfaite cohérence avec l'univers « ingénierie ».
- Texte : Inter (400/500/600) — lisibilité maximale en petites tailles, chiffres tabulaires pour les specs produits.
- Auto-hébergées (
next/font) : zéro requête vers Google Fonts — performance, RGPD et souveraineté.
3.3 Iconographie & imagerie
- Pictogrammes produits dessinés sur mesure en trait fin (2,6 px) : chaque famille (caisse, calage, film, ruban, machine) possède son illustration vectorielle cohérente — pas de banque d'images générique.
- Photographie (phase contenu, lot 4) : reportage en entrepôt lumière naturelle — mains, matières, gestes précis ; direction photo « atelier propre », jamais « stock photo logistique ».
- Rendus 3D : boîtes et packagings modélisés pour l'animation du hero et les têtes de catégories, matériaux kraft réalistes.
4. Script d'animation — Hero de la page d'accueil
Implémenté dans le démonstrateur en CSS 3D + Framer Motion (60 fps, zéro WebGL). En production : même scénario, GSAP ScrollTrigger ou Framer Motion au choix de l'équipe.
Scène — un carton s'assemble au fil du scroll (hauteur de piste : ~2,6 écrans, boîte épinglée au centre) :
| Progression scroll | Temps fort | Détail technique |
|---|---|---|
| 0 % | Ouverture | Fond crème quadrillé de traits de découpe. Le titre s'écrit mot à mot (stagger 60 ms). Une boîte kraft en vue plongeante, rabats évasés, comme sortie de la table de découpe. |
| 6 → 30 % | Pliage latéral | Les rabats latéraux se replient (rotation 25° → −90°, origine sur l'arête). La caméra descend doucement (58° → 22°). |
| 20 → 44 % | Pliage avant/arrière | Les grands rabats se referment en léger différé — le regard suit la mécanique du geste. |
| 46 → 64 % | Le sceau rouge | Le ruban adhésif rouge EDO se déroule sur le dessus (scaleX 0 → 1) puis retombe sur la face avant. Premier et unique éclat de rouge de l'écran : la marque « scelle » son travail. |
| 64 → 95 % | Révélation | La boîte pivote sur 360°, s'éloigne légèrement… |
| 68 → 100 % | Les 4 piliers | …et cède la place aux quatre engagements — Qualité, Durabilité, Proximité, Innovation — qui se déposent en cartes. |
Sous la scène : bandeau de chiffres clés en compteurs animés (2,64 M€ · depuis 2007 · 2 500+ références · 24-72 h) — la réassurance chiffrée immédiatement après l'émotion.
Accessibilité & performance : prefers-reduced-motion → boîte fermée statique, contenu intégralement lisible sans scroll piloté ; animation 100 % transforms GPU (aucun layout shift) ; poids nul (aucune vidéo, aucune lib 3D).
CTA permanents : « Faire une demande » (rouge) + téléphone en clair dès le premier écran, puis CTA flottant discret au fil de la navigation.
5. Arborescence & parcours utilisateur
5.1 Arborescence (11 pages clés)
Accueil
├── Solutions par secteur
│ ├── Industrie
│ ├── Agroalimentaire
│ ├── E-commerce
│ └── Logistique & transport
├── Catalogue (mode B2B, sans paiement)
│ ├── Caisses & Cartons ┐
│ ├── Calage & Protection │ fiches produits
│ ├── Films & Palettisation │ (fiches = EXEMPLES) +
│ ├── Rubans Adhésifs │ « Ce type m'intéresse »
│ └── Machines & Systèmes ┘
├── Éco-engagement
├── L'entreprise
├── Demande (types de produits cochés + formulaire qualifié)
├── Contact
└── Mentions légales / Confidentialité
5.2 Les deux parcours de conversion
Parcours « acheteur pressé » (60 % des cas estimés) : Accueil → « Vous êtes… » (identification secteur en 2 secondes) → page secteur (problèmes reconnus + solutions + exemples) → « Ce type m'intéresse » → formulaire pré-qualifié → lead. Trois clics entre l'arrivée et la demande.
Parcours « acheteur méthodique » : Catalogue → catégorie (argument éco systématique) → fiches produits présentées comme exemples de la famille (specs tabulées, badges) → sélection des types de produits concernés → demande. La sélection persiste entre les visites (stockage local). Volontairement, aucun panier de références ni quantités : le site qualifie l'intérêt, le chiffrage se fait avec le technico-commercial.
Règles UX transverses : le téléphone cliquable est présent sur 100 % des écrans ; aucune impasse — chaque bas de page relance vers la demande ou un secteur ; la sélection de types affiche son compteur dans la navigation ; formulaire en une seule étape (pas de tunnel), champs de qualification en listes fermées (secteur, volume) pour un traitement commercial immédiat.
5.3 Formulaire de demande dynamique
Champs : société*, contact*, email pro*, téléphone*, secteur (liste), fréquence du besoin (ponctuel → contrat annuel), zone de livraison, besoin détaillé*, consentement RGPD*. Les types de produits cochés (familles du catalogue) sont joints automatiquement. Anti-spam invisible (honeypot + limitation de débit) — jamais de CAPTCHA imposé à un prospect.
6. Réassurance — capitaliser sur 19 ans de solidité
Un acheteur B2B n'achète pas un joli site : il achète l'absence de risque. La solidité d'EDO est un actif commercial sous-exploité — le site la met en scène partout :
- Le bandeau de preuves dès l'accueil : 2,64 M€ de CA (une PME saine et en croissance — le dire !), depuis 2007, 2 500+ références en stock, 24-72 h de livraison.
- La frise 2007 → 2026 sur la page Entreprise : création, entrepôt, machines, virage éco, cap des 2,5 M€ — dix-neuf ans de constance racontés en six jalons.
- L'ancrage physique : ZA la Hallerais, « à 15 minutes de Rennes », horaires réels, photos de l'entrepôt (lot contenu) — un fournisseur qu'on peut visiter n'est pas un site anonyme.
- Les engagements de service datés et chiffrés : réponse sous 24 h ouvrées, interlocuteur dédié nommé, stock de sécurité contractualisé, non-qualité traitée sous 48 h.
- Les marqueurs tiers : certifications matières (FSC®/PEFC), logos clients par secteur (avec accords), mentions des filières françaises.
Le crédit se construit par accumulation de détails vérifiables — jamais par superlatifs.
7. Spécifications techniques
7.1 Architecture recommandée : Jamstack
- Front : Next.js (App Router, React Server Components) — pages statiques générées, hydratation minimale, animations à la carte. (Alternative acceptée : Nuxt 3.)
- CMS Headless : Sanity ou Storyblok — édition autonome du catalogue, des pages secteurs et des contenus éditoriaux par l'équipe EDO, prévisualisation en contexte, workflow de validation. (Repli possible : WordPress headless durci, sans page-builder.)
- Formulaires & leads : API dédiée + base de données, notification email instantanée, export CSV/CRM ; double stockage (base + email) pour qu'aucun lead ne se perde.
- Le démonstrateur actuel implémente cette cible en modèle réduit : Next.js, catalogue d'exemples en données structurées, demande par types, API + SQLite + email, espace admin sécurisé (2FA).
7.2 Performance — Core Web Vitals 100 % verts
Budget par page : ≤ 500 Ko transférés, ≤ 90 Ko de JavaScript (hors médias différés). LCP < 1,8 s en 4G, CLS < 0,05, INP < 200 ms. Leviers : génération statique, images AVIF/WebP servies à la taille exacte, polices auto-hébergées en swap, animations 100 % transforms, zéro script tiers bloquant, zéro dépendance externe au chargement.
7.3 Éco-conception & hébergement
Le site applique ce que l'entreprise vend — la juste matière : sobriété fonctionnelle (pas de carrousel, pas de vidéo d'ambiance en autoplay), poids minimal, cache long. Hébergement souverain et sobre en France (opérateur alimenté en électricité bas-carbone, PUE < 1,4), CDN européen optionnel. Objectif ≤ 0,3 g CO₂e/page vue (mesure EcoIndex/GreenIT en recette).
7.4 Accessibilité — RGAA
Conformité RGAA 4 visée (audit sur les 11 gabarits) : contrastes AA, navigation clavier complète, focus visibles, liens d'évitement, formulaires étiquetés, alternatives textuelles, prefers-reduced-motion respecté, HTML sémantique landmarks/headings.
7.5 Sécurité
HTTPS exclusif (TLS 1.3, HSTS), en-têtes durcis (CSP stricte, X-Frame-Options, Referrer-Policy), protection DDoS et WAF au niveau de l'hébergeur, espace d'administration derrière double authentification (TOTP), limitation de débit sur toutes les soumissions, aucune donnée personnelle en clair dans les URL, sauvegardes quotidiennes chiffrées. Conformité RGPD native : pas de cookies tiers, registre des traitements fourni.
8. SEO — dominer le Grand Ouest
- Architecture en silo :
/catalogue/{famille}/{produit}— le maillage interne concentre l'autorité sur les pages familles ; fiches produits reliées par famille et par secteur. - Sémantique irréprochable : un H1 par page, données structurées Organization, LocalBusiness, Product (implémentées dans le démonstrateur), sitemap et robots générés, canoniques propres.
- SEO local : fiche Google Business Profile optimisée et reliée, cohérence NAP, pages secteurs ancrées géographiquement (« Grand Ouest », « Rennes », « Ille-et-Vilaine »), stratégie d'avis clients B2B.
- Contenu expert (lot 4) : guides d'achat par famille (« bien choisir sa cannelure », « réduire son film étirable ») — les requêtes informationnelles des acheteurs deviennent des portes d'entrée.
- Migration sans perte : audit des URL actuelles, redirections 301 exhaustives, suivi Search Console sur 6 mois.
9. Lotissement, budget & planning
| Lot | Contenu | Budget HT |
|---|---|---|
| 1. Direction artistique & concept | ateliers, moodboards, DA complète, maquettes des 11 gabarits, prototypes d'animation | 8 000 € |
| 2. UX & contenus stratégiques | arborescence, parcours, wireframes, conception des formulaires, ateliers réassurance | 6 000 € |
| 3. Développement | intégration Next.js + CMS headless, catalogue d'exemples, demande par types, API leads, admin, animations | 22 000 € |
| 4. Contenu & médias | reportage photo entrepôt, rendus 3D, rédaction SEO (catalogue + guides) | 6 000 € |
| 5. SEO, accessibilité, éco-conception | audits, données structurées, redirections, mesure EcoIndex, mise en conformité RGAA | 4 000 € |
| 6. Recette, déploiement, formation | tests multi-devices, formation CMS (½ journée), garantie 3 mois, documentation | 4 000 € |
| Total | 50 000 € |
Planning (12 semaines) : S1-S2 cadrage & DA · S3-S4 UX/maquettes · S5-S9 développement (démos hebdomadaires) · S8-S10 contenus & médias en parallèle · S10-S11 SEO/RGAA/recette · S12 formation & mise en ligne. Comité projet hebdomadaire de 30 min.
10. Mesure & pilotage de la conversion
- Analytics respectueux (Matomo auto-hébergé ou Plausible) — sans bannière cookie intrusive.
- Événements suivis : types de produits cochés, envoi de formulaire (par secteur), clics téléphone, téléchargements, profondeur de scroll du hero.
- Tableau de bord mensuel : leads par source et par secteur, taux de conversion par page d'entrée, positions SEO locales, Core Web Vitals réels (CrUX), EcoIndex.
- Boucle d'amélioration trimestrielle : les données réorientent contenus et CTA — le site est un actif commercial vivant, pas une plaquette figée.
Document établi par l'agence — juillet 2026. Le démonstrateur embalouest.cube3d.fr illustre l'ensemble des principes ci-dessus en conditions réelles : direction artistique, animation du hero, parcours de demande complet (types → formulaire → notification), espace de traitement des demandes, performances et bonnes pratiques SEO/RGAA.