Привет, друзья! Сегодня мы рассмотрим полный процесс разработки сайта для клиента с аниме контентом.

У заказчика нет плана и представления о том, каким он хочет видеть сайт. Есть только идеи и предположения. На этом примере, я вам подробно объясню с чего начать работу. Мы с вами определим популярные запросы, проведём анализ конкурентов, обсудим примерную стоимость приложений и вспомогательных инструментов.

В статье я, на уровне новичка, покажу вам один из способов, как правильно подойти к созданию сайта, чтобы получить первый трафик и результаты. Мы сделаем с вами MVP версию. Различными сложными терминами я оперировать не буду, подойдем к вопросу максимально просто.

Находим основные запросы наших пользователей

Для этого я воспользуюсь сервисом https://wordstat.yandex.ru/. Вбиваем в сервис наш основной запрос — аниме.

Рис 1. Основной запрос в Яндекс Вордстат

После этого мне нужно найти основные ключевые слова, под которые мы будем делать наш проект.

Рис 2. Сбор данных в программе KeyCollector

Для поиска основных запросов я использую Key Collector. С помощью программы найду основные запросы, которые будут генерировать трафик на сайт.

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

Рис 3. Данные по основным запросам в KeyCollector
  • топ аниме.
  • аниме бест.
  • лучшие аниме.

Эти слова собирают большой трафик и их можно хорошо смонетизировать.

Давайте теперь проанализируем конкурентов.

Анализируем наших конкурентов

Захожу в Яндекс, ввожу запрос — топ аниме и изучаю полученные результаты.

Рис 4. Поисковая выдача по запросу Топ аниме

Если встречаем сайты в выдаче с рекламой, то такие сайты пропускаем (без плашки «реклама», «Яндекс» и так далее).

Берем первую десятку проектов:

  • animestars.org.
  • yummyanime.club.
  • you-anime.ru.
  • animeonline.su.
  • kinopoisk.ru.
  • zen.yandex.ru.

Сервисы Яндекса (фотографии, видео и др.) я пропускаю. Так же отсеиваю kinopoisk.ru и zen.yandex.ru. Меня в первую очередь интересуют тематические сайты.

После того, как мы убрали лишние сайты, давайте проанализируем трафик.

Трафик конкурентов

Давайте рассмотрим трафик наших будущих конкурентов. Я это делаю в сервисе https://www.similarweb.com/ (сервис условно бесплатный, начального функционала нам вполне хватит).

Рис 5. Трафик по проекту animestars.org в SimilarWeb

Проект — animestars.org, около 700 000 пользователей в месяц. Трафик постоянно растет, сайт правильно развивается.

Рис 6. Источники трафика по проекту animestars.org

Половина трафика — это прямые пользователи (Direct) и половина идет с поиска (Organic Search). Параметр Direct является самым «сладким», так как лояльную аудиторию лучше всего монетизировать.

Рис 7. Регистрация домена animestars.org в Reg.ru

Такого результата проект добился за 3 года.

Рис 8. Трафик по проекту yummyanime.club в SimilarWeb

Проект — yummyanime.club, около 20 000 000 пользователей в месяц. Трафик постоянно растет, сайт правильно развивается.

Рис 9. Источники трафика по проекту yummyanime.club в SimilarWeb

Большая часть трафика — прямая аудитория, очень хороший показатель для большого ресурса.

Рис 10. Регистрация домена yummyanime.club в WHOIS Reg.ru

Дата регистрации, конец 2018 года….

Рис 11. Трафик по проекту you-anime.ru в SimilarWeb

Проект — you-anime.ru, около 1 000 000 пользователей в месяц. Трафик постоянно растет, сайт правильно развивается.

Рис 12. Источники трафика по проекту you-anime.ru в SimilarWeb

На этом сайте большая часть трафика из поиска, что тоже неплохо.

Рис 13. Дата регистрации домена you-anime.ru WHOIS в Reg.ru

