استوری‌بورد اسکرول: از پیام اصلی تا صحنه‌ها

در قسمت اول این سری دیدیم سایت سینمایی چیست و از چه اجزایی ساخته می‌شود. حالا می‌رسیم به مهم‌ترین مرحله‌ای که تقریباً همه از آن رد می‌شوند و بعد گیر می‌کنند: استوری‌بورد.

حقیقت تلخ این است که بیشتر سایت‌های سینماییِ ناموفق، مشکل فنی ندارند. کدشان کار می‌کند، انیمیشن‌شان روان است، اما بازدیدکننده بعد از ده ثانیه می‌رود. دلیلش ساده است: آن صفحه چیزی برای گفتن نداشت. افکت داشت، ولی روایت نداشت. در این درس یاد می‌گیریم قبل از نوشتن یک خط کد، صفحه را روی کاغذ بسازیم.

استوری‌بورد اسکرول یعنی چه

در سینما، استوری‌بورد مجموعه‌ای از کادرهای ساده است که می‌گوید هر نما چه چیزی نشان می‌دهد و چطور به نمای بعدی وصل می‌شود. کارگردان قبل از اینکه دوربین روشن شود، کل فیلم را روی کاغذ می‌بیند.

در وب هم دقیقاً همین کار را می‌کنیم، با یک تفاوت کلیدی: نوارِ زمانِ ما، اسکرولِ کاربر است. یعنی به‌جای «ثانیهٔ ۱۲ فیلم»، می‌گوییم «وقتی کاربر ۳۰ درصد صفحه را پایین رفت». پس استوری‌بورد اسکرول یعنی نقشه‌ای که مشخص می‌کند:

• صفحه از چند پرده (صحنه) ساخته شده است.
• هر پرده چه یک جمله پیام دارد.
• ورود و خروج هر پرده با چه حرکتی اتفاق می‌افتد.
• کاربر بعد از دیدن آن پرده، چه احساس یا فهم تازه‌ای پیدا می‌کند.

اگر نتوانی این چهار مورد را برای هر پرده بنویسی، آن پرده هنوز آمادهٔ ساخته‌شدن نیست.

قدم اول: پیام اصلی را در یک جمله بنویس

قبل از هر چیز باید بدانی کل صفحه قرار است چه چیزی را ثابت کند. این را «پیام اصلی» می‌نامیم و باید در یک جملهٔ ساده جا شود. مثلاً:

• «ما بار شما را سریع‌تر از هر رقیبی به مقصد می‌رسانیم.»
• «این دوره شما را در هشت هفته از صفر به یک برنامه‌نویس شاغل تبدیل می‌کند.»
• «قهوهٔ ما مستقیم از مزرعه به فنجان شما می‌رسد، بدون واسطه.»

تست ساده‌اش این است: اگر کسی فقط همین یک جمله را بخواند و بقیهٔ صفحه را نبیند، آیا فهمیده‌ای که تو چه می‌فروشی؟ اگر جواب منفی است، جمله را بازنویسی کن. تا وقتی این جمله مبهم باشد، هیچ انیمیشنی نجاتش نمی‌دهد.

دام رایج: پیام تبلیغاتی به‌جای پیام واقعی

جمله‌هایی مثل «راه‌حل جامع و نوآورانه برای کسب‌وکار شما» پیام نیستند؛ پرکنندهٔ فضا هستند. پیام واقعی همیشه یک ادعای مشخص و قابل‌رد است. اگر نشود روی ادعایت بحث کرد، آن ادعا خالی است.

قدم دوم: پیام را به پرده‌ها بشکن

حالا آن یک جمله را به چند تکه تقسیم می‌کنیم که هر تکه یک پرده می‌شود. الگوی استانداردی که در بیشتر سایت‌های حرفه‌ای می‌بینی، معمولاً شش تا هشت پرده دارد:

