Как сделать презентацию сайтом в 2026: ссылка вместо файла

Презентацию не обязательно отправлять файлом. Те же пять экранов можно собрать одностраничным сайтом и отдать ссылкой: она открывается на телефоне в один тап, не упирается в лимит почтового вложения и правится в любой момент без переотправки. Ниже разберём, когда ссылка выигрывает у файла PPTX, а когда файл всё же нужен, из чего собрать сайт-презентацию, как сделать это с ИИ-ассистентом за вечер, куда выложить и как выгрузить результат в PDF.

Когда ссылка выигрывает у файла, а когда нет

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

• Вес. Обычное вложение в Gmail ограничено 25 МБ (справка Gmail), и презентация с десятком фотографий в этот лимит часто не помещается. Ссылка не весит ничего, а картинки подгружаются по мере прокрутки.
• Телефон. Страница открывается прямо в браузере, без скачивания и без вопроса «чем это открыть». Разметка и шрифты не съезжают, потому что не зависят от того, что установлено у получателя.
• Превью в мессенджере. У страницы есть заголовок, описание и картинка, поэтому в чате ссылка выглядит как карточка, а не как безымянное вложение на 47 МБ.
• Правки. Опечатку в цене вы исправите за минуту, адрес останется прежним, и никому не придётся объяснять, какая версия актуальная.
• Статистика. На страницу ставится бесплатный счётчик Яндекс Метрики, и видно, открыли презентацию или нет, с телефона или с компьютера, до какого экрана долистали.

Файл при этом остаётся нужен в четырёх ситуациях.

• Есть регламент. Заказчик, тендер, кафедра или фонд просят документ в конкретном формате, иногда по своему шаблону.
• Показ без интернета. В зале может не быть связи, а мобильный интернет ложится, когда в помещении сотня человек с телефонами.
• Совместная правка. Если презентацию будут дописывать коллеги в PowerPoint, начинать с сайта смысла нет.
• Закрытый показ. Ссылку пересылают дальше одним движением, и по умолчанию страницу видит любой, кто её получил. Чувствительные цифры спокойнее показать со своего ноутбука.

Соберите сайт, а PDF выгрузите сразу и положите в ту же папку. Ссылку вы отдадите в переписке за секунду, а когда кто-то попросит файл, не придётся ничего верстать заново.

Структура сайта-презентации: пять экранов

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

1. Обложка. Кто вы и что предлагаете, одной строкой. Заголовок в 5-7 слов, подзаголовок с уточнением и одна кнопка.
2. Проблема. Ситуация, в которой находится читатель, его словами. Без нагнетания, достаточно одного узнаваемого факта.
3. Решение. Что вы предлагаете и как это устроено. Три пункта или три шага, каждый в одну строку.
4. Доказательства. Цифры, скриншоты, кейсы, отзывы, логотипы. Всё, что человек может проверить.
5. Контакт. Один способ связи и один призыв: телефон, кнопка в Telegram или короткая форма.

Шестым экраном иногда добавляют цену или тарифы, но только если вы готовы обсуждать деньги до разговора. Больше семи экранов делать не стоит: чем длиннее страница, тем выше шанс, что до контактов просто не долистают.

По теме: Как сделать шапку сайта в 2026: код, адаптив и промпты

Как собрать сайт-презентацию с ИИ за вечер

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

1. Каркас. «Собери одностраничный сайт-презентацию одним файлом index.html, стили внутри файла, без внешних библиотек. Пять секций во весь экран: обложка, проблема, решение, доказательства, контакт. Тема: доставка цветов по подписке. Аудитория: владельцы кофеен. Тон спокойный, без рекламных восклицаний. Палитра: два цвета плюс белый, шрифт системный. Вертикальная прокрутка с прилипанием секций. Верни файл целиком.»
2. Текст. «Вот черновик описания проекта: [ваши 10-15 строк]. Разложи его по пяти экранам, на каждом не больше 40 слов и один заголовок. Убери оценки вроде „уникальный“ и „лучший“, оставь факты и цифры. Верни только текст по секциям, без вёрстки.»
3. Полировка. «Проверь страницу на ширине 360 пикселей: заголовки не обрезаются, кнопка не ниже 44 пикселей, горизонтальной прокрутки нет. Добавь теги Open Graph с заголовком, описанием и картинкой, чтобы ссылка красиво разворачивалась в мессенджере. Верни изменённый файл целиком.»

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

