วิธีเพิ่มโมชันกราฟิกให้กับวิดีโอ

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

ด้านล่างนี้คือ: กราฟิก 8 ประเภทที่ใช้งานได้จริง, กฎเรื่องจังหวะเวลาสำหรับแต่ละประเภท, รายการช็อตวิดีโอแบบก่อน/หลังสำหรับการสาธิตความยาว 60 วินาที และ 3 วิธีในการสร้าง

บททดสอบที่กราฟิกทุกชิ้นต้องผ่าน#

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

• ให้มีกราฟิกเคลื่อนไหวทีละอย่าง เว้นระยะการปรากฏอย่างน้อยครึ่งวินาที ไม่เช่นนั้นผู้ชมจะอ่านไม่ทันเลยสักอย่าง
• กราฟิกต้องมาพร้อมกับเสียงบรรยาย หากเสียงบรรยายพูดว่า "คลิก Export" แต่ไฮไลต์ปรากฏขึ้นหลังจากนั้น 2 วินาที ผู้ชมก็คงกำลังมองหาปุ่มนั้นอยู่แล้ว ให้กราฟิกปรากฏขึ้นพร้อมกับคำพูด หรือก่อนหน้าสักสองสามเฟรม

กราฟิก 8 ประเภทที่คุ้มค่าแก่การใช้งานในการบันทึกหน้าจอ#

Callouts#

Callout ควรระบุชื่อปุ่มควบคุมหรือผลลัพธ์ เช่น "Billing settings" หรือ "Invoice sent" โดยจำกัดไว้ไม่เกิน 6 คำ แนวทางคำบรรยายของ BBC แนะนำ อย่างน้อยประมาณ 0.3 วินาทีต่อคำ สำหรับคำบรรยาย ในการบันทึกหน้าจอ ผู้ชมต้องกวาดสายตาดูอินเทอร์เฟซด้วย ดังนั้นให้เพิ่มเป็นสองเท่า: Callout ที่มี 4 คำควรใช้เวลาประมาณ 2.5 วินาที ไม่ใช่ 1.2 วินาที

ซูม + ไฮไลต์#

เป็นโมชันกราฟิกที่มีประโยชน์ที่สุดในการบันทึกหน้าจอ แต่ก็ถูกใช้พร่ำเพรื่อที่สุดเช่นกัน ให้ซูมเข้าก่อนคลิก 0.5 วินาที ค้างไว้ขณะที่ผลลัพธ์ปรากฏ แล้วซูมออกเพื่อให้ผู้ชมเห็นบริบทโดยรวม การใช้ไฮไลต์ (กล่องนุ่มๆ หรือการหรี่แสงรอบข้าง) ก็ทำหน้าที่เดียวกันได้โดยไม่ต้องขยับเฟรม ซึ่งเหมาะกับแดชบอร์ดที่มีข้อมูลหนาแน่นซึ่งการซูมอาจทำให้เสียบริบท เลือกใช้อย่างใดอย่างหนึ่งต่อการกระทำหนึ่งครั้ง

ตัวนับขั้นตอน#

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

Lower thirds#

ในวิดีโอผลิตภัณฑ์ Lower thirds ใช้ระบุชื่อผู้นำเสนอในวงกลมกล้องหรือระบุชื่อส่วน ("Admin view") ให้ระวังตำแหน่ง: ส่วนล่างของเว็บแอปส่วนใหญ่มักมีแถบบันทึกข้อมูลและวิดเจ็ตแชทอยู่

Title cards#

ใช้คั่นระหว่างบท ไม่ใช่ทุกขั้นตอน วิดีโอความยาว 60 วินาทีต้องการเพียง 1 อันที่ตอนต้น Title card ที่ต้องใช้เวลาอ่านนานๆ คือย่อหน้าที่พยายามปลอมตัวเป็นกราฟิก

ลูกศรเคลื่อนไหว#

