ทำไม KomuraSoft จึงสร้างเว็บไซต์บนระบบออกแบบของ Digital Agency — ราคาต่ำกับคุณภาพไปด้วยกันได้

ในใบเสนอราคาการทำเว็บไซต์ สัดส่วนใหญ่ก้อนหนึ่งคือชั่วโมงงานออกแบบ KomuraSoft บีบขั้นตอนนี้ลงอย่างมากด้วยการใช้ระบบออกแบบที่ Digital Agency ของญี่ปุ่นเผยแพร่เป็นฐาน จึงคุมค่าใช้จ่ายไว้ได้พร้อมทำให้คุณภาพเสถียร

เมื่อได้ยินคำว่า “การทำเว็บไซต์ราคาถูก” คนส่วนใหญ่คิดว่าคงมีการลดคุณภาพลงที่ไหนสักแห่ง จริงอยู่ การตัดราคาด้วยการข้ามการสัมภาษณ์ความต้องการ หรือแค่เทข้อความลงเทมเพลต มักได้ เว็บไซต์ที่สื่อไม่ได้ว่าบริษัททำอะไร

เหตุที่ราคา การพัฒนาเว็บไซต์ (การทำเว็บไซต์) ของ KomuraSoft คุมได้ ไม่ได้อยู่ที่การตัดขั้นตอนเหล่านั้น แต่มาจาก การทำขั้นตอนออกแบบให้เป็นมาตรฐาน บทความนี้จะอธิบายตามลำดับว่าระบบออกแบบของ Digital Agency ที่เราใช้เป็นฐานคืออะไร ใช้จริงอย่างไรและใช้อะไรบ้าง ทำไมราคาถึงต่ำลง ทำไมคุณภาพไม่ตก และโครงการแบบใดที่ไม่เหมาะกับวิธีนี้

ต่อไปนี้ ชื่อบริการของเราจะใช้ว่า “การพัฒนาเว็บไซต์” ส่วนชื่อขั้นตอนทั่วไปจะใช้ว่า “การทำเว็บไซต์”

1. ระบบออกแบบของ Digital Agency คืออะไร

ระบบออกแบบของ Digital Agency คือข้อกำหนดมาตรฐานด้านการออกแบบที่ Digital Agency เผยแพร่สำหรับเว็บไซต์และแอปของบริการภาครัฐ แหล่งข้อมูลปฐมภูมิอยู่ที่เว็บไซต์ทางการ

• เว็บไซต์ทางการ: ระบบออกแบบของ Digital Agency รุ่น β
• สัญญาอนุญาตและเงื่อนไขการใช้งาน: ข้อควรระวังในการใช้งาน

โดยสังเขป สิ่งต่อไปนี้ถูกนิยามเป็นระบบ

จุดสำคัญคือ เผยแพร่ทั่วไปภายใต้เงื่อนไขสัญญาอนุญาตที่เปิดเผย และใช้กับเว็บไซต์ภาคเอกชนได้ เว็บไซต์ของขั้นตอนราชการต้องใช้ได้ทุกคน ไม่ว่าอายุ สภาพแวดล้อม หรือความคุ้นเคยกับ IT จึงถูกออกแบบหลังตรวจความต่างของสี ขนาดตัวอักษร และความใช้ง่ายแล้ว สิ่งที่ผ่านการตรวจและสะสมมานั้น เว็บไซต์บริษัทเอกชนก็ใช้เป็นฐานได้ทันที

เงื่อนไขสัญญาอนุญาตที่ใช้จริง

ถ้าสรุปสั้น ๆ ว่า “สัญญาอนุญาตแบบเปิด” จะตัดสินในงานจริงไม่ได้ หน้า ข้อควรระวังในการใช้งาน ของทางการแยกสัญญาอนุญาตตามชนิดของสิ่งที่แจกจ่าย

