Финальная упаковка: чтобы не стыдно показать

Задача

Сайт Мерве работает (урок 4.13), но выглядит «почти готовым». На первом экране красивое фото и слово «Hoş geldiniz», а что здесь продают, непонятно. Цены спрятаны внизу, адреса в тексте нет, только карта. Шрифт бледно-серый на бежевом, мама Мерве читает с трудом. Мерве хочет показать сайт клиентам и партнёрам (кафе, где она проводит выездные мастер-классы) и боится, что будет выглядеть несерьёзно.

Словарик.

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

Шаги

1. Тест пяти секунд. Открой сайт на телефоне, посмотри пять секунд и закрой. Человек должен суметь сказать: что здесь предлагают, где и как записаться. Если не может, правим первый экран.

2. Оффер в первом экране. Вместо «Hoş geldiniz» нужна конкретика:

   • заголовок: что и где («Kadıköy'de seramik atölyeleri: yeni başlayanlar için»);
   • одна строка пользы («Kendi kupanı 3 saatte yap», только если это правда; у Мерве занятие действительно идёт три часа);
   • главная кнопка («WhatsApp'tan yer ayırt»). Без «лучший в Стамбуле» и «осталось 2 места», если это не факт на сегодня.

3. Цены и условия до того, как человек напишет. Это экономит переписку. Нужны:

   • цена и что в неё входит (материалы, обжиг, чай);
   • длительность, размер группы, когда можно забрать изделие;
   • условия отмены и переноса;
   • способы оплаты. Никаких зачёркнутых «старых» цен, если ты по ним не продавал, и выдуманной «ценности» вроде «стоимость 5 000 TL, для вас 1 500».

4. Контакты, которые можно найти. Адрес текстом (его копируют в такси), часы работы, телефон, WhatsApp, Instagram. Дублируй контакты в подвале сайта.

5. Реквизиты и политики (Турция). Это общий принцип, а не юридическая консультация.

   • Если на сайте собираются данные (форма, бот, счётчик), нужно уведомление по KVKK (aydınlatma metni), урок 4.6. При счётчике добавляется ещё и вопрос cookies, урок 4.11.
   • Закон об электронной торговле (6563 sayılı Kanun, статья 3) требует, чтобы продавец до заключения договора электронным способом дал о себе актуальную и легко доступную идентифицирующую информацию. Есть оговорка: эти требования не применяются к договорам, заключённым только по e-mail или похожим средствам индивидуальной связи. Запись через WhatsApp похожа на этот случай, но решает юрист.
   • Если на сайте можно оплатить заказ, обычно нужны ещё документы для дистанционной продажи (ön bilgilendirme formu, mesafeli satış sözleşmesi, условия отказа: cayma hakkı).
   • Какие данные указывать, зависит от формы бизнеса. Для дистанционной продажи Положение о дистанционных договорах (Mesafeli Sözleşmeler Yönetmeliği, ст. 5) среди информации до заключения договора называет имя или название продавца, номер MERSİS или налоговый номер, адрес и контакты. Уточни у юриста или mali müşavir и сверься с перечнем законов на ticaret.gov.tr. Claude Code может сверстать страницы «Gizlilik ve KVKK», «Koşullar», но тексты должен проверить специалист.

6. Единый стиль. Одна-две гармоничные краски, один-два шрифта, одинаковые кнопки, одинаковые отступы. Попроси Claude Code собрать цвета и шрифты в одно место (переменные CSS), чтобы потом менять их в одной строке.

7. Фото без чужих брендов. Используй свои фото. Убери из кадра чужие логотипы, узнаваемую упаковку, экраны с чужими сайтами. Не бери картинки из поиска: у них есть авторы. Если на фото ученики мастер-класса, спроси их разрешения (вопрос персональных данных, урок 4.6). Логотип Anthropic, OpenAI и других компаний на своём сайте не используй.

8. Доступность: чтобы прочитали все.

   • Контраст. По стандарту WCAG (критерий 1.4.3, уровень AA) обычный текст должен иметь контраст с фоном не меньше 4,5:1, крупный (от 18 pt или от 14 pt жирным) не меньше 3:1. Проверить можно в любом бесплатном контраст-чекере или попросить Claude Code посчитать.
   • Размер шрифта. На телефоне основной текст не мелкий, его читают без увеличения. Конкретной цифры в WCAG нет. Ориентируйся на то, как читает человек старше 50 лет.
   • Подписи. У фото есть alt-тексты на турецком, у кнопок понятные надписи («WhatsApp'tan yaz», а не просто иконка).

9. Ревизия глазами придирчивого клиента. Запусти шаблон ниже. Claude Code не будет ничего менять, пока ты не выберешь, что править. Потом идёт цикл из урока 4.10: правка → проверка → коммит → публикация, и снова чек-лист из урока 4.13.

Шаблон

Я [имя], [бизнес, город]. Я не программист.
Сайт: [адрес], код лежит в этой папке. Мои клиенты: [кто они, откуда приходят].
Сделай ревизию сайта как придирчивый клиент, который видит его впервые с телефона.
Пока ничего не меняй, только отчёт.
Проверь:
1. Первый экран: понятно ли за 5 секунд, что предлагают, где и как записаться.
2. Цены и условия: есть ли цена, что входит, длительность, отмена/перенос, оплата.
3. Контакты: адрес текстом, часы, телефон, WhatsApp наверху и в подвале.
4. Есть ли страницы политик и ссылки на них. Тексты не пиши, отметь, чего не хватает, я согласую с юристом.
5. Единый стиль: цвета, шрифты, кнопки, отступы.
6. Фото: нет ли чужих логотипов и брендов.
7. Контраст текста по WCAG AA (4,5:1, крупный 3:1): посчитай для основных цветов. Размер шрифта на телефоне.
8. Что выглядит непрофессионально или вызывает недоверие.
9. Нечестные приёмы: ложная срочность, зачёркнутые цены, обещания, которые нельзя проверить.
Формат: таблица «проблема | где | почему важно для клиента | как исправить | важность (высокая/средняя/низкая)».
Потом жди, какие пункты я выберу.

Источники

• Understanding SC 1.4.3 Contrast (Minimum), WCAG 2.2 (w3.org): 4,5:1, крупный текст 3:1, крупный = от 18 pt или 14 pt жирным (формулировка совпадает с WCAG 2.1)
• Contrast and Color Accessibility (webaim.org): пояснение: 18 pt ≈ 24 px, 14 pt жирный ≈ 18,67 px, округлять нельзя (не официальный источник, справочно)
• 6563 sayılı Elektronik Ticaretin Düzenlenmesi Hakkında Kanun (mgm.adalet.gov.tr): статья 3, обязанность информирования и исключение для e-mail и похожих средств
• Elektronik ticaret mevzuatı (ticaret.gov.tr): перечень законов и подзаконных актов по e-ticaret; закон 6563 изменён законом № 7416 (2022)
• Mesafeli Sözleşmeler Yönetmeliği (tuketici.ticaret.gov.tr, Министерство торговли, PDF с изменениями): ст. 5: информация до договора, включая имя/название, MERSİS или налоговый номер