ลูกศรดีกว่าการซูมเมื่อมี 2 สิ่งบนหน้าจอที่เกี่ยวข้องกัน เช่น "ปุ่มสลับนี้เปลี่ยนพรีวิวส่วนนั้น" ให้วาดเส้นปรากฏขึ้นในเวลาประมาณ 0.3 วินาทีแล้วหยุดนิ่ง ลูกศรที่เด้งไปมาจะดึงความสนใจไปเรื่อยๆ ตราบเท่าที่มันยังเด้งอยู่

ตัวนับข้อมูล#

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

การเปลี่ยนฉาก#

ใช้ 1 สไตล์ต่อวิดีโอ และใช้เฉพาะเมื่อเปลี่ยนฉากหรือหัวข้อเท่านั้น ระหว่าง 2 ขั้นตอนบนหน้าจอเดียวกัน การตัดฉาก (cut) มักจะดีที่สุด หลีกเลี่ยงเอฟเฟกต์แฟลช: เกณฑ์ความสำเร็จของ WCAG เรื่อง การกะพริบ 3 ครั้งหรือน้อยกว่า มีไว้เพราะเนื้อหาที่กะพริบอาจกระตุ้นให้เกิดอาการชักหรือไมเกรนได้

กฎที่ช่วยให้การซ้อนกราฟิกเคลื่อนไหวมีความสม่ำเสมอ#

การซ้อนกราฟิกเคลื่อนไหวจะดูเป็นมืออาชีพเมื่อดูเป็นระบบ:

1. สไตล์การเคลื่อนไหวเดียว. ใช้การผ่อนแรง (easing) ทิศทางการปรากฏ และระยะเวลาเดียวกันสำหรับทุก Callout หาก Callout เลื่อนเข้ามาจากทางซ้ายในขั้นตอนที่ 1 ก็ต้องเลื่อนเข้ามาจากทางซ้ายในขั้นตอนที่ 5 2. เทมเพลตแบรนด์ที่สร้างครั้งเดียว. ฟอนต์ สี การเปิดตัวโลโก้ และเลย์เอาต์ Title card ควรอยู่ในเทมเพลตที่บันทึกไว้ ไม่ใช่สร้างใหม่ทุกวิดีโอ เครื่องมือทุกตัวด้านล่างรองรับสิ่งนี้ในรูปแบบใดรูปแบบหนึ่ง 3. พื้นที่ปลอดภัย (Safe area). เก็บข้อความให้ห่างจากขอบเฟรมและห่างจากปุ่มควบคุม UI ที่คุณกำลังแสดง ให้ทำเครื่องหมายพื้นที่ปลอดภัยไว้ในเทมเพลตของคุณ 4. กราฟิกต้องตามบท. เขียนบทบรรยายก่อน แล้วค่อยทำเครื่องหมายคำที่กราฟิกแต่ละชิ้นจะปรากฏ ไม่มีคำพูด ก็ไม่มีกราฟิก

ก่อนและหลัง: รายการช็อตวิดีโอความยาว 60 วินาที#

การสาธิตความยาว 60 วินาทีเรื่อง "ส่งใบแจ้งหนี้ใบแรกของคุณ" ในแอปเรียกเก็บเงิน SaaS ทั่วไป "ก่อน" คือการบันทึกดิบพร้อมเสียงบรรยาย

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

3 วิธีในการเพิ่มโมชันกราฟิกให้กับวิดีโอ#

1. โปรแกรมตัดต่อแบบดั้งเดิม: Premiere, After Effects หรือ DaVinci Resolve#

Adobe Premiere ร่วมกับ After Effects. เทมเพลตโมชันกราฟิก (ไฟล์ .mogrt) ถูกสร้างใน After Effects และนำมาใช้ซ้ำใน Premiere ตาม หน้าช่วยเหลือของ Adobe คุณสามารถลากเทมเพลตจากแผง Graphics Templates ลงบนแทร็กวิดีโอ แล้วแก้ไขในแท็บ Edit ของแผง Properties เทมเพลตที่ขับเคลื่อนด้วยข้อมูล จะเติมข้อมูลลงในแผนภูมิแท่งและกราฟเส้นจากข้อมูลสเปรดชีต ซึ่งเป็นวิธีที่สะอาดที่สุดในการสร้างตัวนับข้อมูลและแผนภูมิที่แม่นยำ

