Hello 👋

Bienvenue dans ce Google Doc qui vous aide à rédiger votre cahier des charges pour votre
site e-commerce.

Avant de remplir votre cahier des charges, nous vous rappelons l’intérêt de ce document. Le
cahier des charges est un document contractuel entre le client et le prestataire qui vous
permet de :

➡️ Formaliser l’expression de votre besoin et la réponse d’une agence (à la suite de

résultats d’ateliers)
➡️ Définir le périmètre du projet
➡️ Bénéficier d’un document de référence en cas de litige
➡️ Donner un repère à vos équipes et à votre prestataire
➡️ Diminuer les risques d’erreurs
Un cahier des charges va vous permettre de poser cartes sur table concernant votre projet de
création web. Ce document est donc l’élément clé de réussite d’un projet ! Si vous ne l’avez
pas lu, jetez un œil à notre article sur le sujet.

Bon remplissage ! 💪
 Insérer le logo de votre entreprise ici.

Cahier des charges

+ Nom de votre entreprise

Personne à contacter :

Adresse :

Téléphone :

Email :

Cahier des charges proposé par YesWeDev. Page 2

 Sommaire
1. Contexte du projet
a. Objet et contexte du projet
b. Objectifs du futur site et KPI’s
c. Écosystème digital

2. Arborescence du futur site internet

a. Projection visuelle de l’arborescence
b. Menu de niveau 1 (header)
c. Menu footer

3. Détails des modèles de pages et composants

a. Listing des gabarits
b. Description des gabarits

4. Principes e-commerce
a. Frais de port
b. Solutions de paiement
c. Carte cadeau

5. Synchronisation ERP, gestion des produits

a. ERP
b. Gestion des produits
c. Catégories de produit
d. Fonctionnalités à prévoir

6. Principes de navigation/animations attendues

a. Animation du menu
b. Éléments actifs/inactifs

7. Technique
a. Applications tierces
b. Référencement et analytics

Cahier des charges proposé par YesWeDev. Page 3

 c. RGPD
d. Compatibilités navigateur
e. Environnement et socle technique
f. Nom de domaine, hébergement et maintenance
8. Calendrier prévisionnel

Cahier des charges proposé par YesWeDev. Page 4

1. Contexte du projet
a. Objet et contexte du projet - Dans cette première partie, présentez votre
structure, votre activité principale, vos principaux axes de développement, les
acteurs sur le projet et votre problématique.

💡 Exemple
Mon entreprise est une société de service liée au secteur automobile. Mon entreprise forte de
5 années d’expérience est spécialisée dans la vente automobile de véhicules d’occasion
(voiture, voiture sans permis et camion). Nous travaillons sur un projet de création/refonte de
site web en collaboration avec l’agence X pour l’aspect webmarketing, l’agence Y pour la
partie design. Pour ce projet, nous souhaitons utiliser WordPress…

N’hésitez pas à décrire votre situation en cas de refonte : CMS, WordPress, site from scratch,
ERP, langage utilisé, hébergement, nombre de pages, nombre de personnes engagées sur ce
projet, etc.).

Cahier des charges proposé par YesWeDev. Page 5

 b. Objectifs du futur site et KPI’s - Indiquez vos différents objectifs ainsi que les
éléments de mesures.

💡 Exemple
Utilisez un tableau simple avec vos objectifs sur les X mois post-mise en ligne. Si vous avez
plusieurs objectifs, notez-les.

Objectifs KPI

Améliorer le référencement - Suivre la Google Search Console sur

le nombre de clics et d’impressions
- Acquérir des nouveaux users.

Parcours utilisateur simple et fluide - Suivre le taux de conversion

- Analyser parcours utilisateur
- etc.

Cahier des charges proposé par YesWeDev. Page 6

 c. Écosystème digital - Avez-vous déjà un site web, des applications tierces et
des réseaux sociaux ?

💡 Exemple
Partagez un schéma simple de votre écosystème digital. Pour ce faire, vous pouvez
partager un schéma basique avec Gloomaps.

