6 בניית מיומנויות

Landing Pages ו-Web Assets — דפים שממירים

בפרק הזה תבנו Landing Page מלא מאפס — Hero Section, Social Proof, טופס לידים, ו-CTA שעובד. תייצאו HTML נקי, תבדקו Responsive למובייל, ותדעו לחבר את הדף לקמפיין Meta Ads או Google Ads. בסוף הפרק יהיה לכם דף אינטרנט חי שממיר מבקרים ללקוחות.

מה יהיה לך בסוף הפרק הזה
מה תדעו לעשות אחרי הפרק הזה
דרישות קדם
הפרויקט שלך

בפרק 5 בנית שלושה One-Pagers שונים לעסק אחד — למדת לכתוב copy שיווקי קצר ואפקטיבי, לשלב תמונות ואיקונים, ולייצא PDF מוכן ללקוח. בפרק הזה תעלה שלב אחד: במקום דף שמודפס ונשלח, תבנה דף שחי באינטרנט ומקבל לידים בזמן אמת — Landing Page מלא ב-HTML עם כל הסקשנים שהופכים מבקר ללקוח. בפרק 7 תלמד לבנות Design System מלא שיהפוך כל Landing Page שתייצר לאחיד ומקצועי — ללא עבודה חוזרת.

מילון מונחים — פרק 6
מונח (English) תרגום/הסבר בעברית הגדרה
Landing Page (LP) דף נחיתה דף אינטרנט בודד שמטרתו אחת בלבד — להביא את המבקר לבצע פעולה מסוימת (מלא טופס, קנה, התקשר). שונה מ-homepage שמציג הרבה אפשרויות
Hero Section סקשן הגיבור / האזור הראשי החלק העליון של ה-Landing Page שנראה ראשון — כולל כותרת ראשית, תת-כותרת, תמונה/וידאו ו-CTA ראשי. זהו האזור הקריטי ביותר בדף
Above the Fold מעל הקפל / מה שנראה בלי גלילה כל מה שהמבקר רואה מיד בטעינת הדף, בלי לגלול. ב-Landing Page — זהו ה-Hero Section
Social Proof הוכחה חברתית אלמנטים שמראים שאנשים אחרים כבר בחרו בך — testimonials, לוגואים של לקוחות, מספר לקוחות, דירוגי כוכבים
Testimonial המלצה / עדות לקוח ציטוט מלקוח מרוצה עם שם ותמונה (אם אפשר). אחד מאלמנטי ה-Social Proof החזקים ביותר
CTA (Call to Action) קריאה לפעולה הכפתור או הפעולה שאתה רוצה שהמבקר יעשה — "השאירו פרטים", "קנה עכשיו", "הזמן שיחת ייעוץ"
Lead Form טופס לידים טופס שמבקר ממלא כדי לקבל מידע נוסף או הצעת מחיר. בדרך כלל: שם, טלפון, אולי אימייל
Responsive Design עיצוב מגיב דף שנראה ומתפקד טוב על כל גדלי מסך — מחשב, טאבלט, מובייל — בלי עיצוב נפרד לכל אחד
Conversion Rate שיעור המרה אחוז המבקרים שביצעו את הפעולה הרצויה. LP עם 5% conversion rate = 5 מתוך 100 מבקרים הפכו ללידים
UTM Parameters פרמטרי מעקב / תגיות UTM סיומות שמוסיפים לכתובת ה-URL כדי לדעת מאיזה קמפיין הגיע המבקר. למשל: `?utm_source=facebook&utm_campaign=yoga-june`
Above-the-Fold CTA CTA ראשוני כפתור ה-CTA שנמצא בחלק הגלוי מיד — לפני הגלילה. הכי חשוב מבחינת conversions
RTL (Right to Left) ימין לשמאל כיוון הטקסט בעברית. ב-HTML מוגדר עם `dir="rtl"`. בלי הגדרה זו — עברית תיראה הפוכה ועיצוב ישבר
מתחיל 10 דקות חינם מושג

מהו Landing Page ולמה הוא קריטי

Landing Page (דף נחיתה) הוא דף אינטרנט שתוכנן לביצוע פעולה אחת בלבד. הוא לא homepage — לא מציג "על החברה", לא מפנה למוצרים שונים, לא מפזר את תשומת הלב. הוא אומר למבקר: "עשה רק את הדבר הזה." אם ב-one-pager (פרק 5) המטרה הייתה להציג מידע — ב-Landing Page המטרה היא להמיר: לגרום למבקר לעשות פעולה מדידה.

ב-2026, כל קמפיין פרסום ברצינות — Meta Ads, Google Ads, TikTok Ads — מפנה ל-Landing Page ייעודי. מי שמפנה קמפיין ל-homepage הכללי מבזבז כסף. המבקר מגיע, רואה עשרה כפתורים, מתבלבל, ויוצא. עסקים ישראליים שמשתמשים ב-LP ייעודי לכל קמפיין מדווחים על ירידה חדה בעלות לליד ועלייה ב-conversion — והכלי שאתה לומד בפרק הזה מאפשר לך לבנות LP כזה בלי לשלם לא למפתח ולא למעצב.

למה Landing Page שונה מ-Homepage?

Homepage Landing Page
מטרות מרובות (מידע, ניווט, מכירה) מטרה אחת בלבד
תפריט ניווט עם 5-10 קישורים בלי תפריט (או מינימלי)
מידע כללי על העסק מידע ספציפי לפעולה המבוקשת
CTA מרובים ("קרא עוד", "צור קשר", "הזמן") CTA אחד בלבד שחוזר 2-3 פעמים בדף
Conversion Rate: 1-2% טיפוסי Conversion Rate: 5-15% טיפוסי

עסק ישראלי טיפוסי שמוציא 3,000 ש"ח בחודש על Meta Ads ומפנה ל-homepage יכול לצפות ל-1-3 לידים. אותו תקציב עם Landing Page מותאם יכול להניב 8-15 לידים. ההבדל הוא ה-LP, לא התקציב.

תרחיש ישראלי — התמונה המלאה

דוגמה קונקרטית: רונית, מאמנת כושר עצמאית מרעננה, מריצה קמפיין Meta Ads בתקציב 2,500 ש"ח בחודש. היא מפנה ל-homepage של האתר שלה — עמוד עם תפריט של 8 עמודים, גלריית תמונות, בלוג, ועמוד "על עצמי". מה קורה? מתוך 800 מבקרים בחודש, 6 משאירים פרטים. זה 0.75% conversion rate — ו-416 ש"ח עלות לליד.

אחרי שבנתה Landing Page ייעודי ל-"אימון אישי לנשים אחרי לידה", עם Hero Section ממוקד, 3 Testimonials אמיתיות, וטופס של שם + טלפון בלבד — ה-conversion rate קפץ ל-6.2%. מאותם 800 מבקרים — 50 לידים. עלות לליד: 50 ש"ח. ההבדל: לא תקציב, לא קריאייטיב — רק הדף שמקבל את המבקר.

זה לא מספר בדוי. כלל אצבע מקובל בשיווק דיגיטלי: Landing Page ייעודי מניב conversion rate גבוה פי 3-5 מ-homepage. בתקציבי פרסום ישראליים, שבהם כל ש"ח נספר — זה ההבדל בין קמפיין שנסגר אחרי חודש לבין עסק שצומח.

עשה עכשיו 3 דקות

חשוב על עסק שאתה מכיר — משלך או של מישהו אחר. ענה על שאלות אלו:

  1. האם יש לו Landing Page נפרד לכל קמפיין, או שהכל מפנה ל-homepage?
  2. אם אתה מבקר בו עכשיו — מה הפעולה הכי ברורה שהדף מבקש ממך לעשות?
  3. כמה שניות לקח לך להבין מה הדף מוכר?

