# หลักการออกแบบกราฟิก 5 ข้อ คืออะไร เขียนเป็น Design Tokens

> ที่มา: https://phygital.co.th/insights/graphic-design-principles-checklist-guide · เผยแพร่ 13 พฤษภาคม 2566 · อ่าน 11 นาที · โดย PARANATH PANARATANA

หลักการออกแบบกราฟิก 5 ข้อ Balance Contrast Alignment Proximity Repetition เขียนเป็น Design Tokens ตามไฟล์ DTCG ฉบับ 2025.10 ให้ผู้ออกแบบหลายรายและ AI ใช้กฎชุดเดียว

## Key Takeaways

- **หลักการออกแบบกราฟิก 5 ข้อ คือ Balance, Contrast, Alignment, Proximity และ Repetition** — สี่ข้อหลังแปลงเป็นค่าที่เขียนไว้ล่วงหน้าได้ เช่น คู่สีที่อนุญาต กริด และระยะห่างมาตรฐาน ส่วน Balance ยังต้องให้คนตัดสินจากงานจริง
- **Design Tokens Community Group เผยแพร่รูปแบบไฟล์ Design Tokens ฉบับ 2025.10 เมื่อ 28 ตุลาคม 2568 และระบุสถานะว่าเสถียร** — ไฟล์ .tokens ชุดเดียวใช้แลกค่าสี ขนาด ฟอนต์ และระยะห่างระหว่างโปรแกรมออกแบบ โค้ด และเครื่องมืออื่นได้ แต่เอกสารนี้ไม่ใช่มาตรฐานของ W3C
- **ระบบออกแบบของหน่วยงานรัฐสองแห่งกำหนดระยะห่างเป็นขั้นบันได** — ระบบของรัฐบาลสหรัฐฯ (USWDS) ใช้ผลคูณของ 8 พิกเซล ระบบของรัฐบาลสหราชอาณาจักร (GOV.UK) ใช้ขั้นละ 5 ถึง 10 พิกเซล ทั้งสองระบบไม่ให้ผู้ออกแบบพิมพ์ตัวเลขระยะห่างเอง

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

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

## หลักการออกแบบกราฟิก 5 ข้อ

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

### หลักการออกแบบกราฟิก 5 ข้อ มีอะไรบ้าง

หลักการห้าข้อคือ Balance การกระจายน้ำหนักทางสายตาให้งานไม่เอียงไปด้านใด Contrast ความต่างของสี ขนาด หรือน้ำหนักที่ทำให้สิ่งสำคัญเด่น Alignment การวางทุกชิ้นให้ตรงแนวเส้นร่วมกัน Proximity การวางของที่เกี่ยวข้องกันไว้ใกล้กันและแยกของที่ไม่เกี่ยวข้องให้ห่าง และ Repetition การใช้สี ฟอนต์ และรูปแบบเดิมซ้ำทั้งชิ้นงานและทุกชิ้นของแบรนด์ ข้อที่มักถูกละเลยในงานของธุรกิจเล็กคือ Proximity เพราะการเว้นระยะไม่เท่ากันเห็นได้ยากในงานชิ้นเดียว แต่เห็นชัดเมื่อวางหลายชิ้นเทียบกัน

| หลักการ   | คำถามตรวจงาน                                                            | เขียนเป็นค่าล่วงหน้าได้ไหม              |
| ---------- | ------------------------------------------------------------------------- | --------------------------------------------- |
| Contrast   | สิ่งสำคัญที่สุดเด่นกว่าส่วนอื่นหรือไม่                            | ได้ เป็นคู่สีและขนาดตัวอักษรที่อนุญาต |
| Alignment  | ทุกชิ้นอยู่บนเส้นแนวร่วมกันหรือไม่                               | ได้ เป็นกริดและจุดเปลี่ยนความกว้างจอ   |
| Proximity  | ของที่เกี่ยวข้องกันอยู่ใกล้กันกว่าของที่ไม่เกี่ยวข้องหรือไม่ | ได้ เป็นขั้นระยะห่าง                       |
| Repetition | สี ฟอนต์ และรูปแบบเดิมถูกใช้ซ้ำหรือไม่                            | ได้ เป็นค่าอ้างอิงที่ทุกชิ้นดึงไปใช้  |
| Balance    | น้ำหนักทางสายตากระจายพอดีหรือไม่                                   | ได้บางส่วน ต้องให้คนดูงานจริง          |

