โซเชียลมีเดีย4 นาที

เมนูสวยแต่คนกดผิด? คู่มือ LINE Rich Menu ที่ปุ่มตรงภาพและใช้ได้จริง

เผยแพร่ 08 มิ.ย. 2569 · โดย ทีมงาน GoGen

ปรับปรุงล่าสุด 20 ส.ค. 2569 · ตรวจทานโดย กองบรรณาธิการ GoGen — ตรวจสอบตัวอย่างและความถูกต้องเชิงการตลาด

เมนูสวยแต่คนกดผิด? คู่มือ LINE Rich Menu ที่ปุ่มตรงภาพและใช้ได้จริง

คู่มือนี้เหมาะกับเจ้าของ LINE OA และทีมที่ทำภาพเมนูสวยแล้วเจอปัญหาป้ายไม่ตรงพื้นที่กด ข้อความเล็ก ไฟล์อัปโหลดไม่ผ่าน หรือเปลี่ยนโปรแล้วลิงก์เดิมยังทำงานผิดจุด

คุณจะได้ข้อกำหนดไฟล์จาก LINE Developers แผนผังปุ่มที่เริ่มจากงานของลูกค้า และ checklist ทดสอบบนมือถือจริง LINE ระบุว่า Rich Menu ไม่แสดงบน LINE for PC จึงห้ามอนุมัติงานจากเดสก์ท็อปอย่างเดียว

สรุปเร็วสำหรับคนรีบ

Rich Menu คือ navigation: เริ่มจากปลายทางและ action ก่อนตกแต่งภาพ
ไฟล์ต้องเป็น JPEG/PNG กว้าง 800–2500 พิกเซล สูงอย่างน้อย 250 พิกเซล อัตราส่วนอย่างน้อย 1.45 และไม่เกิน 1 MB
ภาพ ป้าย และ tappable area ต้องใช้พิกัดชุดเดียวกัน
ทดสอบทุกปุ่มบน LINE มือถือและสร้าง rich menu object ใหม่เมื่อเปลี่ยนภาพ

ตัวอย่างระบบปฏิทินคอนเทนต์ สำหรับบทความ เมนูสวยแต่คนกดผิด? คู่มือ LINE Rich Menu ที่ปุ่มตรงภาพและใช้ได้จริง — ตัวอย่างระบบปฏิทินคอนเทนต์ — ใช้เป็นภาพรวมก่อนลงรายละเอียดเฉพาะในแต่ละหัวข้อด้านล่าง

1. วาง Customer task ก่อนเลือกจำนวนช่อง

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

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

ภาพประกอบ วาง Customer task ก่อนเลือกจำนวนช่อง สำหรับออกแบบ LINE Rich Menu ให้กดง่าย — สรุปให้เห็นภาพจากหัวข้อ “วาง Customer task ก่อนเลือกจำนวนช่อง” พร้อมนำไปตรวจงานจริง

2. ข้อกำหนดไฟล์ที่ต้องผ่านก่อนอัปโหลด

Messaging API รองรับ JPEG หรือ PNG ความกว้าง 800–2500 พิกเซล ความสูงอย่างน้อย 250 พิกเซล อัตราส่วนกว้างต่อสูงอย่างน้อย 1.45 และขนาดไฟล์ไม่เกิน 1 MB ตัวอย่าง canvas ที่ใช้กันบ่อยคือ 2500×1686 สำหรับแบบใหญ่และ 2500×843 สำหรับแบบเล็ก

Rich menu object กำหนดพื้นที่กดได้สูงสุด 20 areas และ chat bar text ยาวได้สูงสุด 14 ตัวอักษร ข้อมูลเหล่านี้ต้องตรวจคู่กับ reference ล่าสุด เพราะ Manager และ Messaging API อาจมี workflow ต่างกัน

ภาพประกอบ ข้อกำหนดไฟล์ที่ต้องผ่านก่อนอัปโหลด สำหรับออกแบบ LINE Rich Menu ให้กดง่าย — สรุปให้เห็นภาพจากหัวข้อ “ข้อกำหนดไฟล์ที่ต้องผ่านก่อนอัปโหลด” พร้อมนำไปตรวจงานจริง

ภาพประกอบ ข้อกำหนดไฟล์ที่ต้องผ่านก่อนอัปโหลด สำหรับออกแบบ LINE Rich Menu ให้กดง่าย: ชนิดไฟล์: JPEG หรือ PNG — ชนิดไฟล์: JPEG หรือ PNG

ภาพประกอบ ข้อกำหนดไฟล์ที่ต้องผ่านก่อนอัปโหลด สำหรับออกแบบ LINE Rich Menu ให้กดง่าย: ความกว้าง: 800–2500 พิกเซล — ความกว้าง: 800–2500 พิกเซล

ภาพประกอบ ข้อกำหนดไฟล์ที่ต้องผ่านก่อนอัปโหลด สำหรับออกแบบ LINE Rich Menu ให้กดง่าย: ความสูง: อย่างน้อย 250 พิกเซล — ความสูง: อย่างน้อย 250 พิกเซล

