К блогу
Продукт и UX12 min1 691 просмотров

Как сделать 360° обзор товара: от поворотного стола до виджета на сайте

Подробный путь от бюджетного стола до живого 360° обзора на карточке: ручные настройки камеры, загрузка по артикулу в Spinnify и один код виджета на весь каталог.

ИнструкцияСвоими силамиВиджет
Spinnify 360° Studio: поворотный стол, смартфон на штативе и 360° обзор на карточке товара

Краткий ответ

360° обзор это цикл обычных фото за один полный оборот на поворотном столе, обычно 24–36 кадров. Это не 3D-модель и не видео. Снять можно самим: стол за $15–40, телефон на штативе, ручные настройки камеры и Spinnify, чтобы загрузить кадры по артикулу и показать спин на карточке после однократной вставки виджета.

У многих магазинов 360° до сих пор ассоциируется со студией: моторизованный стол, ретушёр, разработчик на каждый новый артикул. Раньше так и было. Сейчас достаточно уголка, который можно выставить одинаково два дня подряд, стола с понятными делениями и способа довести снимки с телефона до карточки без ручной заливки десятков файлов в каталог. Spinnify берёт на себя хранение и доставку; ваша задача — снять ровный оборот и правильно назвать товар в Studio.

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

Что такое 360° обзор товара?

На карточке покупатель тянет кадр влево и вправо, и товар как будто поворачивается. На самом деле это серия обычных снимков по кругу. Не нужно качать тяжёлую 3D-сетку и не включается видеоплеер. Если кадры ровные и освещение стабильное, цикл выглядит плавно. Если экспозиция прыгает или стол сдвинули между кадрами, предмет «пляшет» уже на первом свайпе, и доверие падает.

В этом и смысл для небольших команд: на экране то, что вы реально отгружаете. После оптимизации файлы остаются лёгкими. Снять можно на обычном столе в подсобке. Spinnify хранит серию в облаке, отдаёт WebP и AVIF через сеть доставки и открывает плеер только после нажатия «3D», чтобы остальная карточка грузилась как обычно.

Зачем делать 360° обзоры для магазина

Плоские фото показывают один ракурс за раз. По ним редко понятно, как ложится свет на ткань, как сидит ручка в ладони, матовая отделка или глянцевая. Обзор не заменяет хороший текст, но сокращает разрыв ощущения между тем, что покупатель представляет дома, и тем, что приходит в коробке. По опросам NRF доля возвратов в онлайне часто около 19%, и значительная часть связана с тем, что товар выглядел иначе, чем ожидали. Больше ракурсов помогает там, где в галерее изначально было мало снимков.

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

Имеет значение и бюджет. Стол за $20 и фиксированная подписка обычно выгоднее студии на каждый новый приход, особенно если каталог часто обновляется. Вы не гонитесь за наградой фотографа года; вы даёте внимательному покупателю достаточно правды, чтобы нажать «В корзину» без догадок.

Шаг 1. Соберите бюджетный поворотный стол

Моторизованные столы, которые крутятся сами, начинаются с тысяч долларов. Для каталога интернет-магазина хватает ручной платформы с видимыми метками. Заложите 36 остановок за полный оборот, по 10 градусов каждая. На сайте цикл будет плавным, а снимать и заливать не придётся шестьдесят кадров на артикул.

ВариантДеталиБюджетПоворот
Стол своими силами на подшипникеДва диска МДФ (~58 см), поворотный подшипник 30 см, лента, маркер$20–40Вручную: метки на ободе совмещают с неподвижным указателем
Готовый подносКухонный поднос, гибкая линейка на ободе$12–15Вручную: деления на линейке
С шаговым моторомКонтроллер с шаговым мотором, драйвер, корпус на 3D-печати$40–60Полуавтомат: шаги по таймеру вместе с серией в приложении

Какой бы вариант вы ни выбрали, нужен способ поворачивать стол на одинаковый угол между кадрами. Наклейте гибкую линейку на обод и поставьте рядом указатель: игла в бруске, ручка, привязанная к тяжёлой кружке. Если обод около 120 см, шаг в 10 градусов это примерно 3,3 см по краю; после второго артикула глаз уже привыкает.

Накройте стол белым матовым акрилом или плотной бумагой, чтобы блики были предсказуемыми. Заламинируйте карточку с высотой штатива, положением света и расстоянием до камеры и приклейте к ножке стола. После первого перерыва на обед станет ясно, зачем она нужна. Сначала спокойно снимите один артикул, потом беритесь за партию; второй всегда идёт быстрее.

Шаг 2. Зафиксируйте камеру, чтобы цикл не мерцал

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