## Design Tokens คืออะไร

Design Tokens คือค่าการออกแบบที่มีชื่อ เช่น สีตัวอักษรหลัก ขนาดหัวข้อระดับหนึ่ง หรือระยะห่างขั้นที่สาม เก็บไว้ในไฟล์กลางที่โปรแกรมออกแบบและโค้ดอ่านได้ทั้งคู่ เมื่อแก้ค่าที่ไฟล์กลาง งานทุกชิ้นที่อ้างชื่อนั้นเปลี่ยนตาม

### Design Tokens ต่างจากคู่มือแบรนด์แบบ PDF อย่างไร

คู่มือแบรนด์แบบ PDF บอกค่าให้คนอ่าน แล้วคนต้องพิมพ์ค่านั้นลงในงานเองทุกครั้ง Design Tokens เก็บค่าเดียวกันในรูปแบบที่เครื่องมืออ่านได้โดยตรง ผู้ออกแบบเลือกชื่อค่า เช่น `spacing.3` แทนการพิมพ์ 24 พิกเซล ความผิดพลาดจากการพิมพ์ตัวเลขผิดหรือใช้ค่าจากคู่มือฉบับเก่าจึงลดลง คู่มือแบรนด์ยังจำเป็นสำหรับการอธิบายเหตุผลและตัวอย่างการใช้ แต่ค่าตัวเลขควรมีที่เก็บแห่งเดียว เรื่องการทำคู่มือแบรนด์และอัตลักษณ์องค์กรทั้งระบบอยู่ในบท [บริการออกแบบอัตลักษณ์องค์กร (Corporate Identity – CI)](https://phygital.co.th/insights/corporate-identity-design-agency)

## รูปแบบไฟล์ Design Tokens ของ DTCG

[Design Tokens Format Module 2025.10](https://www.designtokens.org/tr/2025.10/format/) เผยแพร่โดย Design Tokens Community Group เมื่อ 28 ตุลาคม 2568 เอกสารระบุว่าเป็นรายงานฉบับสุดท้ายของกลุ่มชุมชนภายใต้ W3C ไม่ใช่มาตรฐานของ W3C และไม่ได้อยู่ในเส้นทางการรับรองเป็นมาตรฐาน แต่ระบุสถานะว่าเสถียรและตั้งใจให้เครื่องมือต่าง ๆ นำไปใช้

| สิ่งที่ข้อกำหนดระบุ | รายละเอียด                                                                           |
| ----------------------- | ------------------------------------------------------------------------------------- |
| นามสกุลไฟล์ที่แนะนำ  | .tokens หรือ .tokens.json                                                             |
| ชนิดสื่อ (MIME type)   | application/design-tokens+json และเครื่องมือต้องรับ application/json ได้ด้วย     |
| ชนิดค่าพื้นฐาน       | สี ขนาด ชุดฟอนต์ น้ำหนักฟอนต์ ระยะเวลา เส้นโค้งการเคลื่อนไหว และตัวเลข        |
| ชนิดค่าแบบประกอบ     | รูปแบบเส้น เส้นขอบ การเปลี่ยนสถานะ เงา การไล่สี และชุดตัวอักษร (typography) |
| การอ้างค่าอื่น       | ค่าหนึ่งอ้างอีกค่าได้ เช่น สีตัวอักษรหลักอ้างสีดำในจานสี                |

### ทำไมรูปแบบไฟล์กลางถึงสำคัญกับงานที่ใช้ AI

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

## Proximity กับ Alignment ในระบบออกแบบของรัฐ

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

| ระบบ                                                                                    | ฐานของขั้นระยะห่าง                               | ตัวอย่างค่า                                                         |
| --------------------------------------------------------------------------------------- | ---------------------------------------------------- | -------------------------------------------------------------------- |
| [U.S. Web Design System](https://designsystem.digital.gov/design-tokens/spacing-units/) | ผลคูณของ 8 พิกเซล พร้อมขั้นย่อยสำหรับระยะเล็ก | ขั้น 0.5 = 4px · 1 = 8px · 2 = 16px · 3 = 24px · 4 = 32px · 5 = 40px |
| [GOV.UK Design System](https://design-system.service.gov.uk/styles/spacing/)            | ขั้น 0-9 แบบคงที่ และแบบที่ปรับตามขนาดจอ      | ขั้น 1 = 5px · 3 = 15px · 6 = 30px · 9 = 60px (จอใหญ่)              |

ระบบของ GOV.UK มีสองชุดในเอกสารเดียว ชุดคงที่ใช้ค่าเดิมทุกขนาดจอ ส่วนชุดที่ปรับตามจอใช้ค่าเล็กลงเมื่อจอแคบกว่าจุดเปลี่ยนความกว้าง 640 พิกเซล เช่น ขั้น 6 เป็น 30 พิกเซลบนจอใหญ่และ 20 พิกเซลบนจอเล็ก ขณะที่ขั้น 0 ถึง 3 เท่ากันทุกจอ

### ระยะห่างแบบขั้นบันไดช่วยเรื่อง Proximity อย่างไร

ขั้นบันไดทำให้ความต่างของระยะห่างชัดพอที่ผู้ชมรับรู้ได้ Proximity ทำงานเมื่อระยะภายในกลุ่มเล็กกว่าระยะระหว่างกลุ่มอย่างเห็นได้ชัด ถ้าผู้ออกแบบพิมพ์ระยะเองเป็น 14, 16 และ 18 พิกเซล ความต่างเล็กเกินกว่าตาจะแยกกลุ่มได้ เมื่อบังคับให้เลือกจากขั้น 8, 16, 24 และ 32 พิกเซล ระยะภายในกลุ่มกับระยะระหว่างกลุ่มจะห่างกันอย่างน้อยหนึ่งขั้นเสมอ และเครื่องมือตรวจโค้ดหาค่าที่ไม่อยู่ในรายการได้ทันที

Alignment ใช้หลักเดียวกันกับกริดและจุดเปลี่ยนความกว้างจอ ระบบของ USWDS ตั้งชื่อความกว้างเป็นค่าเดียวกับขั้นระยะห่าง เช่น `tablet` เท่ากับ 640 พิกเซล และ `desktop` เท่ากับ 1,024 พิกเซล ทุกชิ้นงานจึงเปลี่ยนเลย์เอาต์ที่ความกว้างเดียวกัน

## Contrast กับ Repetition เขียนเป็นค่าอ้างอิง

Contrast กับ Repetition แปลงเป็นค่าได้ผ่านการอ้างค่า ชื่อค่าที่บอกหน้าที่ เช่น "สีตัวอักษรบนพื้นมืด" อ้างไปยังสีในจานสีอีกชั้นหนึ่ง

### ควรตั้งชื่อค่าสีตามสีหรือตามหน้าที่

ควรมีทั้งสองชั้น ชั้นแรกตั้งชื่อตามสี เช่น `palette.indigo` หรือ `palette.pink` เก็บค่าสีจริง ชั้นที่สองตั้งชื่อตามหน้าที่ เช่น `text.on-dark` หรือ `button.primary` แล้วอ้างไปยังชั้นแรก ข้อกำหนดของ DTCG เรียกการอ้างแบบนี้ว่า alias การแยกสองชั้นทำให้ Contrast ตรวจได้ที่ชั้นหน้าที่ เพราะรู้ว่าสีไหนวางบนพื้นไหน ส่วน Repetition เกิดเองเพราะทุกปุ่มดึงค่า `button.primary` ตัวเดียวกัน ถ้าวันหนึ่งแบรนด์เปลี่ยนสีหลัก ผู้ดูแลแก้ที่ชั้นจานสีจุดเดียว

การวัดว่าคู่สีตัดกันพอหรือไม่ใช้สูตรค่า Contrast Ratio ของ WCAG ซึ่งฟิจิทัลใช้วัดชุดสีของตัวเองในบท [ทฤษฎีสี (Color Theory) และจิตวิทยาสี บนป้ายร้านและบนจอ](https://phygital.co.th/insights/color-theory-psychology-branding-guide) ส่วน Repetition ของตัวอักษรเริ่มจากการเลือกคู่ฟอนต์ ซึ่งอธิบายไว้ในบท [Font Pairing คืออะไร จับคู่ฟอนต์ไทยให้คนทุกวัยอ่านง่าย](https://phygital.co.th/insights/font-pairing-typography-basics-guide)

## Balance ยังต้องใช้คนตัดสิน

Balance เป็นหลักการข้อเดียวในห้าข้อที่ค่าตายตัวรับประกันไม่ได้ งานสองชิ้นที่ใช้สี ฟอนต์ และระยะห่างจากไฟล์เดียวกันยังเอียงได้ ถ้าภาพสินค้าใหญ่อยู่ซ้ายและไม่มีอะไรถ่วงทางขวา

### AI ตรวจ Balance ของงานออกแบบแทนคนได้ไหม

ยังแทนไม่ได้ทั้งหมด เครื่องมือตรวจได้ว่าทุกค่าอยู่ในรายการที่อนุญาต แต่การตัดสินว่าภาพหนึ่งภาพดูหนักไปด้านใดขึ้นกับขนาด สี ความเข้ม และความหมายของสิ่งในภาพพร้อมกัน ผลการทดลองเรื่องกฎสามส่วนในบท [Rule of Thirds คืออะไร องค์ประกอบภาพตามงานวิจัยการมองจริง](https://phygital.co.th/insights/composition-rule-of-thirds-visual-hierarchy-guide) แสดงว่าค่าที่คอมพิวเตอร์คำนวณจากตำแหน่งจุดเด่นไม่สัมพันธ์กับคะแนนความงามที่คนให้ ขั้นตอนที่ใช้ได้คือให้เครื่องมือตรวจสี่ข้อที่เป็นค่า แล้วให้คนดู Balance เป็นขั้นสุดท้ายก่อนอนุมัติ

## Design Tokens บนเว็บของฟิจิทัล

เว็บไซต์ phygital.co.th ย้ายค่าการออกแบบเข้าบล็อก `@theme` ของ Tailwind CSS เวอร์ชัน 4 ในไฟล์ `app/globals.css` เมื่อ 18 สิงหาคม 2569 บล็อกนี้มีค่าประกาศ 27 รายการ ครอบคลุมสีแบรนด์ ชุดฟอนต์ การไล่สี ความเร็วของแอนิเมชัน และจุดเปลี่ยนความกว้างจอ ไฟล์ตั้งค่า Tailwind แบบเดิมถูกเก็บไว้เป็นไฟล์ว่าง ค่าจริงจึงมีที่อยู่แห่งเดียว

ระบบนี้ยังไม่ได้อยู่ในรูปแบบไฟล์ `.tokens` ของ DTCG เพราะใช้ไวยากรณ์ CSS ของ Tailwind แต่ใช้หลักเดียวกัน คือส่วนประกอบของเว็บอ้างชื่อค่า เช่น `--color-brand-primary` แทนการพิมพ์ค่าสีซ้ำในแต่ละไฟล์

## เริ่มเขียนกฎออกแบบเป็นไฟล์สี่ขั้น

ธุรกิจที่ยังไม่มีระบบออกแบบเริ่มได้จากงานที่มีอยู่แล้ว ไม่ต้องออกแบบใหม่ทั้งหมด ลำดับด้านล่างเรียงจากค่าที่แก้ง่ายไปยาก

1. **รวบรวมค่าที่ใช้จริง** เปิดงานสิบชิ้นล่าสุด จดสี ฟอนต์ ขนาดตัวอักษร และระยะห่างที่พบ แล้วนับว่าค่าไหนซ้ำ ค่าที่พบครั้งเดียวมักเป็นค่าที่พิมพ์ผิดหรือเดาเอง
2. **ตั้งจานสีกับขั้นระยะห่าง** เลือกฐานระยะห่างหนึ่งค่า เช่น 4 หรือ 8 พิกเซล แล้วปัดทุกค่าที่พบเข้าขั้นที่ใกล้ที่สุด
3. **ตั้งชื่อค่าตามหน้าที่** แยกชั้นจานสีกับชั้นหน้าที่ และตรวจค่าความต่างของทุกคู่สีที่ชั้นหน้าที่ระบุว่าจะวางด้วยกัน
4. **บันทึกเป็นไฟล์ที่เครื่องมืออ่านได้** ถ้าทีมใช้โปรแกรมออกแบบและโค้ดคนละชุด รูปแบบ `.tokens` ของ DTCG เป็นตัวกลางที่เป็นกลางต่อเครื่องมือ แล้วเขียนคู่มือสั้น ๆ อธิบายว่าเมื่อใดใช้ค่าไหน

ขั้นที่ 4 ไม่ได้แทนการตรวจ Balance ซึ่งยังต้องให้คนดูงานจริงทีละชิ้นเป็นขั้นสุดท้าย

## สรุป

หลักการออกแบบกราฟิกห้าข้อคือ Balance, Contrast, Alignment, Proximity และ Repetition สี่ข้อหลังเขียนเป็นค่าตายตัวที่เครื่องมือตรวจได้ ผ่านคู่สีที่อนุญาต กริด ขั้นระยะห่าง และค่าอ้างอิงที่ทุกชิ้นงานดึงไปใช้ ระบบออกแบบของ USWDS กับ GOV.UK แสดงตัวอย่างขั้นระยะห่างที่ไม่ให้ผู้ออกแบบพิมพ์ตัวเลขเอง รูปแบบไฟล์ Design Tokens ของ DTCG ฉบับ 2025.10 ให้ผู้ออกแบบ ทีมพัฒนา และ AI อ่านค่าชุดเดียวกัน ส่วน Balance ยังต้องให้คนดูงานจริงก่อนอนุมัติ

## คำถามที่พบบ่อย (FAQ)

### ฐานระยะห่าง 4 พิกเซลกับ 8 พิกเซลต่างกันอย่างไร

ฐาน 8 พิกเซลให้ขั้นที่ห่างกันชัดและจำง่าย ฐาน 4 พิกเซลให้ความละเอียดมากกว่าสำหรับของชิ้นเล็กอย่างไอคอนหรือช่องว่างในปุ่ม ระบบ USWDS ใช้ฐาน 8 พิกเซลและเพิ่มขั้น 4 กับ 12 พิกเซลสำหรับระยะเล็ก

### ธุรกิจเล็กที่มีผู้ออกแบบคนเดียวต้องทำ Design Tokens ไหม

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

### โปรแกรมออกแบบที่ใช้อยู่รองรับไฟล์ .tokens หรือยัง

ต้องตรวจกับผู้ผลิตโปรแกรมแต่ละราย ข้อกำหนดฉบับล่าสุดเพิ่งมีสถานะเสถียรเมื่อเดือนตุลาคมปีก่อน ข้อกำหนดเองแนะนำให้ใช้นามสกุล .tokens.json ในช่วงที่รูปแบบนี้ยังไม่แพร่หลาย เพื่อให้เปิดด้วยโปรแกรมแก้ไข JSON ทั่วไปได้

### ระบบออกแบบของหน่วยงานรัฐต่างประเทศนำมาใช้กับแบรนด์ไทยได้ไหม

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

### Design Tokens ช่วยเรื่องงานพิมพ์ด้วยหรือไม่

ช่วยเรื่องชื่อและค่าที่ใช้ร่วมกัน แต่ค่าสีบนจอกับค่าสีบนงานพิมพ์ใช้ระบบสีต่างกัน ไฟล์ค่าการออกแบบจึงควรเก็บค่าสีสำหรับงานพิมพ์แยกไว้ใต้ชื่อเดียวกัน

## ผู้ออกแบบสามรายกับเครื่องมือ AI หนึ่งตัวตีความ "สีแบรนด์" ได้สี่แบบ ถ้าไม่มีค่ากลางให้ทุกฝ่ายอ่าน

ให้ PHYGITAL AGENCY วางค่าสี ฟอนต์ และระยะห่างของแบรนด์ให้ทุกทีมและทุกเครื่องมือใช้ชุดเดียวกัน

- [นัดประชุมผ่าน Google Meet](https://calendar.app.google/DotQdE7Ca8LZG6Us5)
- [เพิ่มเพื่อนใน LINE](https://lin.ee/J8Qq8Do)