מדריך · 8 דקות קריאה
ההדמיות כבר אצלכם.בואו נגרום להן לזוז.
ככה בנינו את SENSE Residence: דף נחיתה שבו הגלילה מכניסה את הגולש מהרחוב, דרך הסלון, ועד הגג. שישה שלבים בשפה פשוטה, וכל מה שלמדנו בדרך. כולל הטעויות.
גללו כאן רגע.
לאט, ואז אחורה.
מה שראיתם עכשיו הוא 76 תמונות נפרדות. הגלילה בוחרת איזו מהן מוצגת. זה מרגיש כמו וידאו, אבל השלט אצל הגולש: הוא עוצר, חוזר אחורה, מתעכב על המטבח.
וגולש שמתעכב על המטבח אומר לכם משהו. בשלב 6 נראה איך מודדים את זה.
מה צריך
- הדמיות
- 5 עד 8 רנדרים של אותו פרויקט, באיכות גבוהה. בחוץ ובפנים.מהאדריכל או מהלקוח. עדיף בלי אנשים בתמונה.
- כלי וידאו AI
- כלי שמקבל תמונת פתיחה ותמונת סיום, כמו Seedance, Kling או Veo 3.1.משלמים לפי קרדיטים. כאן הולך רוב התקציב.
- ffmpeg
- תוכנה חינמית שמפרקת סרטון לתמונות.שורת פקודה אחת. נותנים אותה בהמשך.
- Claude
- כותב את הקוד של הדף.לא צריך לדעת לתכנת. צריך לדעת לבדוק.
- Cloudflare Pages
- אחסון חינם, מהיר, עם דומיין משלכם.עד 20,000 קבצים בחשבון החינמי. מספיק לפרויקט כזה.
- טופס ומייל
- מקום שהלידים נשמרים בו, ומייל שמגיע למכירות.
החלק הארוך והיקר הוא שלב 2, הסרטונים. כל השאר כמעט חינם.
בונים מסלול הליכה מהרנדרים
לפני שפותחים כלי כלשהו, מסדרים את הרנדרים בסדר שבו גולש היה הולך בפרויקט.
- בוחרים 5 עד 7 תחנות. רחוב, כניסה, סלון, גינה, קומה עליונה, מבט מבחוץ. כל תחנה היא רנדר אחד.
- כל תחנה היא סוף של מעבר אחד והתחלה של הבא. זה כל הסוד. ככה אין קפיצות בין הסרטונים.
- מחפשים רנדרים של אותו חלל מכמה זוויות. המעבר ביניהם הכי קל להפקה והכי חלק.
- חותכים כל רנדר ל-16:9 בגודל 1920×1080.
רחוב
סלון
פינת אוכל
גינה
פנטהאוז
מבחוץ
הגרסה הראשונה עלתה במדרגות מדירת הגן ישר לפנטהאוז. נראה מדהים. רק שאלה שתי דירות נפרדות, לשני קונים, בשני מחירים. הסרטון הבטיח משהו שלא קיים.
מה שהמצלמה עושה, הגולש מבין כהבטחה. לפני שמייצרים, עוברים על המסלול עם הלקוח.
מחברים כל שתי תחנות עם וידאו AI
נותנים לכלי שתי תמונות. הוא ממציא את ההליכה ביניהן.
תמונת פתיחה
תמונת סיום
- תנועה אחת, בכיוון אחד. קדימה, או למעלה, או אחורה. "נכנסים ומסתובבים לגינה" זה שני סרטונים.
- רק המצלמה זזה. כותבים במפורש שאף חפץ לא מופיע, לא נעלם ולא זז.
- כותבים גם מה אסור. אנשים, טקסט, שינוי תאורה, סיבוב. ואם יש סיכוי שיופיעו מדרגות, אוסרים אותן פעמיים.
- 7 שניות למעבר בין מקומות, 4 עד 5 לשהות בחדר. ב-5 שניות למעבר קיבלנו קפיצות באמצע.
- מתכננים 2 עד 3 ניסיונות לכל מעבר. ובודקים יתרת קרדיטים לפני שמתחילים.
ביקשנו עלייה פשוטה מקומה לקומה, עם פרומפט ארוך ומפורט. קיבלנו מצלמה שפותחת דלת בחלון הסלון ויוצאת לטייל. פרומפט מסובך מייצר תנועה מסובכת. הניסוח שעבד היה הקצר ביותר.
ועוד אחד: המודל ממציא כל מה שלא אמרתם לו. לא ציינו שיש גרם מדרגות שני, אז הוא בנה חדר שלא קיים. הפרומפט המלא שאנחנו עובדים איתו, עם טבלת "כשזה לא יוצא", נמצא בערכה.
מפרקים כל סרטון לתמונות
הדף לא מנגן וידאו. הוא מחליף תמונות לפי הגלילה, אז כל סרטון הופך לערימת תמונות.
- 24 תמונות לכל שנייה. סרטון של 6 שניות נותן כ-145 תמונות. ב-SENSE יש 1,154.
- WebP, לא PNG. אותה איכות בעין, בערך עשירית מהמשקל.
- שלושה סטים: גדול למחשב, קטן שנטען ראשון, וחיתוך לאורך לטלפון. ככה הטלפון לא מוריד פיקסלים שאף אחד לא רואה.
- הפריים האחרון של סרטון אחד זהה לראשון של הבא. בגלל המסלול משלב 1.
הפקודה הבסיסית, לסרטון אחד:
mkdir -p frames/1 ffmpeg -i 1.mp4 -fps_mode passthrough -c:v libwebp -quality 70 frames/1/%03d.webp
בערכה יש סקריפט שעושה את זה לכל הסרטונים בבת אחת, בשלושת הגדלים, ובודק שלא חסרה אף תמונה.
בלי -fps_mode passthrough, ffmpeg משמיט ומשכפל תמונות בשקט כדי "ליישר" את הקצב. התוצאה: קפיצות קטנות בגלילה, בלי שום הודעת שגיאה. ובלי -c:v libwebp יצא לנו קובץ אחד מונפש במקום 97 תמונות. הסקריפט דיווח שהכול בסדר.
בונים את הדף
את הקוד כותב Claude. התפקיד שלכם: להגיד לו בדיוק מה צריך, ולבדוק בטלפון אמיתי.
- העיקרון: תמונה אחת על כל המסך, ודף ארוך מאוד מתחתיה. כל כמה פיקסלים של גלילה מתחלפת תמונה.
- לכל סצנה מהירות משלה. מעבר בין מקומות זז פי 5 משהות בחדר. באותה מהירות, המעבר עף והחדר נגרר.
- הדף מתחיל לזוז לפני שהכול נטען. קודם תמונה מכל כמה, אחר כך ממלאים סביב המקום שבו הגולש נמצא. מסך טעינה של 20 שניות הורג את הדף.
- טקסט נכנס מעל התמונה ברגע הנכון. כותרת אחת לכל סצנה, לפי מה שרואים עכשיו.
- מי שביקש פחות תנועה במכשיר מקבל תמונה אחת לכל סצנה. זה חלק מהנגישות.
הפרומפט המלא שאנחנו נותנים ל-Claude נמצא בערכה: 24 סעיפים, מהמנוע ועד בדיקות אוטומטיות. לפני שפרסמנו את המדריך, בנינו ממנו דף מאפס, בלי שום קוד קודם, והוא עבר את כל הבדיקות במחשב ובמסך בגודל אייפון.
התמונה שמופיעה לפני הגלילה הראשונה הייתה הרנדר המקורי, והתמונה הראשונה של הסרטון שונה ממנו קצת. ברגע שהגולש נגע במסך, הכול הבהב. התיקון: תמונת הפתיחה היא תמונה 001 של הסרטון, לא הרנדר.
מעלים לאוויר
Cloudflare Pages: חינם, מהיר, ושרת קרוב לישראל.
- מעלים את התיקייה. גוררים אותה לממשק של Cloudflare, או פקודה אחת מהמחשב. תוך דקה יש כתובת.
- מחברים דומיין משלכם. תת-דומיין של הלקוח, למשל project.company.co.il. כתובת זמנית לא נכנסת לפרסום.
- שומרים את התמונות במטמון לשנה. גולש שחוזר לא מוריד אותן שוב.
- מגבלות לדעת מראש: עד 20,000 קבצים ועד 25MB לקובץ בחשבון החינמי.
כשהתמונות שמורות לשנה, החלפת סצנה לא מגיעה לגולשים שכבר היו בדף. הם ממשיכים לראות את הישנה. לכן כל כתובת תמונה כוללת מספר גרסה, ומעלים אותו בכל החלפה.
ולמי שמשתמש ב-Functions: בלי קובץ _routes.json, כל אחת מאלף התמונות מפעילה פונקציה ושורפת את המכסה היומית.
טופס, לידים ומדידה
הסרטון מביא את הגולש עד הסוף. הטופס הוא הסיבה שבניתם את כל זה.
- שם וטלפון, חובה. מייל, רשות. כל שדה נוסף מוריד אחוזים.
- בודקים שהטלפון ישראלי ותקין, גם בדפדפן וגם בשרת. 050-0000000 זה לא ליד, זו שיחה מבוזבזת.
- הליד נשמר קודם, ורק אז נשלח מייל. אם המייל נופל, הליד לא הולך לאיבוד.
- שומרים מאיפה הגולש הגיע. קמפיין, פוסט, דיירקט. אחרת אי אפשר לדעת על מה לשים כסף.
- מודדים עד איזו סצנה כל גולש הגיע. ככה רואים בדיוק איפה עוזבים, ומתקנים שם.
הלוח שבנינו ל-SENSE
מתעדכן כל 15 שניות. מראה מי באתר עכשיו ובאיזו סצנה, כמה הגיעו לטופס, ומאיזה קמפיין. והחלק החשוב: כרטיס "מה לשפר", שמצביע על המקום שבו הכי הרבה אנשים עוזבים ואומר מה לעשות שם.
בתמונה: נתוני דוגמה.
ליד בדיקה הוא ליד לכל דבר. אם הוא נכנס ל-CRM, איש המכירות יתקשר אליכם. אצלנו יש מסלול בדיקה נפרד, שבודק את המייל באוויר בלי לשמור ליד ובלי להפריע למכירות.
שש בדיקות שאסור לדלג עליהן
הרשימה המלאה שלנו, 22 בדיקות, בערכה.
כל מה שאנחנו עובדים איתו. מוכן להעתקה.
- פרומפט וידאו למעברמשלימים את הסוגריים ומדביקים. כולל טבלת "כשזה לא יוצא" עם מה שעבד לנו.
- הפרומפט ל-Claude שבונה את הדף24 סעיפים: המנוע, הטעינה החכמה, הטופס, הנגישות, המדידה והבדיקות.
- סקריפט התמונותפקודה אחת שמכינה את שלושת הסטים לכל הסרטונים, ובודקת שלא חסרה תמונה.
- צ'קליסט השקה מלא22 בדיקות לפני שמפרסמים: תמונות, טלפון, טופס, מדידה.
אין זמן לכל זה?
אנחנו בונים את זה מקצה לקצה: המסלול, הסרטונים, הדף, הטופס והמדידה. אתם מביאים את ההדמיות.