# J’ai transformé mon site en ville pour qu’on puisse s’y perdre

> Plus de cent cinquante articles rangés dans une liste racontent une chronologie. Les mêmes contenus transformés en quartiers racontent un territoire. Voici pourquoi j’ai créé la Map et comment elle fonctionne.

- Rubrique : Carnet de bord (https://www.gregtaieb.com/rubriques/carnet-de-bord)
- Auteur : Greg Taieb
- Publié le : 2 novembre 2026 (2026-11-02)
- Thèmes : Coulisses, Design, Développement, IA
- Temps de lecture : 7 min
- Langue : français
- Page web : https://www.gregtaieb.com/article/map-ville-alternative-visuelle-blog
- Source : Les News de Greg (https://www.gregtaieb.com)

## L'essentiel

- La Map ne remplace ni la page d’accueil ni la recherche : elle ajoute une porte d’entrée faite pour explorer plutôt que pour trouver.
- Les neuf quartiers correspondent aux grands thèmes du site ; chaque bâtiment, étiquette et panneau mène vers de vrais contenus.
- La ville est construite en SVG isométrique et animée dans le navigateur, puis enrichie avec les données réelles des articles et des projets.
- Les habitants mettent en scène le cycle éditorial : tester, comprendre, publier, envoyer la newsletter et partager.
- Le principal intérêt n’est pas décoratif : rendre visibles les relations entre des contenus que la chronologie sépare.

---

Un site éditorial ressemble souvent à un journal. Le dernier article arrive en haut, les précédents descendent d’un cran et, au bout de quelques semaines, les anciens contenus disparaissent derrière une pagination.

Ce fonctionnement est logique quand on vient chercher la nouveauté. Il l’est beaucoup moins lorsqu’un site contient **neuf ans d’articles, de tests, de podcasts et de projets**.

Je voulais donc essayer autre chose : ne plus présenter le site comme une pile de textes, mais comme un endroit. C’est devenu [**la Map des News de Greg**](https://www.gregtaieb.com/map), une ville interactive dans laquelle chaque quartier représente un thème du site.

![La Map des News de Greg, une ville isométrique dont les quartiers représentent les contenus du site](https://www.gregtaieb.com/images/articles/map-ville-contenus/map-ville-greg.png)

Les mêmes contenus, mais une autre façon de comprendre où l’on se trouve.

## Le problème n’était pas de ranger les articles

Le site possède déjà ce qu’il faut pour trouver un contenu : des [rubriques](https://www.gregtaieb.com/rubriques), des thèmes, une recherche qui parcourt les articles et les projets, et une page d’accueil qui met en avant les dernières publications.

Le problème était ailleurs. Une liste répond très bien à la question « qu’est-ce qui vient de sortir ? ». Elle répond moins bien à « de quoi parle vraiment ce site ? », « quels sujets reviennent depuis plusieurs années ? » ou « où puis-je aller si je n’ai pas encore de recherche précise ? ».

En regardant les archives, j’ai vu apparaître des ensembles naturels : la Big Tech, le streaming, le futur du travail, le podcast, l’IA, les réseaux sociaux, la newsletter et les applications. À côté, [Levolia](https://www.gregtaieb.com/levolia) et mes [projets](https://www.gregtaieb.com/projets) formaient une autre partie du paysage.

> Une arborescence classe. Une carte donne envie d’aller voir ce qu’il y a derrière le prochain bâtiment.

La ville est née de cette idée. Les catégories sont devenues des quartiers. Levolia a pris la forme d’une tour violette. Les applications occupent leur propre zone. Et un avion tire une bannière Trip Control au-dessus de l’ensemble, parce qu’une ville trop sérieuse aurait raté le sujet.

## Une porte d’entrée pour les visiteurs qui ne cherchent rien

La recherche est parfaite lorsqu’on sait déjà ce que l’on veut. La Map s’adresse au moment inverse : celui où l’on est curieux, mais sans requête en tête.

On peut cliquer sur « Quartier IA », découvrir les articles qui y vivent, puis bifurquer vers les applications. On peut ouvrir le bâtiment d’[Encore un podcast tech](https://www.youtube.com/@EncoreUnPodcastTech/videos), retrouver ses épisodes, puis suivre Rémi dans la ville. On peut aussi sélectionner la tour Levolia et comprendre comment la partie business s’articule avec les retours d’expérience du site.

Ce parcours n’est pas plus efficace qu’une liste. Il est volontairement moins direct. Il ajoute de la sérendipité : la possibilité de rencontrer un contenu que l’on n’aurait jamais pensé à rechercher.

C’est pour cela que j’ai conservé la navigation classique du site au-dessus de la Map. Elle reste un itinéraire alternatif, pas un péage obligatoire. Celui qui veut lire les derniers articles continue à le faire. Celui qui veut se promener peut entrer dans la ville.

## La ville raconte aussi comment un article se fabrique

Je ne voulais pas seulement poser des étiquettes sur des bâtiments. La Map devait refléter la promesse du site : **tester l’IA et le numérique pour de vrai**.

Greg, le petit personnage noir, suit donc un parcours en sept étapes :

1.  tester pour de vrai ;
2.  identifier ce qui marche ;
3.  comprendre ce qui coince ;
4.  expliquer comment l’utiliser dès demain ;
5.  publier l’article ;
6.  envoyer la newsletter ;
7.  partager.

D’autres habitants ont leur propre rôle. Rémi se déplace autour du podcast. Un lecteur rejoint la newsletter. Le magazine et le CEO virtuel représentent les agents IA dont j’ai raconté la construction. L’agent Levolia circule entre la tour et les différents quartiers.

Il ne s’agit pas d’un tableau de bord temps réel. La mention « simulation éditoriale » est volontaire : les déplacements rendent visible le fonctionnement du site, ils ne prétendent pas montrer des personnes réellement connectées à la seconde.

## Techniquement, ce n’est pas une image

La ville entière est dessinée en [SVG](https://developer.mozilla.org/fr/docs/Web/SVG). Les immeubles sont constitués de polygones placés sur une grille isométrique. Cette méthode permet de conserver des lignes nettes, quelle que soit la taille de l’écran, et de rendre chaque bâtiment réellement interactif.

Au chargement, un runtime JavaScript construit la scène dans la page :

-   il génère les routes, les bâtiments, les fenêtres, les étiquettes et les habitants ;
-   il associe à chaque quartier ses liens, ses thèmes et ses articles ;
-   il anime les déplacements avec `requestAnimationFrame` ;
-   il gère le jour et le crépuscule, la pause, la vitesse et le panneau de détail ;
-   il adapte le cadrage aux écrans mobiles et respecte la préférence système de réduction des animations.

La page React ajoute ensuite la couche vivante du site. Le nombre total d’articles vient directement du catalogue éditorial. Le quartier Podcast calcule ses épisodes à partir des publications portant ce thème. Le quartier Projets renvoie vers [Trip Control](https://www.gregtaieb.com/projets/trip-control), [Hiku](https://www.gregtaieb.com/projets/hiku), [Client Signal](https://www.gregtaieb.com/projets/client-signal) et le [tableau de bord social](https://www.gregtaieb.com/projets/tableau-de-bord-social).

Autrement dit, l’illustration et les données sont séparées. La forme de la ville reste stable, mais ses compteurs, ses liens et certains panneaux évoluent avec le contenu. Quand un article est ajouté, le total affiché change sans redessiner la carte à la main.

## Pourquoi le SVG et pas une scène 3D ?

J’aurais pu utiliser WebGL ou un moteur 3D. Le résultat aurait peut-être été plus spectaculaire, mais aussi plus lourd, plus difficile à rendre accessible et moins cohérent avec l’identité éditoriale du site.

Le SVG offre ici un bon compromis : il donne une profondeur visuelle sans transformer la visite en jeu vidéo. Les bâtiments restent des éléments du document, les liens restent de vrais liens et l’ensemble demeure lisible au clavier comme sur un écran tactile.

Le plus gros travail n’a d’ailleurs pas été de dessiner les immeubles. Il a été de régler les interactions : éviter qu’un survol fasse clignoter toute la carte, distinguer un simple passage de souris d’un panneau verrouillé par un clic, conserver une cible suffisamment grande sur mobile et ne pas noyer le visiteur sous les animations.

## Ce que la Map change dans ma manière de voir le site

Une fois les contenus posés dans l’espace, certaines choses deviennent évidentes. La newsletter occupe une place centrale parce qu’elle traverse toute l’histoire du site. Le quartier IA est dense, mais il n’existe pas seul : il touche le travail, les applications et les réseaux sociaux. Les projets ne sont pas une vitrine séparée ; ils prolongent les sujets testés dans les articles.

Cette représentation ne remplace aucune donnée. Elle change seulement la question posée au visiteur. La page d’accueil demande : « que voulez-vous lire maintenant ? ». La Map demande : **« où avez-vous envie d’aller ? »**

Je trouve cette deuxième question plus accueillante pour un fonds éditorial ancien. Un article de 2021 peut rester pertinent, mais il ne remontera jamais naturellement devant une publication de cette semaine. Dans une ville, il conserve une adresse.

## Une expérience, pas un nouveau menu

Je continuerai à améliorer la Map : rendre les quartiers plus riches, faire remonter davantage de projets et créer des passerelles entre les articles qui partagent une même idée sans appartenir à la même rubrique.

Mais je ne veux pas qu’elle devienne une interface exhaustive. Sa valeur vient aussi de sa simplicité. Elle donne une impression du territoire, puis laisse chaque article faire son travail.

Le web est devenu très efficace pour nous mener exactement là où nous demandons d’aller. Il peut encore nous donner le plaisir de nous perdre un peu.

**[Explorer la ville de Greg](https://www.gregtaieb.com/map)**