Сторітелінг пітчу і HTML-презентація

Сьогодні ти складаєш розповідь про продукт на три хвилини

Модуль I · тема 4, урок 2 з 2 · наскрізний проєкт STARTUP LAUNCH · 120 хвилин

Чого навчишся за цей урок

• розповідати про свій продукт за три хвилини так, щоб чужа людина зрозуміла з першого разу;
• починати розповідь із чужого болю, а не зі свого застосунку — і бачити, чому саме так тебе слухають;
• називати одне число, якому повірять, і відповідати на питання «а звідки воно?»;
• скорочувати виступ із п’яти хвилин до трьох, не втрачаючи головного і не тараторячи;
• робити так, щоб посилання на твій продукт розгорталося в чужому чаті карткою з картинкою, а не голим рядком адреси.

Хід уроку

Слова «пітч», «дек» і «OG-теги» поки нічого не означають — розберемо їх по черзі.

У тебе вже є все, з чого складається пітч, — просто воно розкидане по чотирьох файлах. Бриф із уроку 2 знає проблему й аудиторію. market.csv з уроку 3 знає, скільки таких людей. analytics.html з уроку 4 знає ціну, маржу й точку беззбитковості. brand.css з уроку 5 знає, якого кольору твій продукт.

Сьогодні ти збираєш це в одну історію на три хвилини. Таку, яку можна розповісти вголос незнайомій людині. І не побачити на її обличчі «і що?».

Ця історія виходить у двох виглядах, бо в неї два різні строки життя. pitch.html — це документ: повні речення, усі числа з джерелами, зміст із посиланнями на розділи. Його відкриють без тебе, через тиждень, і він має бути зрозумілим сам по собі. deck.html — це слайди: одна думка на екран, велике число, коротка фраза-опора. Вони працюють, тільки поки ти говориш, і без твого голосу нічого не пояснюють.

А наприкінці ти візьмешся за саме посилання. Кинув його в чат — і воно розгорнулося карткою. У картці картинка, назва й одне речення про те, що всередині. Зараз замість картки видно голий рядок адреси. Натискати на нього немає жодної причини.

Що ти здаєш у кінці уроку

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

1. ~/www/pitch.html — пітч-документ: один <h1>, вісім <h2> з унікальними латинськими id, робочий зміст <nav id="toc"> без битих якорів;
2. ~/www/deck.html — вісім слайдів на токенах бренду, заголовок слайда не довший за 6 слів, вісім <figcaption>;
3. ~/www/assets/og.png — рівно 1200×630, менше за 500 КБ;
4. OG-теги в brief.html, pitch.html і deck.html.

Пітч починається з проблеми, а не з продукту

Слухач має спершу впізнати біль — інакше рішення нема до чого приліпити

Порівняй два початки того самого виступу.

Механіка проста. Людина запам’ятовує нове, чіпляючи його до вже відомого. Продукт для неї — нове й порожнє. Проблема — вже відоме: вона або сама з нею стикалася, або бачила когось, хто стикався. Тому спершу гачок, потім вантаж: назвав біль — маєш куди чіпляти рішення.

Це не риторичний прийом заради краси. Той самий порядок стоїть у шаблоні Sequoia Capital і в рекомендаціях Y Combinator. Обидва ставлять проблему одразу після однієї фрази про продукт. Y Combinator формулює вимогу до цього блоку жорстко — назви конкретну людину, конкретний біль і конкретну ціну цього болю.

Дуга уваги: коли тебе слухають, а коли — ні

Увага слухача не рівна. Перші 15–20 секунд вона максимальна: людина щойно переключилася на тебе. Далі вона повзе вниз і сідає в яму приблизно на середині виступу. Наприкінці підіймається знову — слухач бачить, що скоро кінець, і збирається.

Вісім блоків пітчу і скільки секунд на кожен

Не «розділи презентації», а вісім питань, на які слухач хоче відповідь — саме в цьому порядку

Пітч — не переказ брифа. Це послідовність, у якій кожен наступний блок відповідає на питання, що виникло в голові слухача після попереднього. Назвав проблему — виникає «а в кого саме?». Назвав аудиторію — виникає «і що ви робите?». І так вісім разів.

Що має бути в кожному блоці

Вісім блоків збираються в чотири частини. Кожна частина робить свою роботу, і переставити їх не вийде.

