Web Dev Resources Thailand 🇹🇭

รวม resources สำหรับ Web Developer ไทย — ฟอนต์, สี, ไอคอน, เครื่องมือฟรี, แหล่งเรียนรู้ และ SEO guides ทั้งหมดในที่เดียว

---

สารบัญ

• ฟอนต์ภาษาไทย
• Color Palette
• ไอคอน
• รูปภาพฟรี
• Design Tools
• Development Frameworks
• Hosting
• SEO Tools
• Automation
• AI Tools
• แหล่งเรียนรู้ภาษาไทย
• บทความแนะนำ

---

🔤 ฟอนต์ภาษาไทย

Google Fonts (ฟรี, ใช้เชิงพาณิชย์ได้)

ฟอนต์	สไตล์	เหมาะกับ
Noto Sans Thai	Neutral, มาตรฐาน	Body text ทุกประเภท
IBM Plex Sans Thai	Professional	Corporate, Fintech
Sarabun	อ่านง่าย	ราชการ, Document
Prompt	ทันสมัย	Startup, App
Kanit	หนา, โดดเด่น	Heading, Banner
Mitr	มน, Friendly	เด็ก, ครอบครัว
Pridi	Serif ไทย	Luxury, Legal
Chakra Petch	Techno	Auto, Sport, Gaming
Bai Jamjuree	Geometric	Tech, Modern
K2D	Futuristic	Gaming, Sci-fi

SIPA / f0nt.com

ฟอนต์	แหล่ง	เหมาะกับ
TH Sarabun New	SIPA	มาตรฐานราชการ
TH Niramit AS	SIPA	Formal document
TH Charm of AU	SIPA	Calligraphy

📖 อ่านเพิ่ม: 25 ฟอนต์ไทยฟรี 2026 | เลือกฟอนต์เว็บไซต์ไทย

---

🎨 Color Palette

เครื่องมือสร้างสี

เครื่องมือ	คำอธิบาย
Coolors	สุ่ม palette กด spacebar
Realtime Colors	ดู preview บนเว็บจริง
Adobe Color	Color wheel + harmony rules
Tailwind CSS Colors	สีจาก Tailwind
Open Color	สี 13 โทน สำหรับ UI

Palette แนะนำตามอุตสาหกรรม

อุตสาหกรรม	Palette
Corporate	Navy #1e3a5f + Gold #d4a843 + Light Gray #f5f5f5
คลินิก/สุขภาพ	Teal #0d9488 + White #ffffff + Warm Gray #f5f0eb
ร้านอาหาร	Red #dc2626 + Cream #fef3c7 + Dark #1c1917
Tech/Startup	Cyan #06b6d4 + Dark #0a0a0a + White #ffffff
Luxury	Black #000000 + Gold #c8a960 + Cream #f9f6f1

📖 อ่านเพิ่ม: 20 Color Palette สวยๆ 2026

---

🎯 ไอคอน

Library	สไตล์	จำนวน
Heroicons	Outline/Solid, by Tailwind	300+
Phosphor Icons	6 weights	9,000+
Lucide	Fork จาก Feather	1,500+
Tabler Icons	Stroke-based	5,000+
Radix Icons	สำหรับ UI	300+
Simple Icons	Brand/Logo	3,000+

---

📸 รูปภาพฟรี

แหล่ง	License	คุณภาพ
Unsplash	Free, commercial OK	สูงมาก
Pexels	Free, commercial OK	สูง
Pixabay	Free, commercial OK	ปานกลาง-สูง
unDraw	SVG illustrations	สูง (illustration)
Storyset	Animated illustrations	สูง

---

🛠️ Design Tools

เครื่องมือ	ใช้ทำอะไร	ราคา
Figma	UI/UX Design, Prototype	Free (3 projects)
Canva	Graphics, Social media	Free + Pro
Excalidraw	Wireframe, Diagram	Free
Shots.so	Mockup screenshots	Free
Squoosh	Image compression	Free

---

💻 Development Frameworks

Framework	ภาษา	เหมาะกับ
Next.js	React/TypeScript	เว็บไซต์ + Web App (แนะนำ)
Nuxt	Vue	เว็บ Vue
SvelteKit	Svelte	เว็บเร็วมาก
Astro	Multi-framework	Blog, Content site
Remix	React	Web App

