เริ่มต้น UX/UI ยุค AI เรียนอะไรก่อน ใช้เครื่องมือไหน ถึงจะไม่หลงทาง

คุณตั้งใจจะ เริ่มต้น UX/UI แบบจริงจัง เลยเปิด YouTube ดูคลิปสอน Figma ไปเป็นสิบคลิป เซฟคอร์สไว้เต็มเพลย์ลิสต์ เปิดแท็บ Roadmap กับผลงานสวย ๆ บน Dribbble ค้างไว้อีกเพียบ ผ่านไปสามเดือน เพื่อนถามว่า “มีงานให้ดูหน่อยไหม” คุณกลับนึกไม่ออกว่าจะเปิดชิ้นไหนให้ดู

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

หลายคนเพิ่งรู้ตัวว่าต้องเปลี่ยนวิธีเรียน ก็ตอนที่เห็นว่าทุกวันนี้ AI ช่วยร่างงานได้ตั้งแต่ Persona, User Flow ไปจนถึง Prototype ภายในวันเดียว แต่คนที่ได้งานดีจาก AI คือคนที่รู้ว่าแต่ละขั้นต้องถามอะไร และต้องตรวจอะไร ส่วนคนที่ข้ามขั้นตอนไป จะได้หน้าจอสวย ๆ ที่ตอบไม่ได้ว่าทำให้ใครใช้ และช่วยแก้ปัญหาอะไร

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

สรุปสั้น ๆ

• เรียนตามลำดับ 5 ขั้น: Persona → User Journey → User Flow → Low-fidelity Prototype → หน้าจอจริงใน Figma
• เครื่องมือ 3 ตัวก็พอเริ่มได้: ChatGPT ช่วยคิดและหาข้อมูล, Claude ช่วยร่างงานออกแบบ, Figma ใช้ทำหน้าจอจริง
• ใช้ AI แบบเดิมทุกครั้ง: ตั้งโจทย์ → AI ร่าง → ตรวจสอบ → แก้ไข → อธิบายเหตุผล
• ทำโจทย์เล็ก ๆ หนึ่งชิ้นให้จบใน 7 วัน ได้ผลกว่าเรียนเครื่องมือเพิ่มอีกเดือน

ทำไมเรียนมาเป็นเดือน แต่ยังไม่มีผลงาน UX/UI สักชิ้น

ส่วนใหญ่ปัญหาไม่ได้อยู่ที่เรียนน้อยไป แต่อยู่ที่เรียนผิดลำดับ ลองเช็กดูว่าตอนนี้คุณเป็นแบบไหนอยู่บ้าง

• เรียนโปรแกรมแต่ไม่มีโจทย์ ดูคลิปสอนจบหลายตอน แต่ยังไม่เคยเอาไปแก้ปัญหาให้ใครจริง ๆ
• เริ่มจากความสวย เห็นงานบน Dribbble แล้วทำตาม ได้หน้าจอที่ดูดี แต่ถ้ามีคนถามว่าทำไมปุ่มต้องอยู่ตรงนี้ ก็ตอบไม่ได้
• เลือกโจทย์ใหญ่เกินตัว ตั้งใจออกแบบแอปธนาคารทั้งแอป สุดท้ายไม่จบสักหน้า
• ไม่มีใครช่วยดู ทำเสร็จแล้วไม่รู้ว่าดีหรือยัง เลยวนกลับไปดูคลิปใหม่

อีกเรื่องที่ควรเคลียร์ตั้งแต่แรก คือ UX กับ UI ไม่ใช่คำเดียวกัน แต่เป็นสองส่วนของงานเดียวกัน UX (User Experience) คือการทำให้คนใช้ทำสิ่งที่ตั้งใจไว้ได้สำเร็จ ไม่ติดขัด ส่วน UI (User Interface) คือหน้าตาและปุ่มต่าง ๆ ที่คนใช้แตะจริงบนหน้าจอ

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

เริ่มต้น UX/UI จาก 5 ขั้นตอนนี้ ก่อนแตะเครื่องมือ

