ตรวจสอบ safe zone สำหรับ TikTok, Reels และ Shorts เพื่อให้คอนเทนต์ไม่โดนบัง
ดีไซน์* บริเวณสีแดงคือจุดที่อาจถูกบังด้วยปุ่มกด, คำบรรยาย, หรือไอคอนของแพลตฟอร์ม
อัปโหลดรูปภาพขนาด 1080x1920 เพื่อเริ่มทดสอบ
การวางข้อความสำคัญ (Call to Action) หรือใบหน้าคนไว้ผิดจุดในวิดีโอแนวตั้ง (9:16) อาจทำให้เนื้อหาถูกบังโดยปุ่ม Like, Share, หรือชื่อบัญชีผู้ใช้ ซึ่งจะช่วยลดประสิทธิภาพของคอนเทนต์คุณ เครื่องมือนี้จำลองตำแหน่ง UI จริงเพื่อให้คุณมั่นใจว่าจุดสำคัญของภาพจะเด่นชัดเสมอ
**Safe Zone** คือพื้นที่ปลอดภัยบนภาพหรือวิดีโอที่เนื้อหาสำคัญของคุณจะไม่ถูกรบกวนหรือถูกบังโดยองค์ประกอบ UI ของแอปพลิเคชันนั้นๆ เช่น ปุ่ม Like, ปุ่ม Share, ชื่อโปรไฟล์ หรือคำบรรยายใต้ภาพ (Caption)
โดยเฉพาะในวิดีโอแนวตั้ง (Vertical Video 9:16) อย่าง **TikTok, Reels และ YouTube Shorts** ที่มีองค์ประกอบบนหน้าจอเยอะมาก การรู้ว่า "พื้นที่ไหนห้ามวางข้อความ" จะช่วยให้ผู้ชมของคุณได้รับสารอย่างครบถ้วน
วางองค์ประกอบสำคัญของคุณไว้ในจุดที่มองเห็นชัดเจนที่สุด เพื่อเพิ่ม Engagement ให้กับคอนเทนต์
โดยปกติแล้ว พื้นที่กึ่งกลางของหน้าจอค่อนไปทางบนเล็กน้อย คือจุดที่ปลอดภัยที่สุด และควรเลี่ยงพื้นที่ด้านล่างและด้านขวาอย่างน้อย 15-20%
ปัจจุบันเครื่องมือนี้รองรับการอัปโหลดไฟล์ภาพ (Screenshot) เพื่อทดสอบจัดวางองค์ประกอบ หากคุณทำวิดีโอ สามารถใช้ภาพนิ่งมาลองวางเช็คดูก่อนตัดต่อจริงได้ครับ
อัปโหลด screenshot หรือรูป mockup UI ของคุณ
เลือกอุปกรณ์เป้าหมาย (เช่น iPhone 15, Samsung Galaxy S24)
overlay เขตปลอดภัยจะปรากฏบนรูปภาพของคุณ
ตรวจสอบว่าปุ่ม ข้อความ และพื้นที่โต้ตอบทั้งหมดอยู่ในเขตปลอดภัยที่ไฮไลต์
ดาวน์โหลดรูปที่มีคำอธิบายหรือแชร์กับทีมพัฒนาของคุณ
ตรวจสอบว่า navigation bar และตัวบ่งชี้สถานะไม่ทับซ้อนกับ notch หรือพื้นที่ Dynamic Island ของ iPhone
ให้แน่ใจว่า navigation ด้านล่าง, CTA และช่อง input ไม่ถูกบดบังโดย home indicator ของ iOS หรือ gesture navigation bar ของ Android
ดูตัวอย่างว่าเลย์เอาต์ UI อยู่ในพื้นที่บานพับ fold ของโทรศัพท์แบบพับอย่างไร เพื่อหลีกเลี่ยงเนื้อหาถูกตัดที่รอยพับ
ยืนยันว่า screenshot โปรโมชันมี element UI หลักทั้งหมดที่มองเห็นได้และอยู่ในเขตปลอดภัยก่อนส่งไปยัง App Store หรือ Google Play
Safe Zone Checker วาง guide เขตปลอดภัยของอุปกรณ์ทับบน screenshot หรือ mockup UI ของคุณ แสดงว่า element ที่โต้ตอบได้อยู่ในพื้นที่แสดงผลที่ปลอดภัยหรือไม่ในกรอบอุปกรณ์ยอดนิยม
ค้นหาและแปลงรหัสสี HEX, RGB, HSL สำหรับงานดีไซน์
สร้าง CSS gradient แบบ linear หรือ radial เลือก 2-5 สี พร้อมคัดลอกโค้ด
ออกแบบ CSS box-shadow พร้อม preview แบบสด รองรับหลาย layer
ออกแบบมุมโค้งแต่ละด้านของกล่อง พร้อมแสดงผลและโค้ด
สร้างชุดสีที่เข้ากันจากสีหลัก 1 สี
ดู Tailwind color palette ทั้งหมด คลิกเพื่อคัดลอก