รู้จัก 40 คำศัพท์ Web Design ก่อนจ้างทำเว็บไซต์

ครั้งแรกที่นั่งประชุมกับทีมออกแบบเว็บ แล้วได้ยินคำว่า “wireframe”, “above the fold”, “CTA”, “Core Web Vitals” — รู้สึกเหมือนนั่งอยู่ในห้องที่คนอื่นพูดภาษาต่างดาวกันอยู่ไหม?

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

ทำไมเจ้าของธุรกิจต้องรู้คำศัพท์ Web Design

การรู้คำศัพท์พื้นฐานไม่ได้แปลว่าคุณต้องเขียนโค้ดเป็น หรือออกแบบเองได้ แต่มันช่วยให้:

• สื่อสารความต้องการได้ชัดเจนขึ้น — ลด “เข้าใจผิด” ระหว่างคุณกับทีมงาน
• ประเมินใบเสนอราคาได้ดีขึ้น — รู้ว่าสิ่งที่จ่ายไปคืออะไร คุ้มค่าไหม
• ตรวจงานได้ตรงจุด — บอกได้ว่าอยากแก้ตรงไหน แทนที่จะบอกแค่ “ไม่ชอบ”
• เลือกทีมงานหรือเอเจนซี่ได้ดีขึ้น — ฟังออกว่าคนที่คุยด้วยรู้เรื่องจริงหรือเปล่า

---

หมวดที่ 1 — คำศัพท์ด้านการออกแบบ (Design)

UI (User Interface)

UI คือทุกสิ่งที่ผู้ใช้มองเห็นและสัมผัสบนเว็บไซต์ — ปุ่ม เมนู สี รูปภาพ ฟอนต์ ช่องกรอกข้อมูล ทั้งหมดที่เป็นส่วน “หน้าตา” ของเว็บ นี่คือหน้าที่ของ UI Designer ที่จะออกแบบให้น่าดู สวยงาม และสื่อสาร Brand ได้

UX (User Experience)

UX คือประสบการณ์โดยรวมของผู้ใช้งานเว็บ — ง่ายใช้ไหม? หาสิ่งที่ต้องการเจอไหม? รู้สึกอย่างไรหลังใช้งาน? UX Designer จะออกแบบ “เส้นทาง” ที่ผู้ใช้เดินผ่าน ให้ลื่นไหลและบรรลุเป้าหมายได้

Wireframe

Wireframe คือโครงร่างคร่าวๆ ของหน้าเว็บ คล้ายแบบร่างก่อนสร้างบ้าน ไม่มีสี ไม่มีภาพจริง มีแค่กล่อง เส้น และตำแหน่งของ element ต่างๆ ใช้เพื่อวางแผน Layout และ UX ก่อนที่จะเริ่มออกแบบจริง

Mockup

Mockup คือภาพตัวอย่างหน้าเว็บที่ออกแบบเสร็จแล้ว มีสี มีฟอนต์ มีภาพจริง แต่ยังเป็นแค่ “ภาพนิ่ง” ยังไม่ได้ Coding ใช้เพื่อให้ลูกค้า approve ดีไซน์ก่อนเข้าสู่ขั้นตอนพัฒนา

Prototype

Prototype คือ Mockup ที่คลิกได้ แต่ยังไม่ใช่เว็บจริง ใช้เพื่อทดสอบ UX ว่าการใช้งานลื่นไหลไหม ก่อนที่จะลงมือเขียนโค้ดจริงๆ — ช่วยประหยัดเวลาแก้ไขภายหลังได้มาก

Typography

Typography คือศาสตร์ของการออกแบบและใช้งานตัวอักษร — เลือก Font อะไร ขนาดเท่าไหร่ ระยะห่างระหว่างบรรทัดเท่าไหร่ Typography ที่ดีส่งผลต่อทั้งความสวยงาม ความอ่านง่าย และการรับรู้แบรนด์

Whitespace (Negative Space)