ห้าขั้นนี้คือแกนของงาน UX/UI หนึ่งชิ้น ถ้าทำครบ คุณจะมีผลงานที่เล่าได้ตั้งแต่ต้นจนจบ เพื่อให้เห็นภาพ เราจะใช้ตัวอย่างเดียวกันตลอดบทความ คือ แอปสั่งกาแฟล่วงหน้าของร้านกาแฟหน้าออฟฟิศ ร้านนี้ช่วงแปดโมงเช้าคิวยาวมาก จนพนักงานออฟฟิศหลายคนถอดใจเดินกลับ

1. Persona: เรากำลังออกแบบให้ใคร

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

ชื่อหรือรูปถ่ายไม่ใช่ส่วนสำคัญ ส่วนสำคัญคือเขาอยากได้อะไร ทำอะไรเป็นประจำ และติดปัญหาตรงไหน ทุกข้อต้องบอกได้ว่ามาจากข้อมูลไหน จบขั้นนี้คุณจะได้ Persona 1 หน้า

2. User Journey: เขาเจออะไรบ้างตั้งแต่ต้นจนจบ

User Journey คือเส้นทางทั้งหมดของคนใช้ ตั้งแต่ก่อนเปิดแอปจนใช้เสร็จ พร้อมความรู้สึกในแต่ละช่วง เช่น นึกอยากกินกาแฟตอนนั่งรถไฟฟ้า เปิดแอปสั่ง จ่ายเงิน เดินมาถึงร้าน แล้วพบว่าแก้วยังไม่เสร็จ

ช่วงไหนที่อารมณ์ของคนใช้ดิ่งลง ตรงนั้นแหละที่การออกแบบช่วยได้มากที่สุด จบขั้นนี้คุณจะได้แผนภาพเส้นทาง ที่ชี้ชัดว่าคนใช้หงุดหงิดตรงไหน

3. User Flow: ในแอปต้องกดผ่านหน้าไหนบ้าง

ถ้า Journey คือภาพกว้างทั้งเส้นทาง User Flow ก็คือการซูมเข้าไปในแอป ว่าคนใช้ต้องผ่านหน้าจอไหน ต้องเลือกอะไรตรงไหน และถ้ามีอะไรผิดพลาดจะไปต่อทางไหน เช่น เมนูที่เลือกหมด หรือจ่ายเงินไม่ผ่าน

มือใหม่มักวาดแค่เส้นทางที่ทุกอย่างราบรื่น ทั้งที่ทางแยกพวกนี้คือสิ่งที่คนใช้เจอจริงทุกวัน จบขั้นนี้คุณจะได้แผนผังหน้าจอของงานหลัก 1 งาน ที่มีทางแยกครบ

4. Low-fidelity Prototype: ร่างหยาบ ๆ ไว้ให้คนลองก่อน

Low-fidelity Prototype คือต้นแบบแบบหยาบ ขาวดำ ยังไม่ใส่สีหรือรูป จะวาดบนกระดาษ หรือทำเป็นหน้าจอง่าย ๆ ที่กดต่อกันได้ก็ได้ เป้าหมายคือเอาไปให้คนลองใช้ ก่อนจะเสียเวลาทำให้สวย

เหตุผลง่าย ๆ คือแก้ภาพร่างใช้เวลาไม่กี่นาที แต่แก้หน้าจอที่ลงรายละเอียดไปแล้วใช้เวลามากกว่านั้นหลายเท่า จบขั้นนี้คุณจะได้ภาพร่าง 3–5 หน้าจอที่ให้คนจริงลองกดได้

5. หน้าจอจริงใน Figma: ใช้ง่าย และดูเป็นชุดเดียวกัน

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

จบขั้นนี้คุณจะได้หน้าจอจริง 2–3 หน้าที่ใช้สไตล์เดียวกันทั้งชุด ถ้าระหว่างทางเจอคำศัพท์ที่ไม่คุ้น เปิด 19 คำศัพท์ UX/UI Design ที่ควรรู้ก่อนเริ่มศึกษา ไว้ข้าง ๆ จะช่วยให้อ่านบทความหรือดูคลิปอื่นเข้าใจเร็วขึ้นเยอะ