Блоки 1 і 2 — це біль. Ти ще нічого не розповідаєш про себе. Ти описуєш чужий поганий день і називаєш людину, у якої він саме такий. Слухач має впізнати ситуацію й подумати «о, знайоме».

Блоки 3 і 4 — розв’язок. Аж тепер можна сказати, що ти зробив і як воно працює. Раніше не можна: рішення без болю слухати нецікаво.

Блоки 5, 6 і 7 — докази. Тут з’являються числа. Вони відповідають на питання, яке слухач не вимовляє вголос: «а це взагалі серйозно?».

Блок 8 — дія. Ти кажеш, що конкретно зробити людині, яка тебе дослухала. Без цього блоку виступ закінчується нічим.

Секунди в таблиці — робочий орієнтир, а не закон. Але сума в колонці «3 хв» рівно 180, і саме стільки часу дадуть на захисті.

Одне сильне число замість п’яти слабких

Число без джерела — це прикметник, який прикинувся цифрою

У пітчі є спокуса завалити слухача цифрами: здається, що чим їх більше, тим серйозніше. Насправді навпаки. Людина утримує в голові одне-два числа за виступ. Якщо ти дав п’ять — вона не запам’ятає жодного.

Сильне число має три ознаки. Воно конкретне — це саме число, а не «багато» і не «величезний». У нього є походження — ти можеш одним реченням сказати, звідки воно взялося, і при бажанні це перевіряють. І з нього випливає висновок — почувши його, людина сама розуміє, добре це чи погано, і тобі не треба цього договорювати. Порівняй.

Звідки беруться твої числа

Ти не вигадуєш їх на цьому уроці — ти вже порахував їх раніше, і саме тому можеш назвати джерело, коли спитають.

І окремо про точність. Число «63 %» звучить сильніше за «приблизно дві третини» рівно доти, доки ти можеш показати, з яких 48 відповідей воно порахувалося. Якщо не можеш — краще скажи «дві третини»: чесна приблизність краща за фальшиву точність.

Три хвилини і п’ять хвилин: що викидається першим

Формат виступу — це не «стисліше говорити», а інший набір того, що ти взагалі кажеш

Найпоширеніша помилка при скороченні — говорити той самий текст швидше. Це чути, і це не працює: слухач не встигає, а ти задихаєшся. Правильний спосіб — прибрати цілі шматки, зберігши всі вісім блоків.

Порядок скорочення

1. Другий приклад. Якщо на блок у тебе два приклади — лишається один, найконкретніший.
2. Деталі механіки. «Як працює» стискається до трьох кроків без пояснень, чому саме так.
3. Другорядні числа. З чотирьох чисел економіки в голосі лишається одне; решта — у документі.
4. Історія походження ідеї. «Ми думали над цим із восьмого класу» — це для розмови після виступу.
5. Перелік конкурентів. У трихвилинному пітчі досить одного речення «чому не роблять уже наявними інструментами».

Конструктор пітчу

Заповнюєш вісім блоків — сторінка рахує час виступу, ловить порожнє й беззмістовне і збирає тобі два готові файли

Пиши так, як казатимеш уголос: повними реченнями, без скорочень і без «і т. д.». Час рахується за кількістю слів і темпом мовлення, який ти виставляєш повзунком. Заголовок слайда — окреме поле: він поїде в deck.html, і в ньому має бути не більше 6 слів.

Заповни блоки й натисни «Зібрати».

Заповни блоки й натисни «Зібрати».

Що саме він рахує «слабким»

• Порожній блок — у пітчі з восьми блоків не буває семи.
• Задовгий блок — більше ніж півтори норми часу: ти забереш секунди в наступного блоку і не встигнеш до заклику.
• Блок без числа там, де число обов’язкове — ринок, економіка, що вже зроблено.
• Загальні слова без жодної цифри поруч — «зручно», «якісно», «величезний», «інноваційний», «усі». Такі слова нічого не міряють: або підпри числом, або заміни на конкретний приклад.
• Заголовок слайда довший за 6 слів — на слайді це вже абзац. Автоперевірка такий заголовок поки не зарахує: скороти й надішли ще раз, спроби не обмежені.

Чотири способи провалити пітч, який усередині нормальний

Це не про слабку ідею — це про те, як сильну ідею не почули

1. Читання зі слайдів

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

Лікується одним правилом: на слайді те, чого не можна сказати голосом — число, назва, схема, одна фраза-опора. Речення, які ти вимовляєш, на слайді не потрібні. Guy Kawasaki довів це правило до механічного: жодного шрифту дрібнішого за 30 пунктів. Не влазить — значить, це не слайд, а документ.

