Как сделать лендинг для кофейни

Сайт кофейни открывают на ходу, с телефона, и с одним вопросом: стоит ли зайти. Поэтому лендинг кофейни должен сразу показать меню с ценами, атмосферу зала, часы работы и дорогу, а тем, кто спешит, — дать заказать напиток заранее. Разберём, из каких блоков собрать такую страницу и как связать её с картами, через которые кофейню часто находят.

Нужен ли кофейне сайт, если есть карточка в картах

Карточка в Яндекс Картах или 2ГИС — часто первое знакомство с кофейней: человек ищет кофе поблизости и выбирает по рейтингу, фото и расстоянию. Но у карточки есть пределы: меню в ней бывает неполным или устаревшим, среди фотографий много случайных снимков гостей, а афишу и предзаказ в ней не оформить так, как нужно вам.

Сайт — место, где кофейня сама выбирает, что показать и в каком порядке. Карточка и сайт работают в паре: в карточке стоит ссылка на сайт, на сайте — кнопки, которые открывают кофейню в картах.

Одной страницы хватит, если у вас одна точка и компактное меню. Сеть с несколькими адресами, обжарка с продажей зерна, кейтеринг для офисов — уже повод подумать о сайте с разделами. Как выбрать формат, мы разобрали в статье «Лендинг или многостраничный сайт».

Из каких блоков собрать лендинг кофейни

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

Блок	Вопрос гостя	Что показать
Первый экран	Что это за место?	Название, одна фраза о главном, фото зала или бара, часы работы, кнопки «Меню» и «Маршрут»
Меню и цены	Что взять и сколько стоит?	Напитки и еда по категориям, объёмы, цены, доплаты за альтернативное молоко и сиропы
Атмосфера	Каково тут сидеть?	Зал утром и вечером, бар, витрина с десертами, веранда — если есть
Навынос и предзаказ	Можно забрать без очереди?	Как заказать заранее, когда будет готово, как оплатить
Мероприятия	Что у вас происходит?	Ближайшие события: дата, цена, запись
Как добраться	Где вход?	Адрес с ориентиром, фото входа, карта, парковка
Отзывы и контакты	Здесь хорошо? Как связаться?	Оценка в картах, телефон, мессенджер, соцсети

Главное на первом экране — одна честная фраза о том, чем кофейня отличается: своя обжарка, завтраки весь день, тихий зал для работы с ноутбуком, десерты собственного производства. Только то, что гость действительно найдёт внутри. Рядом с названием удобна строка «Сегодня открыто до…» — если она берёт время из графика автоматически и учитывает праздники.

Как показать меню и цены на сайте кофейни

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

Как собрать меню:

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

До разработки договоритесь, кто будет менять цены и сезонные позиции. Если для этого каждый раз нужен разработчик, меню на сайте быстро отстанет от настоящего. Удобно, когда управляющий правит его сам — в простой админке или в таблице, из которой сайт берёт данные. Ссылку на это меню можно напечатать QR-кодом на столиках: поменяли цену на сайте — она поменялась везде.

Какие фото нужны, чтобы передать атмосферу

В кофейню приходят не только за напитком, но и за местом: поработать, встретиться с подругой, посидеть с ребёнком. Фотографии отвечают на вопросы, которые редко задают вслух: уютно ли здесь, есть ли розетки, пройдёт ли коляска, шумно ли вечером.

• Снимайте свой зал в разное время: утро у окна и вечер с лампами — это два разных места.
• Покажите бар и бариста за работой, витрину с десертами, детали — посуду, мешки с зерном, полку с книгами.
• Гости в кадре — только с их согласия. Атмосферу передают и руки с чашкой, и силуэты за столиком.
• Откажитесь от стоковых снимков и тяжёлых фильтров: гость сравнит картинку с тем, что увидит у входа.

Снимков на таком лендинге много, и без сжатия они превращают открытие страницы на мобильном интернете в долгое ожидание. Как этого избежать, рассказываем в статье о скорости загрузки сайта.

Адрес и часы работы: как связать сайт с Яндекс Картами и 2ГИС

Если кофейня во дворе, за аркой или на втором этаже, блок «Как нас найти» не менее важен, чем меню. Что в нём нужно:

• адрес с ориентиром: «вход со двора, вторая дверь», «напротив остановки», «второй этаж, над книжным»;
• фото входа и вывески, чтобы гость узнал кофейню с улицы;
• карта и кнопки «Открыть в Яндекс Картах» и «Открыть в 2ГИС» — на телефоне они открывают приложение и строят маршрут;
• часы работы по дням недели и отдельной строкой — праздничный график;
• парковка, велопарковка, пандус, можно ли с собакой, есть ли Wi-Fi — то, что важно вашим гостям.

Адрес, телефон и часы работы должны совпадать на сайте и во всех карточках. Гость, который пришёл к закрытой двери из-за старого графика в картах, во второй раз может не прийти. Одинаковые данные помогают и поисковикам понять, что сайт и карточки — об одном заведении. Ещё точнее это подскажет разметка Schema.org для кофейни (тип CafeOrCoffeeShop) с адресом, часами и ссылкой на меню.

Отзывы просите оставлять в картах, а не на сайте: туда смотрят те, кто выбирает кофейню поблизости. На лендинге достаточно показать рейтинг и дать ссылки на карточки.

Как принимать заказы навынос и звать на мероприятия

Предзаказ без очереди

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

• сервис онлайн-предзаказа с оплатой — заказ сразу попадает к бариста, а гость получает уведомление;
• форма на сайте или мессенджер — подходит, если заказов немного и бариста успевает отвечать;
• ссылки на сервисы доставки, если кофейня с ними работает.

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

Афиша

Каппинги, мастер-классы по латте-арту, концерты, выставки, вечера настольных игр — если они у вас проходят, это отдельный повод прийти. У каждого события должны быть дата и время, цена или пометка «вход свободный», число мест и кнопка записи. Прошедшие события лучше скрывать автоматически: афиша с прошлогодним концертом говорит, что сайт заброшен. Если событий много, на сайте держите ближайшие, а за остальными зовите в Telegram-канал.

Каким должен быть сайт кофейни на телефоне

Кофейню ищут на улице, по дороге на работу или на встречу. Поэтому мобильную версию проектируют первой, а не подгоняют под телефон в конце:

• внизу экрана — закреплённая панель с кнопками «Меню», «Маршрут» и «Позвонить»;
• кнопки и ссылки такого размера, чтобы попасть в них пальцем на ходу;
• никаких всплывающих окон на пол-экрана при входе;
• контрастный текст, который читается на солнце;
• быстрая загрузка: по Core Web Vitals хорошим считается результат, когда самый крупный элемент первого экрана появляется не позже чем через 2,5 секунды (LCP). Проверить страницу можно в PageSpeed Insights.

Частые ошибки

• Меню фотографией доски или PDF-файлом.
• «Цены уточняйте у бариста».
• Разные часы работы на сайте и в картах.
• Стоковые фото чужих интерьеров.
• Афиша с давно прошедшими событиями.
• Адрес без ориентира и фото входа, когда кофейня во дворе.
• Предзаказ, на который никто не отвечает в утренний час пик.

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