เครื่องมือไหนช่วยตรงขั้นไหน (ไม่ต้องเรียนครบทุกตัว)

ข่าวดีคือคุณไม่ต้องเรียนเครื่องมือเป็นสิบตัว สามตัวก็พอสำหรับทั้ง 5 ขั้น ได้แก่ ChatGPT ไว้ช่วยคิดไอเดียและหาข้อมูล, Claude ไว้ช่วยร่างงานออกแบบ และ Figma ไว้ประกอบหน้าจอจริง

Claude มีจุดที่เหมาะกับงานร่างหน้าจอ คือสร้างงานแยกออกมาเป็น Artifact ได้ เช่น หน้าเว็บหน้าเดียวที่เปิดดูข้าง ๆ แชต แล้วสั่งให้แก้ต่อได้เลย (ข้อมูลจาก Claude Help Center)

ตารางนี้สรุปว่าแต่ละขั้นให้ AI ช่วยอะไรได้ และอะไรที่คุณต้องตรวจเอง

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

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

ลองดูตัวอย่าง Prompt สำหรับขั้น User Flow ที่ใช้ห้าจังหวะนี้ ก๊อปไปใช้ได้ทั้งใน ChatGPT และ Claude แค่เปลี่ยนข้อความใน < > เป็นข้อมูลของคุณ

Prompt / Templateช่วยร่าง User Flow สำหรับ <ชื่อแอปและงานหลักที่ผู้ใช้ต้องทำ>
ผู้ใช้หลักคือ <สรุป Persona ของคุณ 2–3 บรรทัด>

ขอเป็นรายการทีละหน้าจอ ตั้งแต่เปิดแอปจนทำงานสำเร็จ
ใส่ทางแยกเมื่อเกิดปัญหาด้วย เช่น ข้อมูลไม่ครบ สินค้าหมด หรือชำระเงินไม่สำเร็จ
ท้ายแต่ละขั้นให้บอกว่าคิดมาจากข้อมูลใน Persona ข้อไหน
ถ้าข้อไหนเป็นการคาดเดาของคุณเอง ให้เขียนคำว่า "คาดเดา" กำกับไว้

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

แผน 7 วัน: เริ่มต้น UX/UI ให้มีผลงานชิ้นแรก

เริ่มจากเลือกโจทย์เล็ก ๆ ใกล้ตัว ที่คุณหรือคนรอบตัวเจอจริง เช่น สั่งกาแฟล่วงหน้า จองคิวร้านตัดผม หรือยื่นใบลาในบริษัท แล้วเลือกงานหลักแค่งานเดียวที่คนใช้ต้องทำให้สำเร็จ วันละ 1–2 ชั่วโมงก็พอ

หลายคนสงสัยว่าให้ลองแค่ไม่กี่คนจะพอเหรอ Nielsen Norman Group อธิบายว่า การทดสอบกับผู้ใช้ 5 คนเจอปัญหาการใช้งานได้ราว 85% และแนะนำให้ทดสอบรอบเล็กหลาย ๆ รอบ แก้แล้วค่อยทดสอบใหม่ ดีกว่าทดสอบรอบใหญ่ครั้งเดียว สำหรับมือใหม่ แปลว่าคุณไม่ต้องรอให้งานสมบูรณ์ก่อนค่อยให้ใครดู

ครบ 7 วันแล้ว อย่าเพิ่งรีบไปเริ่มโจทย์ใหม่ ให้กลับมาแก้โจทย์เดิมตามผลทดสอบอีกรอบ เพราะการปรับงานตามสิ่งที่เห็นจากคนใช้จริง สำคัญพอ ๆ กับการออกแบบรอบแรก ถ้าอยากเห็นเส้นทางยาว ๆ ตั้งแต่ศูนย์จนมีพอร์ตโฟลิโอ อ่านต่อได้ที่ Roadmap UX/UI ปี 2026 แบบไม่หลงทาง

ถ้าอยากเริ่มแบบมีคนพาทำตั้งแต่ Persona จนได้หน้าจอจริงภายในวันเดียว ลองดู Workshop Start Step AI for UX/UI Design ที่ไม่ต้องมีพื้นฐานมาก่อน