Cahier des charges proposé par YesWeDev. Page 7

2. Arborescence du futur site internet
a. Projection visuelle de l’arborescence - Indiquez l’arborescence* de votre futur
site (partagez un lien si votre arborescence est complexe).

👨‍🎓 Lexique
Arborescence : L’arborescence d’un site web désigne l’organisation du contenu et des pages
d’un site web et les liens entre chaque page. C’est le squelette du site. Si vous structurez bien
votre site web, les internautes et les moteurs de recherche en profitent : les utilisateurs
trouveront plus facilement leur chemin et Google indexera mieux et plus régulièrement vos
pages.

💡 Exemple
Partagez un schéma d’arborescence avec Gloomaps. De plus, vous pouvez partager un lien
direct vers votre arborescence détaillée avec une solution comme Mindmeister.

Cahier des charges proposé par YesWeDev. Page 8

 a. Menu de niveau 1 - Indiquez votre menu principal (header*) de votre futur site
avec les liens et les pages pointées*.

👨‍🎓 Lexique
Header : Le header fait référence à la zone d’un site web s’affichant tout en haut de la page.
Page pointée : Lorsque je clique sur cet item ou catégorie, je suis redirigé vers une autre page
= page pointée.

💡 Exemple
Faites un tableau facile à lire.

Menu : entrée de niveau 1 (header) Page pointée

Logo de Mon entreprise Page d’accueil

Mon entreprise Page à propos

Services Page Services

Blog Page Blog

Recherche Moteur de recherche avec suggestions

Contact Page contact

Cahier des charges proposé par YesWeDev. Page 9

 b. Menu footer - Indiquez votre menu (footer) de votre futur site avec les liens et
les pages pointées.

👨‍🎓 Lexique
URL : Adresse d'un site ou d'une page hypertexte sur Internet (ex. http://www.lerobert.com).

💡 Exemple
Faites un tableau facile à lire.

Menu : entrée de niveau 1 (header) Page pointée

Mentions légales Page Mentions Légales

Contact + Nous écrire + Nous appeler Pas de redirection vers une page
Mail-to : contact@monentreprise.bzh
Call-to : 02 02 02 02 02

Lien Instagram URL d’Instagram

Lien Facebook URL Facebook

Politique de confidentialité Page Politique de confidentialité

Cahier des charges proposé par YesWeDev. Page 10

3. Détails des modèles de pages et
composants
Le but de cette partie est de détailler tous vos gabarits* de page ainsi que les composants qui
les construisent.

👨‍🎓 Lexique
Gabarit/template : C’est un modèle de mise en page, d’images et de textes, qui peut être
réutilisé pour plusieurs pages d’un site web afin d’en faciliter le développement. Un site web a
plusieurs gabarits (page d’accueil, page contact, page blog, etc.).

a. Listing des gabarits

💡 Exemple
Listez l’ensemble des pages pour votre site web.

1. Page accueil
2. Page service
3. Page blog
4. Page contact
5. Page 404
6. etc.

Cahier des charges proposé par YesWeDev. Page 11

 b. Description des gabarits

Cette partie est assez conséquente mais primordiale. C’est un gain de temps pour le
développement de votre site web alors ne la négligez pas et prenez le temps d’être précis !
(Conseil : mettez en marge la maquette fonctionnelle ou graphique avec des légendes et
profitez-en pour présenter le balisage Hn).

👨‍🎓 Lexique
Balisage Hn : Les balises de titre Hn sont des balises prévues pour la hiérarchisation des
contenus. Elles sont utilisées lors de la rédaction de contenu web pour indiquer les titres,
sous-titres, axes d’argumentation, etc. En SEO, leur importance n’est pas négligeable
puisqu’elles permettent de faire comprendre aux moteurs de recherche notre structure de
document et montrent notre qualité rédactionnelle. On partage deux règles : utiliser un seul
titre H1 par page et toujours commencer par un H1 - ne pas sauter des niveaux de titre (par
exemple passer d’un H1 à un H3 c’est interdit).
Administrable : Vous pouvez changer à tous moments les éléments de cette partie, elle ne
vous est pas bloquée.

💡 Exemple
Voici un exemple de description pour le gabarit d’une page d’accueil.

Gabarit fixe - La page d’accueil est composée de 4 blocs.

Bloc 1. Le header : (uniquement le texte est administrable* avec possibilité d’ajouter un

hyperlien. Pas de limite de caractères, au besoin passage sur 2 lignes). Le titre sous format
H1 avec une zone de texte en dessous, centrée.

Bloc 2. Média + texte : les deux éléments sont administrables, l’image se situe à gauche en
format carré, le texte à droite avec possibilité de mettre un hyperlien).