DaVinci Resolve. หน้า Fusion เป็นเครื่องมือตัดต่อแบบโหนดที่อยู่ภายใน Resolve พร้อมเครื่องมือกว่า 200 รายการ คุณสามารถสร้างแถบชื่อเรื่อง (lower thirds) พื้นหลังเคลื่อนไหว และการเปลี่ยนฉากใน Fusion แล้วบันทึกเป็นมาโคร โดยเปิดให้เห็นเฉพาะส่วนควบคุมที่จำเป็นสำหรับนักตัดต่อเท่านั้น จากนั้นสิ่งเหล่านี้จะไปปรากฏในคลังเอฟเฟกต์ของหน้า Edit สำหรับทุกโปรเจกต์ Resolve สามารถดาวน์โหลดได้ฟรี ส่วน Resolve Studio มีราคาอยู่ที่ $295

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

2. โปรแกรมตัดต่อแบบใช้เทมเพลต: Canva หรือ CapCut#

Canva ช่วยให้คุณ ใส่แอนิเมชันให้หน้ากระดาษ องค์ประกอบ และข้อความ ได้จากปุ่ม Animate โดยมีค่าพรีเซ็ตให้เลือกทั้งแบบช้า ปานกลาง หรือเร็ว รวมถึงกำหนดระยะเวลาการปรากฏตัวและการหายไปได้อย่างแม่นยำ ฟีเจอร์ "แสดงเวลาขององค์ประกอบ" ช่วยให้คุณตั้งค่าได้ว่าแต่ละองค์ประกอบจะปรากฏขึ้นเมื่อใด และ "สร้างแอนิเมชัน" ช่วยให้คุณลากองค์ประกอบไปตามเส้นทางที่ต้องการได้ Brand Kits จะช่วยจัดเก็บโลโก้ สี และฟอนต์ เพื่อให้เทมเพลตคงความเป็นแบรนด์อยู่เสมอ

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

เหมาะสำหรับ: นักการตลาดที่ใช้งานเครื่องมือเหล่านี้เป็นประจำและต้องการใส่ข้อความเคลื่อนไหวบนคลิปสั้นๆ ข้อควรพิจารณา: ทั้งสองโปรแกรมไม่ได้ออกแบบมาเพื่อวิดีโอบันทึกหน้าจอโดยเฉพาะ ดังนั้นการซูมตามการคลิก การลบเคอร์เซอร์ และการเบลอข้อมูลส่วนตัวจึงต้องทำด้วยมือทั้งหมด

3. Clevera: การวางซ้อนบนไทม์ไลน์ หรือการบรีฟด้วยคำพูดง่ายๆ#

Clevera เริ่มต้นจากวิดีโอบันทึกหน้าจอ สำหรับ วิดีโอสอนการใช้งานที่บรรยายด้วย AI และวิดีโอสาธิตผลิตภัณฑ์ ระบบจะช่วยปรับเคอร์เซอร์ให้สมูท เน้นจุดที่มีการโต้ตอบสำคัญ และซูมให้อัตโนมัติในขณะที่เขียนและซิงค์เสียงบรรยาย งานส่วนใหญ่เกี่ยวกับการซูมและไฮไลท์ในรายการช็อตด้านบนจะเสร็จสิ้นก่อนที่คุณจะเปิดโปรแกรมตัดต่อด้วยซ้ำ