پرده	وظیفهٔ روایی	حرکت پیشنهادی
۱. قلاب	در سه ثانیه بگو اینجا کجاست	تصویر تمام‌صفحه، ظهور آرام عنوان
۲. اعتبار	ثابت کن ادعا پشتوانه دارد	شمارش عددها هنگام ورود به کادر
۳. مسئله	دردی که مخاطب می‌شناسد را نام ببر	تغییر رنگ زمینه، فضای خالی زیاد
۴. راه‌حل	بگو چطور آن درد را حل می‌کنی	بخش پین‌شده با پرده‌های داخلی
۵. تمایز	چرا تو، نه رقیب	مقایسهٔ کنار هم، ظهور پلکانی
۶. گواه	دیگران چه گفته‌اند	اسلایدِ افقی با اسکرول عمودی
۷. اقدام	یک قدم روشن و بدون ابهام	توقف حرکت، تمرکز کامل روی دکمه

لازم نیست هر هفت پرده را داشته باشی. یک صفحهٔ خوب با پنج پردهٔ محکم، همیشه از یک صفحهٔ شلوغ با ده پردهٔ نصفه‌نیمه بهتر است. قاعدهٔ من ساده است: هر پرده‌ای که نتوانی وظیفه‌اش را در یک جمله بنویسی، حذفش کن.

قدم سوم: برای هر پرده یک کارت بنویس

حالا برای هر پرده یک «کارت» می‌سازیم. این کارت همان چیزی است که بعداً مستقیم به هوش مصنوعی می‌دهی تا کدش را بنویسد. قالب پیشنهادی من شش خط دارد:

پردهٔ ۴ — راه‌حل
پیام: سه سرویس ما، هر کدام یک مشکل مشخص را حل می‌کند.
ورودی: کاربر از پردهٔ «مسئله» با حس کلافگی می‌رسد.
حرکت: بخش پین شود؛ با اسکرول، سه کارت یکی‌یکی از پایین
      بیایند و کارت قبلی کمی کوچک و کم‌رنگ شود.
بصری: زمینهٔ تیره، عنوان درشت سفید، آیکن ساده بالای هر کارت.
خروجی: کاربر می‌فهمد کدام سرویس به دردش می‌خورد.

وقتی هفت تا از این کارت‌ها را پشت‌سرهم بگذاری، عملاً کل سایت را ساخته‌ای — فقط هنوز کدش را ننوشته‌ای. و این دقیقاً همان چیزی است که کار با هوش مصنوعی را از «قمار» به «مهندسی» تبدیل می‌کند.

قدم چهارم: قوسِ انرژی را طراحی کن

یک اشتباه بزرگ این است که همهٔ پرده‌ها را با شدت یکسان بسازیم. اگر همه‌چیز حرکت کند، هیچ‌چیز به چشم نمی‌آید. فیلم‌های خوب هم همین‌طورند: صحنهٔ اکشن وقتی مؤثر است که قبلش سکوت بوده باشد.

پس برای صفحه‌ات یک قوس انرژی بکش. مثلاً:

1. قلاب: انرژی بالا — تصویر بزرگ، حرکت چشمگیر.
2. اعتبار: انرژی متوسط — فقط اعداد و کمی حرکت.
3. مسئله: انرژی پایین — سکوت بصری، فضای خالی، متن ساده.
4. راه‌حل: انرژی بالا — پین و اسکراب، اوج فنی صفحه.
5. تمایز و گواه: انرژی متوسط.
6. اقدام: انرژی پایین اما متمرکز — هیچ حرکت مزاحمی، فقط دکمه.

این بالا و پایین شدن است که به صفحه ریتم می‌دهد. صفحه‌ای که از اول تا آخر پر از انیمیشن است، بعد از پردهٔ سوم خسته‌کننده می‌شود؛ چون مغز آدم به حرکت یکنواخت عادت می‌کند و دیگر آن را نمی‌بیند.

قدم پنجم: زمان‌بندی را با درصد اسکرول بنویس

در فیلم با ثانیه کار می‌کنیم، در وب با درصد پیشروی. برای هر پردهٔ متحرک، بنویس در چه بازه‌ای از اسکرولِ آن بخش، چه اتفاقی بیفتد:

پردهٔ راه‌حل (پین‌شده، طول ۳۰۰٪ ارتفاع صفحه)
0٪  تا 10٪ : عنوان بخش ظاهر می‌شود
10٪ تا 35٪ : کارت اول وارد، تمام‌قد
35٪ تا 60٪ : کارت اول کوچک می‌شود، کارت دوم وارد
60٪ تا 85٪ : کارت دوم کوچک می‌شود، کارت سوم وارد
85٪ تا 100٪: هر سه کارت کنار هم می‌نشینند، پین آزاد می‌شود