ในทางปฏิบัติมีสองข้อ ข้อแรก ถ้าแก้ไขหรือดัดแปลงข้อมูล Figma หรือ code snippet แล้วนำไปประกอบในเว็บไซต์ของตนเอง จะไม่ถูกขอให้ระบุแหล่งที่มา งานทำเว็บไซต์บริษัทที่ใช้ระบบออกแบบนี้เกือบทั้งหมดเป็นรูปแบบนี้ ข้อสอง มีการระบุชัดว่า ห้ามเผยแพร่หรือใช้สิ่งที่แก้ไขหรือดัดแปลงแล้วในลักษณะราวกับว่า Digital Agency เป็นผู้สร้าง

ทั้งนี้ การนำไปใช้ไม่ได้ทำให้ได้รับการรับรองหรืออนุมัติจาก Digital Agency เราเองก็ไม่ใช่ “ผู้ให้บริการที่ Digital Agency รับรอง” แต่เป็นการนำข้อกำหนดมาตรฐานที่เผยแพร่แล้วมาประยุกต์กับงานภาคเอกชน เงื่อนไขสัญญาอนุญาตด้านบนเป็นข้อมูล ณ เวลาที่เขียนบทความนี้ ดังนั้นก่อนตัดสินใจนำไปใช้ ให้ตรวจเงื่อนไขล่าสุดที่หน้าทางการเสมอ

แผนที่ความรู้ของบทความนี้

บทความนี้อธิบายเหตุผลที่การทำเว็บไซต์ของ KomuraSoft ใช้ระบบออกแบบของ Digital Agency เป็นฐาน จากวิธีนำ Design token คอมโพเนนต์ และเทมเพลตมาใช้เป็นสามชั้น ระบบออกแบบของ Digital Agency ใช้ CC BY 4.0 กับข้อมูลออกแบบ Figma (ไอคอนที่บรรจุมาด้วยเป็น Apache License 2.0) และใช้ MIT License กับ code snippet ถ้าแก้ไข ดัดแปลง แล้วประกอบเข้าไซต์ของตนเอง จะไม่ต้องระบุแหล่งที่มา การใช้ชิ้นส่วนที่ได้มาตรฐานแล้วทำให้ขั้นตอนที่กินค่าใช้จ่ายอย่างการเสนอแบบหลายชุดและรอบแก้แบบถูกบีบลง ขณะที่ระดับการเข้าถึงได้ซึ่งผ่านการตรวจสอบในบริการภาครัฐ กลายเป็นความเสถียรของคุณภาพได้เลย อย่างไรก็ตาม งานอย่างไซต์แบรนด์ที่แก่นของมูลค่าอยู่ที่การสร้างบรรยากาศ ถือว่าแนวทางนี้ไม่เหมาะ

flowchart LR
    accTitle: แผนที่ความรู้การทำเว็บไซต์ที่ใช้ระบบออกแบบของ Digital Agency เป็นฐาน
    accDescr: แผนภาพที่แสดงว่าการทำเว็บไซต์ของ KomuraSoft ใช้ Design token คอมโพเนนต์ และเทมเพลตของระบบออกแบบของ Digital Agency เป็นฐาน ผสานกับไลเซนส์ของข้อมูล Figma ไอคอน และ code snippet แต่ละชุด จึงกดค่าใช้จ่ายของขั้นตอนออกแบบไว้ได้โดยยังรักษาระดับการเข้าถึงได้ของเว็บ ขณะที่งานที่ต้องการการออกแบบภาพที่เน้นการแสดงออกของแบรนด์ไม่เหมาะกับแนวนี้
    digital_agency_design_system["ระบบออกแบบของ Digital Agency"]
    website_development["การทำเว็บไซต์"]
    design_token["Design token"]
    design_system_component["คอมโพเนนต์ของระบบออกแบบ"]
    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["เทมเพลตไซต์"]
    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

