✔ З першого екрана назвати послугу, систему імплантів і ціну зі знижкою
✔ Показати, що медичному тексту можна довіряти, — автор-лікар, рецензент, дата
✔ Допомогти розібратися в імплантах і вартості лікування
✔ Розвіяти страх перед операцією: роботи «до і після», лікарі, відповіді на запитання
✔ Приймати заявки на безкоштовну консультацію лише за номером телефону
✔ Однаково зручно працювати на комп’ютері, планшеті й смартфоні
Клініка «Мій Стоматолог» встановлює імпланти системи MegaGen AO і хотіла окрему сторінку під цю послугу. Імплантація — дороге лікування, якого бояться: людина порівнює клініки, ціни й лікарів і довго не наважується записатися.
Я побудував лендінг як розмову з пацієнтом: ціна й акції, експертна стаття, каталог імплантів, роботи «до і після», лікарі, прайс і відповіді на запитання. Між блоками — кнопки запису й форма консультації в одне поле, а слайдер порівняння, карусель лікарів, акордеон запитань і розгортання описів імплантів працюють на JavaScript.
Результат — односторінковий сайт з адаптивною версткою під ПК, планшет і смартфон: на телефоні ціна й кнопка консультації стоять над фото, цифри клініки шикуються в стовпчик, а меню ховається в бургер.
Лендінг, у якому шлях від першого екрана до запису на прийом вибудовано крок за кроком.
Акційна вартість 10 000 грн поруч із перекресленою старою й кнопкою консультації
Дата, автор, рецензент і попередження «Важливо!», як заведено для медичних текстів
AnyOne і AnyRidge: переваги, ціна, «Читати більше», «Прослухати текст» і запис
Повзунок порівнює усмішку до й після лікування, навколо — мініатюри інших робіт
Безкоштовна консультація — лише номер телефону й кнопка-стрілка
Адаптивна верстка: на телефоні ціна й кнопка над фото, меню в бургері, дзвінок одним дотиком
Одна сторінка, де кожен блок відповідає на конкретне запитання пацієнта.
Лендінг розв’язує кілька основних завдань:
Відповідь гарантовано протягом 24 годин.
Перша консультація безкоштовна й ні до чого не зобов’язує.
Імплантацію не вибирають за п’ять хвилин: пацієнт тижнями порівнює клініки, ціни й лікарів. На прикладі клініки «Мій Стоматолог» розповідаю, як я зробив лендінг під одну послугу — з ціною на першому екрані, експертною статтею, каталогом імплантів, слайдером «до і після» та формою консультації — і як він перебудовується під планшет і смартфон.
«Мій Стоматолог» — українська стоматологічна клініка: лікування зубів, хірургія, діагностика й імплантація. Для імплантації на системі MegaGen AO клініці знадобилася окрема сторінка з одним сценарієм: людина дізнається про послугу, переконується, що клініці можна довіряти, і залишає номер телефону.
Імплантація — дороге лікування, і рішення про нього не ухвалюють одразу. Пацієнт порівнює ціни, читає про системи імплантів, роздивляється фото робіт і вибирає лікаря. Тому я почав із порядку блоків: яке запитання виникає в людини на кожному кроці й де на сторінці лежить відповідь. Далі — верстка, інтерактивні блоки й адаптив під комп’ютер, планшет і смартфон.
На першому екрані — усе, заради чого пацієнт зайшов: великий заголовок «Імплантація зубів системою MegaGen AO», кнопка «Отримати консультацію» і ціна. Стару ціну 12 000 грн перекреслено, поруч — актуальна 10 000 грн: людина одразу розуміє порядок суми й бачить вигоду. Нижче — три цифри клініки: 15+ років роботи з імплантами, 1000+ задоволених клієнтів і 20+ лікарів.
Праворуч — фото лікаря за роботою з краєм, що «розсипається» на квадрати, і блакитним блоком позаду. Головні кнопки сайту — із градієнтом з рожевого й блакитного, кольорів логотипа: він повторюється на всій сторінці, і око швидко вчиться знаходити дію. У шапці, крім меню, — дві помітні кнопки «Напишіть нам» і «Зателефонуйте нам».
Одразу за першим екраном ідуть «Акційні пропозиції»: картки з фото, вертикальною кольоровою міткою напряму — лікування, хірургія, діагностика, — списком того, що входить у послугу, новою ціною й перекресленою старою.
Медична сторінка — особлива тема і для пацієнтів, і для пошукових систем: до порад про здоров’я ставляться суворіше, ніж до опису товару. Тому експертна стаття на лендінгу показує, хто й коли її написав:
Поруч із текстом — колаж із трьох фотографій: лікар за роботою й великі плани лікування. Блок виглядає частиною клініки, а не вставкою з енциклопедії.
Одразу після статті — яскравий синій банер «Безкоштовна консультація нашого лікаря» з фото лікаря у фірмовому поло й фоновим візерунком зі стоматологічних іконок. У формі одне поле — номер телефону — і кнопка-стрілка: що менше треба заповнювати, то охочіше людина залишає контакт.
Блок «Імпланти в наявності» допомагає розібратися, що саме пропонує клініка. Картки AnyOne та AnyRidge чергують фото ліворуч і праворуч і влаштовані однаково:
У стоматології головний доказ — результат. У блоці «Наші роботи» в центрі стоїть великий кадр «до і після» зі слайдером: повзунок рухається, і усмішку до лікування можна порівняти з результатом. З боків — чотири мініатюри інших робіт, під галереєю — кнопка запису.
Далі — «Чому обирають нас?»: чотири картки з фото про досвід в імплантації, якісні протези, супровід у період адаптації та складні клінічні випадки. Блок «Наші лікарі» — карусель зі стрілками: фото, ім’я, спеціалізація, іконки Instagram і Facebook та кнопка переходу до профілю лікаря. Під каруселлю — кнопка «Задати питання лікарю».
Прайс «Вартість послуг» розкладено у дві колонки рядків «послуга — ціна». Активний рядок підсвічується синім, а замість ціни в ньому з’являється стрілка — одразу зрозуміло, що з рядка можна перейти далі.
Блок «Питання про імплантацію» — акордеон у дві колонки: запитання видно одразу, відповідь розгортається після кліку, і довгий список не розтягує сторінку. Тут розвіюються типові страхи — наприклад, чи приживеться імплант: у відповіді наведено дані MegaGen про приживлюваність 98,9 %.
Завершують лендінг «Додаткові послуги» — ті самі картки з міткою напряму, що й в акціях: пломбування, видалення кісти, панорамний знімок. Повторюваний формат робить сторінку цілісною, а нові послуги додаються такою самою карткою.
Лендінг зверстано адаптивно: на широкому моніторі, планшеті й смартфоні кожен блок перебудовується під ширину екрана, а не просто стискається. На смартфоні перший екран іде в іншому порядку: заголовок, ціна й кнопка консультації стоять над фотографією, цифри клініки шикуються в стовпчик, а меню ховається в бургер. Праворуч у шапці — синя кнопка дзвінка: з телефону зателефонувати в клініку простіше, ніж писати.
Сайт клініки продає не послугу, а довіру. Людина довіряє незнайомим людям своє здоров’я й чималі гроші, тому кожна деталь працює або на спокій, або проти нього. Коли я роблю медичні лендінги, спираюся на кілька правил:
Якщо вам потрібен лендінг для стоматології чи медичного центру, я зроблю сторінку, яка веде пацієнта до запису: зі зрозумілою структурою, формами, інтерактивними блоками й адаптивною версткою.
