למה דף נחיתה טוב שווה יותר מכל מודעה
אתם יכולים לשפוך אלפי שקלים על מודעות בגוגל ובפייסבוק, אבל אם דף הנחיתה שלכם לא עובד - הכסף הולך לפח. דף נחיתה טוב ממיר 5-10% מהמבקרים. דף גרוע? פחות מ-1%. על כל 1,000 מבקרים, זה ההבדל בין 50 לקוחות פוטנציאליים לבין 10.
עד לפני שנה, דף נחיתה מקצועי עלה 3,000-10,000 ש"ח אצל מעצב ומפתח. היום, עם הכלים הנכונים, אתם יכולים לבנות דף נחיתה ברמה גבוהה תוך כמה שעות - בלי לדעת לתכנת, ובעלות של כמעט אפס.
במדריך הזה אני אראה לכם בדיוק איך. צעד אחרי צעד, עם כלים חינמיים, פרומפטים מוכנים להעתקה, והסבר פשוט על כל חלק.
שלב 1: עיצוב עם Google Stitch - לפני שכותבים שורת קוד
מה זה Google Stitch?
Google Stitch הוא כלי עיצוב חדש של גוגל שמאפשר ליצור עיצובים ומוקאפים באמצעות AI. במקום לשבת שעות על Figma או Canva, אתם מתארים מה אתם רוצים - והכלי מייצר עיצוב מקצועי תוך שניות.
למה להתחיל מעיצוב ולא ישר מקוד? כי ככה אתם רואים את התוצאה הסופית לפני שמשקיעים זמן בבנייה. אם משהו לא עובד בעיצוב, קל לשנות. אם משהו לא עובד בקוד - זה כאב ראש.
איך להשתמש ב-Stitch לדף נחיתה
נכנסים ל-Google Stitch ומתארים את דף הנחיתה שאתם רוצים. הנה דוגמה לפרומפט טוב:
"Landing page for a plumber in Tel Aviv. Hero section with a strong headline, trust badges (licensed, insured, 15 years experience), a phone number CTA button, customer testimonials section, services grid with icons, and a contact form. Modern, clean design. Blue and white color scheme. Mobile-first."
כן, באנגלית - Stitch עובד טוב יותר עם אנגלית כרגע. אל תדאגו, הטקסט עצמו יהיה בעברית אחר כך כשנבנה את הדף.
טיפים לתוצאות טובות ב-Stitch
- תהיו ספציפיים - "modern website" זה מעורפל. "Landing page with hero, 3-column features grid, testimonial carousel, and contact form" זה מדויק
- ציינו צבעים - "Blue and gold color scheme" נותן תוצאות הרבה יותר טובות מ-"nice colors"
- תוסיפו industry context - "for a law firm" לעומת "for a skateboard shop" ייתן עיצובים שונים לגמרי
- בקשו מספר גרסאות - תייצרו 3-4 גרסאות ותבחרו את הטובה ביותר
שמרו את העיצוב שבחרתם - תשתמשו בו בשלב הבא כשתבנו עם Claude Code.
שלב 2: מה להגיד ל-Claude Code בשביל UX/UI מעולה
זה החלק הכי חשוב במדריך. Claude Code יכול לבנות דף נחיתה שלם, אבל התוצאה תהיה טובה רק כמו ההוראות שתיתנו לו. הנה בדיוק מה להגיד.
פרומפט הבסיס - תמיד תתחילו מזה
"בנה לי דף נחיתה ב-Next.js עם Tailwind CSS. העיצוב צריך להיות נקי, מודרני, ומקצועי. הדף בעברית, כיוון RTL. תשתמש בפונט Heebo מגוגל. הנה העיצוב שאני רוצה להתבסס עליו: [תצרפו את העיצוב מ-Stitch או תתארו אותו]"
היררכיית טיפוגרפיה - שהטקסט יעבוד
"תשתמש בהיררכיית טיפוגרפיה ברורה: כותרת ראשית H1 גדולה ובולטת (text-4xl או text-5xl, font-bold), כותרות משנה H2 בגודל בינוני (text-2xl או text-3xl), וטקסט גוף קריא (text-lg, leading-relaxed עם line-height נוח). הכותרת הראשית צריכה למשוך את העין מיד."
רווחים ומרחבים - שהדף ינשום
"תשאיר מספיק רווח לבן (whitespace) בין הסקשנים. py-16 או py-20 לפחות בין כל חלק. אל תדחוס אלמנטים אחד על השני. כל סקשן צריך מרחב נשימה. max-w-4xl או max-w-5xl לתוכן כדי שהשורות לא יהיו ארוכות מדי לקריאה."
כפתור CTA חזק
"כפתור ה-CTA הראשי צריך להיות בולט, בצבע קונטרסטי לרקע, עם טקסט פעולה ברור כמו 'השאירו פרטים' או 'קבלו הצעת מחיר'. הכפתור צריך להיות גדול מספיק ללחיצה במובייל (לפחות py-4 px-8), עם hover effect. שימו CTA אחד מעל ה-fold ועוד אחד אחרי כל סקשן מרכזי."
מובייל קודם - 70% מהתנועה מהנייד
"תבנה mobile-first. כל אלמנט צריך להיראות מושלם במובייל לפני שמסתכלים על דסקטופ. טפסים עם שדות בגודל נוח לאצבע, כפתורים גדולים, וטקסט קריא בלי זום. תשתמש ב-grid שמתקפל ל-stack במובייל (grid-cols-1 md:grid-cols-2 lg:grid-cols-3)."
צבעים שעובדים
"תשתמש בפלטת צבעים מצומצמת: צבע ראשי אחד (primary) ושני לניגודיות (accent), עם גוונים של אפור לטקסט ורקע. הצבע הראשי מופיע רק בכפתורי CTA ובאלמנטים שצריכים תשומת לב. אל תשתמש ביותר מ-3 צבעים בולטים. רקע לבן או בהיר מאוד, טקסט כהה."
אלמנטי אמינות - שיסמכו עליכם
"תוסיף סקשן של social proof: ביקורות של לקוחות עם שם ותמונה (או ראשי תיבות), מספרים מרשימים (15+ שנות ניסיון, 500+ פרויקטים, 98% שביעות רצון), ולוגואים של שותפים או הסמכות אם יש. שים את האלמנטים האלה גבוה בדף, קרוב ל-hero section."
מהירות טעינה
"תשתמש ב-next/image עם lazy loading לכל התמונות. פורמט WebP. תגדיר width ו-height מפורשים לכל תמונה כדי למנוע layout shift. אל תטען פונטים מיותרים, רק Heebo ב-weights 400 ו-700. תמנע מ-JavaScript שחוסם רנדור."
מעל ה-fold - 3 שניות להרשים
"ה-hero section (מה שנראה בלי לגלול) צריך לכלול: כותרת ברורה שמסבירה מה אתם מציעים, תת-כותרת עם הערך ללקוח, כפתור CTA בולט, ואלמנט ויזואלי (תמונה או אייקון). מי שמגיע לדף צריך להבין תוך 3 שניות מה אתם עושים ולמה כדאי לו להישאר."
עברית ו-RTL
"הדף בעברית, כיוון RTL. תגדיר dir='rtl' ו-lang='he' על ה-html. תשתמש ב-logical properties של Tailwind כמו ms/me/ps/pe במקום ml/mr/pl/pr. תבדוק שאייקונים של חצים מצביעים בכיוון הנכון (שמאלה = קדימה ב-RTL). כשיש מספרים או מילים באנגלית בתוך טקסט עברי, עטוף אותם ב-bdi tag."
שלב 3: הכלים - מה כל אחד עושה (בפשטות)
Claude Code - הבנאי
Claude Code הוא הכלי שבונה את הדף בפועל. אתם מתארים מה אתם רוצים בעברית, והוא כותב את כל הקוד. לא צריך לדעת לתכנת. הוא קורא את כל הפרויקט, מבין את המבנה, ומייצר קוד נקי שעובד.
עלות: $20/חודש לתוכנית Pro, או $100/חודש ל-Max שכולל שימוש ב-Claude Code בלי הגבלה. למדריך המלא על Claude Code.
Supabase - בסיס הנתונים והטפסים
חשבו על Supabase כמו אקסל בענן, אבל הרבה יותר חזק. כשמישהו ממלא טופס בדף הנחיתה שלכם, הנתונים נשמרים ב-Supabase. אתם יכולים לראות את כל הלידים בטבלה מסודרת, לייצא לאקסל, או לחבר לכלים אחרים.
למה לא Google Forms? כי Supabase נותן שליטה מלאה. אתם מחליטים איך הטופס נראה, מה קורה אחרי שממלאים אותו (הודעת תודה? הפניה לוואטסאפ?), ואתם לא תלויים בעיצוב של גוגל.
עלות: חינמי לגמרי עד 50,000 שורות ו-500MB. לדף נחיתה, תעברו את זה אם יגיעו אליכם 50,000 לידים. בעיה טובה.
Vercel - האחסון וההעלאה לאוויר
Vercel הוא המקום שבו הדף שלכם חי באינטרנט. זה לא שרת ישן וחשוך - זה CDN גלובלי שמגיש את הדף שלכם מהשרת הקרוב ביותר למבקר. המשמעות: מהירות טעינה מטורפת.
הקסם של Vercel הוא שאתם מחברים אותו ל-GitHub (רגע אסביר מה זה), ובכל פעם שמשהו משתנה - הדף מתעדכן אוטומטית. בלי FTP, בלי העלאת קבצים ידנית, בלי כאב ראש.
עלות: חינמי לפרויקטים אישיים. תשלמו רק אם יש לכם תנועה של מאות אלפי מבקרים בחודש.
GitHub - הגיבוי והשליטה
GitHub זה כמו Google Drive לקוד. כל הקוד של הדף שלכם שמור שם בצורה מסודרת, עם היסטוריה מלאה של כל שינוי. אם משהו נשבר, תמיד אפשר לחזור לגרסה שעבדה.
בפועל, Claude Code מנהל את GitHub בשבילכם. אתם לא צריכים לדעת פקודות Git - הוא דואג לזה.
עלות: חינמי לגמרי.
איך הכל מתחבר?
הזרימה פשוטה:
- אתם מדברים עם Claude Code ומתארים מה אתם רוצים
- Claude Code כותב את הקוד ושומר אותו ב-GitHub
- Vercel רואה שיש שינוי ב-GitHub ומעדכן את הדף באוויר אוטומטית
- כשמישהו ממלא טופס בדף, הנתונים נשלחים ל-Supabase
- אתם רואים את הלידים בלוח הבקרה של Supabase
שלב 4: בנייה מעשית - מההתחלה ועד דף חי באוויר
הכנה (10 דקות)
- פתחו חשבון GitHub - github.com, הרשמה חינמית
- פתחו חשבון Vercel - vercel.com, התחברו עם חשבון ה-GitHub
- פתחו חשבון Supabase - supabase.com, חינמי
- התקינו Claude Code - דרך Claude Desktop (אפליקציה למחשב) או דרך הטרמינל
יצירת הפרויקט (5 דקות)
פתחו את Claude Code ואמרו לו:
"צור לי פרויקט Next.js חדש עם Tailwind CSS ו-TypeScript. תאתחל Git repository ותחבר ל-GitHub repository חדש בשם [שם-הדף-שלכם]."
Claude Code יעשה את כל זה בשבילכם. תוך דקה יש לכם פרויקט מוכן.
בניית הדף (1-2 שעות)
עכשיו תנו ל-Claude Code את הפרומפטים מסעיף 2 למעלה. התחילו מהפרומפט הבסיסי, וצרפו את העיצוב מ-Google Stitch. מומלץ לבנות סקשן אחרי סקשן:
- Hero section - כותרת, תת-כותרת, CTA, תמונה
- שירותים/מוצרים - רשת עם אייקונים
- Social proof - ביקורות, מספרים, לוגואים
- טופס יצירת קשר - שם, טלפון, מייל, הודעה
- Footer - פרטי קשר, לינקים, שעות פעילות
אחרי כל סקשן, בדקו את התוצאה בדפדפן. Claude Code יפעיל לכם שרת מקומי שבו תוכלו לראות את הדף בזמן אמת.
חיבור טופס ל-Supabase (20 דקות)
אמרו ל-Claude Code:
"תחבר את טופס יצירת הקשר ל-Supabase. צור טבלה בשם leads עם עמודות: name, phone, email, message, created_at. תשתמש ב-Server Action של Next.js לשליחה. אחרי שליחה מוצלחת, תציג הודעת תודה ותנקה את הטופס."
תצטרכו להעתיק שני מפתחות מ-Supabase (URL ו-anon key) לקובץ סביבה. Claude Code ידריך אתכם בדיוק איפה למצוא אותם.
העלאה ל-Vercel (5 דקות)
אם חיברתם את Vercel ל-GitHub, זה קורה אוטומטית. כל פעם שתשמרו שינויים ותעלו ל-GitHub (Claude Code עושה את זה בשבילכם), Vercel בונה ומפרסם את הדף מחדש.
אמרו ל-Claude Code:
"תעשה commit ו-push לכל השינויים ל-GitHub."
תוך דקה-שתיים הדף שלכם חי באינטרנט, עם כתובת כמו your-project.vercel.app.
חיבור דומיין (10 דקות)
יש לכם דומיין? בהגדרות של Vercel, לחצו Settings ← Domains, הוסיפו את הדומיין שלכם, ועדכנו את ה-DNS אצל ספק הדומיין (כמו GoDaddy או Cloudflare). Vercel ייתן לכם את הערכים המדויקים להעתקה.
טעויות נפוצות - מה לא לעשות
- יותר מדי טקסט - דף נחיתה הוא לא מאמר. כל משפט צריך לעבוד קשה. אם אפשר להוריד מילה בלי לאבד משמעות, תורידו. כלל אצבע: אם צריך לגלול יותר מ-4-5 מסכים, הדף ארוך מדי
- CTA חלש או מוסתר - "שלח" זה לא CTA טוב. "קבלו הצעת מחיר תוך שעה" זה כן. הכפתור צריך להיות הדבר הכי בולט בדף, ולהופיע לפחות 2-3 פעמים
- טופס ארוך מדי - כל שדה נוסף בטופס מפחית את ההמרה ב-7-10%. שם, טלפון, ומייל - זה מספיק. את השאר תשאלו בשיחת הטלפון
- התעלמות ממובייל - תבדקו את הדף בטלפון. לא בכלי הדמיה של דפדפן, בטלפון האמיתי שלכם. תלחצו על הכפתורים, תמלאו את הטופס, תגללו. אם משהו לא נוח - תתקנו
- תמונות כבדות - תמונה של 3MB שלוקח 5 שניות לטעון הורגת לכם את הדף. השתמשו בפורמט WebP, דחסו תמונות, ותנו ל-next/image לעשות את העבודה
- בלי אלמנטי אמינות - אנשים לא משאירים פרטים לזרים. ביקורות אמיתיות, מספר שנות ניסיון, הסמכות, לוגואים של לקוחות - כל אלה בונים אמון
- כותרת גנרית - "ברוכים הבאים לאתר שלנו" לא אומרת כלום. "שירותי שרברבות 24/7 בתל אביב - מגיעים תוך 30 דקות" אומרת הכל
- בלי מעקב - תחברו Google Analytics ו-Facebook Pixel מהיום הראשון. בלי נתונים, אתם עיוורים. אמרו ל-Claude Code: "תוסיף Google Analytics עם ה-ID הזה: G-XXXXXXXXXX"
סיכום - מהרעיון לדף חי ב-3 שעות
בואו נסכם את התהליך:
- עיצוב (20 דק') - Google Stitch ליצירת מוקאפ ויזואלי
- בנייה (1-2 שעות) - Claude Code בונה את הדף עם הפרומפטים שנתנו
- חיבור טופס (20 דק') - Supabase לקליטת לידים
- העלאה (5 דק') - Vercel מפרסם את הדף אוטומטית
- דומיין (10 דק') - חיבור הכתובת שלכם
סך הכל: כ-3 שעות עבודה, עלות חודשית כמעט אפס (בהנחה שיש לכם מנוי Claude), ודף נחיתה מקצועי שלא נופל מדפים שעולים אלפי שקלים.
החלק הכי טוב? אם רוצים לשנות משהו, פשוט אומרים ל-Claude Code מה לשנות. בלי לחכות למעצב, בלי לשלם על תיקונים, בלי תלות באף אחד.
אגב, אם אתם רוצים לראות עוד מדריכים כאלה, כלים חדשים שיוצאים כל שבוע, וטיפים מעשיים - הצטרפו לקבוצת הוואטסאפ שלנו. שם אנחנו משתפים את מה שבאמת עובד, בלי בולשיט.