เคสนี้เหมาะกับใคร
เหมาะกับมูลนิธิ องค์กรไม่แสวงหากำไร หน่วยงานการศึกษา และทุกองค์กรที่กำลังเขียน TOR หรือเปิดประกวดราคาทำเว็บไซต์
เคสนี้เล่าว่าก่อนเราชนะประกวดราคา เราวิเคราะห์อะไรบ้าง เสนออะไรไป และตั้งใจทำโครงการนี้อย่างไร คนที่กำลังจะเปิดประกวดราคาจะเห็นว่าข้อเสนอที่ดีควรตอบอะไรมากกว่ารายการในสัญญา
เราไม่ระบุชื่อองค์กร ชื่อโครงการ ชื่อเว็บต้นแบบ และมูลค่าสัญญา
1. โจทย์ตาม TOR
มูลนิธิด้านการอนุรักษ์ระดับนานาชาติ สำนักงานประเทศไทย เปิดประกวดราคาทำเว็บไซต์ภาษาไทยของโครงการอาสาสมัครออนไลน์ ต่อยอดจากเว็บต้นแบบที่สำนักงานในอีกประเทศหนึ่งทำไว้
เป้าหมายของเว็บมี 2 อย่าง
- ให้ความรู้ กับเยาวชน ครูอาจารย์ และคนทั่วไป เรื่องการค้าสัตว์ป่าบนโลกออนไลน์
- ชวนคนสมัครเป็นอาสาสมัคร ช่วยรายงานประกาศขายสัตว์ป่าที่ผิดกฎหมาย
TOR ขอให้ปรับภาษา เนื้อหา กรณีศึกษา และภาพประกอบให้เข้ากับบริบทไทย และระบุให้ใช้ WordPress
ตอนอ่าน TOR คู่กับเว็บต้นแบบ เราตั้งเกณฑ์ไว้ข้อหนึ่ง คือ งานนี้จะถือว่าสำเร็จก็ต่อเมื่อมีคนไทยได้อ่านเนื้อหาจริง และมีคนกดสมัครจริง ไม่ใช่แค่มีเว็บที่ทำครบตามรายการในสัญญา ข้อเสนอทั้งฉบับเขียนจากมุมนั้น
2. ก่อนยื่นข้อเสนอ เราวิเคราะห์อะไร
เว็บต้นแบบสวยและเนื้อหาดี แต่ช้ามากบนมือถือ
เราวัดเว็บต้นแบบด้วย Google Lighthouse แบบจำลองมือถือกับเน็ตความเร็วปานกลาง ซึ่งใกล้เคียงกับที่คนส่วนใหญ่ใช้จริง
ลองนึกภาพเด็กมัธยมที่เห็นเพื่อนแชร์ลิงก์มาในไลน์ กดเข้ามาแล้วเจอหน้าขาวนิ่งเกือบสิบวินาที ส่วนใหญ่จะกดย้อนกลับก่อน เนื้อหาดี ๆ ที่ทีมงานตั้งใจทำจึงไปไม่ถึงคนอ่าน
| สิ่งที่พบ | สาเหตุ | ผลต่อเวอร์ชันไทย |
|---|---|---|
| หน้าเว็บช้าและกดไม่ตอบสนอง | ตัวสร้างหน้าเว็บ (Page Builder) กับปลั๊กอินซ้อนกันหลายชั้น | ถ้าสร้างด้วยวิธีเดิม จะได้ข้อจำกัดด้านความเร็วชุดเดียวกัน |
| หน้าหนัก 6.1 MB | วิดีโอเล่นอัตโนมัติ 4 ไฟล์ และภาพ PNG ขนาดใหญ่ที่ยังไม่แปลงเป็น WebP | คนในพื้นที่สัญญาณไม่ดีหรือเน็ตจำกัดเข้าถึงยาก |
| ปุ่มสมัครพาออกไปฟอร์มภายนอก | ใช้บริการฟอร์มของบุคคลที่สาม | ติดตามไม่ได้ว่ามีคนสนใจกี่คนและหลุดตรงไหน ข้อมูลผู้สมัครไม่ได้อยู่ในระบบขององค์กร |
| เนื้อหาทั้งหมดอยู่ในหน้าเดียว | ออกแบบเป็น One-page | Google ไม่มีหน้าแยกสำหรับแต่ละหัวข้อ เว็บต้องพึ่งการแชร์บนโซเชียลอย่างเดียว |
| Metadata และ Sitemap | ทำมาดีแล้ว Lighthouse SEO 100 | รักษามาตรฐานเดิมไว้และต่อยอด |
องค์กรมีความน่าเชื่อถือสูงมาก แต่ยังไม่มีใครค้นเจอโครงการ
| โดเมน | Domain Rating | Referring Domains | คำที่ติดอันดับในไทย |
|---|---|---|---|
| เว็บต้นแบบของโครงการ | 67 | 12 | 0 |
| เว็บองค์กร สำนักงานไทย | 52 | 809 | 0 |
| เว็บองค์กร สำนักงานต้นแบบ | 67 | 1,847 | 2 |
ช่องขวาสุดบอกว่า ยังไม่มีคำค้นภาษาไทยคำไหนเลยที่พาคนมาเจอโครงการ ใครสนใจเรื่องนี้อยู่แล้วก็ยังหาโครงการไม่เจอด้วยตัวเอง นอกจากจะบังเอิญเห็นคนแชร์
แต่อีกช่องเป็นข่าวดีกว่านั้นมาก Domain Rating 52–67 คือความน่าเชื่อถือที่องค์กรสะสมมาเป็นสิบปี องค์กรที่เพิ่งตั้งใหม่ต้องใช้เวลาหลายปีกว่าจะมาถึงจุดนี้ ของดีมีอยู่ในมือแล้ว แค่ยังไม่ได้เอามาใช้
คนไทยค้นเรื่องสัตว์ป่าด้วยคำอะไร
ทุกวันนี้คนที่ค้น “สัตว์ป่าคุ้มครอง” ได้อ่านอะไร
ค่าความยากในตารางเป็นแค่ตัวเลขประมาณการ เราจึงเปิดหน้าผลค้นหาจริงของคำนี้ ซึ่งมีคนค้นเดือนละ 1,700 ครั้ง
| อันดับ | สิ่งที่ครองอยู่ | ข้อสังเกต |
|---|---|---|
| บนสุด | AI Overview ของ Google | สรุปคำตอบให้ คนจำนวนไม่น้อยอ่านแค่ตรงนี้แล้วปิดไป |
| 2 | เว็บเล็ก DR 22 | ครองอันดับสูงสุดของผลปกติ ได้คนเข้าราว 739 ครั้งต่อเดือน |
| 3 | สารานุกรมออนไลน์ภาษาไทย | บทความทั่วไป ไม่ได้ออกแบบมาเพื่อสอนหรือชวนลงมือทำ |
| 5, 9 | โพสต์โซเชียลของหน่วยงานรัฐ | ไม่ใช่หน้าเว็บที่มีโครงสร้างเนื้อหาชัดเจน |
| 6, 7, 10 | เว็บราชการ | แทบไม่มีใครลิงก์ถึง Referring Domains 0–2 |
สิ่งที่เห็น: คนที่ค้นคำนี้ส่วนใหญ่ไปจบที่โพสต์โซเชียลกับหน้าประกาศราชการ ซึ่งถูกต้องแต่อ่านยาก และไม่ได้บอกว่าอ่านจบแล้วทำอะไรต่อได้ ขณะที่หน้าที่คนเข้าเยอะที่สุดกลับเป็นเว็บเล็กที่ DR แค่ 22 ถ้าองค์กรที่มี DR 52 ทำหน้าเนื้อหาเรื่องนี้ให้ดี โอกาสที่จะกลายเป็นแหล่งอ้างอิงหลักของคำนี้มีสูงมาก โดยไม่ต้องซื้อโฆษณา
และถ้าอยากให้ข้อมูลที่ถูกต้องขององค์กรเป็นสิ่งที่ AI หยิบไปตอบ เนื้อหาต้องจัดโครงสร้างให้เครื่องอ่านรู้เรื่องตั้งแต่ตอนสร้าง ไม่ใช่มาไล่แก้ทีหลัง
3. เราเสนออะไรไป
คงหน้าตาเดิม เปลี่ยนวิธีสร้างเบื้องหลัง
TOR ระบุ WordPress ซึ่งเราเห็นด้วยในแง่การจัดการเนื้อหา เพราะทีมขององค์กรต้องแก้เนื้อหาเองได้ แต่ความช้าของเว็บต้นแบบมาจากการที่ WordPress ทำสองหน้าที่พร้อมกัน คือเก็บเนื้อหาและประกอบหน้าเว็บสด ๆ ทุกครั้งที่มีคนเข้า เราจึงเสนอสองแนวทางให้เลือก
| แนวทาง | รายละเอียด | เป้าหมายความเร็ว |
|---|---|---|
| A · WordPress เต็มรูปแบบ ตรงตาม TOR ทุกตัวอักษร | ธีมลิขสิทธิ์แท้ปรับโค้ดเอง ไม่พึ่ง Page Builder ซ้อนชั้น ทำแคชระดับหน้า แปลงภาพเป็น WebP ตัด JavaScript ที่ไม่จำเป็น | Performance 85 ขึ้นไป |
| B · Astro + WordPress แบบ Headless (แนวทางที่เราแนะนำ) | ทีมยังเขียนและแก้เนื้อหาในหน้าจอ WordPress เหมือนเดิม แต่หน้าเว็บที่คนเห็นถูกสร้างล่วงหน้าเป็นไฟล์สแตติก แทบไม่มี JavaScript วิ่งบนเครื่องผู้ใช้ | Performance 95 ขึ้นไป · LCP ต่ำกว่า 2 วินาที |
อธิบายแบบไม่ใช้ศัพท์เทคนิค แนวทาง B เหมือนพิมพ์หนังสือเสร็จแล้ววางไว้บนชั้น ใครเดินเข้ามาก็หยิบอ่านได้เลย ส่วนวิธีเดิมคือรอให้คนเดินเข้าร้านก่อนแล้วค่อยเรียงพิมพ์ใหม่ทั้งเล่ม สำหรับทีมขององค์กร หน้าจอที่ใช้ทำงานเหมือนเดิมทุกอย่าง
แยกเนื้อหาออกเป็นหลายหน้า
เราถอดโครงสร้างของเว็บต้นแบบทั้งหมด ตั้งแต่ปุ่มสมัคร แถบตัวเลขสถิติ ส่วนอธิบายวิธีเข้าร่วม ไทม์ไลน์รายงาน การ์ดสัตว์ที่ถูกลักลอบค้าแบบคลิกเปิด ไปจนถึงส่วนข่าวที่สื่อรายงาน
จากนั้นเสนอให้ แยกเนื้อหาที่มีคุณค่าด้านความรู้ออกเป็นหน้าที่มี URL ของตัวเอง แต่ละหัวข้อจะมีโอกาสติดอันดับตามคำค้นที่คนไทยใช้จริง โดยยังคงประสบการณ์เลื่อนอ่านต่อเนื่องบนหน้าแรกไว้
ฟีเจอร์ที่วัดผลได้ ไม่ใช่แค่มีครบ
| ฟีเจอร์ | สิ่งที่ส่งมอบ |
|---|---|
| แบบทดสอบเพื่อการศึกษา | ควิซที่ทีมเพิ่มและแก้คำถามเองได้ มีเฉลยพร้อมคำอธิบาย และปุ่มแชร์ผลไปโซเชียล ซึ่งเป็นกลไกกระจายตัวตามธรรมชาติ |
| โมดูลเรียนรู้แบบโต้ตอบ | การ์ดสัตว์คลิกเปิดข้อมูลเชิงลึก ไทม์ไลน์รายงาน และแบบฝึกจำแนกประกาศต้องสงสัย |
| สื่อการเรียนดาวน์โหลด | คลังไฟล์จัดหมวดหมู่ ค้นหาได้ และนับยอดดาวน์โหลดรายไฟล์ องค์กรจะรู้ว่าสื่อชิ้นไหนถูกใช้จริง |
| ฟอร์มสมัครอาสาสมัครในเว็บขององค์กรเอง | ป้องกันสแปมโดยไม่ใช้ CAPTCHA ที่รบกวนผู้ใช้ แจ้งเตือนทางอีเมล ส่งออกเป็นไฟล์ตารางได้ ข้อมูลอยู่ในระบบที่องค์กรดูแลเอง |
| ระบบวัดผล | GA4 ผ่าน Google Tag Manager วัดการกดปุ่มสมัคร การส่งฟอร์มสำเร็จ การทำควิซจบ การดาวน์โหลดสื่อ และความลึกในการอ่าน |
ใส่งานที่ TOR ไม่ได้ขอ เพราะทำตอนสร้างถูกที่สุด
TOR ไม่ได้ของาน SEO และ AI Search เราใส่ให้ในข้อเสนอเดียวกัน เพราะงานพวกนี้ถ้าทำตอนสร้างเว็บใช้เวลาไม่กี่วัน แต่ถ้ารอทำทีหลังต้องกลับมารื้อโครงสร้างหน้าแทบทั้งหมด
- Technical SEO Sitemap, canonical, hreflang ไทย-อังกฤษ, URL ที่อ่านเข้าใจได้ และ Core Web Vitals ผ่านทั้งสามตัว
- On-Page ชื่อหน้า คำอธิบายหน้า และหัวข้อทุกหน้าอิงคำค้นจริง พร้อมแผนลิงก์ภายใน
- Structured Data Organization, WebSite, Article, BreadcrumbList, FAQPage และ Quiz
- AI Search ไฟล์ llms.txt เปิดให้บอต AI หลักเข้าอ่าน และจัดเนื้อหาเป็นคำถาม-คำตอบที่ AI หยิบไปอ้างอิงง่าย
- การเข้าถึง ยึดเกณฑ์ WCAG 2.2 ระดับ AA เพราะกลุ่มเป้าหมายรวมถึงสถานศึกษา
นอกจากนี้ยังยืดช่วงดูแลหลังเปิดเว็บเป็น 60 วัน จากที่ TOR กำหนดขั้นต่ำ 30 วัน และส่งมอบแผนเนื้อหา 6 เดือนแรกให้ทีมเขียนต่อเอง เหตุผลคือโครงการแบบนี้ใช้เงินบริจาคและเงินสนับสนุน สิ่งที่ส่งมอบจึงควรทำงานต่อได้เองหลังจบสัญญา ไม่ใช่หยุดอยู่แค่วันที่เว็บขึ้น
4. ตอนนี้ชนะแล้ว เราตั้งใจทำโครงการนี้อย่างไร
ข้อเสนอนี้ได้รับเลือก แผนงานตามข้อเสนอใช้เวลา 12 สัปดาห์
| ช่วง | งาน | สิ่งที่องค์กรจะเห็น |
|---|---|---|
| สัปดาห์ 1 | ประชุมเริ่มโครงการ | สรุปขอบเขต รับไฟล์ภาพ เนื้อหา และคู่มือแบรนด์ ยืนยันแนวทาง A หรือ B |
| สัปดาห์ 2–3 | ออกแบบ UX/UI | แบบหน้าจอครบทุกหน้า ทั้งมือถือและเดสก์ท็อป |
| สัปดาห์ 3–4 | วางโครงสร้างระบบ | CMS โครงสร้างหน้า และแผนผัง URL พร้อมคำค้นเป้าหมายรายหน้า |
| สัปดาห์ 4–8 | พัฒนาเว็บไซต์ | เว็บทดลองที่เข้าดูความคืบหน้าได้ตลอด |
| สัปดาห์ 6–9 | นำเนื้อหาขึ้นระบบ | เนื้อหาไทยและอังกฤษ ควิซ และสื่อดาวน์โหลดพร้อมใช้ |
| สัปดาห์ 9–10 | ทดสอบและ UAT | รายงานผลทดสอบพร้อมหลักฐาน และช่วงให้ทีมทดลองใช้ 5 วันทำการ |
| สัปดาห์ 11 | เปิดใช้งานจริง | ส่ง Sitemap เข้า Google และเริ่มเก็บข้อมูลผู้ใช้ |
| สัปดาห์ 12 | ส่งมอบ | คู่มือการใช้งานภาษาไทยพร้อมภาพหน้าจอทุกขั้นตอน ซอร์สโค้ดทั้งหมด และเริ่มนับช่วงดูแล 60 วัน |
สิ่งที่เรายึดตลอดโครงการมี 3 ข้อ
- วัดความสำเร็จจากคนอ่านและคนสมัคร ไม่ใช่แค่ส่งงานครบรายการ ระบบวัดผลจึงต้องพร้อมตั้งแต่วันเปิดเว็บ
- ทีมขององค์กรต้องทำต่อได้เอง คู่มือเขียนแบบ “จะแก้ตรงนี้ ต้องเข้าไปตรงไหน แล้วกดอะไร” และซอร์สโค้ดทั้งหมดเป็นขององค์กร
- เร็วบนมือถือทุกพื้นที่ เพราะคนอ่านหลักคือเยาวชนที่เปิดลิงก์จากแชท
5. ผลที่คาดหวัง
ตารางนี้คือเกณฑ์ที่เราเสนอว่าต้องผ่านก่อนส่งมอบ เป็นเป้าหมาย ไม่ใช่ผลที่เกิดขึ้นแล้ว เว็บยังอยู่ระหว่างพัฒนา
| เกณฑ์ก่อนส่งมอบ | เป้าหมาย |
|---|---|
| Lighthouse มือถือ Performance | 90 ขึ้นไป (แนวทาง B) หรือ 85 ขึ้นไป (แนวทาง A) · SEO 100 |
| Core Web Vitals | ผ่านทั้งสามตัว |
| การเข้าถึง | ไม่มีข้อผิดพลาดร้ายแรงจากการตรวจด้วย axe ใช้งานทุกฟังก์ชันด้วยแป้นพิมพ์ได้ |
| ลิงก์และฟอร์ม | ไม่มีลิงก์เสีย ฟอร์มและควิซทำงานถูกต้องทุกเส้นทาง |
| ทดสอบข้ามอุปกรณ์ | Chrome, Safari, Firefox, Edge ทั้งเดสก์ท็อป iOS และ Android |
ส่วนผลระยะยาวที่เราอยากเห็น คือ คนไทยที่ค้นเรื่องสัตว์ป่าเดินมาเจอโครงการเอง แทนที่จะรู้จักผ่านการแชร์อย่างเดียว เราจะกลับมาอัปเดตเคสนี้เมื่อเว็บเปิดใช้งานและมีตัวเลขจริง
เช็กลิสต์สำหรับองค์กรที่กำลังเขียน TOR ทำเว็บไซต์
ก่อนเปิดประกวดราคา
- ระบุเป้าหมายที่วัดได้ เช่น จำนวนผู้สมัครหรือผู้ทำแบบทดสอบ ไม่ใช่แค่รายการหน้าเว็บ
- ขอให้ผู้เสนอวัดความเร็วเว็บเดิมหรือเว็บต้นแบบจริง และบอกเป้าหมายเป็นตัวเลข
- ระบุว่าข้อมูลผู้สมัครต้องอยู่ในระบบที่องค์กรดูแลเอง
- ขอคู่มือการใช้งานภาษาไทยและซอร์สโค้ดทั้งหมดเป็นขององค์กร
ตอนอ่านข้อเสนอ
- ผู้เสนอดูแล้วหรือยังว่าคนค้นหาเรื่องนี้ด้วยคำอะไร
- มีแผน SEO และการวัดผลรวมอยู่ในงานสร้าง ไม่ใช่งานเพิ่มทีหลัง
- มีเกณฑ์ตรวจรับที่วัดได้ เช่น คะแนน Lighthouse และผลตรวจการเข้าถึง
- ช่วงดูแลหลังเปิดเว็บยาวพอให้ทีมใช้งานจนคล่อง
คำถามที่องค์กรไม่แสวงหากำไรถามเราบ่อย
ใช้ WordPress แล้วทำให้เร็วได้ไหม ได้ ถ้าไม่ซ้อนตัวสร้างหน้าเว็บกับปลั๊กอินหลายชั้น และถ้าต้องการเร็วที่สุด ใช้ WordPress เป็นที่เก็บเนื้อหาอย่างเดียว แล้วให้หน้าเว็บที่คนเห็นเป็นไฟล์สแตติก ทีมยังแก้เนื้อหาในหน้าจอ WordPress เหมือนเดิม
เว็บหน้าเดียวไม่ดีตรงไหน สวยและเล่าเรื่องได้ดี แต่ Google ไม่มีหน้าแยกให้แต่ละหัวข้อติดอันดับ คนที่ค้นหาเรื่องนั้นเองจึงหาไม่เจอ ทางที่ดีคือคงหน้าแรกแบบเลื่อนอ่านต่อเนื่องไว้ แล้วแยกเนื้อหาความรู้ออกเป็นหน้าของตัวเอง
องค์กรมีชื่อเสียงอยู่แล้ว ยังต้องทำ SEO อีกไหม ต้องทำ ชื่อเสียงขององค์กรคือความน่าเชื่อถือที่ Google ให้น้ำหนักมาก แต่ถ้าไม่มีหน้าที่ตอบคำค้นของคนทั่วไป ความน่าเชื่อถือนั้นก็ไม่ถูกใช้ ในเคสนี้โดเมนมี DR 52–67 แต่ยังไม่มีคำค้นภาษาไทยคำไหนพาคนมาเจอโครงการ
ทำไมต้องคิดเรื่อง AI Search ตั้งแต่ตอนนี้ เพราะคำค้นเรื่องความรู้หลายคำมี AI Overview สรุปคำตอบอยู่บนสุดแล้ว ถ้าอยากให้ข้อมูลที่ถูกต้องขององค์กรเป็นสิ่งที่ AI หยิบไปตอบ เนื้อหาต้องจัดโครงสร้างให้เครื่องอ่านเข้าใจตั้งแต่วันสร้าง
เราทำเว็บให้องค์กรแบบนี้
ถ้าองค์กรของคุณกำลังจะทำเว็บไซต์หรือเขียน TOR เริ่มได้จาก ขอตรวจเว็บฟรี เราจะวัดเว็บเดิมให้ก่อน และบอกตรง ๆ ว่าควรลงทุนตรงไหน หรือดูบริการ รับทำเว็บไซต์