רשום את התשובות — תחזור אליהן בתרגיל הסופי של הפרק.

מתי בונים Landing Page?

מתחיל 12 דקות חינם אסטרטגיה

מבנה Landing Page שממיר — Framework

אחרי ניתוח של Landing Pages של עסקים ישראליים שמניבים תוצאות, אפשר לזקק מבנה שעובד ברוב המקרים. זכור: בפרק 4 למדת מבנה של pitch deck ב-10 שקפים — כאן התפיסה דומה, אבל במקום שקף אחרי שקף, יש סקשן אחרי סקשן בגלילה אנכית. שני המבנים לוקחים את הקורא ממודעות (Hero / שקף פתיחה) דרך אמון (Social Proof / Case Studies) ועד פעולה (CTA / סיום). לא חייבים לעמוד בו בדיוק — אבל כל סטייה ממנו צריכה להיות מכוונת.

מסגרת החלטה: מבנה Landing Page ב-7 סקשנים
# סקשן מטרה אורך משוער חובה?
1 Hero Section תפוס תשומת לב, הסבר מה זה, הניע לפעולה ראשונה 100-150 מילה חובה
2 Social Proof מהיר בנה אמון מיידי — לוגואים, מספרים, כוכבים סרגל תמונות מומלץ מאוד
3 Features / Benefits מה מקבלים? מה זה עושה בשבילי? 3-6 נקודות חובה
4 How It Works הורד חסמים — הסבר בפשטות מה קורה אחרי שנרשמים 3 שלבים מומלץ
5 Testimonials הוכחה שזה עובד — ציטוטים אמיתיים 2-3 ציטוטים חובה
6 CTA + Lead Form המרה — כאן הגולש הופך ל-ליד טופס קצר חובה
7 FAQ הסר חסמים אחרונים לפני ההחלטה 4-6 שאלות אופציונלי

כלל זהב: ה-CTA (קריאה לפעולה) צריכה להופיע שלוש פעמים — ב-Hero, אחרי Testimonials, ובסקשן ה-Form. לא פעם אחת.

עיקרון ה-Above the Fold: סקשנים 1-2 (Hero + Social Proof bar) חייבים להיראות בלי גלילה — זה ה-"Above the Fold". המבקר לא מתחייב לגלול. אם הוא לא מבין מה מוצע לו ולמה לסמוך על העסק תוך 5 שניות — הוא עוזב.

עשה עכשיו 4 דקות

בחר שירות אחד שאתה רוצה לשווק (או השתמש ב"קסמה — קורסי יוגה ופילאטיס"). כתוב תשובה אחת לכל שאלה:

  1. מה פעולה אחת שאני רוצה שהמבקר יעשה? (לא שתיים)
  2. מה ה-benefit העיקרי שהלקוח מקבל? (לא תכונות — תועלת)
  3. מה החשש הגדול ביותר של לקוח לפני שהוא נרשם?
  4. מה ה-social proof שיש לי? (מספר לקוחות, ציטוטים, תעודות)

הדף שתבנה בסוף הפרק יבנה סביב 4 התשובות האלה.

בינוני 20 דקות חינם תרגול

Prompt ל-Landing Page — הספרייה המלאה

ב-Claude Design, Landing Page נבנה בצורה מיטבית כשאתה מפנה את Claude לבנות סקשן אחד בכל פעם — לא "תבנה לי Landing Page שלם". גישת ה-Section-by-Section נותנת שליטה רבה יותר ומאפשרת iteration מהיר. זכור את מה שלמדת בפרק 3 על כתיבת Brief — אותם עקרונות (ספציפיות, פעולה ברורה, פרטי עסק ראשונים) חלים גם כאן, רק שהפעם ה-Brief נפרס על כמה Prompts נפרדים.

Prompt ראשי — יצירת LP שלם (גישת One-Shot)

Prompt: Landing Page שלם — One Shot
צור Landing Page מלא ב-HTML עבור [שם עסק].

פרטי העסק:
- שם: קסמה — קורסי יוגה ופילאטיס
- עיר: תל אביב (שכונת פלורנטין)
- שירות: קורס יוגה למתחילים, 12 שיעורים
- מחיר: 890 ש"ח לקורס / 90 ש"ח לשיעור בודד
- CTA: "השאירי פרטים לשיעור ניסיון חינם"
- טלפון: 050-1234567
- Social proof: 340+ תלמידות מרוצות, 4.9 כוכבים ב-Google

מבנה נדרש:
1. Hero Section — כותרת ראשית, תת-כותרת, CTA כפתור ירוק
2. Social proof bar — מספרים + כוכבים
3. יתרונות (Features) — 4 נקודות עם אייקונים
4. How It Works — 3 שלבים
5. Testimonials — 3 ציטוטים עם שמות
6. טופס ליד — שם + טלפון + CTA
7. Footer בסיסי עם טלפון

עיצוב:
- פלטת צבעים: ירוקי טבע (sage green) + לבן + אקסנט כתום
- פונט: Heebo (עברי)
- RTL מלא
- Mobile responsive
- dir="rtl" lang="he" על ה-HTML element
- קוד HTML נקי, ללא JavaScript חיצוני
        

Prompts לסקשנים נפרדים — גישת Section-by-Section

הגישה הזו עדיפה כשרוצים שליטה מלאה. מבנה כל prompt סקשן:

Prompt: Hero Section
צור Hero Section ל-Landing Page של [שם עסק].
- כותרת ראשית: [מה שמשנה את חיי הלקוח — לא תכונות]
- תת-כותרת: [פירוט של 1-2 משפטים]
- תמונת רקע: [תאר את התמונה הרצויה]
- כפתור CTA: "[טקסט הכפתור]" — צבע [צבע], גודל גדול
- Social proof micro: "[מספר] לקוחות מרוצים" מתחת לכפתור
- RTL, Heebo, mobile responsive
        
Prompt: Testimonials Section
צור סקשן Testimonials עם 3 כרטיסים.
לכל כרטיס:
- תמונת פרופיל עגולה (placeholder)
- שם: [שם ישראלי אמין]
- תפקיד/רקע: [תיאור קצר]
- ציטוט: [2-3 משפטים על הערך שקיבלו]
- דירוג: 5 כוכבים זהובים

עיצוב: cards עם צל עדין, רקע אפור בהיר, RTL
        
Prompt: Lead Form Section
צור סקשן טופס ליד.
- כותרת: "[ניסוח שמדגיש את הערך, לא את הפעולה]"
- שדות: שם מלא, מספר טלפון
- כפתור: "[CTA חזק]" — צבע בולט
- מתחת לכפתור: "לא נשלח spam. ניצור קשר תוך 24 שעות"
- Privacy note קטן
- RTL, responsive
        
טעות נפוצה: Prompt ארוך מדי — Claude מאבד כיוון

רבים כותבים Prompt של 500 מילה עם כל פרטי העסק ויוצאים מאוכזבים. הבעיה: ככל שה-Prompt ארוך יותר, Claude נוטה "למתן" אותו ולייצר תוצאה גנרית. הפתרון: Prompt של עד 200 מילה, ממוקד בסקשן אחד. פרטים שחשובים לך — שים בתחילת ה-Prompt, לא בסוף.

עשה עכשיו 5 דקות

עבור לממשק Claude Design. העתק את ה-Prompt של Hero Section למעלה, החלף את הסוגריים המרובעים בפרטי העסק שלך (או "קסמה"), ושלח. צפה בתוצאה — אל תשנה שום דבר עדיין. רשום:

