การเลือกใช้คำศัพท์เฉพาะทาง (Technical Terms) ที่ถูกต้องตามหลักสากล เป็นปัจจัยสำคัญที่จะช่วยให้ปัญญาประดิษฐ์ (AI) เข้าใจโครงสร้าง สถาปัตยกรรม และองค์ประกอบทางกายภาพของเว็บไซต์ที่คุณต้องการได้อย่างแม่นยำ โดยคลังคำศัพท์มาตรฐาน 100 คำ สามารถแบ่งออกตามหมวดหมู่การใช้งานได้ดังนี้
1. หมวดเลย์เอาต์และโครงสร้างทางกายภาพ (Layout & Structure)
| ลำดับ | คำศัพท์ | นิยามและความหมายเชิงระบบ |
| 1 | Hero Section | พื้นที่ส่วนบนสุดของหน้าเว็บ ทำหน้าที่แสดงข้อความหลักและรูปภาพสำคัญเพื่อสื่อสารคุณค่าของแบรนด์ |
| 2 | Header | ส่วนหัวของเว็บไซต์ที่ปรากฏในทุกหน้า มักบรรจุโลโก้และแถบเมนูนำทางหลัก |
| 3 | Footer | ส่วนท้ายหรือด้านล่างสุดของเว็บไซต์ สำหรับจัดวางข้อมูลติดต่อ ข้อกำหนดทางกฎหมาย และลิงก์ย่อย |
| 4 | Navigation Bar (Navbar) | แถบเมนูหลักที่รวบรวมลิงก์สำหรับนำทางผู้ใช้งานไปยังหน้าต่างๆ ภายในเว็บไซต์ |
| 5 | Sidebar | แถบเมนูด้านข้างหน้าเว็บ สำหรับแสดงข้อมูลเพิ่มเติมหรือเมนูย่อยแยกจากเนื้อหาหลัก |
| 6 | Above the Fold | พื้นที่หน้าจอส่วนแรกที่ผู้ใช้มองเห็นได้ทันทีเมื่อเปิดเว็บ โดยที่ยังไม่ได้ทำการเลื่อนหน้าจอลงด้านล่าง |
| 7 | Below the Fold | พื้นที่หน้าจอส่วนที่อยู่ถัดลงไป ซึ่งผู้ใช้งานจำเป็นต้องทำการเลื่อนหน้าจอ (Scroll) จึงจะมองเห็นเนื้อหา |
| 8 | Container | กล่องโครงสร้างที่ทำหน้าที่กำหนดและควบคุมความกว้างสูงสุดของเนื้อหาไม่ให้กระจายหลุดขอบหน้าจอ |
| 9 | Grid System | ระบบโครงสร้างตารางแนวตั้งและแนวนอน เพื่อใช้จัดระเบียบและการวางตำแหน่งขององค์ประกอบให้สมดุล |
| 10 | Flexbox | ระบบการจัดวางองค์ประกอบแบบยืดหยุ่นในทิศทางแนวเดียว (แถวหรือคอลัมน์) เพื่อรองรับหน้าจอหลายขนาด |
| 11 | Card Component | กล่องสี่เหลี่ยมสำหรับจัดกลุ่มข้อมูลย่อยที่มีความเกี่ยวข้องกัน เช่น รายการสินค้า หรือบล็อกบทความ |
| 12 | Modal / Dialog | หน้าต่างที่แสดงผลเลื่อนซ้อนทับขึ้นมาบนหน้าจอหลัก เพื่อแจ้งเตือนหรือให้ผู้ใช้กรอกข้อมูลเฉพาะจุด |
| 13 | Popup | หน้าต่างขนาดเล็กที่ปรากฏขึ้นมาชั่วคราวเพื่อแจ้งข้อมูลสำคัญหรือการประชาสัมพันธ์ |
| 14 | Drawer | แถบเมนูหรือหน้าต่างข้อมูลที่เลื่อนออกมาจากขอบหน้าจอฝั่งใดฝั่งหนึ่ง และพับเก็บได้ |
| 15 | Accordion | รูปแบบการจัดวางข้อมูลที่ผู้ใช้สามารถกดคลิกเพื่อขยายดูรายละเอียดหรือยุบเก็บเนื้อหาได้ |
| 16 | Tab Component | ส่วนประกอบที่ช่วยให้ผู้ใช้สามารถสลับเปลี่ยนเนื้อหาไปมาภายในพื้นที่หรือหน้าต่างเดียวกันได้ |
| 17 | Carousel / Slider | ส่วนแสดงผลเนื้อหา รูปภาพ หรือแบนเนอร์ที่สามารถเลื่อนสไลด์ไปทางซ้ายหรือขวาได้ |
| 18 | Banner | แถบพื้นที่ภาพหรือข้อความขนาดใหญ่สำหรับใช้ประกาศข้อมูลสำคัญหรือการโฆษณา |
| 19 | Section | การแบ่งสัดส่วนเนื้อหาภายในหน้าเว็บออกเป็นหมวดหมู่ย่อยตามลำดับเรื่องราว |
| 20 | Layout | แผนผังโครงสร้างการจัดวางองค์ประกอบและภาพรวมทั้งหมดของหน้าเว็บไซต์ |
2. หมวดส่วนประกอบปฏิสัมพันธ์ (UX/UI Components)
| ลำดับ | คำศัพท์ | นิยามและความหมายเชิงระบบ |
| 21 | CTA (Call to Action) | ปุ่มหรือข้อความที่มีเป้าหมายชัดเจนเพื่อกระตุ้นให้ผู้ใช้งานกระทำกิจกรรมอย่างใดอย่างหนึ่ง |
| 22 | Button | ปุ่มกดสำหรับส่งคำสั่งโต้ตอบกับระบบ |
| 23 | Form | ชุดแบบฟอร์มที่ประกอบด้วยช่องว่างต่างๆ เพื่อรับข้อมูลจากผู้ใช้งานส่งไปยังระบบหลังบ้าน |
| 24 | Input Field | ช่องสำหรับให้ผู้ใช้งานพิมพ์หรือกรอกข้อความข้อมูล |
| 25 | Dropdown | เมนูรายการเลือกรูปแบบรายการที่จะขยายลงมาด้านล่างเมื่อคลิก เพื่อให้ผู้ใช้เลือกตัวเลือกที่กำหนด |
| 26 | Checkbox | ช่องทำเครื่องหมายที่อนุญาตให้ผู้ใช้งานสามารถเลือกตัวเลือกได้มากกว่าหนึ่งรายการพร้อมกัน |
| 27 | Radio Button | ปุ่มตัวเลือกรูปวงกลมที่กำหนดให้ผู้ใช้งานสามารถเลือกได้เพียงตัวเลือกเดียวภายในกลุ่มที่จัดไว้ |
| 28 | Toggle / Switch | ปุ่มควบคุมรูปแบบสวิตช์สำหรับเปิดหรือปิดการทำงานของฟังก์ชันใดฟังก์ชันหนึ่ง |
| 29 | Slider (Range) | แถบควบคุมที่ผู้ใช้สามารถเลื่อนเพื่อปรับเพิ่มหรือลดระดับค่าตัวเลขตามเกณฑ์ที่กำหนด |
| 30 | Tooltip | กล่องข้อความอธิบายขนาดเล็กที่จะปรากฏขึ้นเมื่อผู้ใช้นำเมาส์ไปชี้ (Hover) ที่องค์ประกอบนั้น |
| 31 | Breadcrumb | แถบแสดงเส้นทางการเข้าถึงหน้าเว็บย่อย เพื่อให้ผู้ใช้ทราบลำดับชั้นของหน้าปัจจุบันที่กำลังใช้งาน |
| 32 | Pagination | ส่วนประกอบสำหรับแบ่งหน้าข้อมูลปริมาณมากออกเป็นหน้าย่อยๆ พร้อมตัวเลขลำดับหน้า |
| 33 | Badge | ป้ายสัญลักษณ์หรือตัวเลขขนาดเล็กสำหรับแสดงสถานะ หรือแจ้งเตือนปริมาณข้อมูล |
| 34 | Avatar | กรอบรูปภาพทรงกลมหรือสี่เหลี่ยมสำหรับแสดงภาพโปรไฟล์ของผู้ใช้งาน |
| 35 | Tag / Chip | ป้ายกำกับข้อความขนาดเล็กสำหรับระบุประเภท หมวดหมู่ หรือคำสำคัญ (Keywords) ของเนื้อหา |
| 36 | Progress Bar | แถบแสดงสถานะความคืบหน้าของกระบวนการทำงานหรือขั้นตอนของระบบ |
| 37 | Spinner / Loader | สัญลักษณ์วงกลมหมุนเพื่อสื่อสารให้ผู้ใช้ทราบว่าระบบกำลังอยู่ในระหว่างการประมวลผล |
| 38 | Skeleton Loader | โครงร่างจำลองสีเทาที่แสดงรูปร่างของเนื้อหาก่อนที่ข้อมูลจริงจะโหลดเสร็จสิ้น |
| 39 | Toast / Snackbar | กล่องแจ้งเตือนขนาดเล็กที่ปรากฏขึ้นบริเวณขอบจอชั่วคราวและจางหายไปอัตโนมัติ |
| 40 | Empty State | การออกแบบหน้าจอเพื่อแสดงผลในกรณีที่ระบบยังไม่มีข้อมูลใดๆ แสดงผลอยู่ |
3. หมวดแนวคิดและการออกแบบประสบการณ์ (Design Concepts & UX)
| ลำดับ | คำศัพท์ | นิยามและความหมายเชิงระบบ |
| 41 | Wireframe | ภาพร่างโครงสร้างหน้าเว็บในรูปแบบลายเส้นขาวดำ เพื่อวางพิมพ์เขียวตำแหน่งองค์ประกอบ |
| 42 | Mockup | ภาพแบบจำลองงานออกแบบพื้นผิวที่มีการลงสี ฟอนต์ และรูปภาพใกล้เคียงกับงานจริง |
| 43 | Prototype | ชิ้นงานแบบจำลองโครงสร้างที่สามารถคลิกและโต้ตอบได้จริงเพื่อทดสอบขั้นตอนการทำงาน |
| 44 | User Flow | แผนผังแสดงขั้นตอนลำดับการกดเลือกหน้าจอของผู้ใช้เพื่อบรรลุวัตถุประสงค์ในระบบ |
| 45 | User Journey | แผนภาพแสดงภาพรวมประสบการณ์และความรู้สึกของผู้ใช้ตลอดกระบวนการใช้งานแบรนด์ |
| 46 | Persona | ข้อมูลสมมุติของตัวแทนกลุ่มเป้าหมาย เพื่อใช้ระบุพฤติกรรมและความต้องการในการออกแบบ |
| 47 | Information Architecture (IA) | การจัดลำดับแผนผังโครงสร้างและการจัดหมวดหมู่ข้อมูลทั้งหมดภายในเว็บไซต์ |
| 48 | Visual Hierarchy | หลักการจัดลำดับความสำคัญของข้อมูลด้วยขนาด สี และตำแหน่งเพื่อนำสายตาผู้ใช้งาน |
| 49 | White Space | พื้นที่ว่างที่ไม่มีองค์ประกอบใดๆ จัดวางอยู่ เพื่อช่วยสร้างความสมดุลและลดความหนาแน่น |
| 50 | Typography | ศิลปะและหลักการจัดวางตัวอักษร การเลือกขนาด ฟอนต์ และระยะห่างเพื่อการอ่านที่ง่าย |
| 51 | Color Palette | กลุ่มชุดสีที่แบรนด์กำหนดขึ้นเพื่อใช้ควบคุมทิศทางอารมณ์ของงานออกแบบ |
| 52 | Contrast Ratio | อัตราส่วนความต่างระหว่างสีของตัวอักษรและสีพื้นหลังเพื่อให้เป็นไปตามมาตรฐานการอ่าน |
| 53 | Accessibility (a11y) | หลักการออกแบบเว็บไซต์เพื่อรองรับการใช้งานของผู้พิการหรือผู้มีข้อจำกัดทางร่างกาย |
| 54 | Responsive Design | เทคนิคการเขียนเว็บให้สามารถปรับเปลี่ยนขนาด Layout ตามสัดส่วนหน้าจออุปกรณ์ได้โดยอัตโนมัติ |
| 55 | Mobile-first | แนวคิดการขึ้นโครงสร้างออกแบบสำหรับหน้าจอสมาร์ทโฟนก่อน แล้วขยายไปยังหน้าจอขนาดใหญ่ |
| 56 | Adaptive Design | การออกแบบโครงสร้างหน้าเว็บที่ถูกล็อกสัดส่วนไว้ล่วงหน้าตามขนาดหน้าจอมาตรฐานที่กำหนด |
| 57 | Dark / Light Mode | ตัวเลือกการสลับชุดสีหน้าจอระหว่างโทนสีสว่างและโทนสีมืดเพื่อความสบายตา |
| 58 | Design System | คลังระบบมาตรฐานการดีไซน์และชุดโค้ดขององค์กร เพื่อให้ทุกแอปพลิเคชันไปในทิศทางเดียวกัน |
| 59 | Style Guide | เอกสารคู่มือข้อกำหนดเกณฑ์การใช้งานองค์ประกอบศิลป์ เช่น รูปแบบโลโก้ ฟอนต์ และชุดสีประจำแบรนด์ |
| 60 | Component Library | ชุดศูนย์รวมชิ้นส่วนดีไซน์สำเร็จรูปมาตรฐานที่พร้อมนำไปพัฒนาซ้ำในโปรเจกต์ |
4. หมวดระบบวิศวกรรมและเทคโนโลยี (Technology & Engineering)
| ลำดับ | คำศัพท์ | นิยามและความหมายเชิงระบบ |
| 61 | Frontend | ส่วนสถาปัตยกรรมเทคโนโลยีหน้าบ้านที่ประมวลผลบนเบราว์เซอร์ของผู้ใช้งานโดยตรง |
| 62 | Backend | ระบบสารสนเทศหลังบ้าน การจัดการเซิร์ฟเวอร์ ตรรกะโปรแกรม และฐานข้อมูล |
| 63 | Full-stack | ความสามารถทางวิศวกรรมที่ครอบคลุมกระบวนการทั้งระบบหน้าบ้านและระบบหลังบ้าน |
| 64 | API | อินเทอร์เฟซหรือช่องทางสำหรับเชื่อมต่อและรับส่งข้อมูลระหว่างระบบซอฟต์แวร์ |
| 65 | REST / GraphQL | รูปแบบรูปแบบสถาปัตยกรรมและเทคโนโลยีที่ใช้ในการออกแบบระบบบริการ API |
| 66 | Database (DB) | ระบบซอฟต์แวร์สำหรับจัดเก็บ ประมวลผล และบริหารข้อมูลสารสนเทศของเว็บไซต์ |
| 67 | CMS | ระบบจัดการเนื้อหาสำเร็จรูป (Content Management System) เช่น WordPress |
| 68 | Static Site | เว็บไซต์ที่ถูกจัดเก็บในรูปแบบไฟล์เอกสาร HTML นิ่ง ข้อมูลแสดงผลเหมือนกันทุกครั้งโดยไม่ต้องคำนวณใหม่ |
| 69 | Dynamic Site | เว็บไซต์ที่จะคำนวณและสร้างเนื้อหาขึ้นใหม่ในทันทีจากฐานข้อมูลตามการเรียกใช้ของผู้ใช้ |
| 70 | SSR (Server-Side Rendering) | เทคนิคการประมวลผลโค้ดหน้าเว็บให้เป็นไฟล์ HTML สำเร็จรูปจากเซิร์ฟเวอร์ก่อนส่งให้เบราว์เซอร์ |
| 71 | SSG (Static Site Generation) | กระบวนการแปลงหน้าเว็บทั้งหมดให้เป็นไฟล์ Static HTML ล่วงหน้าตั้งแต่ขั้นตอนการขึ้นระบบ (Build) |
| 72 | CSR (Client-Side Rendering) | เทคนิคที่ปล่อยให้เว็บเบราว์เซอร์ของผู้ใช้ทำหน้าที่ดึงข้อมูลและสร้างหน้าเว็บขึ้นมาเองภายหลัง |
| 73 | SPA (Single Page Application) | เว็บแอปพลิเคชันที่ทำงานบนหน้าเว็บหน้าเดียว โดยจะเปลี่ยนเนื้อหาภายในโดยไม่มีการดาวน์โหลดหน้าใหม่ |
| 74 | PWA | เทคโนโลยีพัฒนาเว็บแอปพลิเคชันให้สามารถทำงานและติดตั้งได้เสมือนแอปพลิเคชันบนสมาร์ทโฟน |
| 75 | Hosting | บริการพื้นที่เช่าบนเครื่องคอมพิวเตอร์เซิร์ฟเวอร์สำหรับจัดเก็บไฟล์เว็บไซต์เพื่อให้เข้าถึงได้ทางอินเทอร์เน็ต |
| 76 | Domain Name | ชื่อที่ใช้ระบุตัวตนของเว็บไซต์บนเครือข่ายอินเทอร์เน็ต เพื่อให้จดจำง่ายแทนเลขที่อยู่ IP |
| 77 | DNS (Domain Name System) | ระบบคอมพิวเตอร์ตัวกลางที่ทำหน้าที่แปลงชื่อโดเมนเนมให้เป็นหมายเลขที่อยู่ IP |
| 78 | SSL / HTTPS | โปรโตคอลเข้ารหัสข้อมูลเพื่อความปลอดภัยและความถูกต้องในการรับส่งข้อมูลบนเครือข่าย |
| 79 | CDN | เครือข่ายเครื่องเซิร์ฟเวอร์ที่กระจายตัวอยู่ตามภูมิภาคต่างๆ เพื่อช่วยส่งข้อมูลเว็บให้ผู้ใช้ได้เร็วขึ้น |
| 80 | Cache | ระบบจัดเก็บข้อมูลหรือไฟล์หน้าเว็บชั่วคราว เพื่อลดระยะเวลาและภาระงานในการดึงข้อมูลซ้ำ |
5. หมวดการตลาดออนไลน์และการทำอันดับ (Marketing & SEO)
| ลำดับ | คำศัพท์ | นิยามและความหมายเชิงระบบ |
| 81 | SEO (Search Engine Optimization) | กระบวนการปรับแต่งสถาปัตยกรรมและเนื้อหาเว็บเพื่อให้ติดอันดับที่ดีบนเครื่องมือค้นหา |
| 82 | Meta Tag | ชุดรหัสข้อมูลโครงสร้างที่ซ่อนอยู่ใน HTML เพื่อให้ Bot ของ Search Engine เข้าใจเนื้อหาหน้าเว็บ |
| 83 | Title Tag | ข้อความหัวข้อหลักของหน้าเว็บที่แสดงอยู่บนแถบแท็บของเบราว์เซอร์และผลการค้นหา |
| 84 | Meta Description | ข้อความสรุปเนื้อหาความยาวสั้นๆ ที่แสดงใต้ชื่อลิงก์บนหน้าแสดงผลการค้นหาของ Google |
| 85 | Open Graph (OG) | ระบบแท็กข้อมูลที่ควบคุมการแสดงผลรูปภาพ หัวข้อ และคำอธิบายเมื่อลิงก์ถูกแชร์ลงโซเชียลมีเดีย |
| 86 | Favicon | ไฟล์ไอคอนขนาดเล็กประจำเว็บไซต์ที่แสดงอยู่หน้าชื่อโดเมนบนแถบแท็บของเบราว์เซอร์ |
| 87 | Sitemap | ไฟล์แผนผังโครงสร้างของเว็บไซต์ที่รวบรวมรายชื่อลิงก์ทั้งหมด เพื่อช่วยให้ Bot ของระบบสืบค้นเข้ามาเก็บข้อมูล |
| 88 | robots.txt | ไฟล์ข้อความคำสั่งที่ใช้แจ้งระบบ Bot ว่าอนุญาตหรือไม่อนุญาตให้เข้าไปเก็บข้อมูลในโฟลเดอร์ใดบ้าง |
| 89 | Backlink | การที่เว็บไซต์ภายนอกอื่นทำการใส่ลิงก์เชื่อมโยงกลับมายังหน้าเว็บไซต์ของเรา เป็นผลดีต่อความน่าเชื่อถือ |
| 90 | Bounce Rate | อัตราส่วนร้อยละของผู้เข้าชมเว็บไซต์ที่เปิดหน้าเว็บเพียงหน้าเดียวแล้วกดปิดออกไปทันที |
| 91 | Conversion Rate | อัตราส่วนร้อยละของผู้เข้าชมเว็บไซต์ที่ยอมทำกิจกรรมตามเป้าหมายหลักของหน้าเว็บนั้นสำเร็จ |
| 92 | CTR (Click-Through Rate) | อัตราส่วนการกดคลิกลิงก์ต่อจำนวนครั้งทั้งหมดที่ผู้ใช้งานมองเห็นลิงก์หรือโฆษณานั้น |
| 93 | CPC / CPM / CPA | รูปแบบการคิดราคาโฆษณา: ราคาต่อการคลิกหนึ่งครั้ง / ต่อการมองเห็นพันครั้ง / ต่อการทำกิจกรรมสำเร็จ |
| 94 | Marketing Funnel | แผนภาพจำลองขั้นตอนพฤติกรรมของลูกค้า ตั้งแต่การรับรู้ข้อมูล การพิจารณา จนถึงการตัดสินใจซื้อ |
| 95 | Lead Magnet | ข้อเสนอหรือสิ่งของที่มีมูลค่า เช่น เอกสารข้อมูลความรู้ฟรี เพื่อนำมาแลกเปลี่ยนกับข้อมูลติดต่อของลูกค้า |
| 96 | A/B Testing | วิธีการทดสอบโดยเปรียบเทียบหน้าเว็บ 2 เวอร์ชัน (A และ B) ที่มีจุดต่างกัน เพื่อหาสไตล์ที่ได้ผลลัพธ์ดีกว่า |
| 97 | Heatmap | เครื่องมือแสดงผลภาพความร้อนเพื่อวิเคราะห์พฤติกรรม ว่าผู้ใช้มักคลิก เคลื่อนเมาส์ หรือหยุดมองที่จุดใด |
| 98 | Web Analytics | ระบบซอฟต์แวร์ที่ทำหน้าที่จัดเก็บ ติดตาม และวิเคราะห์ข้อมูลพฤติกรรมเชิงสถิติของผู้ใช้งานเว็บไซต์ |
| 99 | Retargeting / Remarketing | กลยุทธ์การส่งโฆษณาไปนำเสนอซ้ำให้กับกลุ่มผู้ใช้งานที่เคยเข้ามาเยี่ยมชมเว็บไซต์แล้วในอดีต |
| 100 | Funnel Drop-off | จุดหรือขั้นตอนภายในหน้าเว็บที่มีสัดส่วนผู้ใช้งานกดปิดหน้าจอหรือละทิ้งกระบวนการกลางคันมากที่สุด |
แนวทางการนำไปใช้ในการเรียนรู้
คลังศัพท์ทั้ง 100 คำนี้คือเครื่องมือสำคัญในการทำ “Vibe Coding” หรือสั่งงาน AI ให้ได้ประสิทธิภาพสูงสุด แนะนำให้ผู้เรียนหยิบยกคำศัพท์เฉพาะทางจากตารางเหล่านี้ (เช่น การระบุให้ใส่ Skeleton Loader แทน Spinner หรือสั่งให้ทำเลย์เอาต์แบบ Bento Grid) ไปใช้เขียนระบุสเปกใน Prompt จะช่วยให้ AI เข้าใจและสร้างชิ้นงานออกมาได้ตรงตามหลักวิศวกรรมเว็บสากลทันทีโดยไม่ต้องแก้ไขหลายรอบ