Проекту 2 года.

Рис 14. Трафик по проекту animeonline.su в SimilarWeb

Проект — animeonline.su, около 100 000 пользователей в месяц. Трафик постоянно растет.

Рис 15. Источники трафика по проекту animeonline.su в SimilarWeb

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

Рис 16. Дата регистрации домена animeonline.su WHOIS Reg.ru

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

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

Выбираем CMS

animestars.org — сделан на DLE, проверку сделал в коде.

Рис 17. Определяем CMS сайта animestars.org с помощью кода

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

yummyanime.club — определить CMS не получилось, скорее всего самописный сайт.

you-anime.ru — так же не удалось определить CMS.

animeonline.su — сделан на DLE.

Проектируем сайт

Для проектирования я использую https://app.diagrams.net/. В этом сервисе я обрисовываю все нужные мне элементы, перед тем как отдавать в дизайн.

Рис 18. Проектирование главной страницы сайта в https://app.diagrams.net/

Если за основу вы берете animestars.org, то рисуете, чтобы вы хотели видеть и где, хороший дизайнер вам поможет, но вы должны понимать, что хотите от своего проекта.

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

Какие нужны страницы для сайта

  • Главная страница сайта — https://yummyanime.club/. На неё мы выводим поиск, новости и анонсы, топ, фильтр для группировки топа.
  • Страница каталога — https://yummyanime.club/top. Выводим на неё ТОП-сериалов и фильмов. Делаем на странице фильтр по ТОП-у.
  • Карточка с аниме (фильмом, сериалом) — https://yummyanime.club/catalog/item/kod-gias-vosstavshij-lelush-r2. Делаем характеристики и по ним группируем информацию.
  • Страница правил сайта — https://yummyanime.club/rules.
  • Контакты и информация о сайте — https://yummyanime.club/about-yummy.
  • Политика — https://yummyanime.club/privacy.
  • Карты сайта (xml и html).
  • Страница связи для правообладателей — https://animestars.org/?do=feedback&user=1.

Полезные элементы для страниц

Рис 19. Карточки на главной странице (функционал).

На карточки выводим рейтинг, количество голосов, год, количество серий, жанры, возрастной рейтинг, количество просмотров и комментариев.

Рис 20. Фильтр с различными типами группировки

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

Рис 21. Вывод карточек через кнопку Показать ещё

Страницы пагинации не делаем, вывод новых карточек делаем через подгрузку — Показать ещё.

Рис 22. Страница каталога, функционал рейтинга для карточек и общее количество голосов

На страницу каталога делаем вывод карточек по рейтингу. Делаем вывод рейтинга + общее количество голосов от пользователей.

Рис 23. Оценка фильма или сериала по характеристикам

В карточку выводим оценку по характеристикам. Нужно проанализировать и поискать дополнительные характеристики. За счет оценки по характеристикам, строим общую оценку.

Рис 24. Активные ссылки из характеристик в карточке

Делаем активные ссылки на страницы жанров, студии, режиссера.

Рис 25. Блок комментариев на карточке аниме

Профили авторов комментариев делаем неактивными. Делаем лайки и дизлайки для комментов.

Рис 26. Блок с похожими фильмами и сериалами

Блок делаем вертикальный, перед комментариями. Выводим схожие по жанру, новизне.

Дизайн (UX и UI)

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

Для моих проектов, дизайнеры всё делают в Figma.

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

Покажу один из примеров.

Рис 27. Дизайн страниц в Фигма

Помните, что свой проект вы делаете для людей и на старте, вам нужно максимально выделиться.

Верстка и разработка проекта

Основные правила, которые вы должны помнить. Верстка должна быть адаптированная и без ошибок. Ошибки я проверяю сервисом https://validator.w3.org/.

Рис 28. Сервис проверки верстки на ошибки

Вставляете ссылку на любую страницу вашего сайта и Check.