Vous continuez à décrire chacun des éléments sur chacune de vos pages pour faciliter la
compréhension d’un développeur sur vos envies.

Cahier des charges proposé par YesWeDev. Page 12

4. Principes e-commerce
a. Frais de port - Indiquez vos règles liées aux frais de port (France, Europe,
International).

Cahier des charges proposé par YesWeDev. Page 13

b. Solutions de paiement - Indiquez les solutions utilisées (Paypal, Stripe, via une
banque, etc.).

Cahier des charges proposé par YesWeDev. Page 14

c. Carte cadeau - Indiquez vos règles concernant les cartes cadeaux (code
envoyé par mail, etc.)

Cahier des charges proposé par YesWeDev. Page 15

5. Synchronisation ERP, gestion des
produits
a. ERP - Faut-il relier votre ERP au site internet ?

👨‍🎓 Lexique
ERP : l’ERP permet aux de centraliser les flux de gestion dans le cadre d’une activité multicanal
(vente en ligne et en magasin…).

Cahier des charges proposé par YesWeDev. Page 16

b. Gestion des produits - Indiquez le fonctionnement de votre catalogue produit
(produit en stock, rupture de stock, précommande, etc.)

Cahier des charges proposé par YesWeDev. Page 17

c. Catégories de produit - Indiquez les différentes catégories pour vos produits
(collection, type de produit, etc.). Vous pouvez mettre un lien vers votre
arborescence détaillée.

Cahier des charges proposé par YesWeDev. Page 18

 d. Fonctionnalités à prévoir - Faut-il faire remonter des produits à la une ? Prévoir
du cross selling ? une FAQ ?

👨‍🎓 Lexique
Cross selling : Une action de cross selling consiste à proposer, au moment de l'acte de vente
ou plus tard, la vente d'un produit complémentaire à celui acheté.
FAQ : Un support d'information qui regroupe, sur une même page web, les questions les plus
souvent posées par des internautes.

Cahier des charges proposé par YesWeDev. Page 19

6. Principes de navigation/animations
attendues
Indiquez le type d’animation souhaitées à certains éléments de votre futur site web (hover,
texte animé, etc.). Cette partie n’est pas bien compliquée, essayez d’être précis sur le type
d’effet et animation que vous souhaitez. Si vous avez du mal à décrire l’animation, prenez des
exemples que vous avez repéré sur des sites web. Un lien + un screenshot et c’est dans la
boîte !

👨‍🎓 Lexique
Hover : L’effet hover permet de spécifier l'apparence d'un élément au moment où l'utilisateur le
survole avec le pointeur, sans nécessairement l'activer.

a. Animation du menu

💡 Exemple pour le menu (header)

Menu plus large sur la page d’accueil, version condensée lorsque scroll vers le bas.

Cahier des charges proposé par YesWeDev. Page 20

 b. Éléments actifs/inactifs

💡 Exemple
Dans le menu au survol, une ligne se dessine sous les items. Au clic, l’état actif est une ligne
plus épaisse. C’est également le cas des liens hypertexte.

Cahier des charges proposé par YesWeDev. Page 21

7. Technique
a. Mise en ligne - Indiquez les points techniques essentiels pour une bonne mise
en ligne du site (redirections, formation sur le back office, etc.)