ในแผนภาพ เส้นทึบหมายถึงความสัมพันธ์ที่ถือเสมอ และเส้นประหมายถึงความสัมพันธ์ที่มีเงื่อนไข (เงื่อนไขอยู่ในการอธิบายของแต่ละความสัมพันธ์ในหน้าละเอียด) รายการความสัมพันธ์ทั้งหมด (รวม 15 รายการ พร้อมหลักฐานและระดับความเชื่อมั่น) และนิยามของแนวคิดหลักรวบรวมไว้ที่ หน้าละเอียดของแผนที่ความรู้ (เป็นภาษาญี่ปุ่น) ข้อมูล: JSON-LD / Turtle

2. “ใช้เป็นฐาน” ในทางปฏิบัติทำอะไรบ้าง

คำว่า “ใช้ระบบออกแบบเป็นฐาน” สะดวก แต่ความละเอียดของการ implement มีหลายระดับ ในกรณีของเรา เราแยกการนำมาใช้เป็น 3 ชั้น เว็บไซต์นี้เอง (comcomponent.com) ใช้โครงนี้

สิ่งที่เราตั้งใจไม่ทำก็ควรเขียนไว้ด้วย เราไม่ได้ยกโค้ดคอมโพเนนต์ที่ทางการแจกจ่ายมาทั้งก้อนแล้วถือเป็น dependency ภายนอก ชิ้นส่วนที่เว็บไซต์บริษัทต้องการมีจำกัด การนำชุดเต็มมาใช้ทำให้โหลดหน้าหนักขึ้น และเกิดต้นทุนดูแลเพื่อตามการอัปเดตฝั่ง upstream คำตัดสินคือ เก็บเฉพาะชิ้นส่วนที่จำเป็น ในรูปการ implement ของตนเองที่ตามข้อกำหนด

ผลของโครงนี้ปรากฏเมื่อเพิ่มหน้า แม้เพิ่มหน้าบริการใหม่อีกหนึ่งหน้า รูปปุ่ม ลำดับหัวข้อ และระยะห่างก็ยังตรงกับหน้าที่มีอยู่ จึงไม่ต้องคิดใหม่ทุกครั้งว่า “ดีไซน์จะเป็นอย่างไร”

3. ทำไมราคาถึงต่ำลง — ขั้นตอนออกแบบหายไปจากใบเสนอราคา

ใบเสนอราคาการทำเว็บไซต์ทั่วไปมีรายการด้านออกแบบเป็นสัดส่วนค่อนข้างใหญ่ ในตารางอ้างอิงเร็วของ ค่าใช้จ่ายในการทำเว็บไซต์สำหรับ SME ชุดงานที่มีดีไซน์เฉพาะตัวอยู่ในช่วง 300,000–1,000,000 เยน และภายในช่วงนั้น ขั้นตอนออกแบบที่พอกพูนขึ้นโดยสังเขปคืองานต่อไปนี้

รายการ “ดีไซน์ทั้งชุด” ในใบเสนอราคาครอบคลุมอะไรบ้าง แตกต่างกันตามบริษัท ดังนั้นตอนเปรียบเทียบ วิธีที่แน่นอนคือขอให้เปิดถึงระดับความละเอียดนี้ (วิธีอ่านแบบนี้เขียนละเอียดใน บทความเรื่องค่าใช้จ่าย)

เมื่อใช้ระบบออกแบบเป็นฐาน โครงนี้จะเปลี่ยน

• ค่าอ้างอิงของสี ขนาดตัวอักษร ระยะห่าง ปุ่ม ถูกกำหนดไว้ตั้งแต่ต้น
• รอบ “เสนอดีไซน์หลายแบบ ให้เลือก แล้วแก้” โดยหลักไม่จำเป็น
• การตัดสินใจที่พึ่งความรู้สึกของนักออกแบบลดลง จึงเกิดงานที่ต้องทำใหม่ได้ยาก