ในโปรแกรมตัดต่อไทม์ไลน์ คุณสามารถเพิ่มหรือปรับแต่งส่วนที่เหลือได้ ไม่ว่าจะเป็นข้อความ รูปภาพ การเบลอ และการทำไฮไลท์, หน้าไตเติ้ล, หน้าแนะนำ, การเปิดตัวโลโก้, การซูม และการเปลี่ยนฉาก เช่น การซูมแบบไขว้, บันได, มู่ลี่, ละลาย, เช็ดแบบนุ่มนวล และสไลด์ หน้าไตเติ้ล การเปิดตัวโลโก้ และสไตล์วิดีโอสามารถบันทึกเป็นเทมเพลตสำเร็จรูปหรือเทมเพลตที่กำหนดเองได้ เพื่อให้วิดีโอถัดไปมีหน้าตาเหมือนวิดีโอแรก หากคุณต้องการเพียงแค่ใส่สไตล์ให้วิดีโอบันทึกหน้าจอของคุณด้วยการซูม การวางซ้อน และหน้าไตเติ้ล ตัวเลือกแบบ Styled (พร้อมแชร์) จะไม่ใช้เครดิต AI ดังนั้นจึงใช้งานได้ไม่จำกัดในทุกแพลน รวมถึงแพลนฟรี (ในแพลนฟรีคุณสามารถแชร์ผ่านลิงก์หรือฝังวิดีโอได้ ส่วนการดาวน์โหลด MP4 จะอยู่ในแพลน Starter และ Pro)

สำหรับกราฟิกที่นอกเหนือจากรายการนั้น ให้ใช้ อธิบายสิ่งที่คุณต้องการ ใน เครื่องมือสร้างโมชันกราฟิก AI คุณสามารถเขียนบรีฟแบบอิสระ เช่น "เพิ่มตัวนับเคลื่อนไหวจาก 0 ถึง 1,240 ที่เวลา 0:45 และลูกศรจากช่องวันที่ครบกำหนดไปยังตัวอย่างเงื่อนไข" แล้ว Clevera จะสร้างกราฟิกเคลื่อนไหวทับบนวิดีโอที่มีอยู่ รายการองค์ประกอบที่วางซ้อนของโปรแกรมตัดต่อไม่มีลูกศรหรือตัวนับโดยเฉพาะ ดังนั้นนี่คือวิธีสำหรับงานประเภทนั้น

การแก้ไขข้อความ ไฮไลท์ และการเบลอในวิดีโอ Clevera ที่เผยแพร่ไปแล้วจะอัปเดตทุกลิงก์และทุกการฝังวิดีโอโดยอัตโนมัติ ดังนั้นหากเปลี่ยนชื่อป้ายกำกับปุ่ม ก็จะแก้ไขเพียงครั้งเดียวจบ แต่ถ้า UI เปลี่ยนไป ก็ยังคงต้องใช้ฟุตเทจใหม่

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

สิ่งที่ Clevera เพิ่มให้เอง และสิ่งที่ไม่ได้เพิ่ม#

ในเดือนตุลาคม 2026 เราใช้เครื่องมือบันทึกหน้าจอ AI ของ Clevera บันทึกงานสั้นๆ ในแอป To-do สาธิต ได้ฟุตเทจดิบ 0:58 นาที และเปลี่ยนเป็นวิดีโอสอนการใช้งาน หลังจากผ่านไปประมาณ 50 วินาทีและใช้ไป 9 เครดิต ไทม์ไลน์ก็มีหน้าแนะนำ การเปิดตัวโลโก้ และการซูมอัตโนมัติที่ 1.5x และ 1.8x โดยตัดเหลือความยาว 0:40 นาที นั่นคือส่วนของหน้าไตเติ้ลและแถวการซูมในรายการช็อตที่เสร็จเรียบร้อย ส่วนการทำไฮไลท์ ตัวนับขั้นตอน และลูกศรยังไม่มี ซึ่งเป็นส่วนที่คุณต้องเพิ่มเอง

