สารบัญ
เคยมั้ยครับ อัปรูปขึ้น Facebook Page cover สวยๆ บนมือถือเห็นเต็มภาพ subject อยู่กลาง พอสลับไปดูบน desktop… อ้าว หัวคนถูกตัด หรือไม่ก็ขอบรูปด้านข้างหายไปเฉยๆ
ใครเคยทำ YouTube channel banner น่าจะคุ้นกับคำว่า “safe area” — Google เขามี template บอกตรงๆ ว่าถ้าโลโก้/ชื่อ channel ออกนอกพื้นที่ตรงกลาง จะหายเวลาคนดูบนมือถือ
หลักการเดียวกันเลยครับ — รูปเดียวกัน หน้าจอต่างกัน ตัดไม่เหมือนกัน ใส่ของสำคัญต้องอยู่ใน พื้นที่ที่รอดทุก crop ส่วนรอบๆ คือ “decorative bleed” — ใส่ได้แต่ห้ามมีของสำคัญ
รูปเดียวกัน 1 file (เช่น 2560×1440)
┌────────────────────────────────────┐│ TV view: เห็นภาพเต็ม ││ ┌──────────────────────────────┐ ││ │ Desktop: ตัด top + bottom │ ││ │ ┌────────────────────────┐ │ ││ │ │ SAFE AREA │ │ ││ │ │ เห็นทุก device │ │ ││ │ │ ของสำคัญต้องอยู่นี่ │ │ ││ │ └────────────────────────┘ │ ││ │ Mobile: ตัดเหลือแค่กลาง │ ││ └──────────────────────────────┘ ││ │└────────────────────────────────────┘บล็อกของผมก็เจอปัญหาเดียวกันเลย แต่เพิ่งรู้วันนี้เอง 555+
วันนี้เลยจะเล่าให้ฟังว่า ออกแบบ “Safe-Zone Discipline” ให้ AI ที่ gen cover blog ผมยังไง ให้มันรู้ว่าวาง subject ตรงไหนถึงรอดทุกหน้า
ปัญหาเริ่มจากไหน
ตอนนี้ทุก cover ของบล็อก AI gen ให้หมด รัน Flux Schnell บน RTX 4060 Laptop ของผมเอง ฟรี 100% (เคยเล่าไว้ในโพสต์ Image Gen นี้)
วันก่อนลอง gen cover ใหม่ใบหนึ่ง ออกมาสวย เปิดในหน้าโพสต์เต็มภาพก็โอเค professional editorial เลย
แต่พอเปิดดูที่หน้า home ของบล็อก… การ์ดเล็กๆ ดันแสดงแต่ส่วนบนของรูป subject สำคัญที่ตั้งใจให้อยู่ตรงกลาง — หาย
อ้าว 🤔
ลองให้ AI ช่วยไล่ดูสิว่ารูปเดียวกันนี้มันไป render ที่ไหนของบล็อกบ้าง (ผมไม่ได้เก่ง CSS ขนาดนั้น 555+) ปรากฏว่า:
- ในโพสต์ — เห็นเต็มภาพ ไม่ตัด
- การ์ดมือถือ — ตัดน้อยมาก เกือบเต็ม (อัตราส่วนใกล้รูปต้นฉบับ)
- การ์ด desktop — ตัดหนัก เหลือแค่ ~40% ของรูป
นี่หว่า บล็อกผมก็เจอปัญหาเดียวกับ Facebook Page cover เลย แค่ว่าผมไม่เคยรู้ — ที่ผ่านมาอาศัย trial-and-error ปรับมือทีละโพสต์ บางใบรอด บางใบไม่รอด
ถึงเวลาทำให้เป็นระบบจริงจังสักที
Safe Zone — โซนที่รอดทุกหน้าจอ
หลังเข้าใจ geometry แล้ว ก็แบ่ง canvas ของ cover (800×457) ออกเป็น 3 zone:
┌──────────────────────────────────────────────┐│ top bleed (~30%) │ ← decorative only│ เห็นแค่ในโพสต์ ไม่เห็นในการ์ด │├──────────────────────────────────────────────┤│ ││ SAFE ZONE (~40%) │ ← subject ต้องอยู่นี่│ เห็นในทุก surface (โพสต์ + การ์ด) ││ │├──────────────────────────────────────────────┤│ bottom bleed (~30%) │ ← decorative only│ เห็นแค่ในโพสต์ ไม่เห็นในการ์ด │└──────────────────────────────────────────────┘geometry เดียวกับ YouTube channel banner เลยครับ แค่หมุนทิศ — YouTube มี safe area กลางแกน X เพราะมือถือตัดด้านข้าง บล็อกผมมี safe area กลางแกน Y เพราะการ์ดตัดบน-ล่าง
Composition Rules — อะไรไปอยู่ตรงไหนได้บ้าง
แค่บอกว่า “อยู่ใน safe zone” มันไม่พอครับ ของแต่ละแบบมันอยู่ตรงไหนได้ไม่เหมือนกัน:
| ของอะไร | อยู่ตรงไหน |
|---|---|
| หน้าคน, มือ, object สำคัญ, เส้นที่ดูเหมือนถูกตัด | ใน safe zone เต็มๆ มี margin ห้ามแตะขอบ |
| ผม, ควัน, เส้นขอบฟ้า (ของที่ขอบ soft) | ข้าม boundary ได้ มักจะดีด้วย เพราะทำให้ bleed ดู natural |
| ของรอง (mug, book, chair) | safe zone ก่อน ถ้าเลย bleed ต้องเป็น atmospheric ไม่ใช่ object ที่ถูกตัดทิ้ง |
| ตัวอักษร (Flux ชอบ hallucinate มั่วๆ) | ห้ามมีเลยถ้าได้ — บอกไปใน prompt ว่า no text |
| bleed zone (top + bottom) | ambient เท่านั้น sky, shadow, light gradient ห้ามมีของสำคัญหลุดมา |
Silhouette test ที่ AI ใช้ self-check: ปิด top + bottom ในใจ รูปที่เหลือยังเล่าเรื่องโพสต์ได้มั้ย ถ้าไม่ได้ = composition ผิด → regen ใหม่
Self-review ก่อนเอามาให้ผมดู
หลัง gen เสร็จ AI ต้อง read รูปกลับมาเช็ค 3 ข้อก่อนเอามาให้ผมดู:
- Silhouette test — ปิด top + bottom ในใจ รูปที่เหลือเล่าเรื่องได้มั้ย?
- Edge check — มี face / hand / object สำคัญแตะ boundary มั้ย? ถ้ามี → regen
- Bleed check — bleed เป็น atmospheric (sky / shadow / light) หรือเป็น object ที่ถูกตัด? ถ้าตัด → regen
Fail ข้อใดข้อหนึ่ง = tighten prompt + regen เงียบๆ — ผมอยากเห็นแค่ “ผลที่ AI ลงตัวแล้ว” ไม่ใช่ “ลองดู 4 ใบเลือกอัน”
ใส่ทั้งหมดนี้ไว้ที่ไหน
discipline นี้ผมเขียนไว้ใน .claude/IMAGE_WORKFLOW.md ของบล็อก — เป็น instruction ที่ AI session ไหนก็ตามที่จะ gen cover ของผม จะอ่านอันนี้ก่อน auto inherit rule ทันที ไม่ต้อง remind ใหม่ทุกครั้ง
ตอนนี้ก็เลยกลายเป็น standard workflow สำหรับทุก cover ใหม่ ตั้งแต่วันนี้เป็นต้นไป — pitch theme → ผมเลือก → AI gen ตาม discipline → self-review → เอามาให้ผมดู
ลองทดสอบ flow นี้กับ cover ใหม่ของโพสต์ตอน MBTI INTJ ดู ออกมาเป็นกระดานหมากรุก theme “Chairman, not CEO” — รอดทั้งหน้าโพสต์และการ์ด home/archive subject อยู่กลางตามที่ออกแบบ
ระหว่างทางก็พบบั๊กที่ไม่คาดด้วย
ระหว่าง test discipline จริง ก็เจอ side bug หลายอันที่อยู่มานาน แต่ไม่เคยรู้:
- CSS bug ใน template ที่ทำให้การ์ด crop จากด้านบนแทนที่จะเป็นจากกลาง — spec ดีแค่ไหนถ้าระบบใต้มันทำงานไม่ตรงกับที่คิดก็ไร้ประโยชน์
- Component ซ้ำกัน 2 ที่ สำหรับ render การ์ด (ที่หนึ่งสำหรับ home อีกที่สำหรับ archive) — แก้บั๊กที่หนึ่งลืมอีกที่ → user เจอบั๊กในที่ที่ลืม
- Cloudflare Pages deploy ที่ fail เงียบ — git push ผ่าน build ผ่าน แต่ deploy step pang เงียบฝั่งเขา ไม่มี notification ใดๆ ถ้าไม่เปิด dashboard เช็คเอง = ไม่รู้
ทั้งหมดนี้ AI ช่วยไล่หาและแก้ให้หมด ในเซสชั่นเดียวกัน — รวมถึงเขียน script เล็กๆ ขึ้นมาดักจับ deploy fail แบบเงียบไม่ให้เกิดอีก
แต่นั่นเป็นอีกเรื่องครับ ไว้แยกไปเล่าทีหลังถ้ามีคนสนใจ — โพสต์นี้ขอจบที่ discipline ของ cover ก่อน
บทเรียน
1. ให้ AI รู้ “ที่ไหน” ก่อน “อะไร”
ถ้าบอก AI แค่ “วาดกระดานหมากรุก” — มันวางตรงไหนก็ได้ ตรงที่ทำให้ดูดี — แต่อาจไม่รอด crop
ถ้าบอก “วาดกระดานหมากรุก, อยู่ตรงกลาง, top + bottom เป็น atmosphere” — มันรู้แล้วว่า frame ที่จะถูกตัดคือตรงไหน วาง subject ให้รอดได้
→ Geometry rule ใส่ใน prompt ทำให้ AI gen รูปที่ใช้งานจริงได้ ไม่ใช่แค่สวย
2. Spec ที่ดี ต้องมี substrate ที่ทำงานจริงรองรับ
ตอนเจอบั๊ก CSS ใน template ที่ทำให้การ์ดตัดผิดมาตลอด รู้สึกประหลาดใจ — เพราะ spec safe-zone ของผมถูก 100% แต่ไม่มีประโยชน์ ถ้าระบบที่อยู่ใต้มันทำงานไม่ตรงกับที่คิด
→ ก่อนออกแบบ spec ที่ depend on framework — verify จริงๆ ก่อน อย่า trust assumption ว่า “ของพวกนี้คงทำงานปกติ”
3. ระบบที่ทำงานเงียบ ก็ต้องมีคนคอยฟัง
CF Pages deploy ที่ fail เงียบ — ถ้าไม่มี active monitoring ก็ไม่รู้ จนเกิด damage แล้ว (live site เก่ากว่า code)
ใช้ได้กับทุกอย่างที่ “ควร” ทำงานเงียบๆ เลย — scheduled job, cron, background sync, automation — ต้องมี check ที่ฟ้องเมื่อมันไม่ work ไม่ใช่รอให้คนใช้มาแจ้งทีหลัง
→ อย่ารอให้ user มาแจ้ง — ทำเครื่องมือบอกตัวเองก่อน
แล้วยังไงต่อ
- safe-zone discipline เป็น standard workflow ของบล็อกแล้ว — ครั้งหน้าใครคนหรือ AI gen cover ใหม่ ไม่ต้องคิดใหม่ตั้งแต่ต้น
- Cover เก่าๆ ที่เคยปรับมือ trial-and-error ตอนนี้ก็จะปรับใหม่ตาม discipline ทีละใบ — ใบไหนยังไม่ต้องรีบ ก็เปลี่ยนตอนแก้โพสต์อยู่ดีอยู่แล้ว
- รอดูว่า next 5 cover ที่ gen ตาม discipline จะมี regen “subject ตัด” อยู่มั้ย — ถ้ายัง = ปรับ rule ต่อ ถ้าไม่ = success
วันนี้คือ pattern ที่ผมชอบมาก — เริ่มจากปัญหาเล็กๆ (รูปการ์ดตัดมั่ว) → ออกแบบ spec → test จริง → เจอ bug ที่ไม่คาด → แก้ทุกอัน → จบมาด้วย system ที่แข็งแรงกว่าตอนเริ่ม
เป็นการเทรดของวันที่ผมพอใจมากครับ
ปล. ทั้ง session นี้ AI assistant (Claude Code) ช่วยทุกขั้น ตั้งแต่ออกแบบ spec, generate cover, debug CSS, refactor architecture, เขียน tool ใหม่ จนถึง commit + push — ผมแค่บ่นว่า “ทำไม cover ยังตัดผิด” ก็มี trace กลับไปจน root cause และแก้ครบทั้งระบบ
ตอนนี้ผมเขียนทั้ง blog + code ผ่านการคุยกับ AI หมดแล้ว — ยังประหลาดใจกับ depth ที่มันไปได้ทุกครั้ง
