เว็บสตูดิโอสถาปนิก 2 ภาษาบน Next.js ภาษาไทยเป็นหลัก อังกฤษอยู่ที่ /en ภาพผลงานเป็นตัวนำ และการเคลื่อนไหวทุกจุดเขียนใหม่ด้วย GSAP
Architecture studioWeb design / Development / Thai + English
ลูกค้า
Optik
ประเภทธุรกิจ
Architecture studio
ขอบเขตงาน
Web design / Development / Thai + English
หน้าเว็บ
ชุดสี
ฟอนต์ที่ใช้
หัวข้อ
เนื้อความ
หัวข้อภาษาไทย
เนื้อความภาษาไทย
งานนี้ในตัวเลข
2
ภาษา ไทยเป็นหลัก อังกฤษอยู่ที่ /en
6
ส่วนของเว็บ ตั้งแต่หน้าแรกถึงหน้าติดต่อ
4
ฟอนต์ ในจำนวนนี้ 2 ตัวสำหรับภาษาไทย
1440 + 390
ความกว้างจอ (พิกเซล) ที่เราวัดทุกส่วนให้ตรงกับดีไซน์ต้นฉบับ
01
สตูดิโอสถาปนิก ให้ภาพงานพูดแทน
Optik เป็นเว็บของสตูดิโอออกแบบบ้านและสำนักงาน สตูดิโอแบบนี้ขายงานด้วยภาพอาคารที่สร้างเสร็จแล้ว ลูกค้าเลือกดีไซน์ Optik ที่เริ่มจากเทมเพลต Webflow และอยากได้เว็บที่เหมือนต้นฉบับทุกส่วน ทั้งเลย์เอาต์ ภาพ และการเคลื่อนไหว แต่สร้างใหม่บน Next.js และใช้ภาษาไทยเป็นหลัก
เว็บมี 6 ส่วน คือหน้าแรก เกี่ยวกับเรา บริการ ผลงาน บทความ และติดต่อ ทุกหน้ามีทั้งภาษาไทยและอังกฤษ
02
ขาว ดำ และภาพสถาปัตยกรรมเต็มจอ
ดีไซน์ใช้แค่ดำ ขาว และเทาอีก 3 เฉด ให้ภาพบ้านและอาคารเป็นสีเดียวบนหน้า ชื่อสตูดิโอตั้งเป็นตัวอักษรขนาดเต็มความกว้างจอ ทับลงบนภาพบ้านในหน้าแรก ส่วนตัวหนังสืออื่นมีน้อยและสั้น
หัวข้อละตินใช้ Phudu เนื้อความใช้ Urbanist ส่วนภาษาไทยเราเพิ่ม Kanit สำหรับหัวข้อ และ Noto Sans Thai สำหรับเนื้อความ ต่อท้ายชุดฟอนต์เดิม ตัวอักษรไทยทุกตัวจึงขึ้นด้วยฟอนต์ไทยที่เลือกมาให้เข้าคู่กัน แทนฟอนต์สำรองของเครื่อง
03
ภาษาไทยเป็นหลัก อังกฤษอยู่ที่ /en
ทุกหน้าเปิดเป็นภาษาไทยที่ URL ปกติ และมีภาษาอังกฤษอยู่ที่ /en มุมบนมีปุ่มสลับ ไทย / EN ข้อความไทยเขียนให้อ่านเป็นธรรมชาติ ไม่ได้แปลคำต่อคำ ชื่อแบรนด์ ชื่อคน และอีเมลยังเป็นภาษาอังกฤษ ส่วนวันที่ในบทความใช้ปี พ.ศ.
หน้าไทยและอังกฤษใช้โค้ดหน้าเดียวกัน ข้อความภาษาไทยทั้งหมดอยู่ในไฟล์เดียว จับคู่กับประโยคภาษาอังกฤษทีละประโยค เวลาแก้ข้อความจึงหาเจอง่าย ดูวิธีที่เราทำเว็บไทยและอังกฤษให้ธุรกิจได้ที่รับทำเว็บไซต์บริษัท
04
การเคลื่อนไหวเดิม ทำใหม่ด้วย GSAP
หัวข้อค่อย ๆ ปรากฏทีละคำ แถบพาร์ตเนอร์และประโยคใหญ่เลื่อนต่อเนื่อง สไลด์ผลงานเปลี่ยนด้วยลูกศร และปุ่มกับการ์ดบริการตอบสนองเมื่อชี้ ทั้งหมดเขียนใหม่ด้วย GSAP ให้จังหวะเหมือนต้นฉบับ
สไลด์และเมนูมือถือเป็นคอมโพเนนต์เล็ก ๆ ที่ทำงานเฉพาะส่วนของตัวเอง ส่วนคนที่ตั้งค่าเครื่องให้ลดการเคลื่อนไหว จะเห็นทุกอย่างในตำแหน่งสุดท้ายทันที
05
Next.js ที่ตรงกับต้นฉบับทีละส่วน
เราแปลงทุกหน้าของต้นฉบับเป็นคอมโพเนนต์ Next.js โดยใช้สไตล์ชีตและชื่อคลาสเดิม เลย์เอาต์จึงตรงกันทุกจุด แล้ววัดตำแหน่งของแต่ละส่วนเทียบกับต้นฉบับที่ความกว้างจอ 1440 และ 390 พิกเซล
ภาพทุกใบโหลดผ่าน next/image ที่กำหนดขนาดจริงไว้ เลย์เอาต์จึงไม่ขยับเพราะรอรูป และฟอร์มติดต่อตรวจข้อมูลฝั่งเซิร์ฟเวอร์ด้วย Zod พร้อมช่องดักสแปมที่คนมองไม่เห็น
06
ไทยและอังกฤษ อ่านได้ครบใน HTML
ข้อความทุกส่วน ทั้งภาษาไทยและอังกฤษ ส่งมาจากเซิร์ฟเวอร์เป็น HTML ไม่ได้ซ่อนอยู่ในรูปหรือรอสคริปต์ Google และเครื่องมือ AI จึงอ่านได้ครบทั้งสองภาษาตั้งแต่โหลดหน้าแรก
ถ้าคุณมีสตูดิโอหรือบริษัทที่อยากได้เว็บสองภาษาแบบนี้ ดูรับทำเว็บไซต์บริษัท หรือเทียบราคาทุกแพ็กเกจได้ที่แพ็กเกจและราคา
อยากได้เว็บแบบนี้สำหรับธุรกิจของคุณ
เล่าธุรกิจของคุณมาทาง LINE หรือ WhatsApp เราตอบกลับภายใน 1 วันทำการ พร้อมแพ็กเกจที่เหมาะและงานที่ใกล้เคียงที่สุด