เกี่ยวกับโปรเจกต์
เบื้องหลังการทำงาน ในการสร้างเว็บไซต์ตัวอย่าง 12 ธุรกิจ
ในคอร์สเรียน สร้างเว็บไซต์ อย่างเป็นระบบด้วย AI เราเน้นการสร้างเว็บไซต์จริง ให้นำไปใช้ได้ โดยมีวิธีการสร้างอย่างเป็นระบบ ดังนั้น ผมจึงสร้่างเว็บไซต์ทั้ง 12 เว็บนี้ ให้เป็นตัวอย่าง สำหรับผู้เรียน เพื่อเป็นแรงบันดาลใจ ในการสร้างเว็บไซต์ของตัวเอง
โจทย์ที่เราตั้งไว้ ในการสร้างเว็บไซต์ชุดนี้
เว็บไซต์ทั้งหมด จะใช้เครื่องมือตัวเดียวกันทั้งหมด สร้างด้วยคำสั่งเดียว และออกมาเป็น HTML/CSS/JS ที่สามารถนำไปติดตั้งบนเว็บโฮสติ้ง และ สามารถเปิดใช้งานได้เลย
| ใน 1 เว็บไซต์ต้องมีหลายหน้า | index.html · about.html · services.html · contact.html — อย่างน้อยต้องมี 4 หน้าในเว็บไซต์ เพื่อความสมบูรณ์ของเว็บไซต์ |
|---|---|
| ภาษาไทยทั้งหมด | เนื่องจากเว็บที่เป็นภาษาไทย จำเป็นที่จะต้องเลือกรูปแบบตัวอักษรเพื่อการแสดงผล และ แต่ละแบบก็มีความกว้างและความสูงของตัวอักษรไม่เท่ากัน |
| ไม่มี backend | ไม่มี <form> ไม่มีระบบจอง ตะกร้าสินค้า หรือระบบค้นหา ทุกอย่างที่ธุรกิจจริงต้องใช้ ถูกแทนด้วยลิงก์ tel: mailto: LINE และหน้าที่บอกชัดว่าต้องส่งอะไรมา |
| JavaScript เท่าที่จำเป็น | เมนูมือถือ แท็บ ตัวกรองฝั่งเบราว์เซอร์ และภาพค่อย ๆ ปรากฏ ไม่มีการเรียกโปรแกรมจาก Backaend Server และทุกอย่างต้องอ่านได้ครบถ้าปิด JavaScript |
| แต่ละเว็บไซต์ต้องแตกต่างกัน | ผมต้องการสร้างแรงบันดาลใจ ให้กับนักเรียน ที่มาเรียนในคอร์สดังนั้น จึงมีความตั้งใจ ที่จะทำเว็บไซต์หลากหลายรูปแบบ ที่เน้นการนำไปใช้ได้จริง |
วิธีที่ใช้ไม่ให้เว็บออกมาหน้าตาเดียวกัน
ขั้นแรก คือ การเลือกสรรธุรกิจประเภทต่างๆ ที่เราต้องการนำมาทำเว็บไซต์ ซึ่งจะเลือกธุรกิจที่กระจายออกไปในหลายๆ วงการ
ขั้นที่สอง เราเริ่มจากไปดูเว็บอื่นๆ แล้วค่อยมากำหนดจุดเด่น ของแต่ละเว็บเพื่อให้สอดคล้องกับธุรกิจนั้นๆ
ขั้นที่สาม คือการเลือกโทนสี และ รูปแบบตัวอักษรที่จะใช้ของแต่ละเว็บ ในขั้นนี้ตอนที่กำลังเลือกเว็บที่ 2 ก็ให้ AI เริ่มทำงานกับเว็บแรกได้เลย
จุดเด่นหนึ่งอย่างต่อเว็บ
ถ้าทุกอย่างเด่น แปลว่าไม่มีอะไรเด่น องค์ประกอบเด่นใช้ได้หน้าละครั้ง ส่วนที่เหลือเป็นไปตามโทนการออกแบบของแต่ละเว็บ
ต้องแสดงข้อมูลจริง
ใช้ข้อมูลสมมติ แต่แสดงจริง ให้ได้มากที่สุด เพื่อที่จะดูว่า เมื่อมีข้อมูลแล้วหน้าตาเว็บไซต์จะเป็นอย่างไร หลีกเลี่ยงการใช้ Lorem
คนละโทนคนละสี
โทนสีที่ใช้ในแต่ละเว็บจะต้องไม่ใช่ โทนสีค่าเริ่มต้นที่ AI ชอบใช้งาน พื้นครีมตัวอักษรน้ำตาล แต่เราต้องกำหนดโทนสีของเราเองตามธุรกิจที่เราเลือก
ภาพประกอบ
ภาพทั้งหมดในชุดนี้สร้างด้วย Gemini image API จากพรอมป์ที่เขียนไว้สำหรับแต่ละหน้า เป็นไฟล์ หนึ่งชุดต่อหนึ่งเว็บ ทุกพรอมป์บังคับว่าห้ามมีตัวอักษรในภาพ เพราะภาพประกอบที่ดีควรมีความหมายในตัวมันเอง
ภาพคู่ “ก่อน–หลัง” ของงานรีโนเวทเป็นข้อยกเว้นเดียว: สร้างจากข้อความอย่างเดียวแล้วได้คนละห้อง ซึ่งทำให้สไลเดอร์เปรียบเทียบไม่สื่ออะไรเลย จึงต้องส่งภาพ “ก่อน” กลับเข้าไปเป็นภาพตั้งต้น แล้วสั่งให้แก้เป็นภาพ “หลัง” โดยคงมุมกล้องเดิม
ข้อมูลสมมติทั้งหมด
ธุรกิจทั้งสิบสองรายเป็นเรื่องแต่ง ชื่อบุคคล ที่อยู่ เบอร์โทรศัพท์ บัญชีธนาคาร ราคา และตัวเลขผลลัพธ์ทุกตัวเป็นข้อมูลสมมติสำหรับตัวอย่างงานออกแบบเว็บไซต์เท่านั้น หน้าที่มีตัวเลขอ้างผลลัพธ์ทุกหน้ามีหมายเหตุกำกับไว้ในตัวหน้าเอง ไม่ได้ซ่อนไว้ที่นี่ที่เดียว
