למה לקוח מבקש לראות דוגמאות לפני שהוא קונה אתר?
אתם מכירים את הרגע הזה: סיימתם להסביר ללקוח איזה אתר תבנו לו, והוא שואל שאלה אחת, "יש לך דוגמאות של אתרים שעשית?". אם אין לכם מה לפתוח מולו, השיחה נתקעת שם, וזה לא משנה כמה אתם טובים.
זה מה שאמרתי לתלמידים שלי בשיעור: כשאתם באים לבן אדם ורוצים למכור לו אתר או דף נחיתה, כדאי מאוד שיהיה לכם ארסנל של אתרים שכבר בניתם, כי הלקוח יבקש לראות דוגמאות. הוא רוצה לראות בעיניים מה הוא הולך לקבל.
כשיש לכם תיק עבודות של שניים, שלושה, ארבעה פרויקטים, הרבה יותר קל למכור. הלקוח מסתכל ואומר "טוב, וואלה, הוא עושה דברים מאוד יפים", ומשם השיחה כבר עוברת לאתר שלו.
ולא צריך לחכות ללקוח הראשון כדי שיהיה מה להראות. אתרי דוגמה בונים לבד, בבית, ועם קלוד קוד כל אחד מהם מתחיל מפרומפט אחד. בשיעור בנינו ככה אתר מול כולם, ואמרתי שם "אשכרה מפרומפט אחד יש לנו אתר".
מה שחסר אחרי שבניתם כמה אתרים הוא מקום אחד שמרכז אותם, כדי שלא תשלחו ללקוח ארבעה קישורים נפרדים. זה הדף שהפרומפט בעמוד הזה בונה.
מה צריך כדי לבנות אתר תיק עבודות עם קלוד קוד?
קלוד קוד הוא הכלי של אנתרופיק שבונה את האתר על המחשב שלכם. אתם כותבים לו בעברית מה אתם רוצים, והוא כותב את הקוד. אם עוד לא יצא לכם לעבוד איתו, תתחילו מהפוסט מה זה קלוד קוד.
לבניית דף תיק העבודות צריך ארבעה דברים:
- קלוד קוד מותקן: עם מנוי בתשלום לקלוד. בלי מנוי הוא לא עובד.
- תיקייה חדשה וריקה: רק בשביל הדף הזה, כדי שהוא לא יתערבב עם אתרים אחרים שבניתם.
- הפרומפט: הוא מחכה לכם כאן למטה, בעברית, עם כפתור העתקה.
- הפרטים שלכם: שם, משפט אחד על מה שאתם עושים, מספר וואטסאפ ושלוש או ארבע עבודות.
עוד אין לכם עבודות להכניס? זה המצב של רוב מי שמתחיל, ויש על זה חלק שלם בהמשך: איך בונים אתרי דוגמה.
אפשר לעשות את כל זה בלי להיות טכנולוגי, כי את השינויים מבקשים במילים רגילות, כמו שכותבים הודעה לחבר.
הפרומפט לאתר תיק העבודות שלכם
את הפרומפט הזה כתבתי בשבילכם. הוא בונה, בעברית, את הדף ששולחים ללקוח כשהוא מבקש לראות דוגמאות. פותחים תיקייה חדשה בקלוד קוד, ממלאים את הפרטים בסוגריים המרובעים ומדביקים.
הפרומפט המדויק של אתר התלת מימד מהשיעור, יחד עם ספרייה שלמה של פרומפטים לאתרים, נמצא בלשונית "פרומפטים לאתרים" בתוך שיפט.
תבנה לי אתר תיק עבודות אישי בעברית, שאני שולח ללקוח כשהוא מבקש לראות דוגמאות לאתרים שבניתי.
הפרטים שלי (תחליף את מה שבסוגריים; אם השארתי משהו ריק, תשים טקסט זמני ברור ותסמן אותו ברשימה בסוף):
- שם: [השם שלי]
- מה אני עושה במשפט אחד: [בונה אתרים ודפי נחיתה לעסקים קטנים]
- מספר וואטסאפ ליצירת קשר: [0500000000] (בקישור תהפוך אותו לפורמט בינלאומי שמתחיל ב-972)
- העבודות שלי (3 או 4): לכל אחת שם העסק, תחום, משפט אחד על מה שבניתי, וקישור לאתר אם יש:
1. [שם] | [תחום] | [משפט] | [קישור]
2. [שם] | [תחום] | [משפט] | [קישור]
3. [שם] | [תחום] | [משפט] | [קישור]
4. [שם] | [תחום] | [משפט] | [קישור]
טכנולוגיה:
- אתר סטטי פשוט: קובץ index.html אחד עם CSS ו-JavaScript בתוכו, בלי שלב בנייה ובלי ספריות חיצוניות, חוץ מפונט Heebo מ-Google Fonts.
- הכול מימין לשמאל (dir="rtl", lang="he"). מילים באנגלית בתוך טקסט עברי עוטפים כך שלא יתהפכו.
- האתר חייב להיראות טוב גם בטלפון ברוחב 375 פיקסלים וגם במחשב, בלי גלילה לצדדים.
עיצוב:
- רקע בהיר ונקי (לבן שבור), טקסט כהה, וצבע אחד בלבד להדגשות ולכפתורים. תבחר צבע חזק אחד ותשתמש רק בו. (הדוגמאות המצוירות של האתרים יכולות להיות בצבעים של אותו עסק.)
- כותרות גדולות מאוד במשקל כבד, טקסט רגיל בגודל 18 פיקסלים לפחות, הרבה רווח בין החלקים.
- בלי גרדיאנטים, בלי זוהר, בלי אימוג'ים ובלי אייקונים מיותרים. שהעבודות עצמן יהיו הדבר הכי בולט בדף.
- תנועה עדינה בלבד: כל חלק עולה בעדינות כשמגיעים אליו בגלילה, וכרטיס עבודה מתרומם מעט כשעוברים עליו עם העכבר. למי שביקש במערכת פחות תנועה, בלי תנועה בכלל.
מבנה הדף, לפי הסדר:
1. פתיחה: השם שלי, המשפט על מה שאני עושה ככותרת ענקית, שורה קצרה אחת שמזמינה לגלול לעבודות, ומתחתיה כפתור "דברו איתי בוואטסאפ" שפותח שיחה עם ההודעה המוכנה "היי, ראיתי את תיק העבודות שלך ואשמח לשמוע פרטים".
2. העבודות: כרטיס גדול לכל עבודה. בכל כרטיס: תמונה של האתר (אם אין לי תמונה, תצייר בקוד דוגמה פשוטה של חלון דפדפן עם שם העסק, שנראית כמו צילום מסך של אתר, ובשורת הכתובת תכתוב רק את שם העסק בלי להמציא כתובת אתר), שם העסק, התחום, המשפט על מה שבניתי, וכפתור "לצפייה באתר" אם יש קישור. בטלפון הכרטיסים אחד מתחת לשני.
3. איך זה עובד: שלושה שלבים קצרים במילים פשוטות (שיחה קצרה, בונים ומראים לכם, עולים לאוויר).
4. שאלות נפוצות: ארבע שאלות ותשובות קצרות שלקוח שואל לפני שהוא סוגר (כמה זמן זה לוקח, מה אני צריך לתת לך, מה קורה אחרי שהאתר עולה, כמה זה עולה). בתשובה על המחיר תכתוב "תלוי בהיקף, נדבר ואתן הצעה מסודרת", בלי מספרים. אל תמציא התחייבויות בשמי (זמנים, מחירים, אחריות או תיקונים חינם): תכתוב תשובות כלליות ותסמן אותן ברשימה בסוף כדי שאעדכן.
5. סיום: שורה אחת גדולה "רוצים אתר כזה לעסק שלכם?" ושוב כפתור הוואטסאפ.
6. תחתית הדף: השם שלי, השנה, וקישורים ל"מדיניות פרטיות" ו"הצהרת נגישות" (שמצביעים בינתיים על # ומסומנים ברשימה בסוף).
נגישות ואיכות:
- ניגודיות טובה בין טקסט לרקע, כפתורים שאפשר להגיע אליהם עם המקלדת ורואים עליהם פוקוס, טקסט חלופי לכל תמונה.
- כותרת עמוד (title) ותיאור (meta description) בעברית לפי הפרטים שלי.
כשתסיים:
- תפתח את הדף בדפדפן, תצלם אותו ברוחב מחשב וברוחב 375, תסתכל על הצילומים ותתקן מה שנשבר.
- תכתוב לי רשימה קצרה: מה צריך להחליף לפני ששולחים ללקוח (טקסטים זמניים, תמונות, קישורים, מספר הוואטסאפ).מה ממלאים בסוגריים המרובעים?
כל מה שכתוב בפרומפט בתוך סוגריים מרובעים הוא מקום לפרטים שלכם. מחליפים אותו לפני שמדביקים, ואת שאר הפרומפט משאירים כמו שהוא.
- השם שלכם: הוא מופיע בפתיחה של הדף ובתחתית שלו.
- מה אתם עושים, במשפט אחד: המשפט הזה הופך לכותרת הענקית בראש הדף, אז תכתבו אותו פשוט. למשל "בונה אתרים ודפי נחיתה לעסקים קטנים".
- מספר וואטסאפ: כותבים אותו רגיל, כמו שאתם נותנים אותו לאנשים. קלוד הופך אותו בקישור לפורמט בינלאומי.
- העבודות: שלוש או ארבע. לכל אחת שם העסק, התחום, משפט אחד על מה שבניתם, וקישור לאתר אם יש.
השארתם משהו ריק? זה לא תוקע את הבנייה. הפרומפט מבקש מקלוד לשים שם טקסט זמני ברור, ולסמן אותו ברשימה שהוא כותב לכם בסוף.
גם תמונות לא חייבים להכין מראש. כשאין תמונה של אתר, קלוד מצייר בקוד חלון דפדפן עם שם העסק, שנראה כמו צילום מסך. כשיהיה לכם צילום מסך של האתר עצמו, גוררים אותו לחלון של קלוד ומבקשים לשים אותו בכרטיס של אותה עבודה.
מה יוצא מהפרומפט?
יוצא דף אחד בעברית, מימין לשמאל, שמתאים גם לטלפון וגם למחשב. הוא בנוי בסדר הזה:
- פתיחה: השם שלכם, המשפט על מה שאתם עושים ככותרת ענקית, וכפתור "דברו איתי בוואטסאפ" שפותח שיחה עם הודעה מוכנה.
- העבודות: כרטיס גדול לכל עבודה, והן הדבר הכי בולט בדף. אם נתתם קישור, יש גם כפתור "לצפייה באתר".
- איך זה עובד: שלושה שלבים קצרים, משיחה ראשונה ועד שהאתר עולה לאוויר.
- שאלות נפוצות: ארבע שאלות שלקוח שואל לפני שהוא סוגר.
- סיום: השורה "רוצים אתר כזה לעסק שלכם?" ושוב כפתור הוואטסאפ.
- תחתית הדף: השם, השנה, וקישורים למדיניות פרטיות ולהצהרת נגישות.
בדקנו את הפרומפט לפני שהוא עלה לכאן. הדבקנו אותו בשיחה חדשה בקלוד קוד, ויצא דף עובד בעברית: כותרת, ארבעה כרטיסי עבודות עם חלונות דפדפן מצוירים, שלבים, שאלות נפוצות וכפתור וואטסאפ. הדף נפתח בלי גלילה לצדדים ברוחב של מחשב (1280 פיקסלים) וברוחב של טלפון (375).
בסוף הבנייה קלוד פותח את הדף בדפדפן, מצלם אותו ברוחב של מחשב וברוחב של טלפון ומתקן מה שנשבר. אחר כך הוא כותב לכם רשימה קצרה של מה שצריך להחליף לפני ששולחים ללקוח: טקסטים זמניים, תמונות, קישורים ומספר הוואטסאפ.
מה עושים אם עוד אין לכם אתרים להראות?
דף תיק עבודות צריך עבודות. אם כבר בניתם אתרים ללקוחות, תכניסו אותם. אם עוד לא, בונים אתרי דוגמה: שניים, שלושה, ארבעה, ועדיף שכל אחד מהם יהיה מתחום אחר. ככה יש לכם מה להראות גם לסוכן נדל"ן וגם לבעלת סטודיו.
כל אתר דוגמה מתחיל מפרומפט אחד, בתיקייה חדשה ובשיחה חדשה. ככה בנינו בשיעור את האתר שמופיע בראש העמוד הזה.
בשביל אתר בתחום אחר לא חייבים פרומפט חדש. לוקחים פרומפט של אתר שאהבתם ומבקשים מקלוד לשנות לו כיוון. בשיעור לקחנו תבנית של דבורה ופרחים והפכנו אותה לאתר נדל"ן, עם הבקשה הזאת:
תיקח את הפרומפט הזה ובמקום פרחים ודבורה תעשה לי כיוון אחר לגמרי, תעשה כיוון של נדל"ן.
[כאן מדביקים את הפרומפט של האתר]את "פרחים ודבורה" מחליפים בנושא של הפרומפט שלקחתם, ואת "נדל"ן" בתחום שאתם רוצים להראות.
דרכים לבנות אתרי דוגמה יש גם במדריכים אחרים שלי, וכל אחד מהם נותן אתר מסוג אחר: אובייקט תלת מימד חי באתר, רקע וידאו לאתר, רכיבים מעוצבים מ-21st.dev ואתר שלא נראה כמו AI.
איך מתקנים דברים באתר עם צילום מסך?
גם דף שנבנה מפרומפט טוב צריך תיקונים, וזה נכון לדף תיק העבודות ולאתרי הדוגמה באותה מידה. משהו נחתך בצד, הפונט קטן מדי, הצבעים לא יושבים טוב. קשה להסביר לקלוד במילים איפה בדיוק הבעיה, אז מראים לו: מצלמים מסך של החלק הבעייתי, מדביקים את התמונה בשיחה וכותבים מה מפריע.
זה מה שכתבתי בשיעור, מתחת לצילום מסך של אתר שבנינו:
הקרוסלה נחתכת בצד. תדאג שהיא תהיה אינסופית. יש בעיה בטעינה. וכל הפונטים, תעשה את הכול הרבה יותר גדול, קשה לי לקרוא. ותשים לי צבעים יותר מזמינים.זאת הודעה אחת עם כמה בקשות, בשפה של בן אדם. מספיק לכתוב מה מפריע לכם בעין, וקלוד מבין מהתמונה על איזה חלק אתם מדברים.
לפעמים קלוד בונה את האתר ברקע ואתם לא בטוחים איפה הוא עומד. גם את זה פשוט שואלים:
מה קורה לי עם האתר?איך שולחים את תיק העבודות ללקוח?
תיק עבודות שיושב אצלכם במחשב לא מוכר כלום. המטרה היא שיהיה לכם מה לשלוח ברגע שהלקוח שואל על דוגמאות.
ברילס זה נראה כמו שיחת וואטסאפ פשוטה. הלקוח שואל "יש לך דוגמאות של אתרים שעשית?", ואתם עונים "הנה כמה אתרים שבניתי לאחרונה" ושולחים. התגובה שאתם רוצים לקבל היא "וואלה, אתה עושה דברים מאוד יפים".
לפני שהדף יוצא ללקוח, עוברים על הרשימה שקלוד כתב בסוף. מחליפים את הטקסטים הזמניים, בודקים שכפתור הוואטסאפ פותח שיחה עם המספר שלכם, ופותחים את הדף גם בטלפון וגם במחשב.
תעצרו גם על השאלות הנפוצות. הפרומפט אוסר על קלוד להמציא התחייבויות בשמכם, אז התשובות על זמנים, מחיר ותיקונים יוצאות כלליות, ועל המחיר כתוב רק שהוא תלוי בהיקף. אתם אלה שכותבים שם מה שנכון אצלכם.
ותהיו ישרים עם הלקוח: אם יש בדף אתרי דוגמה, תגידו לו שבניתם אותם כדי להראות את הסגנון ואת הרמה שלכם.
מה חשוב לדעת לפני שמתחילים?
- קלוד קוד עולה כסף: צריך מנוי בתשלום לקלוד. המחירים משתנים, אז תבדקו אותם בעמוד המחירים הרשמי או בפוסט שלי על המחיר של קלוד קוד.
- הדף נבנה כקובץ על המחשב שלכם: כדי לשלוח אותו ללקוח כקישור צריך להעלות אותו לאינטרנט. זה שלב נפרד, והמדריך הזה לא עוסק בו.
- יש בדף טקסטים זמניים: כל מה שלא מילאתם, והתשובות בשאלות הנפוצות. מחליפים אותם לפני ששולחים. גם אתרי דוגמה מגיעים עם טקסטים ותמונות לדוגמה, ולפני שאתר כזה הולך ללקוח מחליפים הכל בתוכן שלו.
- העמודים המשפטיים עוד לא קיימים: הקישורים למדיניות פרטיות ולהצהרת נגישות בתחתית הדף לא מובילים בינתיים לשום מקום. אתר שאתם בונים ללקוח צריך מדיניות פרטיות, הודעת עוגיות והצהרת נגישות, ופירטתי את זה במדריך על מה חייב להיות באתר שבניתם עם AI.
- "חצי צהריים" זה לא הבטחה: זה הניסיון שלי מהשיעור. בפעם הראשונה שלכם זה יכול לקחת יותר זמן, וזה בסדר.
- תיק עבודות לא מביא לקוחות לבד: הוא מראה מה אתם יודעים לעשות. למצוא את הלקוחות זאת עבודה נפרדת, והיא מתחילה אחרי שיש לכם מה להראות.
שאלות נפוצות על אתר תיק עבודות
כמה אתרים צריך בתיק עבודות?
לפי מה שאמרתי בשיעור, שניים, שלושה או ארבעה פרויקטים מספיקים כדי שיהיה הרבה יותר קל למכור. בפרומפט יש מקום לשלוש או ארבע עבודות, ועדיף שכל אחת תהיה מתחום אחר.
אפשר לבנות אתר תיק עבודות בלי לדעת לתכנת?
כן. ממלאים את הפרטים בפרומפט, מדביקים אותו בקלוד קוד, ואת כל השינויים מבקשים במילים רגילות או עם צילום מסך של החלק שמפריע. אפשר לעשות את זה בלי להיות טכנולוגי.
מה עושים אם עוד אין אתרים להראות?
בונים אתרי דוגמה. כל אתר מתחיל מפרומפט אחד, בתיקייה חדשה ובשיחה חדשה, ועדיף שכל אחד יהיה מתחום אחר. כשמראים אותם ללקוח, אומרים לו שאלה אתרי דוגמה.
כמה זמן לוקח לבנות תיק עבודות עם קלוד קוד?
בשיעור אמרתי שאפשר לבנות תיק עבודות בחצי צהריים, וזה הניסיון שלי. זאת לא הבטחה: בפעם הראשונה זה יכול לקחת יותר, בעיקר בגלל התיקונים והחלפת התוכן.
קלוד קוד עולה כסף?
כן. קלוד קוד דורש מנוי בתשלום לקלוד. המחירים משתנים, אז כדאי לבדוק אותם בעמוד המחירים הרשמי לפני שמתחילים.
אפשר לשלוח ללקוח את הדף כמו שהוא יוצא מהפרומפט?
עוד לא. קודם עוברים על הרשימה שקלוד כותב בסוף: מחליפים טקסטים זמניים, בודקים את מספר הוואטסאפ ומעדכנים את התשובות בשאלות הנפוצות. הדף גם נבנה כקובץ על המחשב, אז צריך להעלות אותו לאינטרנט לפני שיש קישור לשלוח.