Разбор мобильной версии · 20 сентября 2026

gundam.ru с телефона:
что мешает купить

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

Смотрела на ширине iPhone, 375×812, плюс планшет 768 px и компьютер 1024 и 1440 px. Сайт на Nuxt, картинки на S3.

41%
экрана закрыто шапкой и окном cookie, пока не нажато «Согласен»
12,9с
полная загрузка главной в моём тесте, HTML страницы 872 КБ
10,8px
размер текста в мобильном меню, строки по 16 px высотой
Главное

Оформить заказ без входа через Яндекс или VK нельзя

Корзина упирается в кнопку «Авторизуйтесь для заказа», гостевого оформления и входа по телефону нет. Это шаг, на котором магазин теряет больше всего, и его стоит починить первым. Подробно - в пункте 1.

Находки по порядку важности

01Критично

Заказ только через вход Яндекс / VK

Что вижу

В корзине вместо «Оформить заказ» стоит «Авторизуйтесь для заказа». По нажатию в левом верхнем углу открывается окошко с текстом «Войдите, чтобы добавить товар в корзину» - хотя товар уже в корзине. Вторая строка подсказки уходит под шапку. Варианты входа: только Яндекс и Вконтакте. Ни телефона, ни почты, ни заказа без регистрации.

Чем грозит

Человек с моделью за 10 990 ₽ в корзине должен привязать соцсеть. У кого её нет или кто не хочет - уходит. На телефоне переход в приложение Яндекса или VK и обратно ещё и обрывается чаще, чем на компьютере.

Как поправить
  • Гостевое оформление: телефон и имя, код по СМС или вовсе без него. Яндекс и VK оставить как быстрый вариант рядом.
  • Кнопку назвать «Оформить заказ», окно входа сделать обычной модалкой по центру с правильным текстом.
Объём: самая большая правка в списке, затрагивает и сайт, и сервер
GUNDAM.RU
КОРЗИНА (1 товар)
Итого:10 990 ₽
Авторизуйтесь для заказа
Войдите, чтобы добавить товар в корзину
для того, чтобы использовать все функции сайта
Я Яндекс
VK Вконтакте

Схема окна входа, перерисована с экрана телефона: текст про «добавить в корзину», вторая строка обрезана, два способа входа.

02Важно

Баннер на главной обрезан

Что вижу

На телефоне показывается середина десктопной картинки. «In Era Fenrir уже в продаже» читается как «enrir / одаже», кнопка «Забронируй первым» превращается в «ПЕРВЫМ». На втором слайде «Infinite Dimension 1/72 Sl…» обрезан с обеих сторон.

Чем грозит

Первый экран - единственный, который видят все. Сейчас он сообщает, что с сайтом что-то не так, а не про новинку.

Как поправить

Отдельная вертикальная картинка для телефона (тег picture с media) или текст и кнопка поверх фото обычным HTML, тогда баннер сам подстраивается под ширину.

Объём: 1-2 часа плюс вертикальные баннеры от дизайнера
Главная gundam.ru на iPhone: шапка, обрезанный баннер, окно cookie
шапка 155 px
cookie 181 px
Главная, первый экран. Рамка 2 - обрезанный текст и кнопка баннера. Скобки - что закреплено поверх страницы.
03Важно

Шапка и окно cookie съедают экран

Что вижу

Шапка закреплена и занимает 155 px из 812 - почти пятую часть экрана, из них большая часть - логотип и поиск строкой. Окно cookie добавляет ещё 181 px и висит поверх цен и кнопок в карточках, пока не нажать «Согласен». Текст в нём переносится вручную: «вы соглашаетесь» отдельной строкой. На компьютере шапка 180 px и тоже закреплена.

Чем грозит

На телефоне остаётся полоса в полэкрана. Карточки листаются по одной, а первое, что видит человек на каждой странице - окно про cookie.

Как поправить
  • Шапка 60-64 px: логотип меньше, поиск иконкой, поле раскрывается по тапу.
  • Cookie - строка в одну линию у нижнего края, без переносов руками.
Объём: полдня
Блок «Почему мы» на телефоне: лента обрезана справа
Блок «Почему мы»: текст 12,6 px, лента уходит за край экрана без намёка, что её можно листать.
04Важно

Карточка в списке: бейджи закрывают фото, название обрезано

Что вижу

На фото модели лежат пять плашек: рейтинг, NEW, наличие, серия, масштаб. Название в две строки и начинается с «Сборная модель» - первая строка одинаковая у всех карточек, а различающая часть обрезается: «Сборная модель Motor Nuclear MN…» дважды подряд, и не понять, какая из них какая.