ภาพประกอบ ข้อกำหนดไฟล์ที่ต้องผ่านก่อนอัปโหลด สำหรับออกแบบ LINE Rich Menu ให้กดง่าย: อัตราส่วนกว้าง/สูง: อย่างน้อย 1.45 — อัตราส่วนกว้าง/สูง: อย่างน้อย 1.45

ภาพประกอบ ข้อกำหนดไฟล์ที่ต้องผ่านก่อนอัปโหลด สำหรับออกแบบ LINE Rich Menu ให้กดง่าย: ขนาดไฟล์: ไม่เกิน 1 MB — ขนาดไฟล์: ไม่เกิน 1 MB

ชนิดไฟล์: JPEG หรือ PNG
ความกว้าง: 800–2500 พิกเซล
ความสูง: อย่างน้อย 250 พิกเซล
อัตราส่วนกว้าง/สูง: อย่างน้อย 1.45
ขนาดไฟล์: ไม่เกิน 1 MB

3. แบ่งภาพและ tappable area จากกริดเดียวกัน

กำหนดพิกัด x, y, width และ height ของแต่ละ area จาก canvas เดียวกับไฟล์ภาพ ห้ามขยับเส้นแบ่งในภาพโดยไม่แก้พิกัด เพราะป้าย ‘จองคิว’ อาจกดไปหน้าโปรโมชันได้

เว้นข้อความและไอคอนจากขอบช่อง ให้ทั้งพื้นที่เป็นเป้ากดเมื่อเหมาะสม และหลีกเลี่ยงปุ่มเล็กซ้อนกันหลายชั้น แม้ระบบรองรับได้ถึง 20 areas ก็ไม่ได้แปลว่าควรใช้ครบ

ภาพประกอบ แบ่งภาพและ tappable area จากกริดเดียวกัน สำหรับออกแบบ LINE Rich Menu ให้กดง่าย — สรุปให้เห็นภาพจากหัวข้อ “แบ่งภาพและ tappable area จากกริดเดียวกัน” พร้อมนำไปตรวจงานจริง

ภาพประกอบ แบ่งภาพและ tappable area จากกริดเดียวกัน สำหรับออกแบบ LINE Rich Menu ให้กดง่าย: ภาพกับ bounds ใช้ขนาดฐานเดียวกัน — ภาพกับ bounds ใช้ขนาดฐานเดียวกัน

ภาพประกอบ แบ่งภาพและ tappable area จากกริดเดียวกัน สำหรับออกแบบ LINE Rich Menu ให้กดง่าย: ไม่มีช่องว่างหรือพื้นที่กดซ้อนโดยไม่ตั้งใจ — ไม่มีช่องว่างหรือพื้นที่กดซ้อนโดยไม่ตั้งใจ

ภาพประกอบ แบ่งภาพและ tappable area จากกริดเดียวกัน สำหรับออกแบบ LINE Rich Menu ให้กดง่าย: ป้ายทุกช่องตรง action และปลายทาง — ป้ายทุกช่องตรง action และปลายทาง

ภาพกับ bounds ใช้ขนาดฐานเดียวกัน
ไม่มีช่องว่างหรือพื้นที่กดซ้อนโดยไม่ตั้งใจ
ป้ายทุกช่องตรง action และปลายทาง

4. สร้างไฟล์สำเร็จที่ป้ายอ่านได้ ไม่ใช่ภาพเปล่ารอเติม

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

ให้ Image Generation สร้างป้ายและข้อความพร้อมภาพในรอบเดียว หากต้องการเปลี่ยนให้ regenerate หรือ edit ผ่าน Image Generation เท่านั้น ห้ามทับข้อความภายหลังด้วยระบบประกอบภาพหรือโปรแกรมอื่น

ภาพประกอบ สร้างไฟล์สำเร็จที่ป้ายอ่านได้ ไม่ใช่ภาพเปล่ารอเติม สำหรับออกแบบ LINE Rich Menu ให้กดง่าย — สรุปให้เห็นภาพจากหัวข้อ “สร้างไฟล์สำเร็จที่ป้ายอ่านได้ ไม่ใช่ภาพเปล่ารอเติม” พร้อมนำไปตรวจงานจริง

5. ทดสอบบน LINE มือถือก่อนตั้งเป็น Default

อัปโหลดในบัญชีทดสอบหรือกลุ่มผู้ใช้จำกัด แตะทุกช่องบน iOS และ Android ตรวจ URL, message action, postback และการกลับมาหน้าแชต LINE ระบุว่า Rich Menu ไม่แสดงบน LINE for PC จึงต้องทดสอบบนมือถือ

Messaging API ไม่ให้แทนที่ภาพที่ผูกกับ rich menu object เดิม หากต้องเปลี่ยนภาพให้สร้าง object ใหม่ อัปโหลดภาพใหม่ ตรวจพื้นที่กด แล้วค่อยสลับการผูกผู้ใช้ เก็บเวอร์ชันเก่าไว้สำหรับ rollback ตาม workflow ของทีม