Whitespace คือพื้นที่ว่างบนหน้าเว็บ ไม่ใช่พื้นที่ที่เสียไป แต่คือการให้ผู้อ่านหายใจ และช่วยให้โฟกัสกับเนื้อหาสำคัญ เว็บที่ยัดทุกอย่างจนรกทำให้ผู้ใช้สับสนและรีบออก

Responsive Design

Responsive Design คือการออกแบบเว็บให้แสดงผลได้สวยงามในทุกขนาดหน้าจอ ทั้งคอมพิวเตอร์ แท็บเล็ต และมือถือ ในยุคที่คนกว่า 60% ท่องเว็บผ่านมือถือ Responsive ไม่ใช่ option — มันคือ standard

Above the Fold

Above the Fold คือส่วนของหน้าเว็บที่มองเห็นได้ทันทีโดยไม่ต้อง Scroll ลงมา มาจากคำว่า “fold” ของหนังสือพิมพ์ที่พับอยู่ การวาง CTA และข้อมูลสำคัญ Above the Fold ช่วยเพิ่ม Conversion ได้มาก

Color Palette / Brand Color

Color Palette คือชุดสีที่เลือกใช้ในการออกแบบ ซึ่งต้องสอดคล้องกับ Brand Identity โดยปกติประกอบด้วยสีหลัก (Primary) สีรอง (Secondary) และสีที่ใช้เน้น (Accent) การใช้สีสม่ำเสมอสร้างความจดจำแบรนด์

Grid System

Grid System คือโครงสร้างตารางที่ใช้จัดวาง element ต่างๆ บนหน้าเว็บให้เป็นระเบียบ ทำให้ดีไซน์ดูสมดุล อ่านง่าย และดูเป็นมืออาชีพ นิยมใช้ 12-column grid

---

หมวดที่ 2 — คำศัพท์ด้านเทคนิค (Technical)

CMS (Content Management System)

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

WordPress

WordPress คือ CMS ยอดนิยมที่สุดในโลก ใช้สร้างเว็บไซต์กว่า 43% ของเว็บทั้งหมดบนอินเทอร์เน็ต มีระบบ Plugin และ Theme ที่ยืดหยุ่น รองรับการทำ SEO และ E-Commerce ได้ดีเยี่ยม — เหมาะสำหรับธุรกิจทุกขนาด

Front-end / Back-end

Front-end คือส่วนของเว็บที่ผู้ใช้มองเห็นและสัมผัสได้โดยตรง ได้แก่ HTML, CSS, JavaScript ส่วน Back-end คือส่วน “หลังบ้าน” ที่จัดการข้อมูล เซิร์ฟเวอร์ และ Database — ผู้ใช้มองไม่เห็นแต่ทำงานอยู่ตลอดเวลา

HTML / CSS / JavaScript คืออะไร?

• HTML — โครงสร้างของหน้าเว็บ (หัวข้อ ย่อหน้า รูปภาพ ลิงก์)
• CSS — สไตล์และความสวยงาม (สี ขนาด Layout ฟอนต์)
• JavaScript — ความสามารถเชิงโต้ตอบ (animation, pop-up, ฟอร์ม)

Hosting (Web Hosting)

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

Domain Name

Domain คือที่อยู่ของเว็บไซต์ เช่น creative.co.th — เป็นชื่อที่คนพิมพ์ในเบราว์เซอร์เพื่อเข้าถึงเว็บของคุณ Domain ที่ดีควรสั้น จำง่าย และสะท้อนชื่อธุรกิจ

SSL Certificate / HTTPS

SSL คือเทคโนโลยีเข้ารหัสข้อมูลระหว่างผู้ใช้กับเว็บไซต์ เมื่อเว็บมี SSL จะแสดง “https://” และไอคอนแม่กุญแจในเบราว์เซอร์ SSL Certificate ไม่ใช่แค่เรื่องความปลอดภัย แต่ยังส่งผลต่อ Google Ranking โดยตรงด้วย

Plugin / Extension