Рис 29. Список ошибок в сервисе validator.w3.org

На выходе получаете вот такую информацию. Чем меньше ошибок, тем лучше.

Так же у сервиса есть возможность загружать HTML документы. До запуска вашего проекта, вы сможете всё проанализировать.

Раздвигая окно браузера, вы сможете проверить адаптацию вашей верстки.

По разработке на начальном этапе, вам главное нужно проверить все элементы, кнопки, чтобы они работали. Этим сервисом https://developers.google.com/speed/pagespeed/insights/?hl=RU, вы сможете узнать скорость загрузки вашего сайта, проверить и мобильную и компьютерную версии. Заставьте вашего разработчика довести зеленую зону до максимума.

Рис 30. Сервис проверки скорости загрузки страниц

Хочу предупредить заранее, что если вы делаете проект на DLE, то шаблон нужно купить лицензированный, все модули должны быть платными. В будущем у вас не возникнет вопросов с безопасностью (взлом, брут и другие способы навредить вашему проекту).

SEO для вашего сайта

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

Как-нибудь напишу статью о технических составляющих на первом этапе.

Что вам нужно будет сделать на старте: построить структуру вашего сайта (создать это можно в программе MindMap), сделайте ваш проект быстрым на всех девайсах, не допускайте ошибок, делайте материалы для людей.

На старте не забываем установить: Яндекс метрику, Яндекс вебмастер, Google Analytics, Google Webmaster. Всё это попросите установить вашего разработчика.

Домен и хостинг

Для домена используйте приставки как у ваших конкурентов — anime и так далее. Зону можно использовать .ru (стоимость домена около 100 рублей в год).

Свои сайты я держу на https://beget.com/ru. Быстрая поддержка, адекватные цены (сайт можно захостить за ~ 100 рублей в месяц), всё работает быстро и без тормозов.

UPDATE (декабрь 2020). У Beget периодически происходят падения. В октябре-декабре их было около 10 (лично на моих проектах). Поддержка отвечает крайне долго, свой ответ вы можете ждать около суток.

Аналитика

Для анализа вашего контента и пользователей используйте https://metrika.yandex.ru/ и https://analytics.google.com/.

Всю полезную информацию о функционале, вы можете найти в https://yandex.ru/support/metrica/.

Контент

  • Фильмы и сериалы парсим с открытых источников.
  • Картинки для карточек нарезаем самостоятельно.
  • Характеристики к фильмам и сериалам парсим по источникам.
  • Описание для фильмов и сериалов копирайтим самостоятельно.
  • Комментарии получаем для пользователя + дополнительно отвечаем сами (для увеличения текстового контента).
  • Рейтинг получаем от пользователей.

Монетизация

animestars.org

Рис 31. Монетизация на сайте https://animestars.org/

Монетизируется за счет CPA партнерки и видеорекламы.

yummyanime.club

Рис 32. Монетизация на сайте https://yummyanime.club/

Монетизируется за счет прямой рекламы.

you-anime.ru

Рис 33. Монетизация на сайте you-anime.ru

Скорее всего CPA партнерка.

Это тоже всё монетизация.

Конечно можно подключить дополнительно Google Adsense или РСЯ (это рекламные сети), но скорее всего цена клика будет на таком контенте минимальная и зарабатывать вы будете немного.

Как можно ещё заработать?

Есть различные биржи по продаже сайтов. К примеру: https://www.telderi.ru/.

Рис 34. Монетизация за счет продажи сайта

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

Стоимость

Итак, вам нужно определиться кто с вами будет работать: студия или фрилансеры. Безусловно, если обратиться к профессионалам, вложения будут приличные. Но в итоге вам не придётся переживать, тратить свои силы на доработки. Вот примерная стоимость:
DLE: от 100 000.
Это средние данные, так как цены варьируются от вашего местоположения и профессионализма работников.

Благодарю за внимание. Если есть вопросы — пишите в комментариях. Буду рад помочь.