למה KomuraSoft בונה אתרים על ה-design system של Digital Agency — מחיר נמוך ואיכות יכולים לדור יחד

חלק גדול מהצעת המחיר לבניית אתר הוא שעות העיצוב. KomuraSoft מקצרת את השלב הזה משמעותית כי היא נשענת על ה-design system שפרסמה Digital Agency של יפן: המחיר יורד, והאיכות מתייצבת.

כששומעים “בניית אתר זולה”, רוב האנשים חושבים שבאיזשהו מקום מוותרים על איכות. בפועל, הורדת מחיר על ידי דילוג על ראיונות אפיון, או דחיסת טקסט לתוך תבנית, נוטה לייצר אתרים שאי אפשר להבין מה החברה עושה.

הסיבה שמחיר בניית האתרים של KomuraSoft נשאר נמוך היא לא הדילוג על אפיון ולא מילוי תבניות, אלא סטנדרטיזציה של שלב העיצוב. המאמר הזה מסביר לפי הסדר מהו ה-design system של Digital Agency שעליו אנחנו נשענים, מה בדיוק אנחנו משתמשים ואיך, למה זה מוזיל, למה האיכות לא יורדת, ולאילו פרויקטים הגישה לא מתאימה.

מכאן ואילך, שם השירות שלנו הוא “בניית אתרים”; לתהליך הכללי נשתמש ב”הפקת אתר”.

1. מהו ה-design system של Digital Agency

ה-design system של Digital Agency הוא מפרט עיצוב סטנדרטי ש-Digital Agency מפרסמת לאתרי אינטרנט ולאפליקציות של שירותים ממשלתיים. המידע הראשוני נמצא באתר הרשמי.

• אתר רשמי: ה-design system של Digital Agency, גרסת β
• רישיון ותנאי שימוש: הערות שימוש

בגדול, מוגדרים באופן שיטתי דברים כמו אלה.

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

תנאי הרישיון בפועל

אם מסכמים ב”רישיון פתוח”, אי אפשר לקבל החלטות מעשיות. בהערות השימוש הרשמיות הרישיון מפורט לפי סוג החומר המופץ.

בפועל יש שתי נקודות. הראשונה: אם עורכים ומעבדים נתוני Figma או קטעי קוד ומשלבים אותם באתר עצמי, ייחוס לא נדרש. כשמשתמשים ב-design system הזה לבניית אתר חברה, רוב המקרים הם מהסוג הזה. השנייה: מצוין במפורש שאסור לפרסם או להשתמש בחומר הערוך “באופן שנראה כאילו Digital Agency יצרה אותו”.

בנוסף, השימוש לא מעניק הסמכה או אישור של Digital Agency. גם אנחנו לא “מאושרים על ידי Digital Agency”; אנחנו מיישמים מפרט סטנדרטי שפורסם, על אתרים פרטיים. תנאי הרישיון למעלה הם נכון למועד כתיבת המאמר, ולכן לפני החלטת אימוץ צריך לבדוק את התנאים העדכניים בעמוד הרשמי.

knowledge map של המאמר

המאמר מסביר למה פיתוח האתרים של KomuraSoft נשען על Digital Agency Design System, דרך אופן הקליטה של שלוש השכבות design tokens, components ו-templates. על נתוני העיצוב ב-Figma חל CC BY 4.0 (על האייקונים הכלולים חל Apache License 2.0), ועל code snippets חל MIT License; בשימוש של עריכה, עיבוד ושילוב באתר של החברה אין צורך בציון מקור. שימוש בחלקים סטנדרטיים דוחס שלבים יקרים כמו הצגת כמה הצעות עיצוב וסבבי תיקונים, ובמקביל רמת הנגישות שאומתה בשירותים ממשלתיים מתורגמת ישירות ליציבות האיכות. עם זאת, הגישה הזו נחשבת כלא מתאימה לפרויקטים כמו אתר מותג שבו עיצוב האווירה הוא מרכז הערך.

flowchart LR
    accTitle: knowledge map: בניית אתרים על בסיס Digital Agency Design System
    accDescr: Diagram שמראה שפיתוח האתרים של KomuraSoft נשען על design tokens, components ו-templates של Digital Agency Design System, משלב את הרישיונות של נתוני Figma, אייקונים ו-code snippets, מצמצם את עלות תהליך העיצוב ומבטיח נגישות, ומצד שני אינו מתאים לפרויקטים שדורשים brand visual משוכלל.
    digital_agency_design_system["design system של Digital Agency"]
    website_development["בניית אתרים"]
    design_token["design tokens"]
    design_system_component["components של design system"]
    web_accessibility["web accessibility"]
    digital_agency_copyright_policy["מדיניות זכויות היוצרים של אתר Digital Agency"]
    cc_by_4_license["CC BY 4.0"]
    apache_license_2["Apache License 2.0"]
    mit_license["MIT License"]
    site_template["site templates"]
    design_process_cost["עלות שלב העיצוב"]
    brand_visual_design["עיצוב ויזואלי שמתמקד בביטוי מותג"]
    website_development -.->|"משתמש ב"| digital_agency_design_system
    digital_agency_design_system -->|"משתמש ב"| design_token
    digital_agency_design_system -->|"משתמש ב"| design_system_component
    design_system_component -->|"משתמש ב"| web_accessibility
    digital_agency_design_system -->|"משתמש ב"| digital_agency_copyright_policy
    digital_agency_design_system -->|"משתמש ב"| cc_by_4_license
    digital_agency_design_system -->|"משתמש ב"| apache_license_2
    digital_agency_design_system -->|"משתמש ב"| mit_license
    website_development -.->|"משתמש ב"| design_token
    website_development -.->|"משתמש ב"| design_system_component
    website_development -.->|"משתמש ב"| site_template
    site_template -->|"דורש"| design_token
    site_template -->|"דורש"| design_system_component
    digital_agency_design_system -.->|"מפחית"| design_process_cost
    digital_agency_design_system -.->|"לא מומלץ ל"| brand_visual_design

