Creative Hub

Context

ทีมต้องสร้างโปสเตอร์สินค้าซ้ำ ๆ หลายภาษา แต่ละชิ้นต้องการ layout ที่ยืดหยุ่นและ export ที่เร็ว เครื่องมือทั่วไปทำได้ทั้งสองอย่าง แต่ไม่มีอันไหนที่พอดีกับ workflow จริง

Problem

ไม่มีเครื่องมือที่ให้ทั้ง layout control และ multi-language export ในที่เดียว เครื่องมือที่มีให้เลือกมักยืดหยุ่นเกินไปจนใช้เวลานาน หรือตายตัวเกินไปจนปรับไม่ได้

Role

ออกแบบ UX และ workflow ทั้งหมด ใช้ AI ช่วยเขียนโค้ดบางส่วนระหว่างพัฒนา

Process

เริ่มจากสังเกตขั้นตอนการทำโปสเตอร์จริง แล้วแยกออกเป็นการตัดสินใจทีละขั้นที่ชัดเจน

ได้ workflow 5 ขั้น: ตั้งค่า Grid → เลือก Media → กรอกข้อมูลสินค้า → จัดวาง → เลือกภาษาและ Export

แต่ละขั้นบังคับให้คิดก่อนก้าวต่อ ไม่ใช่ drag-and-drop แบบ freeform

Decisions

เลือก Konva Canvas เพราะ render บน browser ได้โดยตรง ไม่ต้องพึ่ง server สำหรับ export และยังรองรับ interactive editing ได้

เลือก workflow แบบ step-by-step แทนที่จะให้ผู้ใช้ตัดสินใจพร้อมกัน — ลด cognitive load และทำให้ผลลัพธ์สม่ำเสมอขึ้น

Technical Decisions

ตัวอย่างส่วน export ใช้ Konva toDataURL() เพื่อสร้าง URL ข้อมูลภาพ แล้วกำหนดให้ลิงก์ดาวน์โหลดโดยตรงใน browser ไม่ผ่าน server:

import Konva from 'konva';

type ExportOptions = {
  stage: Konva.Stage;
  filename: string;
  pixelRatio?: number;
};

export function exportToPng({ stage, filename, pixelRatio = 2 }: ExportOptions) {
  const dataUrl = stage.toDataURL({ pixelRatio, mimeType: 'image/png' });

  const link = document.createElement('a');
  link.href = dataUrl;
  link.download = `${filename}.png`;
  link.click();
}

pixelRatio: 2 ทำให้ได้ภาพ retina-quality โดยไม่ต้องเพิ่มขนาด canvas จริง

Result

ใช้งานจริงภายในทีมและตัวเอง ลด friction ในการสร้าง marketing material หลายภาษา

Reflection

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

AI ช่วยเร่งการพัฒนาได้จริง แต่การตัดสินใจด้าน design ยังต้องมาจากคนที่เข้าใจว่า user จะใช้งานจริงอย่างไร

ภาพและลำดับงานที่ตรวจตามได้

1. 01 · ตั้งกริดและสัดส่วน
2. 02 · เลือกสื่อและพื้นหลัง
3. 03 · กรอกข้อมูลสินค้า
4. 04 · จัดวางตามกริด
5. 05 · เลือกภาษาและส่งออก

ตัวอย่างการใช้งานหนึ่งชิ้น

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

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

รายการตรวจสำหรับทำซ้ำ

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

การตั้ง pixelRatio ในตัวอย่างโค้ดเป็นการเพิ่มขนาดพิกเซลของไฟล์ส่งออก เช่น พื้นที่ 600 × 600 ที่ส่งออกด้วยอัตรา 2 จะได้ 1200 × 1200 พิกเซล ไม่ได้หมายความว่ารูปต้นฉบับความละเอียดต่ำจะมีรายละเอียดเพิ่มขึ้นเอง อ่านหลักการส่งออกได้ใน เอกสารของ Konva

สิ่งที่นำไปใช้กับงานอื่นได้

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

อ่านต่อเรื่องเกณฑ์ตรวจและการแยกข้อจำกัดใน บทความเริ่มออกแบบจากข้อจำกัด