Лендинг для стартапа за четыре дня: сайт «Корни», дизайн-система и SEO

Что болело до нас

Семейная память живёт кусками. Папка «Бабушка_фото» на 142 файла без названий, 2014 год. Аудиозапись разговора с дедом о войне, 2018-й, с тех пор её никто не слушал. Свидетельство о рождении прабабушки в почте с мыслью «открою позже», 2020-й, прошло шесть лет. Итог: сегодня никто из живущих не знает, как звали прадеда.

Вторая боль это архивы. Поиск прадеда означает ручной перебор ЦАМО, ОБД «Мемориал», «Памяти народа», ГАРФ. Дальше бумажные запросы в ЗАГС, по шаблону каждого архива отдельно.

Третья боль: западные сервисы нишу не закрывают, кириллица и российские архивы им чужие. В семантике это видно отдельной группой запросов: «ancestry на русском», «myheritage альтернатива», «русский аналог ancestry».

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

Что сделали

Работа шла в мае, четырьмя днями подряд.

• Лендинг на 13 блоков: навигация, hero, «вы откладывали это годами», манифест-письмо, демо, «как это работает», возможности, история семьи, отзывы, тарифы, FAQ, форма, футер
• Кликабельное демо прямо на странице: древо из шести карточек предков, клик по узлу разворачивает карточку человека с фото, биографией, письмом 1943 года и вкладками писем, фото, голоса и документов
• Дизайн-система «архивная бумага» отдельным документом на 11 разделов: палитра, типографика, портреты-поляроиды, узлы дерева, кнопки, поверхности, тени, печати, голос, письмо, знак
• Знак бренда как один SVG-символ: он рендерится в навбаре, манифесте, книге, форме и футере из одного определения
• Семантическое ядро на 71 запрос в 8 группах и переписанная под него главная: title, description, h1, h2 и лид целятся в «генеалогическое древо», «составить родословную», «найти прадеда в ЦАМО», «ОБД Мемориал»
• Техническое SEO: JSON-LD на четыре схемы в одном @graph, canonical, Open Graph, Twitter-карточка, robots.txt с Clean-param для Яндекса, sitemap.xml
• Сбор заявок: форма пишет строку в Google-таблицу, после отправки на месте формы появляется экран «Записали. Скоро пришлём письмо»
• Слой 152-ФЗ: политика конфиденциальности на 11 разделов в фирменной стилизации, чекбокс явного согласия с блокировкой кнопки, куки-баннер, реквизиты оператора в футере
• Регламент проекта в репозитории: канон палитры, шрифтов и тарифов, список архивов и правило, как можно и как нельзя писать про ИИ
• Автовыкатка: пуш в репозиторий, дальше сервер забирает изменения сам, руками на него никто не ходит

Как это устроено

Выбрали самое простое, что закрывает задачу. Один статический HTML на 3 109 строк и 145 КБ: вся вёрстка, 1 823 строки CSS, вся графика и все скрипты внутри файла. Страница открывается двойным кликом и раскладывается копированием на nginx.

Портреты и логотип живут как пять SVG-символов. Они описаны один раз и вставляются через <use>: в демо-древе, карточке человека, коллаже «история одной семьи», отзывах, блоке «соберите всей семьёй». Портретных картинок страница не грузит вообще.

Интерактив держится на CSS и нативном HTML. Демо разворачивается добавлением одного класса на контейнер, FAQ работает на тегах <details>, возврат в древо снимает тот же класс. Живого JavaScript четыре небольших скрипта: появление манифеста, куки-баннер, отправка формы, файл согласия.

Текстуру бумаги рисует сама страница: полноэкранный слой накладывает SVG-шум через feTurbulence и два радиальных градиента в режиме multiply. Тёплая зернистая бумага обходится без единого килобайта фоновой графики. Анимации тоже на CSS: качание дерева, падающие листья, пульс узла, волна аудио.

Голос разведён по четырём шрифтам с закреплёнными ролями. Cormorant Garamond говорит от бренда, PT Serif ведёт рассказ, Manrope отвечает за интерфейс, JetBrains Mono за архивные факты. Эмоции сериф, факты моноширинный.

Заявки уходят POST-запросом в Google Apps Script, скрипт дописывает в таблицу строку с датой, почтой и источником. Бэкенда нет, базы нет, персональные данные на нашей стороне не хранятся. Файл согласия держит кнопку заблокированной до галочки и добавляет к отправке время согласия в ISO-формате.

Грабли

Четыре дня спокойными не были. Вот что переделывали и почему.