בסקשן הבא תלמד להעריך Hero Section ולתקן בעיות.

בינוני 15 דקות חינם תרגול

עיצוב Hero Section אפקטיבי

ה-Hero Section הוא ה-5 השניות הראשונות שמבקר רואה. אם הוא לא מבין מיד מה מוצע לו ולמה זה רלוונטי — הוא עוזב. אין הזדמנות שנייה. אם בפרק 5 למדת לכתוב copy שיווקי קצר ל-One-Pager — כאן תקח את אותה מיומנות ותמקד אותה בנקודה אחת: ה-Hero. כותרת אחת, תת-כותרת אחת, כפתור אחד — ואפס מילים מיותרות.

אנטומיה של Hero Section מנצח

דוגמה מייצגת: Hero Section — "קסמה"
אלמנט דוגמה גרועה דוגמה טובה למה זה חשוב
כותרת ראשית (H1) "קורסי יוגה בתל אביב" "חשי קלה בגוף, שלמה בנפש — תוך 4 שבועות" הכותרת הטובה מדברת על התוצאה, לא על השירות
תת-כותרת "אנו מציעים מגוון רחב של שיעורי יוגה ופילאטיס" "12 שיעורים עם מדריכה מוסמכת + קבוצה קטנה של 8 נשים בלבד. מתחילות מוזמנות." פרטים ספציפיים בונים אמינות ומסננים לקוחות לא מתאימים
CTA כפתור "לחצי כאן" / "שלחי" "השאירי פרטים לשיעור ניסיון חינם" הCTA חייב לתאר מה יקרה, לא פעולה גנרית
Social proof micro ריק "340 נשים כבר בחרו בקסמה | 4.9 ★ Google" הפחתת חרדה לפני הלחיצה על הכפתור
תמונה/ויז'ואל תמונת stock גנרית של יוגה תמונה מהסטודיו האמיתי, תאורה טבעית, פנים אנושיות אותנטיות מנצחת מושלמות

איך לייצר כותרת ראשית חזקה עם Claude

אחת מהדרכים הטובות ביותר היא לבקש מ-Claude לייצר וריאציות ולא גרסה אחת:

Prompt: ייצור 5 וריאציות כותרת H1
כתוב 5 וריאציות לכותרת ראשית (H1) ל-Landing Page של [שם עסק/שירות].
מטרה: [הסבר קצר מה רוצים שהלקוח יעשה]
הלקוח האידיאלי: [תיאור]
הבעיה שאנחנו פותרים: [הבעיה]

לכל וריאציה:
- כותרת (עד 8 מילים בעברית)
- הסבר קצר מה הגישה (פחד? תועלת? שאלה? מספרים?)
        
עשה עכשיו 5 דקות

השתמש ב-Prompt "5 וריאציות כותרת" עבור השירות שלך. קבל 5 אפשרויות, ובחר את הכי חזקה לדעתך. אם אתה לא בטוח — שאל את עצמך: "איזו כותרת הייתי לוחץ עליה אם הייתי הלקוח?" רשום את הכותרת שבחרת — היא תיכנס ל-Hero Section שלך.

Iteration — שיפור Hero Section בשיחה

כפי שלמדת בפרק 3, ה-Prompt הראשון נותן 70% מהדרך. ה-30% הנותרים מגיעים דרך Iteration — שיחה מדויקת עם Claude. ב-Hero Section, אלה שלושת בקשות ה-Iteration הנפוצות ביותר:

Hero Section ב-RTL — שיקולי עיצוב

עיצוב Hero Section לעברית שונה מאנגלית בכמה נקודות:

בינוני 12 דקות חינם תרגול

Social Proof ו-Testimonials

Social Proof (הוכחה חברתית) היא הסיבה מספר אחת שאנשים בוחרים עסק שלא מכירים. אנחנו חיות חברתיות — אם 340 נשים בחרו בסטודיו הזה, זה סימן שמשהו שם עובד. בפרק 5 הוספת testimonials ל-one-pager כטקסט — כאן תלמד לעצב אותם כאלמנטים ויזואליים עם תמונות, כוכבים, ומבנה שמביא תוצאות מוכחות.

סוגי Social Proof ב-Landing Page

סוג דוגמה ישראלית חוזקה היכן בדף
מספרים "2,400+ לקוחות", "8 שנות פעילות" גבוהה — מיידי וברור Hero + Social Bar
דירוגי Google "4.9 ★ מ-187 ביקורות" גבוהה מאוד — גורם חיצוני אמין Hero + Social Bar
Testimonials ציטוט + שם + תמונה גבוהה — אמפתיה ואמינות סקשן ייעודי
לוגואים לקוחות "עובדים עם: [לוגו1] [לוגו2]" בינונית-גבוהה Social Bar
תעודות ורישיונות "מוסמכת ב-RYT-500", "חבר לשכת רואי החשבון" בינונית — עם הסבר קרוב ל-Form
תוצאות ממשיות "הלקוחות שלנו חוסכים בממוצע 4,500 ש"ח בשנה" גבוהה מאוד — אם מגובה Features / Testimonials

Testimonial שעובד לעומת Testimonial שלא עובד

דוגמה מייצגת: Testimonials לסטודיו יוגה

Testimonial חלש (לא לעשות):

"קורס נהדר, מאוד אהבתי. ממליצה בחום!" — שרה מ.

Testimonial חזק (לעשות):

"הגעתי לקסמה עם כאבי גב שנתיים שלא הלכו. אחרי 4 שיעורים — שינה ראשונה ללא כאב. אחרי 12 שיעורים — חזרתי לרכוב על אופניים. לא האמנתי שזה אפשרי." — שרה לוי, 42, ראש העין

Testimonial חזק מכיל: מה הייתה הבעיה לפני, מה השתנה, ופרטים ספציפיים (לא "נהדר" — "חזרתי לרכוב על אופניים"). שם מלא ועיר — לא ראשי תיבות.

Social Proof ישראלי — מה עובד בשוק המקומי

לצרכן הישראלי יש העדפות Social Proof ייחודיות שכדאי להכיר:

כשתבנה את ה-LP שלך ב-Claude Design, תן ל-Claude לעצב את סקשן ה-Social Proof — אבל החומר חייב להיות אמיתי. הכלל: אם אתה לא יכול לגבות מספר — אל תשים אותו. "תלמידות מרוצות" בלי מספר עדיף על "500 תלמידות" שזה 50 בפועל.

עשה עכשיו 5 דקות

כתוב Prompt ל-Claude Design לייצור 3 Testimonials לעסק שלך בפורמט הנכון. הנח ל-Claude לייצר testimonials "מייצגים" (ציין שזה לדוגמה) — ואז החלף בציטוטים אמיתיים מלקוחות שלך. שמור את ה-Prompt לשימוש עתידי.

טעות נפוצה: Testimonials בדויים שנראים בדויים

Claude יכול לייצר Testimonials "לדוגמה" — אבל שים לב: testimonials שנכנסים ל-Landing Page חייבים להיות אמיתיים או מבוססים על לקוחות אמיתיים. שימוש ב-testimonials שאינם אמיתיים הוא בעיה אתית ומשפטית (הטעיית צרכנים). ה-Prompt ל-Claude הוא לצורך מבנה ועיצוב — הצטט לקוחות אמיתיים, עם אישורם.

בינוני 15 דקות חינם תרגול

טפסי לידים ו-CTA