UI Libraries

Library	ใช้กับ
shadcn/ui	Next.js/React + Tailwind
Radix UI	React primitives
Headless UI	Tailwind + React/Vue

📖 อ่านเพิ่ม: Next.js vs WordPress | เทรนด์เว็บดีไซน์ 2026

---

☁️ Hosting (ฟรี)

Platform	ฟรี Tier	เหมาะกับ
Vercel	100GB bandwidth	Next.js (แนะนำ)
Netlify	100GB bandwidth	Static, JAMstack
Cloudflare Pages	Unlimited bandwidth	Static + Edge
GitHub Pages	Static only	Documentation
Railway	$5 credit/month	Backend, Database

---

🔍 SEO Tools

เครื่องมือ	ใช้ทำอะไร	ราคา
Google Search Console	Indexing, Keywords	ฟรี
Google Analytics 4	Traffic, Behavior	ฟรี
PageSpeed Insights	Core Web Vitals	ฟรี
Lighthouse	Performance Audit	ฟรี
Rich Results Test	Schema Validation	ฟรี
Ahrefs Webmaster	Backlinks, Keywords	ฟรี (limited)
Screaming Frog	Site Crawl	ฟรี (500 URLs)

📖 อ่านเพิ่ม: SEO Checklist สำหรับเว็บไซต์ไทย

---

⚡ Automation

เครื่องมือ	ราคา	จุดเด่น
n8n	ฟรี (self-hosted)	Open source, PDPA-safe
Make	Free (1,000 ops)	1,000+ apps, visual
Zapier	Free (100 tasks)	5,000+ apps, ง่ายที่สุด

📖 อ่านเพิ่ม: n8n Thai Templates | n8n vs Make vs Zapier

---

🤖 AI Tools

เครื่องมือ	ใช้ทำอะไร
Claude	Coding assistant, content
ChatGPT	General AI, code review
v0	AI → React/Next.js UI
Cursor	AI-powered code editor
Vercel AI SDK	Build AI features in apps

📖 อ่านเพิ่ม: Agentic AI คืออะไร

---

📚 แหล่งเรียนรู้ภาษาไทย

แหล่ง	เนื้อหา
BorntoDev	Programming courses ไทย
Skooldio	Tech courses + certificate
CherCode Blog	Web dev, AI, Automation
Thai Programmer	ชุมชน developer ไทย

---

📝 บทความแนะนำ

Web Development

• ทำเว็บไซต์ราคาเท่าไหร่ 2026
• Next.js vs WordPress
• เลือกบริษัทรับทำเว็บไซต์ ดูอะไรบ้าง
• เว็บไซต์ SME ไทย ควรมีอะไรบ้าง
• ขั้นตอนการทำเว็บไซต์
• 30 เครื่องมือฟรีสำหรับทำเว็บ
• เทรนด์เว็บดีไซน์ 2026
• Shopee vs เว็บไซต์ตัวเอง

Typography & Design

• 25 ฟอนต์ไทยฟรี 2026
• เลือกฟอนต์เว็บไซต์ไทย
• 20 Color Palette สวยๆ

AI & Automation

• Agentic AI คืออะไร
• n8n คู่มือมือใหม่
• n8n vs Make vs Zapier
• LINE OA Automation 10 Use Cases

SEO

• SEO Checklist เว็บไทย
• เว็บไซต์คลินิก เช็คลิสต์ 15 ข้อ
• การตลาดออนไลน์สำหรับคลินิก
• PDPA กับเว็บไซต์คลินิก

---

Contributing

อยากเพิ่ม resource? ยินดีรับ PR!

• เพิ่มเครื่องมือ/ลิงก์ที่เป็นประโยชน์สำหรับ developer ไทย
• แก้ลิงก์เสียหรือข้อมูลล้าสมัย

Author

Cher — Full-Stack Developer & Founder of CherCode

รับทำเว็บไซต์ AI และ Automation สำหรับธุรกิจไทย

License

MIT License

---

Curated with ❤️ by CherCode