2. Жаргон

«Ми використовуємо ML-піплайн для персоналізації user journey» — набір слів, які нічого не додають, але створюють відчуття, що ти ховаєшся. Перевірка проста: чи зрозуміє це твій сусід по парті, який не робив цього проєкту. Якщо ні — переклади.

Окремо: терміни, доречні в pitch.html, можуть бути зайвими в голосі. Документ читають повільно й можуть перечитати рядок. Виступ — ні.

3. «Ринок мільярд доларів»

Це найшвидший спосіб втратити довіру. Число величезне, перевірити його на слух неможливо, і воно не має жодного стосунку до того, що ти зробиш цього року. Замість нього назви свій сегмент: скільки конкретно людей, до яких ти дотягуєшся, і звідки це число.

Правило: чим менше число, яке ти можеш довести, тим більше воно переконує. «412 учнів нашої школи» сильніше за «мільйони школярів України».

4. Немає відповіді на «чому саме ви»

Питання звучить майже завжди й майже завжди зненацька. Погана відповідь — «бо ми дуже вмотивовані». Хороша тримається на фактах, і фактів цих три.

Перший: ти сам усередині проблеми. Ти учень, ти сам на неї натикався — а більшість дорослих про цей біль лише чули. Другий: ти вже щось зробив. Є прототип, який відкривається, і є однокласники, яких ти опитав. Третій: ти знаєш свої числа напам’ять і не лізеш по них у слайд.

Один зміст, дві форми: pitch.html і deck.html

Документ переживає виступ — слайди без тебе не означають нічого

Це два різні файли з одного тексту, і плутати їх — головна причина слайдів-абзаців. Слайд існує поки ти говориш: він підпирає твій голос. Документ існує після того, як ти пішов: його відкриють через тиждень, без тебе, і він має бути зрозумілим сам.

Різницю найлегше відчути так. Уяви, що ти захворів і на захист не прийшов, а журі відкриває твої файли саме.

pitch.html у цій ситуації спрацює: там повні речення, усі числа й посилання на джерела. Людина прочитає й усе зрозуміє.

deck.html без тебе не спрацює — і це нормально. Слайд показує одне число завбільшки на пів екрана, а пояснюєш його ти голосом. Якщо слайд зрозумілий без тебе, ти написав на ньому забагато.

Ось із чого складається ця різниця по пунктах.

Чому id заголовків пишуть латиницею в kebab-case

Якщо заголовок «Що вже зроблено» отримає id="Що вже зроблено", посилання в змісті доведеться писати як #Що%20вже%20зроблено. Один пробіл, одна велика літера, одна незакодована кирилиця — і якір б’ється, а перевірка рахує биті якорі. Тому конструктор одразу дає id="traction": латиниця, малі літери, дефіси.

OG-теги: як твоє посилання виглядає в чужому чаті

Це не дрібниця в кінці — це перше, що побачить людина, якій твій продукт порекомендували

Уяви ланцюг: журі сподобався твій пітч, хтось кидає посилання в чат «подивіться, що зробили одинадцятикласники». У цю секунду твій продукт представляє не лендинг, а картка попереднього перегляду — картинка, заголовок, опис. Її будує не браузер, а робот месенджера, і бере він її з мета-тегів у <head>.

Домовленість, за якою збирається ця картка, зветься Open Graph protocol. Суть така: сторінка кладе собі в <head> кілька рядків, яких людина ніколи не побачить, — вони написані для робота месенджера. Усі вони починаються з og: і пишуться атрибутом property, а не name. Робот шукає саме property і на name не зреагує.

Обов’язкових у стандарті чотири, і кожен відповідає за свою частину картки. og:title — рядок, який людина прочитає великим шрифтом. og:image — адреса картинки, що стане обкладинкою. og:url — справжня адреса сторінки, щоб пересилання туди-сюди не наплодило різних посилань на те саме. og:type — що це взагалі за об’єкт; для лендинга там просто website.

П’ятий тег, og:description, стандарт вимагати не став. Але без нього під заголовком картки лишається порожньо. Людина бачить назву й не розуміє, що там усередині. Тому наша автоперевірка цей тег усе-таки чекає — і не коротшим за 50 символів.

Мінімальний набір, який ти впишеш у три сторінки