กล่าวคือ ราคาต่ำลงไม่ใช่เพราะลดราคา แต่เพราะ ตัวขั้นตอนเองหดลง ชั่วโมงที่เหลือถูกนำไปใช้กับส่วนที่ส่งผลจริง — การออกแบบโครงที่สื่อว่าบริษัททำอะไร ถ้อยคำ และเส้นทางสู่การติดต่อสอบถาม สาเหตุที่เว็บสื่อสารไม่ได้เกือบทั้งหมดอยู่ที่โครง ไม่ใช่ที่งานออกแบบ ซึ่งเราเขียนไว้แล้วใน สามจุดแรกที่ต้องแก้บนเว็บไซต์ที่ไม่สร้างการติดต่อสอบถาม

4. ทำไมคุณภาพไม่ตก — กลับยิ่งเสถียร

สัญชาตญาณที่ว่า “ตัดงานออกแบบแล้วคุณภาพจะตก” ตั้งอยู่บนสมมติฐานว่าดีไซน์ถูกสร้างจากศูนย์ เมื่อใช้ระบบออกแบบที่เป็นมาตรฐานแล้ว เรื่องจะกลับด้าน

ประการแรกคือ การเข้าถึงได้ คอมโพเนนต์ของระบบออกแบบ Digital Agency ถูกออกแบบโดยคำนึงถึงความต่างของสี ขนาดตัวอักษร การมองเห็นโฟกัส และความใช้ง่ายเมื่อสัมผัส หากจะรักษาระดับนี้ทุกครั้งในดีไซน์ของแต่ละโครงการ ตัวงานตรวจเองใช้ชั่วโมงงาน การใช้ชิ้นส่วนที่ผ่านการตรวจแล้วทำให้คุณภาพเสถียรกว่าในผลลัพธ์

ประการที่สองคือ ผลงานจากการใช้งานจริง บริการภาครัฐถูกใช้จริงโดยผู้ใช้กว้างมาก ตั้งแต่คนที่ไม่คุ้นสมาร์ตโฟนไปจนถึงผู้เชี่ยวชาญ กฎออกแบบที่ใช้ที่นั่นไม่ได้ถูกขัดเกลาด้วยคำถามว่า “หน้าตาใหม่หรือไม่” แต่ด้วยคำถามว่า “ใครก็ใช้ได้โดยไม่หลงทางหรือไม่” คุณสมบัติแบบนั้นเองที่สำคัญต่อลูกค้าเป้าหมายที่เข้ามาที่เว็บไซต์บริษัท

ประการที่สามคือ ความสม่ำเสมอ เว็บที่รูปปุ่มหรือกฎหัวข้อแกว่งไปตามหน้าอ่านยากขึ้นเพียงแค่นั้น การทำตามระบบออกแบบทำให้โครงและโทนไม่พัง แม้จะเพิ่มหน้าในภายหลัง

เว็บไซต์นี้เองถูกสร้างบนระบบออกแบบนี้ กรณีศึกษาการปรับปรุงเว็บไซต์ของ Douzu Carry Service ก็สร้างด้วยนโยบายเดียวกัน วิธีดำเนินงานของการปรับปรุงเว็บไซต์เองสรุปไว้ละเอียดใน บทความกรณีศึกษา

ว่าชิ้นส่วนใดทำงานอยู่ตรงไหน ดูจากหน้าจริงจะเร็วที่สุด จุดที่ใช้บนเว็บไซต์นี้มีดังนี้

ตัวอย่างที่นำชิ้นส่วนเดียวกันไปใช้กับอีกเว็บคือ Douzu Carry Service สี รูปภาพ และข้อความต่างกันโดยสิ้นเชิง แต่ความกดง่ายของปุ่มและวิธีจัดลำดับหัวข้อทำตามกฎออกแบบชุดเดียวกัน เมื่อวางคู่กันจะเห็นได้

5. ทำให้เป็นมาตรฐานแล้วก็ไม่กลายเป็น “หน้าตาเดียวกัน”

ความกังวลที่พบบ่อยคือ “ดีไซน์มาตรฐานแล้ว จะหน้าตาเหมือนเว็บของบริษัทอื่นหรือไม่”

