# Лендинг ретрита, который клиент ведёт сам: редактор прямо на живом дизайне > Кейс лендинга ретрита восстановления в Японии: дизайн «тихой Японии» и редактор /edit, где клиент правит тексты, даты и цены сам, без разработчика. Источник: https://blog.uspeshnyy.ru/blog/keys-burnout-reset-landing/ Автор: Александр Успешный · blog.uspeshnyy.ru Опубликовано: 2026-05-06 Теги: кейс, лендинг --- Большинство владельцев сайтов знают эту боль: чтобы поменять дату мероприятия или поправить цену, нужно писать разработчику, ждать, оплачивать правку — и надеяться, что он ничего не сломает. Этот кейс о том, как мы убрали разработчика из цепочки повседневных изменений. Клиент открывает сайт, кликает по любому тексту и правит его прямо на живом дизайне. Разберём, зачем так сделали и почему это ценно для любого бизнеса, у которого контент меняется чаще одного раза в год. ## Задача: продать тишину людям на пределе Клиент организует ретриты восстановления после выгорания в префектуре Коти, Япония. Аудитория непростая — фаундеры, консультанты и топ‑менеджеры, которые давно работают на износе. Таких людей нельзя брать агрессивной продажей. Им нужен сайт, который с первого экрана передаёт атмосферу покоя, а уже потом, спокойно, даёт факты: программу, наставников, стоимость. Вторая часть задачи была прагматичной. Даты ретритов, цены и состав ведущих меняются несколько раз за сезон. Клиент прямо сказал: «Хочу править это сам, без разработчика». Это требование и определило всю архитектуру проекта. ## Дизайн «тихой Японии» За визуальный ориентир взяли [отельные бренды уровня Aman](/blog/keys-otelpride-spa-lending/) и Six Senses — сдержанная роскошь без лишнего шума. Что это значит на практике: - **Типографика.** Антиква Cormorant Garamond для заголовков, спокойный гротеск Manrope для основного текста. Крупный воздух между блоками, ничего не кричит. - **Приглушённая палитра.** Пастельные болотные и бежевые тона, одна тихая бирюзовая акцентная. Никаких стоковых градиентов и свечения. - **Строгая система.** Три тени, один радиус скругления, единая сетка отступов. Дизайн выглядит собранным, потому что построен на правилах, а не на настроении. На первом экране — фото долины реки Симанто с сакурой, дата ближайшего ретрита и две кнопки действия. Дальше идут секции: философия и метод восстановления, галерея с прошлых заездов, программа по дням, команда наставников, два тарифа и блок контактов. Всё, что нужно человеку, чтобы принять решение, — и ничего лишнего. ## Главное: редактор `/edit`, который ведёт клиент Вот сердце проекта. Клиент заходит по адресу с `/edit`, вводит пароль — и каждый текст на странице становится редактируемым по клику. Не в отдельной админ‑панели, а **прямо на живом дизайне**. Кликнул по заголовку, поправил, кликнул мимо — сохранилось. Точно как в текстовом редакторе, только это его настоящий сайт. ### Что клиент правит сам | Что | Как это выглядит для клиента | |---|---| | **Тексты** | Заголовки, абзацы, кнопки, подписи, даже пункты выпадающих списков в форме брони | | **Шрифт заголовка** | Выбор из шести семейств прямо на экране — можно примерить облик за секунду | | **Даты ретрита** | Три готовых варианта, активный отмечается одним кликом и подставляется на главный экран | | **Цены и условия** | Тексты тарифов и опций правятся так же, как любой другой текст | | **Фото на обложке** | Загрузил новую сакуру одним заходом — старый файл уходит в резервную копию | | **Показ и скрытие блоков** | Логотип в шапке, центральный логотип, AI-виджет в углу — включаются и выключаются тумблером | Отдельно отмечу мелочь, которая показывает уровень проработки: когда клиент прячет логотип в шапке, навигация автоматически центрируется сама. Ему не нужно думать о вёрстке — система додумывает за него. ### Почему это лучше обычной CMS Классические системы управления контентом — Tilda, WordPress, Sanity и им подобные — устроены иначе. Там вы редактируете контент в одном окне (админке), а результат смотрите в другом (превью или живой сайт). Постоянное переключение туда‑обратно. И почти всегда есть риск: неосторожное движение — и клиент меняет размер шрифта, ломает отступ, вставляет чужое форматирование. Дизайн «плывёт». Здесь эта проблема решена на уровне архитектуры. Клиенту доступен **только текст** — само содержимое. Оформление, шрифты в теле, отступы, цвета остаются под замком дизайн‑системы. Клиент физически не может сломать вёрстку, потому что редактируется только то, что можно редактировать безопасно. Контекст при этом не теряется ни на секунду: он видит текст ровно там и ровно таким, каким его увидит посетитель. Это и есть продуктовая идея кейса. Не «дать клиенту доступ ко всему и надеяться», а **разделить зоны ответственности осознанно**: клиент отвечает за смысл, система — за форму. ## Как это устроено на понятном уровне Не углубляясь в код, логика такая. Все правки клиента складываются в [один простой файл](/blog/keys-mironova-clinic-landing/) с настройками на сервере. Когда кто угодно открывает сайт — хоть клиент, хоть посетитель — страница подтягивает этот файл и накладывает свежие правки поверх стандартного содержимого. Один и тот же сайт обслуживает и «витрину», и «редактор» — разница лишь в том, вошёл ли человек по паролю. Технически это одностраничное приложение на React и Vite, а раздачей и защитой занимается веб‑сервер Caddy на собственном VPS — но клиенту про это знать не нужно, для него всё выглядит как обычный сайт с волшебной кнопкой «редактировать». ## Почему сайт быстрый Скорость — не украшение, а деньги: медленный сайт теряет посетителей ещё до первого экрана, особенно с телефона в дороге. Здесь сделали два принципиальных решения: - **Никакого видео на обложке.** Раньше подобные лендинги грузят тяжёлое видео на 8 мегабайт, из‑за которого первый экран «дёргается». Здесь вместо видео — одно фото сакуры весом 95 килобайт. Кстати, само фото сгенерировали современными моделями по описанию: живая съёмка была дорогой, стоки не попадали в стиль, а генерация дала кинематографичный кадр реки Симанто ровно за нужный тон. - **Лёгкий вес.** Весь сайт в сжатом виде — около 176 килобайт. Это открывается мгновенно даже на слабом мобильном интернете. Итог — сайт, который выглядит дорого, но грузится как лёгкая страница. ## Чем это полезно вашему бизнесу Уберите из этого кейса тему ретрита — и вы получите универсальный принцип. Он подходит любому, у кого на сайте есть регулярно меняющийся контент: - **Мероприятия и обучение** — даты, программа, цены, спикеры меняются каждый поток. - **Услуги** — прайс, акции, состав пакетов. - **Локальный бизнес** — часы работы, меню, актуальные предложения. Выгода в цифрах простая. Правка, которая раньше стоила денег и полдня ожидания разработчика, теперь занимает у владельца минуту и стоит ноль. Разработчик подключается только тогда, когда нужна новая секция или структурное изменение — то есть редко. А значит, контент на сайте наконец‑то соответствует реальности, а не «висит с прошлого сезона, руки не доходят обновить». ## Итог Получился лендинг, который клиент **сам держит актуальным**: правит тексты, даты, цены и фото прямо на живом дизайне, не боясь ничего сломать. Дизайн — тихий и дорогой, загрузка — мгновенная, а зависимость от разработчика сведена к минимуму. Это тот случай, когда правильная архитектура экономит клиенту не разовую сумму, а постоянные нервы и время каждый сезон. ## Как это выглядит ![Главный экран лендинга: фото долины с сакурой, дата, две CTA](/images/cases/keys-burnout-reset-landing/hero.webp) ![Секция «О ретрите»: философия и метод восстановления](/images/cases/keys-burnout-reset-landing/about.webp) ![Блок тарифов: два пакета с рекомендованным вариантом](/images/cases/keys-burnout-reset-landing/pricing.webp) ![Редактор: текст правится прямо на живом дизайне, выбор шрифта заголовка](/images/cases/keys-burnout-reset-landing/edit-hero.webp) ![Редактор блока цен — тексты кнопок и опции меняются без разработчика](/images/cases/keys-burnout-reset-landing/edit-pricing.webp) ## Посмотреть вживую **Следующий шаг:** хотите лендинг под квиз‑воронку с персональным PDF-разбором, [напишите мне в Telegram](https://t.me/uspeshnyy).