הטופס הוא רגע האמת. כאן המבקר עובר מ"מעוניין" ל-"ליד". כל שדה נוסף בטופס מפחית את ה-conversion rate — ובמקרה של עסק ישראלי קטן, שבו כל ליד שווה מאות שקלים, ההבדל בין 3 שדות ל-5 שדות יכול להיות 30-40% פחות לידים. הכלל: שאל רק מה שאתה חייב לדעת כדי לחזור לפונה. כל מילה על הכפתור משנה.

כמה שדות בטופס?

מסגרת החלטה: מה לשאול בטופס ליד

הכפתור — הפרט שמשנה הכי הרבה

נסח את כפתור ה-CTA כך שהוא מתאר מה קורה אחרי הלחיצה — לא את הפעולה הטכנית עצמה. המבקר לא רוצה "לשלוח טופס" — הוא רוצה "לקבל שיעור ניסיון חינם". הכפתור צריך לשקף את התוצאה, לא את המנגנון. ההבדל בין הגישות:

כפתור גנרי (פחות טוב) כפתור ממוקד (יותר טוב)
שלח קבל שיעור ניסיון חינם
הגש בקשה תזמן שיחת ייעוץ ללא עלות
לחץ כאן שמור את המקום שלי בקורס
צור קשר קבל הצעת מחיר תוך שעה

טופס ליד בעברית — שיקולים מיוחדים

טפסים בעברית מציבים שני אתגרים שאין באנגלית:

מה מכניסים מתחת לכפתור?

מתחת לכפתור — תמיד — הוסף משפט הפחתת חרדה קצר. אחת האפשרויות:

עשה עכשיו 3 דקות

כתוב 3 גרסאות לכפתור ה-CTA שלך. השתמש בנוסחה: "קבל/קבלי [תועלת ספציפית]". למשל: "קבלי ייעוץ ראשוני חינם", "שמור/י מקום בסדנה", "קבל הצעת מחיר עכשיו". בחר את הגרסה שאתה הכי אוהב — ורשום אותה לשימוש בתרגיל הסופי.

טעות נפוצה: CTA אחד בלבד בכל הדף

רבים שמים כפתור אחד בתחתית הדף ותמהים למה ה-conversion נמוך. כלל הברזל: CTA צריך להופיע שלוש פעמים לפחות — ב-Hero Section, אחרי הפיצ'רים או ה-Testimonials, ובסקשן הטופס. כל גולש שגולל לנקודה שונה בדף צריך לראות את הכפתור בלי שיצטרך לחפש אותו.

בינוני 15 דקות חינם תרגול

Responsive Design — מובייל ודסקטופ

בישראל, יותר מ-70% מהגלישה לאינטרנט מתבצעת מסמארטפון. Landing Page שנראה טוב רק על מחשב — מאבד שלושה רבעים מהמבקרים שלו מיד. זה לא מקצועי, ובמקרה של קמפיין Meta Ads — הרוב ייכנס מהמובייל.

נקודה ישראלית חשובה: הישראלים גולשים הרבה מאוד ב-WhatsApp — ולינק ל-LP שנשלח בוואטסאפ נפתח תמיד על מובייל, בדפדפן הפנימי של וואטסאפ (WebView). הדפדפן הזה מתנהג קצת שונה מ-Chrome או Safari, ולכן בדיקה על מכשיר אמיתי — דרך וואטסאפ — היא חלק הכרחי מתהליך ה-QA שלך. ב-Claude Design, מרגע שייצאת HTML, שלח לעצמך ב-WhatsApp ובדוק מיד.

Mobile First — למה הסדר חשוב

גישת Mobile First אומרת: תעצב קודם למובייל, ורק אחר כך תתאים למסך גדול. זה הפוך ממה שהאינסטינקט אומר — רוב המעצבים יושבים מול מסך של 27 אינץ' ומתחילים מ-desktop. אבל אם 70%+ מהגולשים שלך ב-mobile, אתה מעצב קודם למיעוט ומקווה שהרוב יסתדרו.

ב-Claude Design, הגישה הנכונה:

  1. ב-Prompt הראשון — ציין "Mobile First". למשל: "צור Landing Page בגישת Mobile First — תחילה מובייל 375px, ואז דסקטופ"
  2. בדוק קודם ב-Responsive Preview (מובייל) — רק אחרי שמובייל נראה מושלם, עבור ל-desktop
  3. אלמנטים שמסובכים על מובייל (טבלאות, grid מרובה עמודות) — פשט אותם: עמודה אחת, כרטיסים אחד מתחת לשני

Responsive Preview ב-Claude Design

Claude Design מציע תצוגה מקדימה של Responsive בממשק. לפני ייצוא HTML, בצע תמיד את הצעדים הבאים:

שלבים: בדיקת Responsive ב-Claude Design
  1. לאחר יצירת ה-Landing Page — מצא את כפתור "Responsive Preview" בסרגל הכלים העליון
  2. לחץ על אייקון הסמארטפון לתצוגת מובייל (375px)
  3. בדוק את 5 האזורים הקריטיים: Hero, Testimonials, Form, כפתור CTA, Footer
  4. אם משהו שבור — חזור ל-chat ותאר בדיוק מה רואים: "ב-mobile view, הכפתור CTA יוצא מגבולות המסך. תיקון?"
  5. חזור על הבדיקה עד שכל 5 האזורים תקינים

Checklist — 12 בדיקות Responsive חיוניות

לאחר ייצוא ה-HTML, פתח אותו בדפדפן ובצע את הבדיקות הבאות:

# בדיקה מה לבדוק
1Hero — גודל טקסטכותרת H1 קריאה ב-mobile? לא חצויה?
2תמונותלא חורגות מגבולות המסך?
3כפתור CTAגודל מינימום 44px גובה? לחיץ בקלות בכל אצבע?
4טופסשדות הקלט בגודל מתאים? מקלדת נפתחת נכון?
5Grid/Columnsעמודות מרובות הפכו לעמודה אחת ב-mobile?
6RTLכיוון הטקסט עברי גם ב-mobile?
7Testimonialsכרטיסים מוצגים אחד מתחת לשני, לא חצויים?
8גופןHeebo נטען? לא נפל ל-system font?
9מהירותהדף נטען תוך 3 שניות? (בדוק עם 3G סימולציה)
10Scrollגלילה חלקה? לא נתקעת?
11Footerטלפון לחיץ (tel: link) ב-mobile?
12הגדרת viewportיש `<meta name="viewport"...>` ב-HTML head?
עשה עכשיו 4 דקות

ב-Claude Design, לחץ על Responsive Preview ובחן את ה-Landing Page שיצרת עד כה. בחן רק שלושה דברים: האם הכותרת קריאה? האם הכפתור גדול מספיק? האם הטופס נראה תקין? כתוב כאן מה שלא עובד, ובסקשן הבא תראה איך לתקן ב-HTML export.

בינוני 18 דקות חינם הקמה

ייצוא ל-HTML — קוד נקי ומוכן

ייצוא ל-HTML הוא הצעד שמפריד בין "עיצוב" לבין "דף שחי באינטרנט". הייצוא ב-Claude Design שונה מייצוא ה-PDF שלמדת בפרק 3 ובפרק 5 — PDF הוא תמונה "קפואה" שלא ניתנת לעריכה, בזמן ש-HTML הוא קוד חי שניתן לפתוח ישירות בדפדפן, לשדרג ב-Claude Code, ולעלות ל-Cloudflare Pages, Netlify, Vercel, או שרת פשוט. ב-Landing Page אנחנו תמיד מייצאים HTML — לא PDF.

תהליך הייצוא — שלב אחר שלב