Чем грозит

Покупают глазами: модель выбирают по фото и имени. Здесь фото закрыто, а имени не видно. Человек тыкает в карточки наугад или уходит искать модель в поиске.

Как поправить
  • Плашки - в строку под фото, на фото оставить только наличие.
  • В карточке списка убрать «Сборная модель» (на странице товара оно остаётся), две строки отдать имени модели.
Объём: 2-3 часа
Карточки товаров на главной: бейджи поверх фото, названия обрезаны
«Новинки» на главной: две карточки, оба имени обрезаны после общего начала.
05Важно

«Предзаказ 0 ₽»

Что вижу

У товаров под предзаказ рядом с ценой 6 990 ₽ стоит кнопка «Предзаказ 0 ₽». И на главной, и в каталоге.

Чем грозит

Читается либо как ошибка, либо как «бесплатно». В обоих случаях доверие к цене падает.

Как поправить

«Предзаказ» - и всё. Если ноль значит «без предоплаты», так и написать: «Предзаказ · без предоплаты».

Объём: 15 минут
Каталог Mecha на телефоне: кнопка «Предзаказ 0 ₽»
Каталог Mecha, первая строка карточек.
06Важно

Мелкий текст и мелкие цели для пальца

Что вижу
  • Меню: пункты 10,8 px, строки 16 px высотой. Крестик «закрыть» - 9 px.
  • Плашки в карточках 10,8 px, «Почему мы» 12,6 px, телефон в подвале 12,6 px, ссылки подвала по 18 px высотой.
  • «Добавить в корзину»: текст 12,6 px в кнопке 50 px. «Выбрать пункт выдачи»: 11 px в кнопке 37 px.
  • При этом логотип и заголовки огромные. Размеры текста пляшут от 9 до 30 px.
Чем грозит

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

Как поправить

Единая шкала: текст не меньше 14 px, надписи на кнопках 16 px, строки меню и ссылки 44-48 px в высоту. Большой логотип ужать - он и даст место.

Объём: полдня на весь сайт
Mecha girls
10,8 px / 16 pxсейчас в меню
Добавить в корзину
12,6 pxсейчас на кнопке
Mecha girls
16 px / 46 pxкак должно быть

Живой пример в настоящих пикселях: сравните строки на своём телефоне.

Карточка товара: кнопка «Добавить в корзину» с мелкой надписью
Страница модели: цена 28,8 px, надпись на главной кнопке 12,6 px.
07Важно

Сайт тяжёлый и грузится долго

Что вижу
  • HTML главной - 872 КБ: в код страницы зашит весь список товаров. Страница категории - 585 КБ.
  • Полная загрузка главной в тесте - 12,9 с, до готовности страницы 6,1 с. Каталог - 5,5 с.
  • Фото товаров отдаются оригиналами 3744×5616 px и показываются в 301×501. Это в 12 раз больше пикселей, чем нужно.
  • Превью статей блога на главной - по 2 МБ каждое. Всего на главной 174 запроса, из них около 56 файлов стилей и скриптов.
Чем грозит

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

Как поправить

Ресайз картинок под реальный размер (Nuxt Image или готовые размеры на S3), ленивая загрузка ниже первого экрана, не отдавать весь каталог в HTML главной, собрать стили и скрипты в меньшее число файлов.

Объём: 1-2 дня разработки
08Мелочи, одним заходом

Опечатки, лишние ошибки и мелкие шероховатости

  • «Политика конфидециальности» - опечатка в меню, подвале и окне cookie. Правильно: конфиденциальности.
  • Заголовок страницы корзины «Корзина интернет-магазине» - пропущено «в».
  • Заголовок страницы товара начинается с пробела - виден во вкладке и в поиске.
  • Шесть ошибок 401 в консоли на каждой странице у гостя: сайт запрашивает профиль и избранное до входа.
  • «Почему мы» на телефоне - горизонтальная лента без признаков, что её можно листать.
  • Окно cookie появляется на каждой странице поверх контента, пока не нажать «Согласен».
Объём: 1-2 часа

С чего начать

Шаг 1 · день

Быстрые правки

«Предзаказ 0 ₽», опечатки, ошибки 401, размеры текста и кнопок, строки меню. Сайт сразу становится аккуратнее.

Шаг 2 · день

Шапка, карточка, cookie

Компактная шапка, карточка без плашек на фото и с читаемым именем, баннер под телефон, cookie строкой.

Шаг 3 · отдельно

Заказ без входа и скорость

Гостевое оформление по телефону и ресайз картинок. Самые большие по объёму и самые заметные по деньгам.

Что дальше

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

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