ПараметрРекомендацияЗачем
ЭкспозицияПолностью ручной режимЯркость не прыгает при повороте
ФокусРучной, на центр товараБез «охоты» автофокуса
ДиафрагмаУзкая (эквивалент 8–16)Весь предмет в резкости
ISO100 или минимумМеньше шума на текстуре
Баланс белогоФиксированный пресетСтабильный цвет фона
ВыдержкаПод постоянный свет (~1/125 с)Ровная гистограмма

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

Шаг 3. Снимите и загрузите через Spinnify

Spinnify связывает три задачи, которые раньше шли разными путями: съёмку на месте, хранение в облаке и показ на витрине. Установите официальное приложение с spinnify.io и добавьте ярлык на главный экран, чтобы оно работало как камера, а не как вкладка в браузере. Одноимённые приложения из магазинов к вашему проекту Studio не привязаны.

  • iPhone: откройте в Safari, «Поделиться», затем «На экран Домой».
  • Android: откройте в Chrome, меню браузера, «Добавить на главный экран».

Сначала карточка в Studio, потом первый кадр

Этот шаг отсекает большинство вопросов «почему на сайте пусто». В Spinnify Studio создайте товар с именем как артикул в каталоге. Регистр букв не важен, опечатки важны. Только после появления карточки открывайте мобильное приложение, входите под тем же аккаунтом, вводите артикул на главном экране и открывайте товар. Каждый кадр автоматически попадёт в нужную папку в облаке.

Съёмка оборота

Закрепите телефон на штативе на уровне середины товара. В приложении зафиксируйте экспозицию, баланс белого и фокус до того, как тронете стол. Снимайте «ПК фото» в формате 4:3 для основного спина на десктопе, до 36 кадров за оборот. «Моб. фото» в 3:4 по желанию для узких экранов; если делаете оба прохода, свет и штатив не трогайте.

Поворачивайте стол равными шагами по меткам на ободе или используйте серийную съёмку с интервалом 0,5–2 с, если стол позволяет. Артикул вводите вручную: сканера штрихкодов в потоке съёмки нет. После серии прокрутите цикл в превью. Двадцать четыре ровных кадра лучше тридцати шести дрожащих.

Загрузка того, что сняли

Когда превью устраивает, нажмите загрузку. Телефон сжимает кадры в WebP и отправляет их в проект Spinnify. Облачной обрезки и автоматической цветокоррекции на сервере нет. То, что вы одобрили в превью, покупатель увидит после нажатия «3D». Интерактивные точки, тарифы, оформление виджета и загрузка видео настраиваются в веб-панели; приложение остаётся для кадров и серийной съёмки.

Spinnify 360° Studio: съёмка на столе, загрузка на spinnify.io, 360° обзор на витрине
Съёмка на столе, загрузка по артикулу, показ спина одним кодом на весь каталог.

Шаг 4. Встройте виджет один раз

После загрузки активные товары готовы на стороне Spinnify. Отдельную галерею в каталог на каждый артикул собирать не нужно. Вставьте код загрузчика один раз в подвал темы или HTML-блок, а сопоставление по артикулу подхватит новые позиции по мере съёмки.

Скопируйте готовый фрагмент кода из панели Spinnify Studio. В атрибуте артикула укажите тот же код, что на карточке товара. Для WooCommerce и других CMS с микроразметкой подойдёт режим AUTO; для лендингов без артикула — сопоставление по адресу страницы. Адрес хоста смотрите в руководстве по интеграции для вашей платформы.

РежимКак сопоставляетКогда удобно
По артикулуВ коде виджета указан артикул; он совпадает с полем на странице и именем в StudioМагазины со стабильными артикулами
AUTOРежим AUTO читает артикул из JSON-LD микроразметки товара на страницеWooCommerce, Tilda и CMS со структурированными данными
По адресу страницыСопоставление по нормализованному пути текущей страницыЛендинги и портфолио без поля артикула

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

По желанию: интерактивные точки

Интерактивные точки — короткие подсказки к важной детали: молния, разъёмы, фактура материала. В Studio выберите кадр, где деталь видна лучше всего, поставьте метку, добавьте заголовок и пару строк текста. Spinnify переносит метку на остальные кадры, и точка следует за деталью при вращении. Касание открывает карточку. Лучше три точки по делу, чем дюжина подписей, между которыми не разобраться.