ב-diagram, solid line מציינת relation שתמיד מתקיים ו-dashed line מציינת relation מותנה (התנאים מופיעים בהסבר של כל relation ב-detail page). הרשימה המלאה של ה-relations (סה”כ 15, כולל evidence ו-certainty) וההגדרות של ה-concepts המרכזיים נמצאות ב-detail page של ה-knowledge map (ביפנית). Data: JSON-LD / Turtle

2. מה בדיוק אומר “לבנות על ה-design system כבסיס”

“לבנות על design system כבסיס” זו אמירה נוחה, אבל רמת המימוש משתנה. אצלנו מחלקים לשלוש שכבות. האתר הזה עצמו (comcomponent.com) בנוי כך.

חשוב גם לכתוב מה לא עושים במכוון. לא מביאים את קוד ה-components הרשמי במלואו ולא מחזיקים אותו כתלות חיצונית. הרכיבים שאתר חברה צריך מוגבלים; ייבוא הסט המלא מכביד על טעינת האתר ויוצר עלות תחזוקה של מעקב אחרי עדכוני המקור. ההחלטה היא להחזיק רק את הרכיבים הנדרשים, כמימוש עצמי לפי המפרט.

האפקט של המבנה הזה מופיע כשמוסיפים עמוד. גם אם מוסיפים עמוד שירות חדש, צורת הכפתורים, היררכיית הכותרות והמרווחים מתיישרים עם העמודים הקיימים, ולכן אין צורך לחשוב בכל פעם “איך ייראה העיצוב”.

3. למה זה מוזיל — שלב העיצוב נעלם מההצעה

בהצעת מחיר רגילה להפקת אתר, סעיפי עיצוב תופסים חלק ניכר. בטבלה המהירה של מחירי הפקת אתר לעסקים קטנים ובינוניים, תצורות עם עיצוב ייחודי נכנסות לטווח 300,000–1,000,000 yen, ובתוך הטווח הזה שלב העיצוב מצטבר בערך מהעבודות הבאות.

מה כולל סעיף “עיצוב מלא” בהצעה משתנה מחברה לחברה, ולכן בהשוואה כדאי לבקש פירוק עד הרזולוציה הזאת (את אופן הקריאה הזה כיסינו בפירוט במאמר על עלויות).

כשנשענים על design system, התמונה משתנה.

• קריטריוני צבע, גודל טקסט, מרווחים וכפתורים קבועים מההתחלה
• סבב “מציגים כמה הצעות עיצוב, בוחרים, מתקנים” ככלל מתייתר
• פחות החלטות תלויות באינטואיציה של מעצב, ולכן פחות עבודה חוזרת

כלומר, לא מוזילים בהנחה, אלא כי התהליך עצמו מצטמצם. השעות שמתפנות הולכות לחלקים שבאמת משפיעים על התוצאה — מבנה שמעביר במה החברה עוסקת, טקסטים, ותכנון מסלול הפנייה. ברוב המקרים הסיבה שאתר לא מעביר מסר היא המבנה ולא העיצוב, כמו שכתבנו בשלושת המקומות הראשונים לתקן באתר שלא מייצר פניות.

4. למה האיכות לא יורדת — היא דווקא מתייצבת

האינטואיציה ש”אם מדלגים על עיצוב האיכות יורדת” מניחה עיצוב מאפס. עם design system סטנדרטי, ההיגיון מתהפך.

ראשית, accessibility. הרכיבים של ה-design system של Digital Agency מעוצבים תוך התחשבות בניגודיות צבע, גודל טקסט, נראות ה-focus וקלות תפעול במגע. להבטיח את הרמה הזאת בכל פרויקט בנפרד דורש שעות בדיקה. שימוש ברכיבים שכבר עברו בדיקה מייצב את האיכות בסוף.

שנית, רקורד של שימוש אמיתי. שירותים ממשלתיים רצים מול קהל רחב מאוד, ממי שלא רגיל לסמארטפון ועד מומחים. כללי העיצוב שם לא חושלו לפי “האם זה נראה חדש” אלא לפי “האם כל אחד יכול להשתמש בלי ללכת לאיבוד”. זו בדיוק התכונה שחשובה ללקוחות פוטנציאליים שנכנסים לאתר חברה.