שלבים: ייצוא HTML מ-Claude Design
  1. בממשק Claude Design — לחץ על כפתור "Export" בפינה הימנית העליונה (אייקון חץ יוצא)
  2. בחר "Export as HTML"
  3. בחלון ה-Export — בחר "Single File HTML" (כולל CSS מוטמע) לפשטות מרבית
  4. לחץ "Export" — יורד קובץ `.html`
  5. פתח את הקובץ בדפדפן (לחץ כפול על הקובץ). הדף צריך להיראות זהה לממשק Claude Design
  6. פתח את הקובץ גם בנייד (שלח לעצמך ב-WhatsApp ופתח) לבדיקת mobile

Single File vs Multi File — מה לבחור?

ב-Claude Design, ב-Export יש בדרך כלל שתי אפשרויות:

לרוב — Single File הוא הבחירה הנכונה בשלב הזה. Claude Code יטפל בארגון הקבצים אחר כך.

מה לבדוק ב-HTML המיוצא

לפני שמעבירים לאיזשהו שרת, פתח את קובץ ה-HTML בעורך טקסט (VS Code, Notepad++) ובדוק:

5 בדיקות HTML חיוניות
  1. `<html lang="he" dir="rtl">` — שורה ראשונה של HTML element. בלי זה — RTL שבור
  2. `<meta charset="UTF-8">` — בלי זה, עברית תהפוך לסימנים תמוהים
  3. `<meta name="viewport" content="width=device-width, initial-scale=1.0">` — חובה ל-responsive mobile
  4. גופן Heebo — חפש `fonts.googleapis.com/css2?family=Heebo` ב-head. אם לא קיים — הגופן לא ייטען
  5. טופס — action attribute — הטופס ב-HTML יהיה בלי `action`. בלי JavaScript או backend — הטופס לא ישלח לשום מקום. זה נורמלי בשלב העיצוב; Claude Code יטפל בזה בהמשך

מבנה קבצים מומלץ לפני Deploy

מבנה תיקיות Landing Page
kasama-yoga/
├── index.html          ← קובץ ה-Landing Page הראשי
├── images/             ← תמונות אמיתיות (לוגו, סטודיו, תמונות צוות)
│   ├── logo.svg
│   ├── studio.jpg
│   └── testimonials/
│       ├── sarah.jpg
│       └── maya.jpg
├── css/                ← אם ייצאת עם קובץ CSS נפרד
│   └── style.css
└── README.txt          ← הערות למפתח או ל-Claude Code
        
עשה עכשיו 5 דקות

ייצא את ה-Landing Page שלך ל-HTML. פתח את הקובץ בדפדפן. בדוק את 5 הנקודות הרשומות למעלה. רשום אם מצאת בעיה בכל אחת מהן. אל תתקן ידנית — אם יש בעיה, חזור ל-Claude Design ובקש תיקון.

שימו לב: HTML Export ≠ דף חי

קובץ HTML שנפתח מה-Desktop שלך הוא לא "דף שחי באינטרנט". כדי שמבקרים יגיעו אליו — הוא צריך להיות מאוחסן על שרת (Cloudflare Pages, Netlify, Vercel, או שרת אחר). בפרק 11 נכסה Deploy מלא. בינתיים — ה-HTML שלך מוכן, ואתה יכול לשלוח אותו כ-preview ללקוח.

בינוני 12 דקות חינם כלי

העברה ל-Claude Code לפיתוח מלא

Claude Design מייצר HTML מצוין — אבל HTML סטטי. הוא לא יכול לשלוח טפסים לאימייל, לחבר ל-CRM, להוסיף אנימציות מתקדמות, או לשנות תוכן לפי פרמטרים. לכל אלה — Claude Code. בפרק 2 הכרת את ממשק Claude Design ולמדת לייצא בפורמטים שונים — עכשיו אתה רואה את הצעד הבא: מה שמייצאים מכאן הופך לחומר הגלם של Claude Code, שלוקח HTML סטטי ומפיח בו חיים.

מה Claude Code יכול להוסיף ל-HTML שייצרת?

Handoff Prompt — איך לתת הוראות ל-Claude Code

תבנית: Claude Code Handoff Prompt
יש לי קובץ HTML של Landing Page שיצרתי ב-Claude Design.
מצרף/ת את הקוד להלן.

אני צריך/ה שתוסיף:
1. טופס עובד — שליחת הליד לאימייל [האימייל שלך] עם Formspree
2. Facebook Pixel עם ID: [PIXEL_ID]
3. Google Analytics 4 עם ID: [GA4_ID]
4. אנימציית fade-in לכרטיסי ה-Testimonials בגלילה
5. Countdown timer — 48 שעות (נחמד אם מבצע קיים)

שמור RTL מלא, שמור עיצוב מקורי, אל תשנה צבעים או טיפוגרפיה.
תן לי את הקובץ השלם לאחר השינויים.

[הדבק את כל ה-HTML כאן]
        
Formspree — פתרון טופס חינמי לישראלים

Formspree הוא שירות חינמי (עד 50 submissions בחודש) שמאפשר לטופס HTML לשלוח אימייל — בלי server. פשוט נרשמים ב-formspree.io, מקבלים endpoint URL, ו-Claude Code מחבר את הטופס אליו. תוצאה: כל ליד שממלא את הטופס — אימייל מגיע אליך.

הרצף מ-Claude Design ל-אתר חי — מפה מלאה

חשוב להבין את התמונה הגדולה. הפייפליין מ-"אין לי דף" ל-"דף חי שמקבל לידים" נראה כך:

  1. עיצוב ב-Claude Design (פרק זה): אתה בונה את ה-LP — מבנה, צבעים, ניסוח, סקשנים. מייצא HTML
  2. שדרוג ב-Claude Code (פרק 11): Claude Code לוקח את ה-HTML ומוסיף JavaScript — טופס פעיל, אנימציות, Pixel tracking. מייצא תיקיית קבצים מוכנה
  3. Deploy (פרק 11): מעלים את התיקייה ל-Cloudflare Pages (חינם), Netlify (חינם), או Vercel (חינם). תוך 5 דקות — הדף חי באינטרנט
  4. חיבור לקמפיין: מדביקים את ה-URL ב-Meta Ads Manager או ב-Google Ads כ-Destination URL

את שלבים 1-2 אתה כבר יודע לעשות (או תדע בסוף הפרק). שלבים 3-4 מכוסים בפרק 11. הנקודה: הידע שאתה בונה עכשיו — כתיבת Prompts, בדיקת RTL, ייצוא HTML — הוא הבסיס לכל מה שבא אחר כך. בלי LP מעוצב נכון, Claude Code לא יכול לעזור.

עשה עכשיו 3 דקות

שמור את תבנית ה-Handoff Prompt לעצמך (Notepad, Google Docs — כל מקום). מלא את הפרטים הריקים: האימייל שלך, ה-Pixel ID שלך (אם יש). אם אין לך Facebook Pixel עדיין — כתוב "אוסיף מאוחר יותר". התבנית הזו תחסוך לך שעה בפרק 11.

בינוני 15 דקות חינם אסטרטגיה

Landing Page לקמפיין Meta Ads

Meta Ads (פרסום ב-Facebook ו-Instagram) הוא ערוץ הפרסום הנפוץ ביותר לעסקים קטנים בישראל. עסקים ישראלים קטנים משקיעים בממוצע 2,000-8,000 ש"ח בחודש ב-Meta Ads, ולרובם אין מפתח אתרים צמוד. Landing Page שמחובר נכון לקמפיין Meta יכול להכפיל את ה-ROI מהקמפיין — והיכולת לבנות LP ב-Claude Design בלי מפתח זה בדיוק מה שחסר.