ภาพประกอบ ทดสอบบน LINE มือถือก่อนตั้งเป็น Default สำหรับออกแบบ LINE Rich Menu ให้กดง่าย — สรุปให้เห็นภาพจากหัวข้อ “ทดสอบบน LINE มือถือก่อนตั้งเป็น Default” พร้อมนำไปตรวจงานจริง

5. ขั้นตอนทำจาก Action map ไม่ใช่เริ่มจากภาพสวย

เขียนรายการ action ก่อน เช่น ซื้อสินค้า / ดูโปรโมชัน / ติดต่อร้าน แล้วกำหนดพื้นที่กดจริงให้แต่ละช่อง สร้างภาพบน template ขนาดที่ LINE รองรับ วาง label เป็นคำกริยาสั้น มี contrast สูง จากนั้นอัปโหลดและทดสอบทุกจุดกดบนมือถือด้วยบัญชีทดสอบ

จุดตรวจความถูกต้อง: ภาพกับ tappable area เป็นคนละส่วน ต้องจัดพิกัดให้ตรงกัน ไฟล์สำหรับ Messaging API ต้องเป็น JPEG/PNG ตามขนาดและข้อจำกัดไฟล์ล่าสุดใน LINE Developers

ภาพประกอบ ขั้นตอนทำจาก Action map ไม่ใช่เริ่มจากภาพสวย สำหรับออกแบบ LINE Rich Menu ให้กดง่าย — สรุปให้เห็นภาพจากหัวข้อ “ขั้นตอนทำจาก Action map ไม่ใช่เริ่มจากภาพสวย” พร้อมนำไปตรวจงานจริง

ภาพประกอบ ขั้นตอนทำจาก Action map ไม่ใช่เริ่มจากภาพสวย สำหรับออกแบบ LINE Rich Menu ให้กดง่าย: Action map มาก่อนงานภาพ — Action map มาก่อนงานภาพ

ภาพประกอบ ขั้นตอนทำจาก Action map ไม่ใช่เริ่มจากภาพสวย สำหรับออกแบบ LINE Rich Menu ให้กดง่าย: ข้อความอ่านได้และ contrast สูง — ข้อความอ่านได้และ contrast สูง

ภาพประกอบ ขั้นตอนทำจาก Action map ไม่ใช่เริ่มจากภาพสวย สำหรับออกแบบ LINE Rich Menu ให้กดง่าย: พิกัดกดตรงภาพ — พิกัดกดตรงภาพ

ภาพประกอบ ขั้นตอนทำจาก Action map ไม่ใช่เริ่มจากภาพสวย สำหรับออกแบบ LINE Rich Menu ให้กดง่าย: ทดสอบทุก action บนมือถือ — ทดสอบทุก action บนมือถือ

Action map มาก่อนงานภาพ
ข้อความอ่านได้และ contrast สูง
พิกัดกดตรงภาพ
ทดสอบทุก action บนมือถือ

บทสรุป

LINE Rich Menu ที่ดีช่วยปิดช่องว่างระหว่างลูกค้าเห็นร้านกับลูกค้ากดใช้งานต่อจริง ถ้าคุณอยากได้ภาพเมนูที่ดูดีและใช้งานง่ายโดยไม่ต้องปั้น prompt เองทุกครั้ง GoGen คือทางเลือกที่เบากว่าเยอะ

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

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

LINE Rich Menu ใช้ไฟล์ขนาดเท่าไร?

ตาม Messaging API ไฟล์ JPEG/PNG ต้องกว้าง 800–2500 พิกเซล สูงอย่างน้อย 250 พิกเซล อัตราส่วนอย่างน้อย 1.45 และไม่เกิน 1 MB โดย 2500×1686 กับ 2500×843 เป็น canvas ที่ใช้กันบ่อย

Rich Menu มีกี่ปุ่มได้มากที่สุด?

Messaging API รองรับได้สูงสุด 20 area objects แต่ควรใช้เท่าที่ลูกค้าตัดสินใจได้ง่ายและพื้นที่กดไม่เล็กเกินไป ไม่จำเป็นต้องใช้ครบ

แก้ภาพของ Rich Menu เดิมได้เลยหรือไม่?

ใน Messaging API ไม่สามารถแทนที่ภาพที่ตั้งให้ object เดิมแล้ว ต้องสร้าง rich menu object ใหม่ อัปโหลดภาพใหม่ ตั้ง areas และทดสอบก่อนสลับใช้งาน

แหล่งข้อมูลและวิธีตรวจสอบ

ลองทำLINE Rich Menuกับ GoGen

เริ่มจากโจทย์ธุรกิจ เลือกสไตล์ และตรวจแก้รายละเอียดก่อนดาวน์โหลดไปใช้งานจริง

เริ่มสร้างภาพ

หรืออ่าน รายละเอียดเครื่องมือสร้างภาพ ก่อนเริ่มใช้งาน