این جدول کوچک، بعداً تبدیل به پارامترهای دقیق start و end در کد می‌شود. اگر آن را ننویسی، مجبوری با آزمون‌وخطا اعداد را پیدا کنی و این یعنی ساعت‌ها وقت تلف‌شده.

قدم ششم: نسخهٔ موبایل را همین‌جا تصمیم بگیر

خیلی‌ها استوری‌بورد را فقط برای دسکتاپ می‌کشند و بعد روی موبایل به فاجعه می‌رسند. پین‌کردن روی صفحهٔ کوچک، اغلب حس «گیرکردن» می‌دهد و کاربر فکر می‌کند سایت خراب است.

قاعدهٔ عملی: برای هر پرده، از همین ابتدا مشخص کن روی موبایل چه اتفاقی می‌افتد. سه گزینه داری:

راهکار موبایل	کِی مناسب است
همان حرکت، با شدت کمتر	پرده‌های ساده مثل ظهور پلکانی
تبدیل پین به چند بخش پشت‌سرهم	پرده‌های پین‌شدهٔ چندمرحله‌ای
حذف کامل حرکت، فقط محتوا	پرده‌های سنگین یا تزئینی

این تصمیم را روی کاغذ گرفتن، ده برابر ارزان‌تر از گرفتنش وسط کدنویسی است.

ساختن استوری‌بورد با کمک هوش مصنوعی

خبر خوب اینکه مدل‌های زبانی در این مرحله واقعاً کمک‌کننده‌اند — به شرطی که به‌جای «برایم یک سایت بساز»، از آن‌ها بخواهی نقشِ هم‌فکرِ روایت را بازی کنند. پرامپت زیر را امتحان کن:

نقش: استراتژیست محتوای وب و کارگردان روایت اسکرولی.

کسب‌وکار: [توضیح دو خطی کسب‌وکار]
مخاطب: [کی؟ چه دردی دارد؟]
پیام اصلی: [یک جمله]
هدف صفحه: [مثلاً گرفتن درخواست مشاوره]

کار تو:
۱) پیام اصلی را نقد کن؛ اگر مبهم است، سه بازنویسی بهتر بده.
۲) صفحه را به ۵ تا ۷ پرده بشکن.
۳) برای هر پرده این‌ها را بنویس: پیام یک‌جمله‌ای،
   حرکت پیشنهادی، حال‌وهوای بصری، و خروجی ذهنی کاربر.
۴) قوس انرژی را از ۱ تا ۵ برای هر پرده مشخص کن و
   توضیح بده چرا این ترتیب درست است.
۵) بگو کدام پرده روی موبایل مشکل‌ساز می‌شود و جایگزینش چیست.

خروجی: یک جدول + توضیح کوتاه زیر هر پرده. فارسی روان.
هیچ کدی ننویس؛ فقط نقشه.

جملهٔ آخر مهم است. اگر جلوی کدنویسی را نگیری، مدل وسوسه می‌شود سریع بپرد سراغ HTML و تو نقشه‌ات را از دست می‌دهی. ساختار این پرامپت بر همان منطق آناتومی پرامپت حرفه‌ای بنا شده: نقش، زمینه، وظیفهٔ شماره‌دار، و قالب خروجی مشخص.

خروجی را همان‌طور که آمد قبول نکن

مدل معمولاً پرده‌های منطقی اما بی‌روح می‌دهد. کار تو این است که بعد از گرفتن خروجی، حداقل یک بار این را بپرسی: «کدام پرده را اگر حذف کنم، صفحه ضعیف‌تر نمی‌شود؟» هر چیزی که جواب این سؤال باشد، باید برود. برای تمرین بیشترِ این نوع گفت‌وگو با مدل، آموزش‌های چت‌جی‌پی‌تی نقطهٔ شروع خوبی است.

یک استوری‌بورد نمونهٔ کامل

بیایید برای یک شرکت فرضی حمل‌ونقل، کل نقشه را ببینیم:

پیام اصلی: بار شما را با ردیابی لحظه‌ای و بدون تأخیر می‌رسانیم.