Message Match — הכלל שרוב המפרסמים שוברים

Message Match הוא העיקרון הכי חשוב ב-Landing Page לקמפיין: המסר שהמבקר ראה במודעה חייב להופיע בדיוק (או קרוב מאוד) במסר שהוא רואה ב-LP. למה זה קריטי? כי המבקר לחץ על מודעה ספציפית. הוא מצפה לקבל בדיוק את מה שהובטח. אם המודעה אומרת "קורס יוגה למתחילות ב-890 ש"ח", וה-LP מדבר על "חבילת כושר אישי" — הוא עוזב תוך 3 שניות.

ההתאמות הנדרשות ל-Meta Ads

Message Match — ההתאמה בין המודעה לדף: המסר שב-Ad צריך להיות זהה או דומה מאוד למסר ב-Hero Section. אם ה-Ad אומר "קורס יוגה ב-890 ש"ח", ה-Hero Section חייב להזכיר "קורס יוגה ב-890 ש"ח" — לא מחיר שונה, לא שירות שונה.

אלמנט דרישה ל-Meta Ads LP איך לייצר ב-Claude Design
Mobile First 85%+ מהקליקים ממובייל. דף חייב להיות מושלם על 375px בדוק Responsive Preview לפני ייצוא
מהירות טעינה תוך 3 שניות — כל שנייה נוספת מורידה conversions ב-20% אל תשתמש בתמונות מעל 200KB. Prompt: "אופטימיזציה לטעינה מהירה"
Facebook Pixel חייב להיות מותקן לעקוב אחרי conversions Claude Code יוסיף אחרי ה-Handoff
Privacy Policy Meta דורש Privacy Policy בדף שמאסף מידע הוסף בפרק את הטקסט: "פרטיותך חשובה לנו — [קישור]"
UTM Parameters URL של הדף צריך לכלול UTM לניתוח נתונים URL הסופי: `kasama-yoga.co.il/?utm_source=facebook&utm_campaign=yoga-may`

Prompt ל-Claude Design: LP ל-Meta Ads

Prompt: Landing Page מותאם Meta Ads
צור Landing Page HTML מותאם לקמפיין Facebook/Instagram Ads.

דרישות ייחודיות ל-Meta Ads:
- Mobile First — המיד הראשון שנראה הוא מובייל 375px
- Hero Section: כותרת זהה לטקסט במודעה: "[הכנס טקסט מדויק מה-Ad שלך]"
- CTA כפתור: גדול, בצבע בולט, תופס את כל רוחב המסך ב-mobile
- טופס קצר: שם + טלפון בלבד (לא אימייל)
- Privacy note: "פרטיותך שמורה. לא נעביר מידע לצד שלישי"
- לא לכלול תפריט ניווט — מסיח דעת ב-mobile
- Footer: לוגו + טלפון קליקבל + שם עסק
- ניסוח עברי, RTL מלא, Heebo font
        
מסגרת החלטה: LP ל-Meta Ads — שאלות מנחות
עשה עכשיו 3 דקות

חשוב על קמפיין Meta Ads שרצה עכשיו (או שרצה בעבר) לעסק שלך. רשום: מה כתוב ב-Ad? ומה כתוב ב-Landing Page שאליו מפנים? האם יש Message Match? אם לא — מה צריך לשנות ב-LP כדי שיתאים ל-Ad?

בינוני 12 דקות חינם אסטרטגיה

Google Ads שונה מ-Meta Ads בנקודה מכרעת: המשתמש כבר חיפש משהו ספציפי. הוא לא "גולש סתם" — הוא אומר לגוגל "אני רוצה קורס יוגה בתל אביב". ה-Landing Page שמקבל אותו צריך לענות בדיוק על מה שחיפש. בהקשר הישראלי, חיפוש מקומי (עם שם עיר או "ליד הבית") הוא נפוץ במיוחד — ו-LP שמציג עיר או שכונה ספציפית ב-H1 מקבל שיעור המרה גבוה משמעותית. אם השירות שלך בפלורנטין — כתוב "פלורנטין" בכותרת. לא "מרכז הארץ".

Quality Score — הציון שקובע את העלות שלך

Google Ads מחשב Quality Score (ציון איכות) לכל Landing Page, בסולם מ-1 עד 10. ציון גבוה (7-10) = עלות נמוכה יותר לקליק ומיקום גבוה יותר בתוצאות. ציון נמוך (1-4) = אתה משלם יותר ומקבל פחות, ולפעמים Google פשוט לא מציג את המודעה בכלל. הציון מושפע בין היתר מה-Landing Page — וזה בדיוק המקום שבו Claude Design יכול לעשות את ההבדל.

גורם ההשפעה על Quality Score איך Claude Design עוזר
Keyword Relevance גבוהה — מילות החיפוש צריכות להופיע בדף Prompt: "כלול את המילים: [מילות המפתח] ב-H1 ובתוכן"
Landing Page Experience גבוהה — Google בודק mobile, מהירות, ניווט Responsive Preview + ייצוא HTML נקי
Expected CTR בינונית — תלוי ב-Ad, לא בדף Message Match בין Ad ל-Hero Section

מה זה אומר בפועל?

עסק ישראלי שמפרסם ב-Google Ads על "עורך דין דיני עבודה תל אביב" עם Quality Score של 3 (נמוך) ישלם כ-25-35 ש"ח לקליק. אותו מפרסם עם Quality Score של 8 (גבוה) ישלם כ-12-18 ש"ח לקליק. על 100 קליקים בחודש — זה ההבדל בין 3,500 ש"ח ל-1,800 ש"ח. ו-Landing Page טוב הוא אחד משלושת הגורמים שקובעים את ה-Quality Score.

הנקודה המעשית: כשתבנה LP ב-Claude Design ל-Google Ads, שלוש הפעולות שמשפיעות על Quality Score הן: (1) שלב את מילות המפתח שלך ב-H1 ובפסקאות התוכן, (2) ודא שהדף נטען מהר (HTML נקי, תמונות קטנות), ו-(3) ודא שהניסיון במובייל חלק. כל שלושת הדברים האלה אפשריים ב-Claude Design בלי שורת קוד אחת.

Landing Page ל-Google Ads — ההבדלים מ-Meta

נקודה Google Ads LP Meta Ads LP
כוונת מבקר חיפוש פעיל — יודע מה רוצה גילוי פאסיבי — גלל ונחשף
כמות טקסט יכול להיות יותר — מחפש מידע פחות טקסט — תפיסת תשומת לב מהירה
מילות מפתח חייבות להופיע ב-H1 ובתוכן פחות קריטי
מהירות טעינה קריטי מאוד (Quality Score) קריטי אבל פחות (עבור מדדי Meta)
Desktop 50-60% מהגישה — חשוב 15% בלבד — פחות קריטי
Prompt: LP ל-Google Ads עם Keyword Integration
צור Landing Page HTML ל-Google Ads.

מילות המפתח שמחפשים: [הכנס מילות מפתח מ-Keyword Planner]
לדוגמה: "קורס יוגה תל אביב", "שיעורי יוגה למתחילות", "יוגה פלורנטין"

דרישות:
- H1 חייב לכלול: "[מילת מפתח ראשית]"
- כותרת Meta (title tag): "[מילת מפתח] — [שם עסק]"
- Hero Section: תשובה ישירה ל"מה מחפש המשתמש"
- תוכן מעט יותר מפורט מ-Meta Ads LP
- טופס לידים: שם + טלפון + "מה הניסיון שלך עם יוגה?" (שאלת סינון)
- Responsive, RTL מלא, Heebo
        