שלישית, עקביות. אתר שבו צורת הכפתורים וכללי הכותרות זזים מעמוד לעמוד קשה יותר לקריאה כבר בגלל זה. כשעובדים לפי design system, גם עמוד שמוסיפים אחר כך לא שובר מבנה וטון.

האתר הזה עצמו בנוי על ה-design system הזה. גם מקרה הבוחן חידוש האתר של Douzu Carry Service נבנה באותה מדיניות. תהליך החידוש עצמו מפורט במאמר המקרה.

כדי לראות אילו רכיבים עובדים בפועל, הכי מהר להשוות עמודים אמיתיים. נקודות השימוש באתר הזה:

יישום של אותם רכיבים באתר אחר הוא Douzu Carry Service. צבע, תמונות וטקסט כמובן שונים לגמרי, אבל כשמניחים זה ליד זה רואים שקלות הלחיצה על כפתורים והיררכיית הכותרות בנויות לפי אותם כללי עיצוב.

5. סטנדרטיזציה לא אומרת “אותו מראה”

חשש נפוץ: “עיצוב סטנדרטי לא יהפוך את האתר לזהה לאחרים?”

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

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

6. סיכום

• בהפקת אתר, עיצוב מאפס תופס חלק גדול מהעלות
• KomuraSoft מקצרת את השלב הזה משמעותית כי היא נשענת על ה-design system שפרסמה Digital Agency (אתר רשמי)
• הרישיון מחולק לפי סוג החומר: נתוני Figma הם CC BY 4.0, וקטעי הקוד הם MIT License. אם עורכים ומעבדים ומשלבים באתר עצמי, ייחוס לא נדרש
• “לבנות על ה-design system כבסיס” זה שלוש שכבות: איחוד design tokens, מימוש רכיבים כמחלקות CSS, ושילוב ב-templates
• המחיר יורד לא בגלל הנחה אלא כי התהליך מצטמצם. השעות שמתפנות הולכות למבנה, לטקסטים ולתכנון מסלול הפנייה
• הרכיבים מעוצבים עם accessibility, ורצים בפועל בשירותים ממשלתיים, ולכן האיכות דווקא מתייצבת
• לוגו, תמונות וטקסט נבנים לכל אתר, ולכן המראה לא יוצא זהה. עם זאת, לפרויקטים שצריכים ויזואל ייחודי משוכלל הגישה לא מתאימה

אם רוצים אתר עם מבנה שמעביר מסר, בלי תקציב כבד, אפשר לראות את אופן העבודה ואת המחיר בעמוד בניית אתרים. אם יוצרים קשר עם URL של האתר הנוכחי, נחזיר סיכום של מה כדאי לתקן קודם כדי לקבל יותר אפקט.

מאמרים קשורים

• עלויות בניית אתר לעסקים קטנים — טבלת מחירים מהירה ואיך לקרוא הצעת מחיר
• חקר מקרה של חידוש אתר: Douzu Carry Service, חברת הובלות ממיאזאקי
• שלושת המקומות הראשונים לתקן באתר שלא מייצר פניות
• בניית אתרים

מקורות

• Digital Agency, Digital Agency Design System β. מפרט העיצוב הסטנדרטי שפורסם לאתרי אינטרנט ולאפליקציות של שירותים ממשלתיים.
• Digital Agency, הערות שימוש. רישיון ותנאי שימוש של ה-design system; הרישיון מחולק לפי נתוני Figma, אייקונים כלולים, וקטעי קוד.
• Digital Agency, מדיניות זכויות היוצרים. מדיניות זכויות היוצרים שחלה על אתר ה-design system (טקסט הסבר והנחיות) (תנאי שימוש בנתונים ציבוריים, גרסה 1.0).

מאמרים קשורים

מאמרים עדכניים עם אותן תגיות, להעמקה בנושאים קרובים.

נושאים קשורים

העמודים האלה ממקמים את הנושא בהקשר רחב יותר של שירותים והחלטות.

שירותים הקשורים לנושא הזה

המאמר קשור ישירות לשירותים הבאים.

שאלות נפוצות

שאלות נפוצות בפניות בנושא המאמר.

מותר להשתמש ב-design system של Digital Agency באתר של חברה פרטית?

כן. Digital Agency מפרסמת את ה-design system ברישיון פתוח, ואפשר להשתמש בו גם באתרים שאינם של גופי ממשל. השימוש לא מקנה הסמכה או אישור של Digital Agency. גם העמדה שלנו היא שאנחנו מיישמים את ה-design system שפורסם, על אתרים פרטיים.

עיצוב סטנדרטי לא יהפוך את האתר לזהה לאתרים של חברות אחרות?

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

פרופיל הכותב

עמוד היכרות עם כותב המאמר.

Go Komura

מנהל KomuraSoft LLC

מתמחה בפיתוח תוכנה עבור Windows, ייעוץ טכני וחקירת תקלות, בעיקר בפרויקטים עם מערכות קיימות ובאגים שקשה לשחזר.