• Переписали позиционирование ИИ. В презентации главная идея звучала как «древо собирает себя», «древо строится само, при помощи AI». На боевой странице такие формулировки под запретом, он вынесен в регламент отдельным разделом: можно «AI-помощник», «AI расшифрует», «AI ищет в архивах», нельзя «AI всё сделает за вас». Обещание «соберётся само» невыполнимо и обесценивает смысл продукта. Теперь ИИ везде подручный, решение остаётся за человеком: «покажем три самых вероятных совпадения, какой ваш, решаете вы».
• 810 КБ в первом экране. Растровое дерево в hero весило 810 063 байта и грузилось первым, с высоким приоритетом. Для страницы, которая целится в поиск и меряется поведенческими, это провал по скорости. На следующий день сделали webp на 69 110 байт и отдали через <picture> с png-фолбэком: в 11,7 раза легче. Любой растр в первом экране надо взвешивать до выкатки.
• Выдуманный социальный пруф убрали. В согласованном варианте под hero стояли «1,8 млн человек уже в древах» и «184 года самая длинная семейная линия». На боевой странице их нет, осталось проверяемое «Открытое бета-тестирование, бесплатный доступ». Для сервиса про семейную память фальшивый миллион пользователей ломает главное: доверие.
• 152-ФЗ догоняли вторым заходом. Лендинг с SEO был готов 4 мая, политика, согласие и куки-баннер приехали только 21-го, отдельной волной сразу по девяти лендингам. Юридический слой правильнее закладывать в первую версию.
• Форма отправляется вслепую. Режим no-cors не даёт браузеру увидеть ответ сервера, поэтому экран «Записали» показывается в любом случае, включая тот, когда строка в таблицу не записалась. Компромисс осознанный: бэкенд ради одной формы избыточен. Доставку проверяем по самой таблице.
• Мусор доезжает до боевого сервера. Файл parchment.png на 561 818 байт не подключён ни в одном HTML проекта, но лежит в репозитории и уезжает на сервер при каждой выкатке. Остался от отброшенного варианта фактуры бумаги. Регламент тоже устарел: он описывает генеративное SVG-дерево, которого в боевом файле давно нет.

Порядок и сроки

Сначала разглядывали материал, потом строили страницу. 1 мая: концепт-презентация на 13 слайдов. 2 мая: дизайн-кит и превью знака. 3 мая: регламент проекта и первая графика дерева. 4 мая: семантическое ядро, переписанная главная, JSON-LD, robots.txt, sitemap.xml и облегчённая картинка. 21 мая: слой 152-ФЗ. 16 июня: проект переехал в нашу GitHub-организацию и встал на автовыкатку.

Такой порядок экономит переделки. Палитра, роли шрифтов и правила текста были зафиксированы письменно до первой строчки вёрстки. Правило про ИИ тоже: без записи в регламенте любая следующая правка текста вернула бы «древо соберётся само».

Частые вопросы

Сколько времени занимает лендинг из концепт-презентации?

У «Корней» это заняло четыре дня подряд. 1 мая была презентация на 13 слайдов, 4 мая на сервере стояла страница из 13 блоков с семантикой, JSON-LD, robots.txt и sitemap.xml. Юридический слой приехал позже, 21 мая, и это был лишний заход.

Нужны ли фреймворки и сборка для такой страницы?

Нет. Вся страница это один HTML на 3 109 строк и 145 КБ: внутри 1 823 строки CSS, вся графика и все скрипты. Ни npm, ни бандлера, ни dev-сервера, файл открывается двойным кликом и раскладывается копированием на nginx.

Можно ли собирать заявки без бэкенда и базы?

Да, форма уходит POST-запросом в Google Apps Script, скрипт дописывает в таблицу строку с датой, почтой и источником. Базы нет, персональные данные на нашей стороне не хранятся. Минус честный: режим no-cors не даёт увидеть ответ сервера, поэтому экран «Записали» показывается всегда, а доставку проверяем по самой таблице.

Что нужно лендингу по 152-ФЗ?

На «Корнях» это политика конфиденциальности на 11 разделов, чекбокс явного согласия с блокировкой кнопки, куки-баннер и реквизиты оператора в футере. К отправке формы добавляется время согласия в ISO-формате. Этот слой закрывали вторым заходом 21 мая сразу по девяти лендингам, правильнее закладывать его в первую версию.

Как заложить SEO сразу, а не после запуска?

Сначала собрали 71 запрос в 8 группах, потом под них переписали title, description, h1, h2 и лид. Дальше техническая часть: JSON-LD на четыре схемы в одном @graph, canonical, Open Graph, robots.txt с Clean-param для Яндекса, sitemap.xml. Отдельно скорость: картинку дерева в первом экране сжали с 810 063 байт до 69 110, в 11,7 раза.