6 ความผิดพลาดที่มือใหม่ UX/UI เจอบ่อย และวิธีเลี่ยง

ระหว่างทำตามแผน มีหลุมที่มือใหม่ตกกันบ่อย รู้ไว้ก่อนจะเลี่ยงได้ง่ายขึ้น

1. ให้ AI คิดแทนทั้งหมด ถ้าไม่ป้อนข้อมูลจริง AI ก็ต้องเดาเติมส่วนที่ขาด บางครั้งถึงขั้นแต่งคำพูดของคนใช้ที่ไม่เคยมีใครพูดจริง ทางแก้คือป้อนข้อมูลจริงทุกครั้ง และให้มันบอกว่าข้อไหนเดา
2. เก็บคอร์สมากกว่าลงมือทำ ตั้งก่อนว่าอยากได้ผลงานแบบไหน แล้วเรียนเฉพาะสิ่งที่ต้องใช้กับงานชิ้นนั้น
3. เริ่มจากความสวย ทำ UI ก่อนรู้ว่าแก้ปัญหาอะไร สุดท้ายต้องรื้อใหม่ เพราะคนใช้ต้องการอย่างอื่น
4. เลือกโจทย์ใหญ่เกินไป แอปเดลิเวอรีทั้งระบบไม่ใช่โจทย์แรกที่ดี งานหลักงานเดียวที่ทำครบทุกขั้นมีค่ากว่า
5. ไม่ให้คนจริงลองใช้ ให้เพื่อนสามคนลองยังดีกว่าไม่ทดสอบเลย และมักได้เจอเรื่องที่คุณไม่เคยนึกถึง
6. เก็บแต่ภาพสุดท้าย ถ้าพอร์ตมีแต่หน้าจอสวย ๆ คนดูจะไม่รู้ว่าคุณคิดยังไง เก็บภาพร่าง ผลทดสอบ และเหตุผลไว้ตั้งแต่วันแรก

พออ่านถึงตรงนี้ คำถามที่มักตามมาคือ ควรเรียนเองต่อ หรือหาคลาสที่มีคนช่วยตรวจงาน สองทางนี้มีข้อดีต่างกัน ลองอ่าน เรียน UX/UI ด้วยตัวเอง vs Bootcamp แบบไหนคุ้มเวลากว่ากัน ประกอบการตัดสินใจ

ถ้าอยากฝึก 5 ขั้นตอนนี้กับโจทย์จริงภายในวันเดียว

แผน 7 วันข้างบนทำเองได้ทั้งหมด แต่ถ้าอยากลองครบทั้งกระบวนการโดยมีคนช่วยดูงาน ทีม borntoDev มี Workshop Start Step AI for UX/UI Design ที่เดินตาม 5 ขั้นเดียวกันนี้ ใช้เคสเดียวตลอดทั้งวัน ตั้งแต่ Persona ไปจนถึงหน้าจอจริงใน Figma ทุกขั้นใช้จังหวะ ตั้งโจทย์ → AI ร่าง → ตรวจสอบ → แก้ไข → อธิบายเหตุผล และมีการ์ดสรุปขั้นตอนให้เก็บไว้ใช้ต่อหลังเรียน

ตารางเรียนทั้งวันเป็นแบบนี้

เรื่องที่มือใหม่มักถามก่อนสมัคร

• ไม่ต้องมีพื้นฐานมาก่อน เนื้อหาเริ่มจากพื้นฐานการใช้ AI ในงานออกแบบ แล้วพาลงมือทำทีละขั้น ขอแค่ใช้คอมพิวเตอร์ได้ทั่วไป
• ใช้เครื่องมือ 3 ตัว ได้แก่ ChatGPT (Idea & Research), Claude (Design / Artifacts) และ Figma (UI Design) เตรียมคอมพิวเตอร์ที่ต่ออินเทอร์เน็ตได้ และบัญชีของทั้ง 3 เครื่องมือมาให้พร้อม
• คลาสเล็ก รับไม่เกิน 12 ท่านต่อคลาส ผู้สอนจึงดูงานและให้ความเห็นกับงานของคุณได้ระหว่าง Workshop
• เรียนสดที่ Training Room บริษัท บอร์นทูเดฟ ย่านบางกะปิ ใกล้เดอะมอลล์บางกะปิและนิด้า วันที่ 28 พฤศจิกายน 2569 เวลา 09:00–16:00 น. ไม่มีวิดีโอให้ดูย้อนหลัง และได้รับ Certificate เมื่อจบหลักสูตร
• เหมาะกับ คนที่อยากเริ่มแบบมีผลงานจับต้องได้ รวมถึง Designer, Developer และฝั่ง Product หรือ Business ที่อยากใช้ AI ในงานออกแบบอย่างมีขั้นตอน

