Case study

หน้าแรกเว็บบริษัทผู้ผลิตบน Next.js หัวข้อใหญ่ ตัวเลขที่นับขึ้นเมื่อเลื่อนถึง และขั้นตอนบริการที่เปลี่ยนตามการเลื่อน ภาษาไทยเป็นหลักและอังกฤษอยู่ที่ /en

ManufacturerWeb design / Development / Thai + English

หน้าแรกเว็บบริษัทผู้ผลิตบน Next.js หัวข้อใหญ่ ตัวเลขที่นับขึ้นเมื่อเลื่อนถึง และขั้นตอนบริการที่เปลี่ยนตามการเลื่อน ภาษาไทยเป็นหลักและอังกฤษอยู่ที่ /en

ลูกค้า

Manufactt

ประเภทธุรกิจ

Manufacturer

ขอบเขตงาน

Web design / Development / Thai + English

หน้าเว็บ

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

ชุดสี

#151515
#5C5C5C
#F6F6F6
#F66234
#C8370B

ฟอนต์ที่ใช้

หัวข้อ

ตัวอย่างฟอนต์ Mona Sans
Mona Sans600 · 700

เนื้อความ

ตัวอย่างฟอนต์ Geist
Geist400 · 500

หัวข้อภาษาไทย

ตัวอย่างฟอนต์ Kanit
Kanit600 · 700

เนื้อความภาษาไทย

ตัวอย่างฟอนต์ Noto Sans Thai
Noto Sans Thai400 · 500

งานนี้ในตัวเลข

3

ตัวเลขที่นับขึ้นเมื่อเลื่อนมาถึง

5

อุตสาหกรรม แต่ละกลุ่มมีการ์ดภาพของตัวเอง

2

ภาษา ไทยเป็นหลัก อังกฤษอยู่ที่ /en

4

ฟอนต์ ในจำนวนนี้ 2 ตัวสำหรับภาษาไทย

01

โรงงานที่ต้องดูน่าเชื่อถือตั้งแต่บรรทัดแรก

ฝ่ายจัดซื้อเลือกผู้ผลิตจากความมั่นใจ หน้าแรกของ Manufactt จึงเปิดด้วยหัวข้อใหญ่ "จากวัตถุดิบ ตั้งต้น สู่สินค้าพร้อมขาย" ตัวเลขที่นับขึ้นเมื่อเลื่อนถึง และภาพเครื่องจักรในโรงงาน ก่อนจะลงรายละเอียดบริการ อุตสาหกรรม และผลงาน

ลูกค้าเลือกดีไซน์ Manufactt ที่เริ่มจากเทมเพลต Webflow ขอบเขตงานคือหน้าแรกหนึ่งหน้าที่ยาวครบทุกส่วน กับหน้า 404 สร้างใหม่บน Next.js ทั้งภาษาไทยและอังกฤษ

02

ส้มบนพื้นหมึก

สีหลักคือดำหมึกกับเทา ตัดด้วยส้มสองเฉด คำสำคัญในหัวข้อทุกหัวข้อเป็นสีส้ม เช่น คำว่า "ตั้งต้น" ในหน้าแรก และคำว่า "การผลิต" ในส่วนอุตสาหกรรม สายตาจึงจับคำที่สำคัญที่สุดของแต่ละส่วนได้ก่อน

Mona Sans ตั้งหัวข้อ Geist ตั้งเนื้อความ ส่วนภาษาไทยเราเพิ่ม Kanit กับ Noto Sans Thai เข้าไปในชุดฟอนต์ ตัวอักษรไทยจึงหนักและแน่นพอจะยืนข้างหัวข้อละตินตัวหนาได้

03

บริการ อุตสาหกรรม และผลงาน

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

ต่อด้วยสไลด์ผลงานที่เปลี่ยนด้วยลูกศร แถบลูกค้าและคำรับรองที่เลื่อนต่อเนื่อง และโลโก้ตัวใหญ่ท้ายหน้า

04

ขยับตามการเลื่อน

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

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

05

ภาษาไทยเป็นหลัก อังกฤษอยู่ที่ /en

หน้าแรกเปิดเป็นภาษาไทยที่ URL ปกติ และมีภาษาอังกฤษอยู่ที่ /en มุมบนมีปุ่มสลับ ไทย / EN ปุ่มหลักมุมขวาบนคือขอใบเสนอราคา ซึ่งเป็นสิ่งที่ฝ่ายจัดซื้อมองหาก่อน

ข้อความทั้งสองภาษาส่งมาจากเซิร์ฟเวอร์เป็น HTML Google จึงอ่านบริการ อุตสาหกรรม และผลงานได้ครบ ไม่ต้องรอสคริปต์

06

อยากได้เว็บแบบนี้ ให้โรงงานของคุณ

เว็บโรงงานที่ขายได้ต้องตอบฝ่ายจัดซื้อให้ครบ ทั้งผลิตอะไรได้ ให้ใครมาแล้ว และขอราคาอย่างไร ดูวิธีที่เราทำเว็บแบบนี้ได้ที่รับทำเว็บไซต์โรงงาน และงานจริงของโรงงานที่ติดอันดับอยู่แล้วที่Case Study ของ CDV Thailand

ถ้าเป็นบริษัทที่มีหลายบริการและต้องการหน้าแยกของแต่ละบริการ ดูรับทำเว็บไซต์บริษัท

อยากได้เว็บแบบนี้สำหรับธุรกิจของคุณ

เล่าธุรกิจของคุณมาทาง LINE หรือ WhatsApp เราตอบกลับภายใน 1 วันทำการ พร้อมแพ็กเกจที่เหมาะและงานที่ใกล้เคียงที่สุด

ทักทาง LINE (เปิดในแท็บใหม่)ทักทาง WhatsApp (เปิดในแท็บใหม่)ส่งอีเมลหาเรา