Данные & Метеосервис

Météo Climat France

358 индексируемых страниц, анимированная карта на 72 срока — и ни одной строчки фреймворка.

Год
2026
Разработка
6 недель
Стек
JavaScript · MapLibre · HTML/CSS · Vercel
  • Информационная архитектура
  • Дизайн интерфейса
  • Разработка
  • Картография
  • Программное SEO
  • Научные тексты
Перейти на сайт(в новой вкладке)Обсудить похожий проект

Продукт KAYZEN, доступный на адресе предпросмотра Vercel до перехода на окончательный домен.

https://meteo-climat-france.vercel.app/
Главная страница сайта Météo Climat France — Данные & Метеосервис, создан KAYZEN
индексируемых страниц180 коммун · 141 климатическая карточка · 16 разъяснений · 12 карт
358
интерполируемых узлов сетки
247
анимированных почасовых срока
72
картографических API-ключейMapLibre и подложка IGN на собственном сервере
0
Отправная точка

Какую задачу нужно было решить.

Контекст

Météo Climat France — бесплатный общенациональный метеосервис от KAYZEN. Он охватывает три разных сценария на одной базе данных: повседневную погоду (почасовой прогноз на 48 часов, тенденция на 10 дней), климатологию (нормы и рекорды по станциям) и агрометеорологию (температура и влажность почвы, ET0, водный баланс, суммы градусо-дней, условия для опрыскивания).

Ограничение

Три требования противоречили друг другу. Сервис должен был показывать анимированную карту Франции на 72 почасовых срока прогноза — то есть тяжёлые вычисления в браузере. Он должен был открываться на телефоне у края поля, часто через 3G. И он должен был присутствовать в Google по сверхлокальным запросам вроде «погода Венисьё (Vénissieux) 69200» — на поле, которое двадцать лет занимают давно укоренившиеся игроки.

Решение

Мы отказались от рефлекторного выбора фреймворка. Сайт написан на нативном JavaScript и разбит на одиннадцать модулей, загружаемых по требованию, а для картографии используется самостоятельно размещённый MapLibre. Сэкономленный на рантайме бюджет вложен туда, где он важен: в интерполяцию 247 узлов сетки, пререндеринг 358 страниц и выверенную агрономическую терминологию.

Дизайн и арт-дирекшн

Каждое решение — и его причина.

  1. Карта как главная страница

    Первый экран — не форма поиска, а уже отрисованная карта Франции на текущий час. Посетитель видит ответ до того, как что-либо сделал. Поиск по коммуне или почтовому индексу доступен сразу под картой, а клавиша «/» переводит на него фокус из любого места.

  2. Своя цветовая шкала для каждой величины

    Температура, осадки, ветер, облачность, давление, влажность, грозы и УФ-индекс имеют каждая собственную шкалу с границами и легендой. Ни одна не опирается только на красно-зелёный градиент: дейтеранопией страдают 6 % мужчин, и неудачно подобранная метеокарта становится для них нечитаемой.

  3. Ползунок времени, управляемый с клавиатуры

    Стрелки влево/вправо меняют час, Shift + стрелки — день, пробел запускает анимацию, Home возвращает к текущему моменту. Сочетания клавиш написаны прямо под ползунком, а не спрятаны в справке.

  4. Текстовое описание карты

    Под картой ссылка «Текстовое описание карты» передаёт словами то, что показывает карта. Это необходимо для экранного диктора и попутно читается поисковыми системами — для них карта на canvas — пустое изображение.

  5. Единственный шрифт, размещённый на своём сервере

    Вариативный Nunito, отдаваемый с домена сайта. Ни одного запроса к Google Fonts: сторонний шрифт на сервисе, который открывают каждый день, — это сетевая зависимость и передача данных за рубеж без правового основания.

Палитра проекта

  • Небесно-голубой

    #2E7BB6

    Структура, ссылки, заголовки

  • Сланец

    #1F2933

    Основной текст

  • Пшеница

    #C9A227

    Агрометеорологический раздел

  • Тревога

    #C6413B

    Превышенные пороги, предупреждения

Типографическая система

Заголовки

Nunito 700

Основной текст

Nunito 400

Одно вариативное семейство на собственном сервере. Цифры набраны табличными: иначе меняющаяся температура сдвигала бы весь столбец почасовой таблицы.

Разработка

Что внутри.

  • JavaScript
  • MapLibre
  • HTML/CSS
  • Vercel

  1. Нативный JavaScript, одиннадцать модулей

    menu, logique, couches, meteo-api, agro, app, climat, comprendre, glossaire, bandeau и вендорный MapLibre. Каждая страница загружает только необходимое: климатологическая карточка станции не тянет за собой ни агрономический движок, ни радарный плеер.

  2. Самостоятельно размещённый MapLibre вместо Mapbox

    Ни API-ключа, ни оплаты за просмотры, ни обращения к третьей стороне при каждой загрузке. Картографическая подложка — от IGN: французские открытые данные, что логично для сервиса, говорящего о коммунах.

  3. Интерполяция по сетке из 247 узлов

    Открытые модели дают сетку, а интерфейсу нужно непрерывное поле. Интерполяция и отрисовка выполняются в браузере, за один проход на срок прогноза, с кэшированием всех 72 сроков: анимация остаётся плавной без повторных запросов к API.

  4. Маршруты /api/ закрыты для роботов

    robots.txt исключает /api/. Без этого каждый обход краулера впустую расходовал бы квоту Open-Meteo — а исчерпанная квота означает недоступный сервис для реальных посетителей.

  5. Серверные функции для данных

    Запросы к моделям проходят через серверные функции, которые нормализуют, кэшируют и ограничивают ответы. Браузер никогда не обращается к поставщику напрямую: в день смены источника интерфейс не меняется.