ผู้สอนคือ อาจารย์พีรพนธ์ (อ.พี) Expert UX/UI Designer ของ borntoDev เคยออกแบบผลิตภัณฑ์ให้แบรนด์ระดับประเทศ เชี่ยวชาญด้าน Design System, User Research และ Product Design Thinking

อ.พี มีประสบการณ์ด้าน HCI (Human-Computer Interaction) มากกว่า 10 ปี สอนผู้เรียนมาแล้วมากกว่า 600 คน และเป็นผู้สอนหลักของ Master of UX/UI Bootcamp ของ borntoDev

ถ้าอยากดูตัวอย่างผลงานจากคลาสและรายละเอียดรอบเรียน เปิดดูได้ที่หน้าคอร์ส Start Step AI for UX/UI Design

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

เริ่มต้น UX/UI ต้องวาดรูปเก่งหรือจบสายศิลปะไหม

ไม่จำเป็น งาน UX เริ่มจากการเข้าใจปัญหาและลำดับการใช้งาน ซึ่งเป็นเรื่องของการสังเกตและคิดเป็นขั้นเป็นตอน ส่วนพื้นฐาน UI อย่างการจัดลำดับความสำคัญ ระยะห่าง และการเลือกตัวอักษร เป็นหลักที่ฝึกได้ ภาพร่าง Low-fidelity ก็ใช้แค่กล่องกับเส้น ไม่ต้องสวย

ต้องเขียนโค้ดเป็นไหมถึงจะเรียน UX/UI ได้

ไม่ต้อง ทั้ง 5 ขั้นในบทความนี้ทำได้โดยไม่เขียนโค้ดเลย แต่ถ้าพอเข้าใจคร่าว ๆ ว่าเว็บหรือแอปทำงานยังไง จะคุยกับทีม Developer ได้ง่ายขึ้นเมื่อเริ่มทำงานจริง

ควรเรียน Figma ก่อน หรือเรียน UX ก่อน

เรียนลำดับการคิดแบบ UX ก่อน แล้วค่อยฝึก Figma ไปพร้อมกันตอนถึงขั้นทำหน้าจอจริง พอรู้แล้วว่าแต่ละหน้าจอมีไว้ทำอะไร การเรียน Figma จะมีเป้าหมายชัด และคุณจะเรียนเฉพาะส่วนที่ได้ใช้จริง

ต้องจ่ายเงินซื้อเครื่องมือก่อนเริ่มไหม

ยังไม่จำเป็น ณ เดือนพฤศจิกายน 2569 ChatGPT และ Claude มีแพ็กเกจใช้ฟรี ส่วน Figma มีแพ็กเกจ Starter ที่ใช้ฟรี ทั้งหมดมีขีดจำกัดการใช้งาน แต่พอสำหรับเริ่มฝึก เงื่อนไขอาจเปลี่ยนได้ ควรเช็กหน้าราคาของผู้ให้บริการอีกครั้งก่อนสมัคร

ไม่มีพื้นฐานเลย เรียน Start Step AI for UX/UI Design ได้ไหม

ได้ เนื้อหาเริ่มจากพื้นฐานการใช้ AI ในงานออกแบบ แล้วพาลงมือทำทีละขั้น ขอแค่ใช้คอมพิวเตอร์ได้ทั่วไป และเตรียมบัญชี ChatGPT, Claude และ Figma มาให้พร้อม ดูรายละเอียดเพิ่มเติมได้ที่หน้าคอร์ส Start Step AI for UX/UI Design