# Research — จากข้อมูลตั้งต้นสู่ website brief และ brand assets

ตรวจแหล่งอ้างอิงทางการเมื่อ **11 กันยายน 2026** เพื่อออกแบบ [Lab Research to Brand](../labs/research-to-brand-website.md) ของ AI Web Studio ภายใต้ 977-121 Module: Website Design and Development, PSU วิทยาเขตภูเก็ต ข้อเสนอการสอนด้านล่างเป็นการสังเคราะห์จากแหล่งอ้างอิง ไม่ใช่รายงานวิจัยตลาดหรือผลสัมภาษณ์ลูกค้า HUSH

## 1. ค้นข้อมูลก่อนกำหนดภาพ

Design Council อธิบาย Double Diamond ว่า Discover ใช้ทำความเข้าใจปัญหา และ Define ใช้สังเคราะห์เป็นโจทย์ ก่อน Develop/Deliver จะพัฒนาและทดสอบทางเลือก Lab จึงให้ผู้เรียนเก็บข้อมูลและเขียน brief ก่อนสั่งสร้าง brandbook เพื่อให้ตรวจได้ว่าการออกแบบตอบโจทย์ใด [Design Council: The Double Diamond](https://www.designcouncil.org.uk/resources/the-double-diamond/)

ข้อเสนอของหลักสูตรคือใช้ evidence ledger แยก **FACT / INFERENCE / PROPOSAL / GAP** โดย FACT หมายถึงแหล่งที่ระบุรองรับข้อความนั้นภายในขอบเขตและวันที่ของข้อมูล เช่น catalog สมมติบอกชื่อสินค้าได้ แต่ไม่ได้พิสูจน์คุณภาพสินค้าในโลกจริง การมี citation ไม่ทำให้ข้อความโฆษณากลายเป็นผลทดสอบอิสระ

## 2. ใช้ Research ให้ได้ข้อมูลที่ย้อนตรวจได้

ChatGPT Deep Research ทำรายงานจากหลายแหล่งพร้อม citations และอาจใช้ไฟล์ แหล่งที่เชื่อมต่อ หรือกำหนดเว็บไซต์ที่ให้ใช้ได้ ผู้เรียนควรตรวจแผน research ก่อนเริ่มและเปิดแหล่งที่มาของข้อความสำคัญ สิทธิ์ใช้งาน โควตา และตัวเลือกในหน้าจอขึ้นกับบัญชี [OpenAI Academy: Deep Research](https://academy.openai.com/public/clubs/work-users-ynjqu/resources/deep-research), [OpenAI: Introducing Deep Research](https://openai.com/index/introducing-deep-research/)

Claude Research ใช้ web search และอาจใช้ข้อมูลจาก integrations ที่ตั้งค่าไว้ ส่วน web search มี citations สำหรับย้อนอ่านต้นทาง หากบัญชีไม่มี Research ให้ผู้เรียนค้นแหล่งทางการเองแล้วแนบข้อความ/ลิงก์ที่อ่านแล้วกับ prompt เดิม โดยรายงานให้ตรงว่าทำงานจากไฟล์หรือจากเว็บ [Anthropic: Using Research](https://support.anthropic.com/en/articles/11088861-using-research-on-claude-ai), [Claude: Enable and use web search](https://support.claude.com/en/articles/10684626-enable-and-use-web-search)

แนวสอนที่ได้จากข้อมูลนี้: ให้โจทย์การตัดสินใจ, รายการไฟล์ที่อนุญาต, ขอบเขตเว็บไซต์, วันที่ และรูปแบบ evidence.csv อย่างชัดเจน แยกข้อมูลเจ้าของธุรกิจออกจากข้อมูลอุตสาหกรรมและสิ่งที่สังเกตจากคู่แข่ง พร้อมช่องข้อขัดแย้ง/ข้อมูลขาด ห้ามใช้บทสรุปของ AI เป็นแหล่งอ้างอิงใหม่

## 3. Brandbook ต้องส่งต่อเป็นกฎที่ใช้กับหน้าเว็บได้

Figma มี variables, collections, modes และ aliases สำหรับจัดการค่าที่ใช้ซ้ำ Lab จึงให้ส่ง semantic tokens เช่น surface, text, action พร้อมค่าของแต่ละโหมดและตัวอย่างการใช้ใน component เพื่อให้การส่งต่อมีรายละเอียดมากกว่าสี hex หลายช่อง ส่วนสิทธิ์เข้าถึง features และไฟล์ต้องตรวจในบัญชีที่ใช้จริง [Figma: Guide to variables](https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma), [Figma: Variables, collections and modes](https://help.figma.com/hc/en-us/articles/14506821864087-Overview-of-variables-collections-and-modes)

โครง mini brandbook ที่หลักสูตรเสนอคือ positioning ที่มีหลักฐาน, voice, ข้อกำหนด logo/wordmark, สี, typography, spacing, icons, imagery และตัวอย่าง component หากมี brandbook เดิมแล้วให้รักษากฎเดิมและติดป้ายข้อเสนอใหม่ ไม่ถือว่าผลที่ AI เขียนได้รับอนุมัติจากเจ้าของโดยอัตโนมัติ

## 4. UI icon, logo และ key visual ทำหน้าที่ต่างกัน

W3C แนะนำให้เลือกข้อความทดแทนตามหน้าที่ของภาพ: ภาพตกแต่งใช้ alt ว่าง ภาพที่ทำหน้าที่เป็นปุ่มหรือลิงก์ให้สื่อการกระทำ และข้อความที่จำเป็นควรเป็นข้อความจริงในหน้าเว็บ แนวทาง SVG ของ W3C แนะนำให้มี label ที่มองเห็นเมื่อทำได้ ส่วนชื่อที่เข้าถึงได้ควรบอกการกระทำ เช่น “ปิด” แทนชื่อรูปร่าง “X” [W3C: Images Tutorial](https://www.w3.org/WAI/tutorials/images/), [W3C Design System: SVG icons](https://design-system.w3.org/styles/svg-icons.html), [W3C APG: Names and descriptions](https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/)

Carbon แสดงหลักการส่ง icon เป็น SVG บน artboard/grid ที่กำหนดและตรวจ pixel alignment หลักสูตรนำหลักการความสม่ำเสมอนี้มาใช้กับชุด 24 × 24, stroke 2 ของตนเอง ไม่ได้อ้างว่าขนาดดังกล่าวเป็นข้อบังคับสากลหรือใช้ icon ของ Carbon [Carbon: Contribute icons](https://v10.carbondesignsystem.com/contributing/contribute-icons/)

จึงแยกงานเป็น UI icons สำหรับความหมาย/การกระทำ, logo สำหรับอัตลักษณ์ และ key visual สำหรับเล่าเรื่องของหน้าเว็บ การสร้างภาพ raster ไม่ได้ให้ SVG vector ที่แก้ไขเส้นได้ และภาพสวยเพียงอย่างเดียวไม่ใช่ brand system

## 5. สร้างภาพพร้อมบันทึกสิ่งที่ใช้จริง

เอกสาร OpenAI ระบุ `gpt-image-2` สำหรับงานสร้างและแก้ไขภาพ หลักสูตรใช้ความต้องการของโครงการให้เลือก workflow นี้ผ่าน Codex เมื่อมีให้ใช้ แต่ไม่สมมติว่าทุกหน้าจอมีตัวเลือก model และไม่รายงานชื่อ model ที่เครื่องมือไม่ได้ยืนยัน [OpenAI: GPT Image 2](https://developers.openai.com/api/docs/models/gpt-image-2)

ใน Lab ให้บันทึก prompt, reference, เครื่องมือ/วันที่, ไฟล์ผลลัพธ์, ข้อแก้ไข, alt intent และสถานะสิทธิ์ที่ทราบ แยกข้อความ/CTA เป็น HTML และตรวจ composition ที่ desktop/mobile ชุด HUSH ที่ให้มานำภาพในหลักสูตรมาใช้จัดหน้าใหม่ ไม่ได้อ้างว่ารอบนี้สร้างภาพใหม่หรือทดสอบคุณสมบัติของสินค้าจริง

## สิ่งที่แหล่งเหล่านี้ไม่ได้ยืนยัน

- ไม่ได้ยืนยันกลุ่มลูกค้า ราคา ยอดขาย warranty หรือผลทดสอบของ HUSH ซึ่งเป็นตัวอย่างสมมติ
- ไม่ได้ยืนยันว่าเครื่องมือทุกตัวพร้อมใช้งานในบัญชีผู้เรียน หรือเชื่อม MCP แล้ว
- ไม่ได้อนุมัติแบรนด์แทนเจ้าของ หรือรับรองว่างานภาพ/ชื่อใหม่มีสิทธิ์ใช้ทุกกรณี

นำผลสังเคราะห์ไปฝึกได้ใน [Lab](../labs/research-to-brand-website.md), [prompt P0–P8](../prompts/research-to-brand-prompts.md) และ [HUSH worked kit](/labs/hush-brand-kit/)