SEO-продвижение

Как сайт становится находимым.

  1. 358 URL, четыре шаблона

    180 карточек коммун (/meteo/lyon-69001), 141 климатологическая карточка (/climat/…), 16 разъясняющих страниц (/comprendre/…) и 12 страниц тематических карт (/cartes/radar…). Каждый шаблон отвечает на своё намерение; ни одна страница не является косметическим вариантом другой.

  2. Уникальный контент для каждой коммуны

    Программное SEO проваливается, когда дублирует. Каждая карточка коммуны содержит её координаты, высоту, нормы привязанной станции и рекорды — значения, которые действительно различаются от города к городу.

  3. Три блока структурированных данных

    WebApplication (категория «погода», заявленная бесплатность), WebSite с SearchAction, указывающим на реальный внутренний поиск, и FAQPage с вопросами, которые действительно разобраны на странице.

  4. Осмысленная внутренняя перелинковка

    Подвал связывает шестнадцать крупнейших городов; каждая карточка ведёт на свою климатологическую страницу, свои карты и глоссарий. Перелинковка следует пути чтения, а не превращается в ковёр из ссылок.

  5. Согласованные sitemap и канонические URL

    Один канонический URL на страницу и sitemap, в котором перечислены ровно те 358 URL, что реально отдаются. URL, отсутствующий в sitemap, не обходится; URL из sitemap без страницы — это soft-404, который ухудшает весь домен.

Доступность

Удобно для всех.

С июня 2025 года Европейский акт о доступности (European Accessibility Act) требует цифровой доступности для значительной части онлайн-сервисов. Мы закладываем её на этапе проектирования, а не исправляем задним числом.

  1. Карта, которая существует и без зрения

    Текстовое описание карты — не атрибут alt, а генерируемый контент, актуальный для отображаемого срока, достижимый с клавиатуры и читаемый синтезатором речи.

  2. Всё — с клавиатуры

    Смена слоя, коммуны, срока прогноза, воспроизведение анимации: ни одно действие не требует мыши. Сочетания клавиш описаны на экране.

  3. Цветовые шкалы, проверенные при нарушениях цветового зрения

    Каждая шкала смоделирована для протанопии, дейтеранопии и тританопии. Значения остаются различимыми, а в легенде всегда указаны числовые границы.

Структура сайта

Что было сдано.

  • Главная — анимированная карта и поиск
  • /meteo/<коммуна>-<почтовый индекс> — 180 карточек коммун
  • /climat/<станция> — 141 карточка норм и рекордов
  • /cartes/<слой> — радар, ИК- и видимый спутниковый снимок, молнии, УФ…
  • /meteo-agricole — почвы, ET0, водный баланс, опрыскивание
  • /comprendre — 16 обучающих карточек и глоссарий
  • /lune, /contact, правовая информация, конфиденциальность, условия использования и продажи, доступность
Метод

Ход проекта.

  1. Модель данных

    Выбор открытых источников (Open-Meteo, IGN), нормализация величин, квоты.

  2. Картография

    Сетка, интерполяция, цветовые шкалы, ползунок времени.

  3. Агрометеорология

    ET0 по FAO-56, баланс P − ET0, градусо-дни, Delta T, порог 3 балла по Бофорту.

  4. Программное SEO

    Четыре шаблона, генерация 358 страниц, sitemap, перелинковка.

  5. Соответствие требованиям

    Правовая информация, оговорка о регулировании средств защиты растений, доступность, GDPR.

Вопросы

О чём нас часто спрашивают.

Потому что самая тяжёлая страница сайта — карта на canvas: основная нагрузка — графическая отрисовка, а не обновление дерева компонентов. Фреймворк добавил бы JavaScript, который нужно скачать и выполнить на телефонах, часто работающих через 3G, и ничего бы не решил. Выбор не идеологический — в проектах, где состояние интерфейса действительно сложное, мы берём React.

Нет, и страница прямо об этом говорит. Консультирование по применению средств защиты растений во Франции — регулируемая деятельность, требующая аккредитации. Сайт показывает прогнозируемые метеоусловия и напоминает о пороге скорости ветра из постановления от 4 мая 2017 года; решение принимают хозяйство и его аккредитованный консультант. Эта оговорка — часть проектирования, а не правовой информации.

Прогноз — из открытых моделей, агрегируемых Open-Meteo, картографическая подложка — от IGN. Оба источника указаны со ссылками в подвале: сервис данных, который не говорит, откуда берёт цифры, невозможно проверить.

Другие проекты

Вернуться к портфолио

Тот же уровень требований — для вашего сайта.

Бесплатный аудит вашего текущего сайта, смета в течение 24 часов и письменное обоснование — такое же, как то, что вы только что прочитали. Оплата в три этапа без переплаты; местные программы поддержки проверяются до подписания.

Записаться на встречуПосмотреть цены
Поделиться