۱ قلاب      | انرژی ۵ | ویدئوی جادهٔ شب + یک جمله
۲ اعتبار    | انرژی ۳ | ۳ عدد: سال تجربه، تعداد ناوگان، درصد تحویل به‌موقع
۳ مسئله     | انرژی ۱ | متن ساده روی زمینهٔ خالی: «بار گم‌شده یعنی مشتری از‌دست‌رفته»
۴ راه‌حل    | انرژی ۵ | پین‌شده: سه مرحلهٔ ردیابی، اسکراب‌شده
۵ تمایز     | انرژی ۳ | مقایسهٔ ما و روش سنتی، ظهور پلکانی
۶ گواه      | انرژی ۲ | سه نظر مشتری، اسلاید افقی
۷ اقدام     | انرژی ۲ | فرم کوتاه، بدون هیچ انیمیشنی

همین بیست خط، کل پروژه است. حالا می‌توانی پرده به پرده جلو بروی و هرکدام را جداگانه بسازی — که دقیقاً موضوع درس‌های بعدی این نقشهٔ راه است.

اشتباه‌های رایج در استوری‌بورد

• شروع از افکت به‌جای پیام: «می‌خواهم یک بخش پین‌شدهٔ باحال داشته باشم» نقطهٔ شروع غلطی است. اول بگو چه می‌خواهی بگویی.
• پرده‌های هم‌وزن: وقتی همهٔ پرده‌ها انرژی ۴ و ۵ دارند، صفحه خسته‌کننده می‌شود.
• پرده‌های خیلی زیاد: بیش از هشت پرده یعنی کاربر قبل از رسیدن به دکمهٔ اقدام خسته می‌شود.
• فراموش‌کردن سرعت اینترنت: ویدئوی تمام‌صفحه روی اینترنت ضعیف یعنی صفحهٔ سفید.
• ننوشتن خروجی ذهنی: اگر ننویسی کاربر بعد از هر پرده چه فهمید، مطمئن باش چیزی نفهمیده.

پرسش‌های پرتکرار

استوری‌بورد را باید در چه ابزاری بکشم؟
هر چیزی که در دسترست است کافی است: یک فایل متنی ساده، جدول در گوگل‌شیت، یا حتی کاغذ. مهم محتواست نه ابزار. شخصاً یک فایل متنی ساده را ترجیح می‌دهم چون مستقیم قابل‌کپی در پرامپت است.

چقدر وقت باید صرف این مرحله کنم؟
برای یک لندینگ معمولی، بین یک تا سه ساعت. این زمان معمولاً ده‌ها ساعت بازنویسی کد را حذف می‌کند.

اگر مشتری وسط کار بخواهد پرده‌ای اضافه شود چه؟
اگر استوری‌بورد داشته باشی، جواب‌دادن راحت است: می‌پرسی این پرده کدام وظیفهٔ روایی را برعهده می‌گیرد و انرژی‌اش چند است. اگر جوابی نداشت، خودِ مشتری هم معمولاً منصرف می‌شود.

آیا این روش برای سایت‌های چندصفحه‌ای هم کار می‌کند؟
بله، اما در آن حالت هر صفحه استوری‌بورد جدا دارد. روایت اسکرولی معمولاً برای صفحه‌های تک‌منظوره مثل لندینگ، معرفی محصول یا گزارش سالانه بهترین جواب را می‌دهد.

جمع‌بندی

استوری‌بورد، تفاوت بین یک سایت سینمایی و یک نمایشگاه افکت است. با یک جملهٔ پیام شروع کن، آن را به پنج تا هفت پرده بشکن، برای هر پرده یک کارت شش‌خطی بنویس، قوس انرژی را طراحی کن، زمان‌بندی را با درصد اسکرول مشخص کن و تکلیف موبایل را همان اول روشن کن.

در درس بعدی سراغ آناتومی صفحهٔ روایت‌محور می‌رویم: اینکه هیرو، بخش پین‌شده و پرده‌ها دقیقاً از نظر ساختار HTML و CSS چطور چیده می‌شوند تا کد نوشتن‌شان ساده شود. مسیر کامل این سری را در نقشهٔ راه طراحی سایت سینمایی دنبال کن و برای اطلاع از انتشار درس‌های بعدی، کانال @MrChatGPT_IR را دنبال کن.