עיצוב אתר עם AI: דף נחיתה ואתר למשרד הנדסי, מהרעיון ועד הדומיין
היום אפשר לתאר במילים את האתר שאתם רוצים ולקבל טיוטה עובדת תוך דקות. החלק הקשה כבר לא העיצוב, אלא כל מה שמסביב: איפה האתר יושב, באיזה דומיין, איך גוגל ימצא אותו, ואיך הוא עומד בדרישות הנגישות בישראל. המדריך הזה עובר על הכלים המובילים, מה באמת חינמי, ומה שווה לשלם עליו.
01האנלוגיה: אדריכל מהיר מאוד, אבל בלי היתר בנייה
כלי AI לאתרים הוא כמו אדריכל שמגיש הדמיה יפה תוך עשר דקות. ההדמיה מרשימה, אבל בית עוד אין: צריך מגרש (אחסון), כתובת (דומיין), חיבור לתשתיות (טפסים ומיילים) ואישור אכלוס (נגישות ו-SEO). ה-AI עושה מצוין את השלב הראשון ועוזר מאוד בשאר, אבל מישהו צריך לסגור את כל הקצוות.
02שני מסלולים: חינם או בתשלום
המסלול החינמי: טיוטה ב-AI ואירוח חינמי
- בונים את הדף ב-Claude (Artifact) או ב-Gemini Canvas בחינם, ומקבלים קובץ HTML מלא
- מפרסמים קישור ציבורי ל-Artifact ישירות מ-Claude, טוב לטיוטה ולהצגה ללקוח
- מעלים את קובץ ה-HTML ל-Cloudflare Pages: חינמי, כולל חיבור דומיין משלכם
- לחלופין: אתר ב-Wix או ב-Canva על כתובת משנה חינמית (למשל wixsite.com או my.canva.site)
- Google Search Console ו-Google Business Profile חינמיים, ומספיקים ל-SEO בסיסי
המגבלה: כתובת משנה ומיתוג של הפלטפורמה בתוכניות החינמיות, מכסות הודעות קטנות, ו-Vercel Hobby ו-GitHub Pages אינם מיועדים לאתר עסקי
המסלול בתשלום: AI חזק יותר ודומיין משלכם
כ-20 USD לחודש ל-Claude Pro, ועוד פלטפורמת אתרים לפי הצורך (Wix, Framer, Lovable), ודומיין בכמה עשרות שקלים בשנה
- Claude Pro: כולל Claude Design לעיצוב עם מערכת עיצוב, ו-Claude Code לבניית אתר מלא
- Wix Premium (בערך 17 USD לחודש ומעלה בתשלום שנתי, משתנה לפי מדינה): דומיין, בלי מיתוג Wix
- Framer Basic (כ-10 USD לחודש): דומיין משלכם, CMS קטן ו-SEO מובנה
- Lovable Pro (25 USD לחודש) או Bolt Pro (25 USD לחודש): דומיין, הורדת קוד, יותר קרדיטים
- דומיין co.il דרך רשם מוסמך, כולל תיבת מייל עסקית
מתי שווה לשלם: כשהאתר מייצג עסק אמיתי: דומיין משלכם, טופס פניות, עברית מלאה ועדכונים שוטפים בלי לחכות למתכנת
03הכלים המובילים לבניית אתר עם AI
Claude
Anthropicהכי טוב ל: הכי גמיש: מעיצוב ראשוני ב-Artifact, דרך Claude Design עם מערכת עיצוב, ועד אתר שלם ב-Claude Code שתוכלו לאחסן בכל מקום.
Artifacts כולל תצוגה חיה ופרסום קישור ציבורי, חיפוש ברשת ו-Connectors, במכסה מוגבלת
Pro ב-20 USD לחודש (17 בתשלום שנתי): Claude Design, Claude Code ומכסה גדולה יותר
תוספות שמשפרות 5
- ModeClaude Designעיצוב דפים ואב-טיפוס לפי מערכת העיצוב שלכם, ייצוא ל-HTML או העברה ל-Claude Code.בתשלום
- ModeClaude Codeבונה אתר מלא בתיקייה במחשב, מחבר ל-GitHub ומכין לפרסום.בתשלום
- ConnectorFigmaקורא עיצוב קיים מ-Figma והופך אותו לקוד, או שולח עיצוב ל-Figma.חינם
- ConnectorCanvaיוצר באנרים ותמונות לאתר ושומר אותם בחשבון ה-Canva.חינם
- SettingProjects עם קובץ מותגמעלים לוגו, צבעים ונוסחים פעם אחת, וכל דף חדש יוצא באותו סגנון.כלול
Wix
Wix.comהכי טוב ל: הכי קל למי שלא רוצה לגעת בקוד: AI בונה אתר שלם, עורך גרירה, אחסון, טפסים ותמיכה בעברית מימין לשמאל.
בניית אתר עם AI ופרסום על כתובת wixsite.com עם מיתוג Wix
תוכניות Premium מכ-17 USD לחודש בתשלום שנתי (המחיר משתנה לפי מדינה): דומיין, הסרת מיתוג, תכונות עסקיות
תוספות שמשפרות 3
- ModeAria, סוכן ה-AI של Wixמשנים עיצוב, טקסטים ודפים בשיחה במקום בגרירה.כלול
- Add-onWix Multilingualאתר בעברית ובאנגלית, עם הגדרות מימין לשמאל לכל שפה.כלול
- Add-onדומיין ו-Premiumחיבור דומיין משלכם והסרת המיתוג.בתשלום
Framer
Framerהכי טוב ל: דפי נחיתה יפים במיוחד עם אנימציות, למי שמוכן ללמוד עורך עיצובי.
אתר על כתובת framer, 500 קרדיטים של AI לניסיון, בלי דומיין משלכם
Basic כ-10 USD לחודש, Pro כ-30 USD לחודש: דומיין, CMS, יותר קרדיטים
תוספות שמשפרות 3
- Add-onAI creditsמפעילים את סוכני ה-AI ליצירה ועריכה של דפים.כלול
- Add-onLocalesתרגום האתר לשפות נוספות עם AI, תוסף בתשלום לכל שפה.בתשלום
- Add-onCMSרשימת פרויקטים או מאמרים שמתעדכנת בלי לבנות דף חדש בכל פעם.בתשלום
Lovable
Lovableהכי טוב ל: כשהאתר צריך גם קצת אפליקציה: טופס עם מסד נתונים, אזור לקוחות, מחשבון.
5 קרדיטים ביום ועד 30 בחודש, פרויקטים פרטיים, בלי דומיין משלכם
Pro מ-25 USD לחודש: דומיין, עריכה והורדה של הקוד, הסרת התג, מערכות עיצוב
תוספות שמשפרות 3
- Add-onLovable Cloudצד שרת מובנה לטפסים ולנתונים בלי להקים שרת.כלול
- SettingDesign systemsשומר צבעים ורכיבים קבועים לכל הפרויקטים.בתשלום
- Add-onהורדת קודלוקחים את הקוד לכל אחסון אחר, בלי להיות תלויים בפלטפורמה.בתשלום
v0
Vercelהכי טוב ל: קוד נקי ומודרני (React ו-Next.js) עם פרסום מהיר ל-Vercel.
7 הודעות ביום, Design Mode, סנכרון GitHub ופרסום ל-Vercel
Plus ב-30 USD למשתמש לחודש, כולל קרדיטים חודשיים
תוספות שמשפרות 3
- ModeDesign Modeמתקנים צבעים, טקסטים ומרווחים בלחיצה ולא בפרומפט.חינם
- Add-onGitHub syncשומר את הקוד ב-GitHub עם היסטוריית גרסאות.חינם
- Add-onVercel hostingפרסום בלחיצה; שימו לב שתוכנית Hobby החינמית מיועדת לשימוש אישי ולא מסחרי.בתשלום
Gemini Canvas
Googleהכי טוב ל: טיוטת דף נחיתה מהירה בחינם, עם שיתוף בקישור, טוב גם להפוך דוח מחקר לדף.
Canvas זמין לכל משתמשי Gemini
Google AI Pro: יותר שימוש ומודלים חזקים יותר (בדקו מחיר עדכני)
תוספות שמשפרות 2
- GPT/GemGem עם הנחיות מותגGem קבוע שמכיר את הצבעים, הקהל וסגנון הכתיבה של המשרד.חינם
- ModeDeep Researchמחקר מתחרים ומילות מפתח לפני כתיבת התוכן, ואז הפיכתו לדף.כלול
Canva Websites
Canvaהכי טוב ל: דף פשוט ויפה מתבנית, למי שכבר עובד ב-Canva על פליירים ומצגות.
עד 5 אתרים פעילים על my.canva.site, תבניות של עמוד אחד ומרובי עמודים
Canva Pro: דומיין משלכם, Brand Kit וכלי AI מורחבים (בדקו מחיר עדכני)
תוספות שמשפרות 3
- Add-onBrand Kitלוגו, צבעים ופונטים של המשרד זמינים בכל עיצוב.בתשלום
- Add-onMagic Writeטיוטות טקסט לאתר, כולל ניסוח לקידום בגוגל.כלול
- ConnectorCanva ב-ClaudeClaude יוצר ועורך עיצובים בחשבון ה-Canva שלכם.חינם
04תהליך העבודה: מרעיון לאתר באוויר
- 1בריף ותוכןמי הקהל, מה השירותים, איזו פעולה רוצים מהמבקר, ותמונות אמיתיות
- 2עיצוב עם AIטיוטה ב-Claude, Wix או Framer לפי צבעי המותג
- 3ליטושעברית מימין לשמאל, מובייל, נגישות וטקסטים מדויקים
- 4אחסון ודומייןפרסום בפלטפורמה או ב-Cloudflare Pages וחיבור הדומיין
- 5SEO ומדידהSearch Console, פרופיל עסק בגוגל ובדיקה חוזרת אחרי חודש
05מה אני צריך, ובמה כדאי להשתמש
| הצורך | הכלי המומלץ | למה |
|---|---|---|
| דף נחיתה אחד למוצר או לאירוע | Claude (Artifact) ואירוח ב-Cloudflare Pages | חינמי, קובץ HTML אחד שאתם הבעלים שלו |
| אתר תדמית למשרד, בלי קוד | Wix עם AI | הכל במקום אחד: עורך, אחסון, טפסים, עברית |
| דף מעוצב במיוחד עם אנימציות | Framer | תוצאה ברמת סטודיו, דומיין מכ-10 USD לחודש |
| אתר עם טופס, מסד נתונים או מחשבון | Lovable או Bolt | בונים גם את הצד האפליקטיבי בשיחה |
| עיצוב לפי מערכת עיצוב קיימת | Claude Design או Figma Make | שומרים צבעים, פונטים ורכיבים קבועים |
| כבר יש עיצוב ב-Figma | Claude Code עם Connector של Figma | הופך את העיצוב לקוד אמיתי |
| אתר תוכן עם בלוג ומאמרים | WordPress עם עוזר AI או Claude לכתיבה | ניהול מאמרים, קטגוריות ו-SEO לאורך זמן |
| דף מהיר מתבנית, כמו פלייר | Canva Websites | חינמי על כתובת Canva, מוכר למי שעובד ב-Canva |
| שאלה מהירה או רעיון לעיצוב | ChatGPT או Gemini Canvas | טיוטה ותצוגה מהירה, לפני שמחליטים על פלטפורמה |
06דוגמה: אתר תדמית למשרד מהנדסי קונסטרוקציה
07דוגמה: דף נחיתה למוצר חדש בתוך מערכת העיצוב של החברה
08מה ה-AI לא סוגר לבד: שש בדיקות חובה
אחסון ודומיין
בחרו אחסון שמותר לשימוש עסקי. Vercel Hobby מיועד לשימוש אישי, ו-GitHub Pages אינו מיועד להפעלת עסק. דומיין co.il קונים דרך רשם מוסמך.
SEO בסיסי
כותרת ותיאור לכל דף, כותרות H1 ו-H2 הגיוניות, טקסט alt לתמונות, מהירות טעינה, ורישום ב-Google Search Console ובפרופיל עסק בגוגל.
עברית מימין לשמאל
ודאו ש-lang=he ו-dir=rtl מוגדרים, שהתפריט והחצים הפוכים, ושמספרים ויחידות כמו kN או mm לא מתהפכים. פונטים טובים: Heebo, Assistant, Rubik.
נגישות לפי ת"י 5568
בישראל אתר שנותן שירות לציבור צריך לעמוד בתקן הישראלי ת"י 5568, המבוסס על WCAG 2.0 ברמה AA, ולפרסם הצהרת נגישות. יש פטורים לעסקים קטנים, בדקו עם יועץ נגישות.
מערכת עיצוב ומותג
קובץ אחד עם לוגו, צבעים בקוד HEX, פונטים וטון כתיבה. נותנים אותו לכל כלי AI, וכל הדפים יוצאים אחידים.
טפסים ופרטיות
טופס צריך לשלוח למייל אמיתי ולשמור מידע בצורה מאובטחת. בקשו הסכמה ברורה ואל תאספו יותר מהנדרש.
09להתחיל עכשיו: דף נחיתה ראשון בחצי שעה
- 1
כותבים בריף קצר
חמש שורות: מי אתם, למי האתר, שלושה שירותים, מה המבקר צריך לעשות (להתקשר, להשאיר פרטים), ופרטי קשר.
- 2
מכינים חומרים
לוגו, שני צבעים בקוד HEX, 4 עד 6 תמונות אמיתיות מפרויקטים, ותמונות שיש לכם זכויות עליהן.
- 3
מבקשים טיוטה
ב-Claude או ב-Wix: מדביקים את הבריף ומבקשים במפורש עברית, מימין לשמאל, מובייל ונגישות.
- 4
מתקנים בסבבים קצרים
בקשה אחת בכל פעם: 'הגדל את כפתור יצירת הקשר', 'החלף את התמונה בכותרת'. בודקים בטלפון אמיתי.
- 5
בודקים נגישות ו-SEO
מריצים Lighthouse בדפדפן Chrome, מתקנים ניגודיות ותגיות alt, ומוסיפים הצהרת נגישות.
- 6
מפרסמים ומחברים דומיין
בפלטפורמה עצמה או ב-Cloudflare Pages, ואז רישום ב-Google Search Console.
10פלטפורמת אתרים מול קוד שה-AI כותב
פלטפורמה (Wix, Framer, Canva)
- עורך חזותי, בלי קוד בכלל
- אחסון, אבטחה וטפסים כלולים
- קל להעביר לעובד במשרד לעדכונים
- תשלום חודשי קבוע
- קשה לעבור לפלטפורמה אחרת
קוד (Claude, v0, Lovable, Bolt)
- חופש עיצובי מלא
- אתם הבעלים של הקוד ויכולים לאחסן בכל מקום
- אפשר לארח בחינם לאתר סטטי
- עדכון דורש שוב את ה-AI או מעט ידע
- טפסים ואבטחה צריך לסדר בעצמכם
11שאלות נפוצות
האם אפשר לבנות אתר עסקי בחינם לגמרי?
כמעט. הבנייה עם Claude או Gemini והאירוח ב-Cloudflare Pages חינמיים. הדומיין עולה כסף, ושווה לשלם עליו: כתובת משנה של פלטפורמה נראית פחות מקצועית.
מה התקן לנגישות אתרים בישראל?
התקן הישראלי ת"י 5568, שמבוסס על הנחיות WCAG 2.0, ברמה AA. בנוסף צריך הצהרת נגישות באתר. יש פטורים והקלות לעסקים קטנים לפי מחזור, ולכן כדאי לבדוק עם יועץ נגישות. תוסף סרגל נגישות לבדו לא הופך אתר לנגיש.
של מי הזכויות על אתר שה-AI עיצב?
בדרך כלל אתם יכולים להשתמש בתוצר באופן מסחרי, אבל בדקו את תנאי השימוש של כל כלי. זהירות עם תמונות ולוגואים: השתמשו בתמונות שלכם או ממאגרים ברישיון מתאים, ואל תעתיקו עיצוב של מתחרה.
Wix או Claude, מה עדיף למשרד קטן?
אם מישהו במשרד יעדכן את האתר בעצמו, Wix פשוט יותר. אם אתם רוצים דף מעוצב, זול ובבעלותכם, Claude ואירוח חינמי. אפשר גם לשלב: לעצב טקסטים ומבנה ב-Claude ולבנות ב-Wix.
ה-AI כתב שהמשרד מוסמך לתקן מסוים. זה בסדר?
רק אם זה נכון. AI ממציא לפעמים הסמכות, נתונים ושמות לקוחות. כל עובדה, מספר טכני ותקן בודקים מול המסמך הרשמי לפני פרסום.