สิ่งที่ถูกทำให้เป็นมาตรฐานคือ ส่วนฐาน เช่น ค่าอ้างอิงของสี ระบบขนาดตัวอักษร และกฎออกแบบของคอมโพเนนต์ สิ่งที่กำหนดภาพรวมของเว็บจริง ๆ คือโลโก้ รูปภาพ สโลแกน โครงหน้าเพจ และโทนของข้อความ ซึ่งสร้างจากศูนย์ทีละเว็บไซต์ การที่ฐานตรงกัน กับการไม่มีเอกลักษณ์ เป็นคนละเรื่อง

ในทางกลับกัน มีเรื่องที่ควรพูดตรง ๆ วิธีนี้ไม่เหมาะกับโครงการที่ต้องการภาพเฉพาะตัวที่ประณีตหรือแอนิเมชันในฐานะการแสดงออกของแบรนด์ เช่น เว็บไซต์แบรนด์หรือเว็บไซต์แคมเปญที่คุณค่าหลักอยู่ที่การสร้างบรรยากาศของแบรนด์ ในโครงการแบบนั้น ผลจะดีกว่าถ้าลงทุนกับงานออกแบบอย่างจริงจังแล้วจ้างบริษัทออกแบบที่เชี่ยวชาญด้านนี้ หากในการปรึกษากับเราเห็นชัดว่าความต้องการแบบนั้นเป็นแกน เราจะบอกตรงไปตรงมาตั้งแต่ต้น

6. สรุป

• ในค่าใช้จ่ายการทำเว็บไซต์ งานออกแบบจากศูนย์กินสัดส่วนใหญ่
• KomuraSoft บีบขั้นตอนนี้ลงอย่างมากด้วยการใช้ระบบออกแบบที่ Digital Agency เผยแพร่ (เว็บไซต์ทางการ) เป็นฐาน
• สัญญาอนุญาตแยกตามชนิดของสิ่งที่แจกจ่าย ข้อมูล Figma ใช้ CC BY 4.0 code snippet ใช้ MIT License หากแก้ไขหรือดัดแปลงแล้วนำไปประกอบในเว็บไซต์ของตนเอง ไม่ต้องระบุแหล่งที่มา
• เนื้อหาของ “ใช้เป็นฐาน” คือ 3 ชั้น: ใช้ design token ร่วมกัน ทำให้ชิ้นส่วนเป็นคลาส CSS และประกอบเข้าเทมเพลต
• เหตุที่ราคาต่ำไม่ใช่ส่วนลด แต่เป็นเพราะขั้นตอนลดลง ชั่วโมงที่เหลือถูกนำไปใช้กับการออกแบบโครง ถ้อยคำ และเส้นทางสู่การติดต่อสอบถาม
• คุณภาพกลับยิ่งเสถียร เพราะใช้ชิ้นส่วนมาตรฐานที่ออกแบบโดยคำนึงถึงการเข้าถึงได้ และถูกใช้จริงในบริการภาครัฐ
• โลโก้ รูปภาพ และข้อความสร้างทีละเว็บไซต์ จึงไม่กลายเป็นหน้าตาเดียวกัน แต่โครงการที่ต้องการภาพเฉพาะตัวที่ประณีตจะไม่เหมาะกับวิธีนี้

หากต้องการเว็บที่โครงสื่อสารได้โดยคุมค่าใช้จ่าย ดูวิธีดำเนินงานและราคาได้ที่หน้า การพัฒนาเว็บไซต์ หาก ติดต่อเรา พร้อมแนบ URL ของเว็บปัจจุบัน เราจะเรียบเรียงกลับไปว่าควรเริ่มแก้จากจุดใดจึงเห็นผลง่าย

บทความที่เกี่ยวข้อง