Plugin คือโปรแกรมเสริมที่ติดตั้งเพิ่มในระบบ CMS เพื่อเพิ่มความสามารถพิเศษ เช่น Plugin SEO, Plugin ระบบสมาชิก, Plugin แบบฟอร์ม — เหมือน App บนมือถือที่ดาวน์โหลดเพิ่มได้

API (Application Programming Interface)

API คือ “ล่าม” ที่ทำให้ระบบต่างๆ คุยกันได้ เช่น เชื่อมเว็บกับระบบชำระเงิน, Google Maps, หรือระบบ CRM ภายใน API ช่วยให้เว็บทำงานร่วมกับบริการอื่นได้โดยไม่ต้องสร้างใหม่ทั้งหมด

Cache

Cache คือการบันทึกข้อมูลที่ใช้บ่อยไว้ชั่วคราว เพื่อให้เว็บโหลดได้เร็วขึ้นในครั้งต่อไป แทนที่จะดึงข้อมูลจาก Database ทุกครั้ง ระบบ Cache ที่ดีช่วยลดเวลาโหลดเว็บได้มาก

---

หมวดที่ 3 — คำศัพท์ด้าน SEO & Marketing

SEO (Search Engine Optimization)

SEO คือกระบวนการปรับปรุงเว็บไซต์ให้ติดอันดับสูงขึ้นใน Google โดยไม่ต้องจ่ายเงินโฆษณา แบ่งเป็น On-page SEO (เนื้อหาและโครงสร้างเว็บ) และ Off-page SEO (ลิงก์จากเว็บอื่น) การมีเว็บไซต์ที่ออกแบบมาเพื่อ SEOตั้งแต่แรกช่วยได้มากกว่าแก้ทีหลัง

Keyword (คำค้นหา)

Keyword คือคำหรือวลีที่คนพิมพ์ใน Google เพื่อค้นหาสิ่งที่ต้องการ การเลือก Keyword ที่ถูกต้องและกระจายใส่ในเนื้อหาอย่างเป็นธรรมชาติ คือหัวใจของ SEO

Meta Title / Meta Description

Meta Title คือหัวข้อที่แสดงบน Tab เบราว์เซอร์และผลการค้นหา Google ส่วน Meta Description คือข้อความสรุปสั้นๆ ที่แสดงใต้ Link ใน Google ทั้งสองมีผลต่อ Click-Through Rate โดยตรง

CTA (Call to Action)

CTA คือส่วนที่กระตุ้นให้ผู้ใช้ทำสิ่งที่ต้องการ — ปุ่ม “ติดต่อเรา”, “ซื้อเลย”, “ดูรายละเอียด” CTA ที่ดีต้องชัดเจน มองเห็นง่าย และบอกว่าจะได้รับอะไรหลังจากคลิก

CRO (Conversion Rate Optimization)

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

Bounce Rate

Bounce Rate คือเปอร์เซ็นต์ของผู้เยี่ยมชมที่เข้าเว็บแล้วออกไปโดยไม่คลิกไปหน้าอื่น Bounce Rate สูง (เกิน 70%) มักบ่งบอกว่าหน้านั้นไม่ตอบโจทย์สิ่งที่ผู้ใช้ค้นหา

Heatmap

Heatmap คือภาพที่แสดงว่าผู้ใช้คลิก เลื่อน หรือมองที่ส่วนไหนของหน้าเว็บมากที่สุด ด้วยรหัสสีจากแดง (ร้อน = คลิกเยอะ) ถึงน้ำเงิน (เย็น = ไม่ค่อยสนใจ) Heatmap ช่วยให้รู้ว่าลูกค้าสนใจตรงไหนเพื่อ optimize หน้าเว็บให้ตรงจุด

Landing Page

Landing Page คือหน้าเว็บที่สร้างมาเพื่อวัตถุประสงค์เฉพาะ เช่น รับ Lead, โปรโมต Campaign, หรือขายสินค้าชิ้นเดียว ออกแบบมาเพื่อให้ผู้เยี่ยมชมทำ Action เดียวที่ต้องการ ไม่มี Distraction

Core Web Vitals

