เว็บที่สร้างด้วย AI เปิดบนมือถือแล้วเพี้ยน ทำยังไงดี? วิธีทำ responsive ให้ใช้ง่ายบนจอเล็ก ตั้งแต่สั่ง prompt จนถึงทดสอบเครื่องจริง

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

คนไทยส่วนใหญ่เปิดเว็บผ่านมือถือ ทั้งจากลิงก์ที่ส่งกันใน LINE, Facebook หรือสแกน QR หน้าร้าน ถ้าหน้าแรกเปิดมาแล้วต้องซูมหรือเลื่อนซ้ายขวา คนก็กดปิดก่อนจะได้เห็นว่าเว็บทำอะไรได้ บทความนี้จะพาไล่ตั้งแต่สาเหตุที่เว็บเพี้ยน วิธีสั่ง AI ให้ถูก จุดที่ต้องเช็ก และวิธีทดสอบ พร้อมตัวอย่างผลงานจริงจากแอปเทพ

ทำไมเว็บที่ AI สร้างถึงเพี้ยนบนมือถือ

AI อย่าง Claude Code, Codex หรือ Cursor เขียน CSS ที่รองรับหลายขนาดจอได้ดี แต่ผลออกมาขึ้นกับสิ่งที่เราสั่งและสิ่งที่เราให้ดู สาเหตุที่เจอบ่อยมีประมาณนี้

• สั่งงานโดยไม่บอกว่าใครใช้บนอุปกรณ์อะไร AI เลยออกแบบ layout หลายคอลัมน์แบบจอคอมไว้ก่อน
• ดูผลงานบน browser จอคอมอย่างเดียว ไม่เคยย่อจอหรือเปิดบนมือถือ เลยไม่รู้ว่าพังตรงไหน
• เพิ่มฟีเจอร์ทีละอย่างจนหน้าเว็บมีของเยอะ แต่ละส่วนใส่ความกว้างแบบตายตัว เช่น กว้าง 800px พอเปิดบนจอที่กว้างแค่ 375px ก็ล้น
• ใส่ตารางข้อมูลหลายคอลัมน์ รูปขนาดใหญ่ หรือ chart ที่ไม่ได้กำหนดให้ย่อตามจอ
• ไม่มีบรรทัด viewport ในหัว HTML ทำให้มือถือแสดงหน้าเว็บเหมือนจอคอมที่ถูกย่อลงทั้งหน้า

ข่าวดีคือทุกข้อข้างบนแก้ได้ด้วยการสั่งงานใหม่ให้ตรงจุด ไม่ต้องเขียนโค้ดเอง

เริ่มจาก mobile-first ตั้งแต่ prompt แรก

mobile-first คือการออกแบบหน้าจอมือถือก่อน แล้วค่อยขยายให้สวยบนจอใหญ่ วิธีนี้ได้ผลกว่าการทำจอคอมให้เสร็จแล้วค่อยมาแก้ เพราะจอเล็กบังคับให้เราเลือกว่าอะไรสำคัญจริง

ใส่ข้อความแบบนี้ไว้ใน prompt แรกของโปรเจกต์ หรือในไฟล์คำสั่งที่ AI อ่านทุกครั้ง เช่น CLAUDE.md หรือ AGENTS.md

``
ผู้ใช้ส่วนใหญ่เปิดเว็บนี้บนมือถือ จอกว้างประมาณ 360 ถึง 430px
ออกแบบแบบ mobile-first: ทำหน้าจอมือถือก่อน แล้วค่อยเพิ่ม layout สำหรับจอใหญ่
ห้ามมีการเลื่อนซ้ายขวาทั้งหน้า ห้ามกำหนดความกว้างตายตัวที่เกินจอ
ปุ่มและช่องกรอกต้องสูงอย่างน้อย 44px ตัวหนังสือเนื้อหาไม่ต่ำกว่า 16px
ปุ่มหลักของแต่ละหน้าต้องกดได้ด้วยนิ้วโป้งโดยไม่ต้องเลื่อนหา
``

ถ้าเว็บทำเสร็จไปแล้วและเพิ่งมาเจอปัญหา ให้ถ่าย screenshot หน้าที่พังบนมือถือแล้วส่งให้ AI ดูพร้อมบอกขนาดจอ เช่น "หน้านี้เปิดบน iPhone แล้วตารางล้นออกไปทางขวา และปุ่มบันทึกอยู่ใต้ keyboard ช่วยแก้ให้ใช้บนจอ 375px ได้ โดยไม่เปลี่ยนหน้าตาบนจอคอม" การให้ภาพกับขนาดจอช่วยให้ AI แก้ได้ตรงกว่าบอกแค่ว่า "มือถือเพี้ยน" มาก