• ค่าใช้จ่ายในการทำเว็บไซต์สำหรับ SME — ตารางราคาอ้างอิงฉบับย่อและวิธีอ่านใบเสนอราคา
• กรณีศึกษาการปรับปรุงเว็บไซต์: Douzu Carry Service บริษัทขนส่งในมิยาซากิ
• สามจุดแรกที่ต้องแก้บนเว็บไซต์ที่ไม่สร้างการติดต่อสอบถาม
• การพัฒนาเว็บไซต์

อ้างอิง

• Digital Agency, Digital Agency Design System β. ข้อกำหนดมาตรฐานด้านการออกแบบที่เผยแพร่สำหรับเว็บไซต์และแอปของบริการภาครัฐ
• Digital Agency, ข้อควรระวังในการใช้งาน. สัญญาอนุญาตและเงื่อนไขการใช้ระบบออกแบบ โดยแยกสัญญาอนุญาตของข้อมูล Figma ไอคอนที่แนบมา และ code snippet
• Digital Agency, นโยบายลิขสิทธิ์. นโยบายลิขสิทธิ์ที่ใช้กับเว็บไซต์ของระบบออกแบบ (ข้อความอธิบายและแนวทาง) (ข้อกำหนดการใช้ข้อมูลสาธารณะ เวอร์ชัน 1.0)

บทความที่เกี่ยวข้อง

บทความล่าสุดที่มีแท็กเดียวกัน เพื่อเจาะลึกหัวข้อใกล้เคียง

หัวข้อที่เกี่ยวข้อง

หน้าเหล่านี้วางหัวข้อไว้ในบริบทที่กว้างขึ้นของบริการและการตัดสินใจ

บริการที่เกี่ยวข้องกับหัวข้อนี้

บทความนี้เกี่ยวข้องโดยตรงกับบริการต่อไปนี้

คำถามที่พบบ่อย

คำถามที่มักพบในการปรึกษาเกี่ยวกับหัวข้อของบทความนี้

ใช้ระบบออกแบบของ Digital Agency กับเว็บไซต์บริษัทเอกชนได้หรือไม่

ได้ ระบบออกแบบของ Digital Agency เผยแพร่ภายใต้สัญญาอนุญาตแบบเปิด และใช้กับเว็บไซต์นอกหน่วยงานภาครัฐได้ แต่การนำไปใช้ไม่ได้หมายความว่าได้รับการรับรองหรืออนุมัติจาก Digital Agency ตำแหน่งของเราก็เช่นกัน คือนำระบบออกแบบที่เผยแพร่แล้วมาประยุกต์กับเว็บไซต์ภาคเอกชน

ถ้าดีไซน์เป็นมาตรฐาน เว็บจะหน้าตาเหมือนของบริษัทอื่นหรือไม่

สิ่งที่เป็นมาตรฐานร่วมกันมีแค่กฎการออกแบบเรื่องสี ระยะห่าง และคอมโพเนนต์ โลโก้ รูปภาพ สโลแกน และโครงหน้าเพจสร้างใหม่ทีละเว็บไซต์ ภาพรวมที่คนเห็นจริง ๆ มาจากส่วนนี้เป็นหลัก ดังนั้นแม้ทำให้เป็นมาตรฐานก็ไม่ได้กลายเป็นเว็บที่เคยเห็นที่ไหนมาก่อน ในทางกลับกัน ส่วนที่ควรจะเหมือนกัน เช่น ความกดง่ายของปุ่มและความอ่านง่ายของตัวอักษร จะถูกจัดให้ตรงกัน นั่นคือผลของการทำเป็นมาตรฐาน

โปรไฟล์ผู้เขียน

หน้าแนะนำผู้เขียนบทความ

Go Komura

ผู้แทนของ KomuraSoft LLC

เชี่ยวชาญด้านการพัฒนาซอฟต์แวร์ Windows ที่ปรึกษาเทคนิค และการตรวจสอบบั๊ก โดยเฉพาะโปรเจกต์ที่มีระบบเดิมและบั๊กที่ทำซ้ำได้ยาก