שלב 3: כללי זהב לדף נחיתה/אתר שממיר
לפני שמתחילים לבנות, חשוב להכיר כמה עקרונות בסיסיים. והנה החלק הטוב: אתם לא צריכים לזכור את כל זה בעל פה. פשוט תגידו ל-Claude Code: "תוודא שהדף עומד בכל כללי ההמרה והעיצוב הנכונים", והוא ידאג לביצוע. אבל ככל שתבינו יותר מה עובד, התוצאה תהיה טובה יותר.
7 הכללים שעושים את ההבדל
- מעל ה-fold - 3 שניות להרשים - מה שהמבקר רואה בלי לגלול חייב לכלול: כותרת ברורה שמסבירה מה אתם מציעים, ולמה כדאי להישאר. אם זה לא ברור תוך 3 שניות, הוא יצא. דוגמה גרועה: "ברוכים הבאים לאתר שלנו". דוגמה טובה: "שירותי אינסטלציה 24/7 בתל אביב - מגיעים תוך 30 דקות"
- כפתור פעולה (CTA) בולט - "שלח" זה לא מספיק. "קבלו הצעת מחיר חינם" זה כבר סיבה ללחוץ. שימו כפתור כזה למעלה, ועוד פעם למטה. הכפתור צריך לבלוט מכל השאר בצבע שונה
- פחות זה יותר - אל תדחסו. רווחים בין החלקים, טקסט קצר וברור, מקסימום 2-3 צבעים. דף נחיתה הוא לא ויקיפדיה
- תוכיחו שסומכים עליכם - ביקורות של לקוחות, מספרים (15+ שנות ניסיון, 500+ פרויקטים), לוגואים של שותפים. אנשים לא משאירים פרטים לזרים
- מובייל קודם - 70% מהאנשים יראו את הדף מהטלפון. אם הכפתורים קטנים מדי או שצריך לזום כדי לקרוא, איבדתם אותם
- מהירות טעינה - אם הדף לוקח יותר מ-3 שניות לטעון, מחצית מהמבקרים עוזבים. תמונות קלות, קוד נקי, בלי סקריפטים מיותרים. Vercel + Next.js (מה ש-Claude Code בונה) כבר דואגים לרוב הדברים האלה
- טופס קצר - כל שדה נוסף בטופס מפחית את ההמרה ב-7-10%. שם, טלפון, ומייל - זה מספיק. את השאר תשאלו בשיחת הטלפון
בונים אתר שלם? תוסיפו גם: תפריט ניווט ברור (עד 7 פריטים), עיצוב אחיד בכל העמודים, עמוד "אודות" אנושי עם תמונה שלכם, ופוטר עם טלפון, מייל וכתובת בכל עמוד.
איך מתרגמים את כל זה עם Claude Code?
פשוט מתארים מה אתם רוצים בעברית רגילה. הנה כמה דוגמאות לפרומפטים:
לדף נחיתה:
"בנה לי דף נחיתה מקצועי לעסק של [התחום שלכם]. עיצוב נקי ומודרני. הדף בעברית מימין לשמאל. למעלה כותרת חזקה עם כפתור 'השאירו פרטים'. אחרי זה סקשן שירותים עם אייקונים, סקשן ביקורות לקוחות, וטופס יצירת קשר. צבעים: [הצבעים שבחרתם ב-Stitch]. תוסיף את העיצוב שצירפתי כהשראה."
לאתר שלם:
"בנה לי אתר מקצועי ל[סוג העסק שלכם]. 5 עמודים: דף ראשי, שירותים, אודות, בלוג, יצירת קשר. עיצוב מודרני ונקי, בעברית מימין לשמאל. תפריט ניווט למעלה, פוטר עם פרטי קשר למטה. צבעים: [צבעים]. בדף הראשי: כותרת חזקה, שלושה שירותים מרכזיים, ביקורות לקוחות, וכפתור CTA."
Claude Code מבין מה אתם רוצים ובונה את זה. אם משהו לא מוצא חן בעיניכם, פשוט תגידו: "תגדיל את הכותרת", "תשנה את הצבע של הכפתור", "תוסיף עוד רווח בין החלקים". אפשר לשאול אותו הכל.
לא בטוחים מה לבקש? פשוט תגידו ל-Claude Code:
"אני רוצה לבנות [דף נחיתה / אתר] ל[סוג העסק]. אני לא יודע מאיפה להתחיל. תשאל אותי שאלות על העסק שלי ותנחה אותי שלב אחרי שלב."
הוא ישאל אתכם מה העסק עושה, מי קהל היעד, מה המטרה של האתר, ויבנה הכל לפי התשובות. אתם לא צריכים להגיע עם תוכנית מוכנה.
שלב 4: הגדרת החשבונות (15 דקות, פעם אחת)
זה השלב הכי "טכני" במדריך, ואחריו הכל חלק. כל חשבון לוקח 2-3 דקות. ואם אתם מרגישים שאתם נתקעים, תפתחו Claude Code ותבקשו ממנו: "אני צריך לפתוח חשבון ב-[שם הכלי], תנחה אותי".
1. חשבון GitHub
- היכנסו ל-github.com
- לחצו Sign Up
- הכניסו מייל, סיסמה, ושם משתמש (באנגלית, קצר וברור)
- אשרו את המייל
- זהו. לא צריך לעשות שום דבר אחר. Claude Code ייצור לכם את הריפו כשנגיע לשלב הבנייה
2. חשבון Vercel
- היכנסו ל-vercel.com
- לחצו Sign Up
- בחרו "Continue with GitHub" - ככה Vercel כבר מחובר ל-GitHub שלכם, בלי הגדרות נוספות
- אשרו את ההרשאות
- זהו. Vercel מוכן
3. חשבון Supabase
- היכנסו ל-supabase.com והתחברו עם GitHub
- צרו פרויקט חדש (שם באנגלית, בחרו Region קרוב כמו West EU)
- אחרי דקה, היכנסו ל-Settings > API והעתיקו את ה-Project URL וה-anon key
- שמרו אותם. Claude Code יבקש אותם כשנחבר את הטופס
4. התקנת Claude Code
שתי אפשרויות:
- האפשרות הקלה - הורידו את Claude Desktop מ-claude.ai. זו אפליקציה רגילה למחשב
- האפשרות המתקדמת - התקינו Claude Code דרך הטרמינל (שורת פקודה). נותן יותר שליטה, אבל לא חובה
לא בטוחים מה מתאים לכם? המדריך המלא על Claude Code מסביר את שתי האפשרויות.
שלב 5: בנייה מעשית - מההתחלה ועד אתר חי
הגענו לחלק המרגש. הכל מוכן, בואו נבנה.
שלב 5.1: יצירת הפרויקט
פתחו את Claude Code ואמרו מה אתם רוצים. אם השתמשתם ב-Stitch, צרפו את העיצוב. אם לא, פשוט תארו בעברית.
Claude Code ייצור את כל מבנה הפרויקט, יבנה את הדף/האתר, ויראה לכם תצוגה מקדימה. אם משהו לא בדיוק, פשוט אמרו מה לשנות.
דוגמאות לבקשות שינוי:
- "הכותרת קטנה מדי, תגדיל אותה"
- "הצבע של הכפתור לא מספיק בולט, תעשה אותו כתום"
- "תוסיף סקשן עם מספרים - 15 שנות ניסיון, 500 פרויקטים, 98% שביעות רצון"
- "הטופס צריך להיות יותר למעלה"
- "תוסיף אנימציה עדינה כשגוללים למטה"
- "תוסיף עמוד אודות עם הטקסט הזה: [טקסט]"
אפשר לשנות ולתקן כמה שרוצים. Claude Code לא מתעייף ולא נעלב. ככל שתהיו יותר ספציפיים, התוצאה תהיה יותר טובה.
שלב 5.2: חיבור הטופס ל-Supabase
כשהעיצוב מוכן, הגיע הזמן לחבר את הטופס. אמרו ל-Claude Code:
"תחבר את הטופס ל-Supabase. ה-URL של הפרויקט הוא [URL שהעתקתם] וה-anon key הוא [key שהעתקתם]. כל ליד שנכנס צריך להישמר בטבלה עם שם, טלפון, מייל, ותאריך."
Claude Code יעשה הכל: ייצור את הטבלה ב-Supabase, יכתוב את הקוד שמחבר את הטופס, ויוסיף הודעת תודה אחרי שליחה מוצלחת.
רוצים עוד? אפשר לבקש מ-Claude Code:
- "תוסיף שליחת מייל אוטומטי ללקוח אחרי שממלא טופס"
- "תוסיף הודעת וואטסאפ אוטומטית אליי כשנכנס ליד"
- "תוסיף ולידציה לטופס - שהטלפון יהיה בפורמט ישראלי"
שלב 5.3: העלאה לאוויר
אמרו ל-Claude Code: "תעלה הכל ל-GitHub". הוא יעשה push לריפו. Vercel מזהה את השינוי אוטומטית ומתחיל לבנות את האתר.
תוך דקה-שתיים תקבלו לינק חי. זה האתר שלכם, באוויר, מוכן לקבל מבקרים.
רוצים דומיין משלכם? אמרו ל-Claude Code: "אני רוצה לחבר את הדומיין sheli.co.il ל-Vercel, תנחה אותי". הוא יסביר צעד אחרי צעד איפה להגדיר את ה-DNS.
שלב 5.4: בדיקות לפני שמפיצים
לפני שאתם שולחים את הלינק לעולם, תבדקו:
- מלאו את הטופס בעצמכם - וודאו שהנתונים מגיעים ל-Supabase
- בדקו בטלפון - לא בסימולטור, בטלפון האמיתי שלכם. לחצו על כפתורים, מלאו טופס, גללו
- בדקו מהירות - האתר צריך לעלות תוך 2-3 שניות. אם זה איטי, אמרו ל-Claude Code: "הדף איטי, תבדוק ותשפר את המהירות"
- בדקו שכל הלינקים עובדים - טלפון (שזה באמת מתקשר), וואטסאפ, ניווט בין עמודים
- תנו למישהו אחר לנסות - בן/בת זוג, חבר, עובד. עיניים חדשות תופסות בעיות שאתם כבר לא רואים
שלב 6: מה עושים אחרי שהאתר באוויר
Google Analytics - אמרו ל-Claude Code: "תוסיף Google Analytics עם ה-ID הזה: G-XXXXXXXXXX". בלי זה אתם לא יודעים כמה אנשים נכנסים ומאיפה. אין לכם עדיין? Claude Code ינחה אתכם איך לפתוח חשבון.
Facebook Pixel - אם אתם מריצים מודעות, חיבור Pixel חובה. אמרו ל-Claude Code: "תוסיף Facebook Pixel עם ה-ID הזה: [ID]".
עדכונים שוטפים - רוצים לשנות טלפון? לעדכן מחירים? להוסיף עמוד? פותחים Claude Code, אומרים מה לשנות, ותוך דקה האתר מעודכן. בלי מעצב, בלי תשלום נוסף, בלי תלות באף אחד.
טעויות נפוצות - מה לא לעשות
- יותר מדי טקסט - דף נחיתה הוא לא מאמר. כל משפט צריך לעבוד קשה. אם אפשר להוריד מילה בלי לאבד משמעות, תורידו. כלל אצבע: אם צריך לגלול יותר מ-4-5 מסכים, הדף ארוך מדי
- CTA חלש או מוסתר - "שלח" זה לא CTA טוב. "קבלו הצעת מחיר תוך שעה" זה כן. הכפתור צריך להיות הדבר הכי בולט בדף, ולהופיע לפחות 2-3 פעמים
- טופס ארוך מדי - שם, טלפון, מייל. זה מספיק. כל שדה נוסף הורג המרה
- התעלמות ממובייל - תבדקו את הדף בטלפון האמיתי שלכם. לא בכלי הדמיה של דפדפן, בטלפון
- תמונות כבדות - תמונה של 3MB שלוקח 5 שניות לטעון הורגת לכם את הדף. אמרו ל-Claude Code: "תוודא שכל התמונות אופטימיזיות ובפורמט WebP"
- בלי אלמנטי אמינות - ביקורות אמיתיות, מספרים, הסמכות, לוגואים. אנשים לא משאירים פרטים לזרים
- כותרת גנרית - "ברוכים הבאים לאתר שלנו" לא אומרת כלום. "שירותי שרברבות 24/7 בתל אביב - מגיעים תוך 30 דקות" אומרת הכל
- בלי מעקב - Google Analytics ו-Facebook Pixel מהיום הראשון. בלי נתונים, אתם עיוורים
- מנסים לעשות הכל לבד - בשביל זה יש Claude Code. אם אתם נתקעים, תגידו לו "אני נתקע, תנחה אותי". אם אתם לא יודעים מה חסר, תגידו "תסתכל על האתר ותגיד לי מה אפשר לשפר". הוא שם בשביל זה
שאלות נפוצות
כמה זה עולה בסך הכל?
Claude Pro: $20/חודש (חובה). GitHub, Vercel, Supabase: חינמי. דומיין: 50-100 ש"ח לשנה (אופציונלי). סה"כ: כ-75 ש"ח לחודש, או חינמי אם יש לכם כבר מנוי Claude.
אני צריך לדעת לתכנת?
לא. בכלל לא. אתם מדברים עם Claude Code בעברית רגילה והוא עושה הכל. אם בא לכם להבין מה הוא עושה, שאלו אותו: "תסביר לי מה עשית ולמה, בשפה פשוטה". הוא יסביר.
כמה זמן לוקח לבנות דף נחיתה?
דף נחיתה בסיסי: 30-60 דקות. אתר שלם עם 5 עמודים: 2-3 שעות. הגדרת חשבונות (פעם ראשונה): 15 דקות. ככל שתתרגלו, זה הולך מהר יותר.
מה אם אני רוצה לשנות משהו אחרי שהאתר באוויר?
פותחים Claude Code, אומרים מה לשנות, והוא מעדכן. תוך דקה האתר החדש באוויר. אפשר לשנות כמה שרוצים, בלי עלות נוספת.
האם האתר יהיה ברמה של אתר מקצועי?
כן. Claude Code בונה אתרים עם Next.js, שזה אותו כלי שחברות כמו Nike, Netflix ו-Notion משתמשות בו. האתר יהיה מהיר, מותאם למובייל, עם קוד נקי.
אני נתקע ולא מצליח, מה עושים?
שלושה דברים:
- אמרו ל-Claude Code: "אני נתקע ב-[מה שלא עובד], תנחה אותי צעד אחרי צעד"
- שאלו בקהילה שלנו - יש שם אנשים שעברו את אותו תהליך
- שלחו הודעה בקבוצת הוואטסאפ - תקבלו תשובה מהירה
סיכום - מהרעיון לאתר חי
בואו נסכם את כל התהליך:
- עיצוב - Google Stitch (או תיאור מילולי ל-Claude Code)
- פתיחת חשבונות - GitHub, Vercel, Supabase (15 דקות, פעם אחת)
- בנייה - מדברים עם Claude Code ומתארים מה רוצים
- חיבור טופס - Claude Code מחבר ל-Supabase
- העלאה לאוויר - push ל-GitHub, Vercel מעלה אוטומטית
- בדיקות - מובייל, טופס, מהירות, לינקים
- מעקב - Google Analytics ו-Facebook Pixel
כל הכלים חינמיים מלבד מנוי Claude ($20/חודש). והתוצאה לא נופלת מאתרים שעולים אלפי שקלים.
הדבר הכי חשוב לזכור: אתם לא לבד בתהליך הזה. Claude Code הוא לא רק כלי בנייה, הוא גם מדריך. בכל שלב שאתם לא בטוחים, תבקשו ממנו שינחה אתכם. הוא יסביר, ישאל שאלות, ויוביל אתכם עד שהאתר מושלם.
אגב, אם אתם רוצים לראות עוד מדריכים כאלה, כלים חדשים שיוצאים כל שבוע, וטיפים מעשיים - הצטרפו לקבוצת הוואטסאפ שלנו. שם אנחנו משתפים את מה שבאמת עובד, בלי בולשיט.