👨‍🎓 Lexique
Redirections : La redirection web est un dispositif permettant d’informer le navigateur Internet
(ou un robot) qu’une page web a changé d’adresse (URL).
Back office : Le back office est une interface accordant la possibilité de gérer tout le contenu
publié d’un site internet de type CMS comme Wordpress, Drupal et autres en ayant les accès
(login et mot de passe) dont l’administrateur de site a besoin en ce sens.

Cahier des charges proposé par YesWeDev. Page 22

 b. Applications tierces - Indiquez les connexions entre votre site web et des
applications tierces (chatbot, newsletter, outil de marketing automation, CRM,
etc.)

👨‍🎓 Lexique
Marketing automation : Le marketing automation désigne au sens large l’automatisation de
campagnes marketing déclenchées par un ensemble de conditions prédéfinies et en fonction
du comportement de l’utilisateur. Il est possible d’automatiser l’envoi d’emails, de sms, la
segmentation de contact ou le lead scoring.

Cahier des charges proposé par YesWeDev. Page 23

 c. Référencement et analytics - Indiquez vos besoins sur la partie SEO
(hiérarchisation des contenus, mise en cache, édition des meta-titles et
meta-description, balise alt) ainsi que sur la partie analytics (compte Google
Analytics, tracking, etc.).

👨‍🎓 Lexique
SEO/Référencement naturel : Le référencement naturel ou SEO désigne l'ensemble des
techniques qui consistent à positionner favorablement un site ou un ensemble de pages sur
les premiers résultats naturels ou organiques des moteurs de recherche correspondant aux
requêtes visées des Internautes.
Analytics : L’analytics correspond à la découverte, l’interprétation et la communication de
données. Ces dernières proviennent d’interactions humaines sur votre site web (visites, temps
sur une page, etc.)

💡 Exemple
L’administrateur doit pouvoir gérer l’édition des meta-titles et meta-description ainsi que la
gestion des balises alt des images déposées. Pour suivre les statistiques, un compte
Google Analytics sera à indiquer : UA-********.

Cahier des charges proposé par YesWeDev. Page 24

 d. Réglementation - Indiquez les normes à respecter (W3W, WCAG 2.0, etc.) ainsi
que votre périmètre sur la partie RGPD (bandeau de cookie, page données
personnelles, changement de consentement, case de consentement si
nécessaire, etc.).

👨‍🎓 Lexique
RGPD : Le RGPD est un nouvel ensemble de règles conçues pour donner aux citoyens de l’UE
plus de contrôle sur leurs données personnelles. Il est mis en place pour simplifier
l’environnement réglementaire des entreprises afin que les citoyens et les entreprises de
l’Union européenne puissent pleinement profiter de l’économie numérique.

Cahier des charges proposé par YesWeDev. Page 25

 e. Compatibilités navigateur - Indiquez les navigateurs qui doivent assurer un
affichage correct pour la partie desktop (Edge, Firefox, Safari, Chrome, etc.)
ainsi que pour la partie mobile (Safari mobile, Android Browser, Chrome, Firefox
Mobile, etc.)

👨‍🎓 Lexique
Desktop : Formée des mot anglais "desk" (bureau) et "top" (dessus), l'expression "desktop"
caractérise un bureau où l'on peut poser un ordinateur et, par extension, un écran.

Cahier des charges proposé par YesWeDev. Page 26

f. Environnement et socle technique - Si vous avez des envies et préférences
pour la partie de développement, indiquez-les ici.

Cahier des charges proposé par YesWeDev. Page 27

g. Hébergement et maintenance - Indiquez l'hébergement souhaité ainsi que les
différents types de maintenance à prévoir (corrective, évolutive).

Cahier des charges proposé par YesWeDev. Page 28

h. Nom de domaine - Indiquez le nom de domaine de votre site ainsi que les
changements de nom de domaine si vous le modifiez.

Cahier des charges proposé par YesWeDev. Page 29

9. Calendrier prévisionnel
Indiquez la date pour laquelle vous souhaitez avoir votre site en ligne.

Aidez-vous du Google Sheet pour établir un planning selon vos besoins.

Cahier des charges proposé par YesWeDev. Page 30