จุดที่ต้องเช็กบนจอเล็ก

หลังจาก AI แก้เสร็จ ให้ไล่เช็กตามตารางนี้ทีละข้อ ส่วนใหญ่ปัญหาจะอยู่ในนี้

ข้อสุดท้ายสำคัญกับเว็บภาษาไทยเป็นพิเศษ เพราะภาษาไทยมีสระบนล่างและวรรณยุกต์ ถ้าระยะบรรทัดน้อยเกินไป บนจอเล็กจะอ่านยากกว่าภาษาอังกฤษมาก

ตารางและข้อมูลเยอะ คือจุดที่พังบ่อยที่สุด

เว็บแบบระบบหลังร้าน dashboard หรือเว็บรวมข้อมูล มักมีตารางหลายคอลัมน์ ซึ่งบนจอคอมดูดี แต่บนมือถือแทบใช้ไม่ได้ มี 3 ทางเลือกหลัก

1. ให้ตารางเลื่อนแนวนอนได้เฉพาะตัวตาราง

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

2. เปลี่ยนเป็น card บนมือถือ

แต่ละแถวของตารางกลายเป็นกล่อง 1 ใบ แสดงข้อมูลสำคัญ 2 ถึง 3 อย่าง กดเข้าไปถึงเห็นรายละเอียดทั้งหมด วิธีนี้ใช้ง่ายที่สุดบนจอเล็ก ตัวอย่างที่เห็นภาพชัดคือ ThaiEVCars ซึ่งเป็นแคตตาล็อกรถยนต์ไฟฟ้าในไทยที่ให้เปรียบเทียบรถแต่ละรุ่นผ่านหน้าเว็บแบบ cards UI ข้อมูลรถมีหลายด้าน แต่การจัดเป็น card ทำให้ไล่ดูทีละรุ่นได้สะดวก

3. ลดคอลัมน์บนมือถือ

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

สั่ง AI ได้ตรง ๆ ว่า "บนจอที่แคบกว่า 640px ให้เปลี่ยนตารางนี้เป็น card แต่ละใบแสดงชื่อ ราคา และสถานะ กดแล้วเปิดรายละเอียด ส่วนจอคอมให้ยังเป็นตารางเหมือนเดิม"

ตัวอย่างผลงานคนไทยที่คิดเรื่องมือถือไว้ตั้งแต่ต้น

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

• ระบบสั่งซื้อสินค้าตลาดสด รองรับการสั่งซื้อตั้งแต่เลือกรายการจนถึงรับสินค้า โดยออกแบบให้ใช้บนมือถือได้ ผู้ดูแลจัดการรับ ขาย ปรับ โอน เบิก และแปรรูปสินค้าได้ งานแบบนี้มีหลายขั้นตอนและหลายหน้าจอ การคิดเรื่องมือถือไว้ก่อนจึงสำคัญ เพราะคนที่ใช้ระบบตลาดสดมักถือมือถือเดินทำงาน ไม่ได้นั่งหน้าคอม
• 5 Bread 2 Fish เกมค่ายที่เปิดเล่นผ่าน LINE โดยไม่ต้องติดตั้ง และออกแบบให้รองรับสัญญาณอ่อนกับการใช้งานของผู้สูงอายุ เป็นตัวอย่างที่ดีว่าการทำเว็บสำหรับมือถือไม่ได้มีแค่เรื่องขนาดจอ แต่รวมถึงสภาพ internet และคนที่จะใช้จริงด้วย
• VIDIST เครื่องมือสร้าง video ด้วย AI ที่ระบุว่ารองรับการใช้งานบนโทรศัพท์ และย้ายประวัติการใช้งานด้วยไฟล์ JSON ได้
• SABSAB เว็บค้นหาร้านหมูกระทะ ชาบู และจิ้มจุ่มในสกลนคร ที่ให้ดูรายละเอียดและตำแหน่งร้านบน Google Maps ได้ ข้อมูลของชิ้นนี้ระบุว่าใช้ Bootstrap ซึ่งเป็น CSS framework ที่มีระบบ grid สำหรับหลายขนาดจอมาให้ในตัว

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

ใช้ CSS framework ช่วยประหยัดแรง