Первый 360° обзор: рабочий чек-лист

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

  • Соберите или купите стол; отметьте 36 равных шагов по 10 градусов.
  • Выставьте штатив, два LED-светильника и белый фон; заламинируйте карточку установки.
  • Создайте товар в Studio с именем как артикул в каталоге.
  • Установите приложение Spinnify на главный экран, войдите, откройте артикул.
  • Зафиксируйте ручную экспозицию, фокус и баланс белого; отцентрируйте товар.
  • Снимите 24–36 «ПК фото» в 4:3; проверьте полный цикл до разборки сцены.
  • Загрузите из приложения, когда превью устраивает.
  • Вставьте код виджета один раз с сопоставлением по артикулу, AUTO или адресу.
  • Откройте живую карточку, нажмите «3D» и убедитесь, что спин совпадает с товаром.

Ошибки, которые делают раз за разом

Классика — съёмка до появления карточки в Studio. Кадры уходят в облако, но на витрине не к чему привязаться, потому что нет папки товара с нужным артикулом. Карточку создают первой, даже когда спешат.

Телефон в руке кажется быстрее, пока не откроешь цикл. Мелкие сдвиги между кадрами дают ощущение, что товар качается. Штатив дешевле пересъёмки всей серии.

Включённая автоэкспозиция даёт мерцание, которое покупатель замечает сразу. Настройки фиксируют один раз за смену. Ещё одна ловушка — ждать облачной ретуши, которой нет: Spinnify отдаёт то, что сняли, поэтому свет и центр поправляют на столе.

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

Сколько это стоит

Оборудование обычно скромное: $15–40 за ручной стол плюс два недорогих LED-светильника, если своих ещё нет. Такой уголок переживёт тысячи артикулов, если относиться к карточке установки всерьёз.

Тариф «Демо» $0: до двух активных товаров по 36 кадров, хватает проверить процесс на живом трафике. «Старт» $15 в месяц, до двадцати активных слотов. Платите за активные позиции, сезонный каталог можно менять без новых переговоров со студией. Сто артикулов у подрядчика по $30–100 за штуку складываются в большую сумму; свой стол остаётся с вами.

В конце

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

Про съёмку на телефоне подробнее в гайде 360° фото на смартфон своими силами. Про ритм на приёмке — в статье про 360° процесс на приёмке. Попробовать платформу: Spinnify 360° Studio.

Часто задаваемые вопросы

Сколько фото нужно для 360° обзора товара?
Большинство команд снимает 24–36 кадров за полный оборот. Тридцать шесть шагов по 10 градусов на десктопе выглядят плавно; если времени мало, двадцать четыре ровных кадра лучше тридцати шести дрожащих. В Spinnify на товар принимается до 36 кадров.
Можно ли сделать 360° обзор только на смартфоне?
Да. Для каталога достаточно штатива, ручной экспозиции и стола с метками. В приложении Spinnify снимайте «ПК фото» в 4:3 для основного цикла и по желанию «Моб. фото» в 3:4 для узких экранов. Зафиксируйте экспозицию, баланс белого и фокус до серии, чтобы при прокрутке не мерцало.
Нужен ли разработчик на каждый новый товар?
Нет. Код виджета вставляют один раз с сопоставлением по артикулу, AUTO или адресу страницы. Дальше команда создаёт карточку в Studio, снимает и загружает; новые обзоры появляются на подходящих карточках без повторного деплоя.
Как быстро обзор появляется после загрузки?
Активные товары отдаются сразу, если виджет уже на сайте. Плеер открывается по нажатию «3D», чтобы карточка не тормозила. Кадры приходят как WebP и AVIF из сети Spinnify, а не с сервера магазина.

Автор

Редакция Spinnify

Команда Spinnify 360° Studio: гайды по 360°-обзорам, интеграциям и скорости карточки товара для интернет-магазинов.

Смартфон на штативе снимает 360° на поворотном столе
Продукт и UX10 min1 729 просмотров

Студия на коленке: как сделать интерактивные 360° фото товаров на обычный смартфон

360° съёмка без студии: смартфон, поворотный круг и приложение Spinnify. SKU до первого кадра, 24–36 кадров — пошаговый гайд.

ФотосъёмкаDIY
Читать статью
Spinnify 360° Studio: уголок 360° на приёмке — поворотный стол и мобильное приложение
Продукт и UX10 min1 634 просмотров

360°-контент для интернет-магазина без студийного узкого места: один оператор, один процесс

Как снять 360° фото товара на приёмке: стол, приложение Spinnify, артикул, облако. Пошаговый гайд для склада — без студии и ручной заливки в каталог.

ПроцессМобильное приложение
Читать статью

Готовы опубликовать первый 360°-обзор?

Создайте товар, загрузите кадры и вставьте виджет одним script-тегом.

  1. Загрузить кадры
  2. Вставить script
  3. Опубликовать
Попробовать Spinnify