עשה עכשיו 4 דקות

לך ל-Google ותחפש: "[השירות שלך] + [עיר שלך]". בדוק את 3 התוצאות הממומנות הראשונות. לחץ על LP של כל אחת. שאל עצמך: "האם המסר ב-Ad תואם מה שרואים ב-LP?" ו"האם מילת החיפוש מופיעה ב-H1?". רשום תצפיות — תשתמש בהן לשיפור ה-LP שלך.

בינוני 15 דקות חינם תרגול

RTL ב-Landing Pages — בעיות ופתרונות

Landing Pages עם עברית מחייבים טיפול מיוחד ב-RTL — מיוחד גם בהשוואה למה שכבר ראית בפרקים הקודמים. Claude Design מטפל ב-RTL בצורה טובה — אבל לא מושלמת, בעיקר כי HTML הוא סביבה דינמית שנראית שונה בכל דפדפן. ב-HTML export, בעיות RTL מופיעות לעיתים שלא הופיעו בממשק. לפניך 7 הבעיות הנפוצות ביותר ופתרונן — שמור את הרשימה הזו כ-checklist צמוד.

RTL Fix Sheet — 7 בעיות ופתרונות

# בעיה איך זה נראה תיקון ב-Prompt
1 כיוון טקסט שגוי עברית מתחילה משמאל, משפטים הפוכים "הוסף `dir='rtl'` ל-html element ו-`text-align: right` לגוף"
2 כפתור CTA בצד שמאל הכפתור מוצב שמאלה במקום ימינה "הזז את כפתור ה-CTA לצד ימין בדף RTL. השתמש ב-flex-direction: row-reverse"
3 מספרים הפוכים "340+" מוצג כ-"+340" (לא נכון) "עטוף מספרים בתגית `<span dir='ltr'>340+</span>`"
4 כוכבים (★) בצד הלא נכון כוכבי דירוג מוצגים אחרי המספר, לא לפניו "סדר כוכבים: `★★★★★ 4.9` — הכוכבים ראשונים"
5 תמונה ב-Hero בצד שגוי תמונה בצד שמאל, טקסט בצד ימין (הפוך ל-RTL) "ב-RTL: תמונה בצד ימין, טקסט בצד שמאל. `flex-direction: row-reverse` ב-hero container"
6 פסיקים ונקודות לא נכונים "קורס 12 שיעורים, 890 ₪" מוצג לא כסדר "בדוק BiDi markers — הוסף `&lrm;` לפני מספרים לאחר עברית"
7 אייקונים בצד שגוי אייקון ✓ מופיע בצד שמאל של הטקסט "אייקונים ב-RTL: `margin-left` במקום `margin-right`. `<i>` תגית לפני הטקסט"

RTL ב-LP לעומת RTL ב-One-Pager — מה שונה?

בפרק 5 כבר נתקלת ב-RTL ב-One-Pagers, אבל Landing Pages מציבים אתגרים נוספים שלא קיימים במסמכים סטטיים:

אתגר RTL One-Pager (PDF) Landing Page (HTML)
כיוון טקסט נקבע פעם אחת — PDF "קפוא" תלוי בדפדפן, גרסת OS, ושפת מערכת ההפעלה
מספרי טלפון מוצגים כתמונה חייבים להיות קליקביליים עם `tel:` link — BiDi חשוב
Flexbox/Grid לא רלוונטי — layout מוגדר `flex-direction: row` מתהפך ב-RTL — חייבים לבדוק
טפסים לא קיימים שדות input צריכים `dir` ייחודי — עברית RTL, טלפון LTR
Responsive גודל קבוע CSS Breakpoints חייבים לשמור RTL בכל רזולוציה

הנקודה: אם ה-RTL שלך עבד ב-One-Pager, זה לא אומר שהוא יעבוד ב-LP. ב-HTML, הדפדפן מפרש את ה-CSS — ולכל דפדפן יש התנהגות קצת שונה ב-RTL. ה-RTL Fix Sheet שלהלן הוא ה-checklist שלך.

Prompt לתיקון RTL כולל

Prompt: RTL Full Fix לאחר Export
יש לי HTML של Landing Page בעברית. בדוק ותקן את כל בעיות ה-RTL הבאות:
1. html element מכיל `dir="rtl" lang="he"`
2. כל הטקסט מיושר ימינה
3. Flex containers הפוכים נכון ל-RTL
4. מספרים עם `dir="ltr"` inline
5. כוכבי דירוג לפני המספר
6. כפתורים בצד ימין
7. padding/margin הפוכים (padding-right ↔ padding-left)

[הדבק את ה-HTML]
        
עשה עכשיו 4 דקות