ถ้ายังไม่ได้เลือก ให้บอก AI ใช้ CSS framework ที่มีระบบ responsive มาให้ เช่น Tailwind หรือ Bootstrap ทั้งสองแบบให้เรากำหนดได้ว่าจอเล็กแสดงแบบไหน จอใหญ่แสดงแบบไหน โดยไม่ต้องเขียน CSS เองทุกบรรทัด และ AI รู้จักสองตัวนี้ดี เขียนออกมาแล้วแก้ต่อง่าย

สิ่งที่ควรรู้ไว้เล็กน้อยคือคำว่า breakpoint หมายถึงความกว้างจอที่ layout จะเปลี่ยน เช่น ต่ำกว่า 640px เป็นคอลัมน์เดียว เกิน 1024px เป็น 3 คอลัมน์ ไม่ต้องจำตัวเลข แค่เข้าใจคำนี้ไว้ จะได้สั่ง AI ได้แม่นขึ้น เช่น "ที่ breakpoint มือถือให้ซ่อน sidebar แล้วย้ายตัวกรองไปไว้ในปุ่มด้านบน"

วิธีทดสอบโดยไม่ต้องมีมือถือหลายเครื่อง

ใช้ DevTools บน browser

บน Chrome หรือ Edge กด F12 แล้วกดไอคอนรูปมือถือกับแท็บเล็ต จะเลือกขนาดจอของรุ่นต่าง ๆ ได้ ลองเปิดที่ความกว้าง 360px ซึ่งเป็นจอแคบที่ยังมีคนใช้ ถ้าจอนี้ไม่พัง จอที่ใหญ่กว่าก็มักไม่มีปัญหา

เปิดบนมือถือจริงอย่างน้อย 1 เครื่อง

DevTools จำลองขนาดได้ แต่ไม่เหมือนเครื่องจริงทั้งหมด เช่น keyboard ที่เด้งขึ้นมาบังช่องกรอก แถบ address bar ที่ยืดหดได้ หรือความรู้สึกเวลาใช้นิ้วกด ให้ deploy เวอร์ชันทดสอบขึ้นไปแล้วเปิดจากมือถือของตัวเอง ลองใช้ด้วยมือข้างเดียวว่ากดปุ่มหลักได้ไหม

เปิดผ่าน LINE ด้วย

ถ้าคาดว่าคนจะได้ลิงก์ผ่าน LINE ให้ส่งลิงก์ให้ตัวเองแล้วกดเปิดจากในแชท เพราะ browser ในแอป LINE แสดงผลต่างจาก Chrome หรือ Safari ได้บ้าง เว็บที่ตั้งใจให้เปิดใน LINE อย่าง F1 Drivers Bingo ซึ่งข้อมูลระบุว่าใช้ LINE LIFF ก็ต้องทดสอบในแอป LINE จริงเช่นกัน

ให้คนอื่นลองใช้

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

เรื่องความเร็วก็เป็นส่วนหนึ่งของการใช้งานบนมือถือ

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

• ย่อขนาดรูปก่อนใช้ และใช้ไฟล์แบบ WebP แทน PNG ขนาดใหญ่
• โหลดรูปที่อยู่ล่าง ๆ หน้าเมื่อผู้ใช้เลื่อนลงไปถึง
• ไม่ใส่ animation หรือ video พื้นหลังที่หนักโดยไม่จำเป็น
• แสดงสถานะกำลังโหลดเวลารอข้อมูล ไม่ปล่อยให้จอว่าง

ใช้เครื่องมือ Lighthouse ที่อยู่ใน DevTools ของ Chrome วัดคะแนนหน้าเว็บในโหมด mobile ได้ แล้วส่งผลให้ AI อ่านและเสนอวิธีแก้ทีละข้อ

สรุป: เช็กลิสต์สั้น ๆ ก่อนเปิดให้คนใช้

1. ใน prompt หรือไฟล์คำสั่งของโปรเจกต์ บอก AI แล้วว่าผู้ใช้ส่วนใหญ่ใช้มือถือ และให้ทำแบบ mobile-first
2. ไม่มีการเลื่อนซ้ายขวาทั้งหน้าที่จอ 360px
3. ปุ่มหลักใหญ่พอกดด้วยนิ้ว และหาเจอโดยไม่ต้องเลื่อนหา
4. ตารางเลื่อนได้เฉพาะตัวตาราง หรือเปลี่ยนเป็น card บนมือถือแล้ว
5. ฟอร์มกรอกได้โดยที่ keyboard ไม่บังปุ่มส่ง
6. ตัวหนังสือไทยอ่านง่าย สระและวรรณยุกต์ไม่ทับกัน
7. ทดสอบบนมือถือจริงและผ่าน LINE แล้ว

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