<meta property="og:type"        content="website">
<meta property="og:url"         content="http://91.219.61.4/s/<логін>/pitch.html">
<meta property="og:title"       content="Deadline — дедлайни без чатів">
<meta property="og:description" content="Учні 9–11 класів пропускають роботи не через лінь, а через те, що дедлайн живе в чужому чаті.">
<meta property="og:image"       content="http://91.219.61.4/s/<логін>/assets/og.png">
<meta property="og:image:width"  content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt"   content="Логотип Deadline і фраза «дедлайни без чатів»">
<meta property="og:site_name"   content="Deadline">
<meta name="description"        content="Учні 9–11 класів пропускають роботи не через лінь, а через те, що дедлайн живе в чужому чаті.">

Анатомія og.png: 1200 × 630 і безпечна зона

Одна картинка, яку доведеться зробити руками — і єдиний растровий файл, який приймає наш сервер

Розмір 1200 × 630 — це рекомендація Meta. У документації сказано прямо: «використовуйте зображення щонайменше 1200 × 630 пікселів для найкращого показу на екранах високої роздільності». Співвідношення сторін тримай якнайближче до 1,91 : 1. Мінімум — 200 × 200, файл — не більший за 8 МБ.

Telegram будує прев’ю з тих самих OG-тегів. Наш сервер жорсткіший за обидва: до 500 КБ. Важчий файл просто не з’явиться в кабінеті.

Як зробити рівно 1200 × 630 у себе на комп’ютері

Якщо ти малюєш картинку в Canva чи Figma — просто задай полотно 1200 × 630 і експортуй у PNG. Якщо в тебе вже є зображення довільного розміру, приведи його однією командою ImageMagick. Вона масштабує з обрізанням по центру, а не розтягує.

Символ ^ у -resize означає «заповнити, а не вписати», а -extent обрізає зайве по центру. -strip викидає метадані камери й економить кілограми ваги. Число у виводі — приклад: у тебе буде своє, головне — щоб воно було меншим за 512 000.

Буває, що PNG усе одно важить понад 500 КБ. Тоді подивись, що на картинці. Фотографію краще перезберегти як JPEG із якістю 82. А плоску графіку з великими заливками лиши в PNG: там вона важить менше, ніж у JPEG.

Прев’ю посилання: подивись на свій продукт очима чужого чату

Вписуєш og:title і og:description — бачиш три картки і місце, де заголовок обріжеться

Як читати те, що ти бачиш

• Картки вужчі за справжні. Ширина картки залежить від вікна месенджера й від пристрою — тут вона приблизна. Але правило «що довше, то більший ризик обрізу» справджується скрізь.
• Пошукова видача рахується інакше. Google ріже заголовок не за кількістю символів, а за шириною в пікселях: на десктопі це приблизно 600 px. Тому «Ілля» і «Шшшшш» однакової довжини займають різне місце. Червона позначка на лінійці показує, де приблизно проходить ця межа шрифтом цієї сторінки.
• Google не бере og:description. У видачу йде <meta name="description"> або уривок із самої сторінки. Тому в готовому блоці нижче обидва теги — з однаковим текстом.
• Опис коротший за 50 символів завалює пункт автоперевірки og_tags. Це вимога цього уроку, а не стандарту.

Практика: пітч, документ, дек і картка

Виконуй по черзі. Галочки зберігаються — сторінку можна закрити.

Автоперевірка check11 4

Це друга, завершальна частина теми 4: перша частина (brand.css і logo.svg) уже пройдена на уроці 5. Спроби не обмежені.

Демонстраційний режим: результат згенеровано для показу. На сервері ця кнопка запускає check11 4 від імені учня і читає ~/.progress/11-4.json.

Що вчитель дивиться на екрані

• чернетка презентації в Canva або Slides і всі згенеровані ілюстрації до слайдів — вони лишаються локально й на сервер не їдуть;
• вихідний файл og.png: чи це справді 1200 × 630 і скільки він важить у провіднику;
• твій пітч уголос по deck.html із секундоміром — чи вкладаєшся у три хвилини й чи не читаєш зі слайда;
• питання «звідки це число» до кожного числа в блоках «ринок» і «економіка».

Шкала виконання

Це те, що бачить учитель, коли виставляє оцінку.

П’ять речень, які варто забрати з уроку