פתח את קובץ ה-HTML שייצאת. בדוק שלוש נקודות מהרשימה למעלה: 1) האם `dir="rtl"` קיים ב-html tag? 2) האם מספרים (כמו "890 ש"ח") מוצגים נכון? 3) האם הכפתור בצד ימין? רשום מה מצאת. אם יש בעיה — הכנס ל-Claude Design ובקש תיקון לפי הטבלה.

טעות נפוצה: RTL "נראה בסדר בממשק" — שבור ב-HTML

Claude Design מציג RTL נכון בממשק — אבל כשמייצאים ל-HTML, לפעמים ה-CSS שנוצר לא כולל את ה-RTL declarations המתאימות. לכן: תמיד בדוק RTL אחרי ייצוא ב-HTML, לא רק ב-preview של Claude Design. פתח את קובץ ה-HTML בדפדפן ועבור על כל סקשן.

טעות נפוצה: לא לבדוק ב-mobile אמיתי

Responsive Preview ב-Claude Design הוא סימולציה — לא בדיקה אמיתית. תמיד פתח את ה-HTML על טלפון אמיתי לפני שעולים לאוויר. שלח לעצמך ב-WhatsApp ופתח. בדוק ידנית. גולל, לחץ, מלא טופס. RTL שבור שנראה "בסדר" בסימולציה ייראה שבור ב-iPhone אמיתי.

תרגיל 1: Landing Page מלא לעסק ישראלי — "קסמה יוגה"

זמן: 35-45 דקות | תוצר: Landing Page HTML מלא עם 7 סקשנים

  1. הגדרת העסק (3 דקות): אם יש לך עסק — השתמש בו. אם לא — השתמש ב"קסמה — קורסי יוגה ופילאטיס בפלורנטין". קבע: מה הפעולה האחת שרוצים מהמבקר? (לדוגמה: "השאירי פרטים לשיעור ניסיון חינם")
  2. Hero Prompt (5 דקות): השתמש ב-Prompt "5 וריאציות כותרת" שלמדת בסקשן 4. שלח ל-Claude Design, בחר את הכותרת הטובה ביותר
  3. LP שלם — One Shot (10 דקות): השתמש ב-Prompt הראשי מסקשן 3 עם פרטי העסק שלך. שלח ל-Claude Design וקבל LP שלם
  4. Iteration — תיקון 3 דברים (8 דקות): בדוק את התוצאה. שלח 3 בקשות תיקון ממוקדות (כל אחת בנפרד): צבע, ניסוח כותרת, מיקום כפתור
  5. Responsive בדיקה (5 דקות): פתח Responsive Preview. בדוק mobile. אם יש בעיה — תקן
  6. ייצוא HTML (3 דקות): Export → HTML. פתח בדפדפן. בדוק 5 הנקודות מהסקשן "HTML Export"
  7. RTL בדיקה (5 דקות): עבור על 7 בדיקות ה-RTL מהטבלה. רשום כל בעיה שמצאת

תוצר מצופה: קובץ HTML של Landing Page עם שם, Hero Section, Social Proof, Testimonials, טופס ליד, ו-Footer — שנפתח בדפדפן ונראה נכון ב-RTL. תוצר זה הוא הבסיס לתרגיל 3.

תרגיל 2: LP מותאם לקמפיין Meta Ads + Google Ads

זמן: 25-30 דקות | תוצר: שתי גרסאות LP — אחת למטא, אחת לגוגל

  1. הגדרת קמפיין (3 דקות): בחר קמפיין Meta אחד ו-Google Ads אחד לאותו שירות. רשום: מה הטקסט של ה-Ad? מה מילת המפתח ב-Google?
  2. גרסת Meta (10 דקות): השתמש ב-Prompt "LP מותאם Meta Ads" מסקשן 10. שנה: Hero text = טקסט ה-Ad. ייצא HTML נפרד ושמור כ-`lp-meta.html`
  3. גרסת Google (10 דקות): השתמש ב-Prompt "LP ל-Google Ads" מסקשן 11. שנה: H1 = מילת המפתח הראשית. ייצא HTML נפרד ושמור כ-`lp-google.html`
  4. השוואה (5 דקות): פתח שני הקבצים זה לצד זה. רשום 3 הבדלים שראית בין הגרסאות

תוצר מצופה: שני קבצי HTML נפרדים — `lp-meta.html` ו-`lp-google.html` — עם Message Match נכון לכל ערוץ. שים לב — ייתכן שהשירות זהה אבל הניסוח שונה. זה תקין ורצוי: כל ערוץ מדבר בשפה שונה ללקוח שמגיע בכוונה שונה.

תרגיל 3: הכנת Handoff ל-Claude Code

זמן: 20-25 דקות | תוצר: תיקיית Landing Page מוכנה + Handoff Prompt

  1. ארגון קבצים (5 דקות): צור תיקייה חדשה בשם העסק. הכנס לתוכה: `index.html`, תיקיית `images/` (אפילו ריקה לעת עתה)
  2. בדיקת HTML אחרונה (5 דקות): פתח `index.html` בדפדפן. עבור על checklist ה-12 נקודות Responsive מסקשן 7. רשום מה עוד צריך תיקון
  3. כתיבת Handoff Prompt (5 דקות): מלא את תבנית ה-Handoff Prompt מסקשן 9 עם הפרטים שלך (אימייל, Pixel ID אם יש, מה רוצים להוסיף)
  4. תיעוד (5 דקות): צור `README.txt` בתוך התיקייה עם המידע הבא:
    • שם העסק
    • URL המיועד
    • מה עוד צריך להוסיף (טופס פעיל, Pixel, אנימציות)
    • שם המקמפיינים שמפנים לדף
  5. Preview ללקוח (5 דקות): פתח את `index.html`, צלם screenshot (או שלח את הקובץ ישירות), ושלח ללקוח בוואטסאפ עם ההודעה: "זו גרסת Preview — אשר ניסוח וצבעים לפני שנעבור לפיתוח"

תוצר מצופה: תיקייה מסודרת עם `index.html` + `README.txt` + Handoff Prompt מוכן — מוכן לשלב Claude Code בפרק 11.

שגרת עבודה — Landing Pages

בנוסף לשגרת הבסיס מפרקים 3-5 (one-pager שבועי, iteration יומית):

תדירות משימה זמן
יומי בדוק conversion rate של LP פעיל (כמה פנו מהדף?) 2 דקות
יומי אם LP פעיל — בדוק שהדף עולה תקין (לא "פח" 404) 1 דקה
שבועי A/B: שנה אלמנט אחד ב-LP (כותרת, צבע כפתור, טקסט CTA) ובדוק אחרי שבוע 20 דקות
שבועי אם יש קמפיין פעיל — בדוק Message Match בין מודעה ל-LP 10 דקות
שבועי קרא 2-3 testimonials חדשים מלקוחות — שקול להוסיף לדף 10 דקות
חודשי בדוק LP על מכשיר mobile חדש — בנייד אמיתי, לא בסימולציה 15 דקות
חודשי עדכן Social Proof — מספר לקוחות, ביקורות חדשות, תאריכי testimonials 20 דקות
חודשי בדוק מהירות טעינה עם Google PageSpeed Insights — שמור מעל 80 ב-mobile 10 דקות
אם אתם עושים רק דבר אחד מהפרק הזה 45 דקות

בנו Landing Page מלא לשירות אחד של העסק שלכם — עם Hero, Testimonials וטופס — וייצאו אותו ל-HTML. גם אם עוד לא חיברתם טופס, גם אם עוד לא עשיתם deploy — שלחו ללקוח אחד כ-preview וקבלו פידבק. הפעולה הזו לבדה תלמד אתכם יותר מכל הסקשנים בפרק.

בדוק את עצמך — 5 שאלות
  1. למה Landing Page מייצר יותר לידים מ-Homepage, למרות שה-Homepage מכיל יותר מידע?
    (רמז: חשוב על מה מסיח דעת מהפעולה הרצויה)
  2. מדוע CTA צריך להופיע שלוש פעמים בדף, ולא רק פעם אחת בתחתית?
    (רמז: חשוב על מבקרים שגולשים לנקודות שונות בדף)
  3. מה ההבדל בין Landing Page ל-Meta Ads לבין LP ל-Google Ads, ואיך הוא בא לידי ביטוי בעיצוב ובתוכן?
    (רמז: חשוב על כוונת המשתמש שמגיע מכל ערוץ)
  4. למה בדיקת RTL בממשק Claude Design לא מספיקה, ומה חייבים לבדוק נוסף עליה?
    (רמז: מה ההבדל בין preview בממשק לבין HTML שרץ בדפדפן?)
  5. מה ה-Quality Score ב-Google Ads, ואיך Landing Page שאתה בונה ב-Claude Design יכול להשפיע עליו לטובה?
    (רמז: שלושה גורמים — Keyword Relevance, Landing Page Experience, Expected CTR)

4/5 תשובות נכונות = עברת את הפרק בהצלחה.

סיכום הפרק

Landing Page הוא לא "אתר" — הוא כלי ממיר שתוכנן לפעולה אחת ויחידה. הבנה זו היא ההבדל בין קמפיין שמוציא כסף לבין קמפיין שמחזיר אותו. כשבנית Hero Section עם כותרת שמדברת על תוצאה (לא תכונה), כשהוספת Testimonials עם שמות ופרטים ספציפיים, וכשסידרת שלושה CTAs לאורך הדף — יצרת מנגנון המרה שעובד, לא עיצוב שנראה טוב.

הנקודה הטכנית שהכי חשוב לזכור: RTL ב-HTML export הוא לא "יעשה לבד". הוא דורש בדיקה אקטיבית — על דפדפן אמיתי, על נייד אמיתי — ולא רק ב-preview של Claude Design. שבע הבעיות הנפוצות ב-RTL Fix Sheet הן תמיד רשימת הבדיקה שלך לפני שכל Landing Page עולה לאוויר.

ה-Handoff Prompt שכתבת בתרגיל 3 הוא הגשר לשלב הבא: בפרק 7 תלמד לבנות Design System מלא שיהפוך כל Landing Page שתייצר לאחיד ומקצועי — ותוכל לייצר עשרה LPs לעשרה לקוחות שונים בלי שיראו זהים ובלי שתתחיל מאפס בכל פרויקט.

רשימת סיום — פרק 6
→ פרק 5: One-Pagers ומסמכי שיווק פרק 7: Design Systems ב-Claude Design ←