Слайды прокруткой и вид с телефона

«Слайды» на сайте делаются парой строчек стилей. Каждая секция занимает высоту экрана, а прокрутка прилипает к её началу, поэтому страница листается по одному экрану, как презентация. Единица svh считает высоту видимой части окна на телефоне, где адресная строка то появляется, то прячется.

Минимальный набор: разметка одной секции и три правила стилей, включая печать (о ней ниже).

<section class="slide">
  <h2>Проблема</h2>
  <p>Одна мысль на экран, без стены текста.</p>
</section>

html { scroll-snap-type: y mandatory; }
.slide { min-height: 100svh; scroll-snap-align: start; }
@media print { .slide { break-after: page; } }

Клавиши работают сами собой: пробел и стрелки листают страницу так же, как слайды в программе. Для полноэкранного показа нажмите F11 в браузере на Windows или Ctrl + Cmd + F на Mac. Про сами полноэкранные секции и их подводные камни есть разбор, как сделать сайт на весь экран.

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

По теме: Как сделать сайт отзывов в 2026: блок, страница и разметка

Куда выложить и как отдать ссылку

Готовый index.html вместе с папкой картинок нужно куда-то положить, чтобы появился адрес. Вариантов четыре, они отличаются скоростью и тем, кому принадлежит результат.

1. Netlify Drop. Самый быстрый путь: перетащить папку в окно сервиса, и через несколько секунд появится рабочий адрес. Аккаунт не обязателен, но без входа адрес закрыт временным паролем, пока вы не заберёте проект себе. Папку советуют держать меньше 50 МБ, а отдельные файлы меньше 10 МБ (документация Netlify). Бесплатный план даёт 300 кредитов, трафик списывается по 20 кредитов за гигабайт (тарифы), для презентации этого хватает с запасом.
2. GitHub Pages. Бесплатный хостинг статических страниц: сайт до 1 ГБ, мягкий лимит 100 ГБ трафика в месяц и 10 сборок в час (документация GitHub). Настройка дольше, зато файлы и адрес остаются под вашим аккаунтом.
3. Российское облако. Страницу можно положить в Object Storage Яндекс Облака: хостинг включается на вкладке бакета, оплата идёт по объёму и трафику. Вариант для случаев, когда важно держать всё внутри страны.
4. Свой домен. Когда презентацию видят клиенты, короткий адрес вида vashe-imya.ru убедительнее технического поддомена. Домен привязывается к любому из вариантов выше, инструкции есть в панели каждого сервиса.

Ссылку отдавайте с превью: если в файле прописаны теги Open Graph (третий промпт выше их добавляет), в Telegram и WhatsApp развернётся карточка с заголовком и картинкой. Для офлайн-встреч удобно сделать QR-код на тот же адрес и положить его на визитку или на последний экран.

Если презентацию просят файлом: выгрузка в PDF

Сайт-презентация превращается в PDF средствами браузера, отдельные сервисы не нужны.

1. Откройте страницу в Chrome и нажмите Ctrl + P (на Mac Cmd + P), в списке принтеров выберите «Сохранить как PDF» (справка Chrome).
2. В настройках печати поставьте альбомную ориентацию, поля «Нет» и включите «Графика фона», иначе фоновые цвета и картинки в файл не попадут.
3. Чтобы каждая секция стала отдельной страницей, оставьте в стилях правило печати из блока выше: break-after: page у класса секции.
4. Пролистайте предпросмотр целиком. Длинные тексты иногда разрезаются между страницами, это лечится масштабом 90% или парой удалённых предложений.

PDF закрывает просьбу «пришлите файл», но это не PPTX: редактировать слайды в PowerPoint по нему не выйдет. Когда нужен именно редактируемый файл, задача решается иначе, и она разобрана отдельно в статье про то, как собрать презентацию в Claude.

Частые вопросы

Сколько времени занимает сборка такого сайта?

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

Обязательно ли покупать домен?

Нет. Бесплатный адрес на Netlify или GitHub Pages работает так же, просто выглядит длиннее. Домен стоит брать, когда презентацию видят клиенты и адрес попадает в визитку или в договор.

Что делать, если в зале не будет интернета?

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

Как понять, смотрели презентацию или нет?

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

Подойдёт ли такой формат для учёбы?

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