1. Пітч починається з проблеми, бо слухачу треба спершу впізнати біль — інакше рішення нема до чого приліпити.
2. Одне число, яке ти можеш довести, сильніше за п’ять, яких не можеш.
3. Скорочення виступу — це не швидша мова, а викинуті шматки: першими йдуть деталі механіки, останнім — заклик.
4. Слайд живе, поки ти говориш; документ живе після того, як ти пішов. Один зміст, дві різні форми.
5. OG-теги — це не дрібниця в кінці: у чужому чаті картка представляє твій продукт замість тебе.

Домашнє завдання

1. Прогнати свій пітч по deck.html із секундоміром і скоротити текст на двох найдовших слайдах так, щоб укластися у три хвилини.
2. Довести pitch.html до нуля битих якорів: усі вісім посилань у <nav id="toc"> мають відкривати відповідний розділ.
3. Дописати OG-теги ще й у index.html та analytics.html — щоб будь-яке посилання на твій продукт розгорталося карткою.
4. Записати в CHANGELOG.md датований запис про те, які числа з market.csv і analytics.html ти поставив у пітч.

Звідки взяті правила й числа

Усе, що можна перевірити, має посилання. Що є оцінкою або правилом нашого сервера — підписано окремо.

• Open Graph protocol: чотири обов’язкові властивості (og:title, og:type, og:image, og:url), необов’язковий og:description і структуровані og:image:width, og:image:height, og:image:alt — сам стандарт. ogp.me
• Рекомендація 1200 × 630, співвідношення 1,91 : 1, мінімум 200 × 200, файл не більший за 8 МБ — офіційна документація Meta для вебмайстрів. developers.facebook.com · Sharing → Images
• Робот, що збирає прев’ю, не виконує JavaScript і читає HTML, відданий сервером; дублювання розмірів у тегах прискорює першу появу картинки — developers.facebook.com · Webmasters
• Telegram будує попередній перегляд із тих самих мета-тегів сторінки. У документації Instant View властивості site_name, description і image_url прямо підписані як «used in link preview». Окремої публічної специфікації прев’ю Telegram не публікує — набір тегів той самий, що й у Meta. instantview.telegram.org · docs
• Google не обіцяє використовувати og:description. У сніпет іде <meta name="description"> або уривок зі сторінки. Обмеження на довжину немає: текст ріжеться під ширину пристрою. developers.google.com · Snippets
• Заголовок у видачі теж обрізається під ширину; орієнтир десктопної колонки — близько 600 px — developers.google.com · Title links
• Структура пітчу: проблема одразу після однієї фрази про продукт, далі рішення, ринок, конкуренти, модель, команда, фінанси. Шаблон, за яким досі збирають більшість дек. sequoiacap.com · Writing a business plan
• «5–7 ідей на всю презентацію», одна думка на слайд, легкість прочитання з останнього ряду — методичка Y Combinator. ycombinator.com/library · How to design a better pitch deck
• Правило 10/20/30: десять слайдів, двадцять хвилин, жодного шрифту дрібнішого за 30 пунктів. Придумане саме як засіб проти читання зі слайда. guykawasaki.com · The 10/20/30 rule
• Темп мовлення: близько 150 слів за хвилину в звичайній розмові — дані National Center for Voice and Speech. Для виступу зазвичай радять повільніше, 100–150. virtualspeech.com · Average speaking rate
• ImageMagick: -resize 1200x630^, -gravity, -extent, -strip і формати виводу identify -format — imagemagick.org · command-line processing, imagemagick.org · format escapes
• Фрагменти URL і те, чому id із пробілами й кирилицею не збігається з href — RFC 3986, розділ 3.5. datatracker.ietf.org · RFC 3986

Розподіл секунд по вісьмох блоках (25/15/25/25/20/25/25/20 для трьох хвилин і 40/25/40/50/35/45/40/25 для п’яти) — робочий орієнтир цього уроку. Суми рівно 180 і 300 секунд. Форма кривої уваги — узагальнення, а не виміряні дані. Безпечна зона ≈ 60 px у og.png — практичне правило, а не частина стандарту. Ліміт 500 КБ на og.png і заборона медіафайлів — правила нашого сервера, вони суворіші за вимоги Meta. Числа у прикладах пітчу (412 учнів, 63 %, 17 однокласників, маржа 80 грн) вигадані як зразок формулювання. У твоєму пітчі мають стояти твої числа з market.csv і analytics.html. Повний список джерел із поясненнями — у файлі urok-06-джерела.md поруч із цією сторінкою.