Core Web Vitals คือชุดตัวชี้วัดจาก Google ที่วัดประสบการณ์ผู้ใช้จริงๆ ประกอบด้วย LCP (ความเร็วโหลด), INP (การตอบสนอง), และ CLS (ความเสถียรของ Layout) Google ใช้ค่าเหล่านี้เป็นส่วนหนึ่งของการจัดอันดับ

สรุป Core Web Vitals ที่ควรรู้:

• LCP (Largest Contentful Paint) — เวลาที่ element ใหญ่สุดโหลดเสร็จ ต้องไม่เกิน 2.5 วินาที
• INP (Interaction to Next Paint) — ความเร็วในการตอบสนองต่อการคลิก ต้องไม่เกิน 200ms
• CLS (Cumulative Layout Shift) — ความกระโดดของหน้าเว็บขณะโหลด ต้องไม่เกิน 0.1

---

หมวดที่ 4 — คำศัพท์ด้าน E-Commerce

ถ้ากำลังจะทำ เว็บไซต์ E-Commerce คำศัพท์ต่อไปนี้จะได้ยินบ่อยมาก

Shopping Cart

Shopping Cart (ตะกร้าสินค้า) คือระบบที่ให้ลูกค้าเพิ่มสินค้าที่ต้องการซื้อไว้ก่อน แล้วค่อย Checkout ทีเดียว ประสบการณ์ตะกร้าที่ดีต้องอัปเดตแบบ real-time และ save ไว้ได้เมื่อผู้ใช้ปิดเบราว์เซอร์

Checkout / Checkout Flow

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

Payment Gateway

Payment Gateway คือตัวกลางระหว่างเว็บร้านค้ากับธนาคาร ทำหน้าที่รับ-ส่งข้อมูลการชำระเงินอย่างปลอดภัย เช่น Omise, Stripe, 2C2P, KBank Payment Gateway — ยิ่งรองรับหลายช่องทาง ยิ่งลด Cart Abandonment

SKU (Stock Keeping Unit)

SKU คือรหัสระบุสินค้าแต่ละ variant เช่น เสื้อสีแดงไซส์ M กับสีน้ำเงินไซส์ L จะมี SKU คนละตัว ช่วยในการจัดการสต็อก และ track ยอดขายของแต่ละ variant

Cross-selling / Upselling

Cross-selling คือการแนะนำสินค้าที่เกี่ยวข้อง (ซื้อโน๊ตบุ๊ค → แนะนำเมาส์) ส่วน Upselling คือการแนะนำ version ที่ดีกว่า (ซื้อ Basic Plan → แนะนำ Pro Plan) ทั้งสองเป็นกลยุทธ์ที่เพิ่ม Average Order Value ได้โดยไม่ต้องใช้เงินโฆษณาเพิ่ม

Conversion Rate (อัตราการเปลี่ยนผู้เยี่ยมชมเป็นลูกค้า)

Conversion Rate คือเปอร์เซ็นต์ของผู้เยี่ยมชมที่ทำสิ่งที่ต้องการ เช่น ซื้อสินค้า, กรอกฟอร์ม, หรือโทรหา เว็บ E-Commerce ทั่วไปมี Conversion Rate ประมาณ 1–3% การเพิ่มจาก 1% เป็น 2% หมายถึงรายได้เพิ่มขึ้นเป็นเท่าตัว

---

สรุปภาพรวม: คำศัพท์ Web Design ทั้งหมด

นี่คือตารางสรุปคำศัพท์ทั้งหมดที่พูดถึงในบทความนี้ เก็บไว้เป็น Cheat Sheet ได้เลยครับ

ยิ่งรู้ศัพท์มาก ยิ่งสื่อสารกับทีมงานได้ตรงจุด และยิ่งได้เว็บที่ตอบโจทย์ธุรกิจจริงๆ แต่ถ้ายังไม่แน่ใจว่าจะเริ่มต้นอย่างไร ก็ไม่ต้องรู้ทุกอย่างก่อนถึงจะเริ่มได้ — มืออาชีพที่ดีจะอธิบายให้ฟังเองครับ