จากนั้นเราลองใช้ Styled for sharing กับวิดีโอบันทึกเดียวกันโดยใช้เทมเพลตของทีมเราแทนเทมเพลตเริ่มต้น ใช้เวลาประมาณ 25 วินาทีและ 0 เครดิต ผลลัพธ์ที่ได้มีความยาว 1:07 นาที ซึ่งยาวกว่าต้นฉบับเนื่องจากมีหน้าแนะนำ มีการซูมอัตโนมัติ 2 จุดที่ 1.8x และเปิดโปรแกรมตัดต่อที่แผง Style สำหรับปรับพื้นหลัง ระยะห่าง มุม และเคอร์เซอร์ หน้าเว็บที่บันทึกมาดูซีดและคอนทราสต์ต่ำ แผง Style ช่วยจัดกรอบฟุตเทจ แต่ไม่ได้ช่วยแก้ไขคุณภาพฟุตเทจ

วิดีโอเวอร์ชัน Styled for sharing ความยาว 1:07 นาทีจากวิดีโอบันทึกเดียวกัน โดยไม่มีการตัดต่อ ใช้ 0 เครดิต

สำหรับวิธีการบรีฟ บรีฟแบบกำหนดเอง (Custom brief) สร้าง อินโฟกราฟิกเคลื่อนไหว ความยาว 1:00 นาทีพร้อมแถบแสดงความคืบหน้าโดยใช้เวลาประมาณ 7 ถึง 8 นาที และใช้ไป 86 เครดิต ตัวเลขถูกต้อง แต่ระบบละเลยระยะเวลา 15 วินาทีที่ระบุในบรีฟ (ความยาวตั้งค่าได้ในเมนู Format) และเส้นต้นฉบับมีขนาดเล็กเกินไปสำหรับหน้าจอมือถือ คลิปนั้นถูกสร้างขึ้นใหม่ทั้งหมด เรายังไม่ได้ทดสอบการวางกราฟิกซ้อนบนวิดีโอบันทึกที่มีอยู่

อินโฟกราฟิกเคลื่อนไหวความยาว 1:00 นาทีที่ Clevera สร้างขึ้นจากบรีฟ โดยไม่มีการตัดต่อ

เมื่อไหร่ที่ควรจ้างโมชันดีไซน์เนอร์#

โปรแกรมตัดต่อ AI และเทมเพลตครอบคลุมกราฟิกในคู่มือนี้แล้ว แต่ไม่สามารถทดแทนโมชันดีไซน์เนอร์สำหรับงานเหล่านี้ได้:

• วิดีโอเปิดตัวผลิตภัณฑ์หรือวิดีโอแบรนด์ ที่ทุกเฟรมต้องผ่านการกำกับศิลป์และตัวการเคลื่อนไหวคือหัวใจสำคัญของข้อความ
• กราฟิกที่ติดตามวัตถุบนฟุตเทจเคลื่อนไหว เช่น ป้ายกำกับที่เคลื่อนที่ตามโทรศัพท์ในช็อตที่ถ่ายด้วยมือ
• งาน 3D แอนิเมชันตัวละคร หรือภาพประกอบเฉพาะ ที่มีการเคลื่อนไหว
• ระบบเทมเพลตของคุณ การใช้เวลาหนึ่งสัปดาห์ให้นักออกแบบสร้างแถบชื่อเรื่อง หน้าไตเติ้ล และการเปิดตัวโลโก้ใน After Effects หรือ Fusion จะคุ้มค่าในระยะยาวสำหรับทุกวิดีโอที่ทีมของคุณทำหลังจากนั้น ในเครื่องมือใดก็ตามที่รองรับเทมเพลต

การแบ่งงานทั่วไปคือ: ใช้นักออกแบบสำหรับระบบและงานเปิดตัวครั้งสำคัญ และใช้เครื่องมือ AI หรือโปรแกรมตัดต่อเทมเพลตสำหรับวิดีโอแนะนำการใช้งานรายสัปดาห์

เริ่มต้นด้วยการซูม#

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