ทำเว็บ Portfolio กราฟิกด้วย AI: เลือกผลงาน เล่าเคส และวางปุ่มติดต่องาน

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

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

โดย อ.กอร่า — Gorra Design | ทบทวน 29 ตุลาคม 2569

ภาพคอนเซ็ปต์และเดโมในบทนี้ใช้ประกอบการสอน แบรนด์และชิ้นงานตัวอย่างเป็นงานสมมติ

พอร์ตที่ดีเล่าโจทย์ วิธีคิด และผลงานให้ต่อเนื่องกัน
พอร์ตที่ดีเล่าโจทย์ วิธีคิด และผลงานให้ต่อเนื่องกัน

พอร์ตควรมีอะไรบ้าง?

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

พอร์ตต้องเล่าให้รู้เรื่อง — ตัวอย่าง UX/UI สำหรับ ทำเว็บ Portfolio กราฟิกด้วย AI: เลือกผลงาน เล่าเคส และวางปุ่มติดต่องาน
พอร์ตต้องเล่าให้รู้เรื่อง — ภาพสาธิต 1/3

เขียนเคสงานอย่างไรให้เข้าใจเร็ว?

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

หนึ่งเคส หนึ่งเหตุผล — ตัวอย่าง UX/UI สำหรับ ทำเว็บ Portfolio กราฟิกด้วย AI: เลือกผลงาน เล่าเคส และวางปุ่มติดต่องาน
หนึ่งเคส หนึ่งเหตุผล — ภาพสาธิต 2/3

Prompt เริ่มเว็บพอร์ต

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

ทางไปติดต่องาน — ตัวอย่าง UX/UI สำหรับ ทำเว็บ Portfolio กราฟิกด้วย AI: เลือกผลงาน เล่าเคส และวางปุ่มติดต่องาน
ทางไปติดต่องาน — ภาพสาธิต 3/3

ทำให้คนติดต่อได้ง่าย

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

คำถาม: ต้องมีหลายหน้าหรือเริ่มหน้าเดียวได้?

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

เรียนต่อจากบทนี้

เริ่มต้น Codex และ Vibe Coding สำหรับนักออกแบบ

รายละเอียดคลาส AI Solo Creative กับ อ.กอร่า

อ้างอิง

ความหมายและบทบาทของ Codex: OpenAI — Code generation แนวทางออกแบบและภาพสาธิตในบทนี้เรียบเรียงโดย Gorra Design ตรวจข้อมูลผู้ผลิตอีกครั้งเมื่อเริ่มใช้งานจริง

LATEST