# Web Brutalism คืออะไร ถามคนทำเว็บเองว่าทำไมไม่แต่งให้สวย

> ที่มา: https://phygital.co.th/insights/web-brutalism-raw-html-design-guide · เผยแพร่ 7 ตุลาคม 2566 · อ่าน 11 นาที · โดย PARANATH PANARATANA

เว็บ brutalistwebsites.com มีบทสัมภาษณ์คนทำเว็บ 920 ชิ้น ฟิจิทัลสุ่มอ่าน 52 ชิ้น พบ 35 เว็บออกแบบและเขียนโค้ดโดยคนหรือทีมเดียวกัน และ 12 คำตอบให้เนื้อหามาก่อน

## Key Takeaways

- **เว็บ brutalistwebsites.com รวบรวมเว็บไซต์แนว brutalist ไว้ 1,600 รายการ และ 920 รายการมีบทสัมภาษณ์คำถามชุดเดียวกัน** — คือทำไมเว็บนี้เป็นแนว brutalist ใครออกแบบ ใครเขียนโค้ด และใช้โปรแกรมอะไร ฟิจิทัลสุ่มอ่าน 52 ชิ้นด้วยการเลือกทุกชิ้นที่ 18 ตามลำดับบนหน้าแรก
- **35 จาก 52 เว็บ คนที่ออกแบบกับคนที่เขียนโค้ดเป็นคนเดียวกันหรือทีมเดียวกัน** — และมี 22 คำตอบที่ระบุว่าเขียนด้วยโปรแกรมแก้ไขข้อความ Sublime Text เว็บแนวนี้ส่วนใหญ่ในกลุ่มตัวอย่างจึงเป็นงานที่เจ้าของทำเองได้โดยไม่ต้องจ้างหลายฝ่าย
- **คำตอบที่พบมากที่สุดเมื่อถามว่าทำไม คือให้เนื้อหาหรือการอ่านมาก่อน (12 จาก 52)** — รองลงมาคืออยากต่างจากเว็บหน้าตาเหมือนกัน (9) และทำง่าย ดูแลง่าย หรือโหลดเร็ว (7) ฟิจิทัลจัดกลุ่มคำตอบเอง และหนึ่งคำตอบอยู่ได้มากกว่าหนึ่งกลุ่ม

เจ้าของธุรกิจที่เห็นเว็บหน้าตาดิบ ตัวอักษรล้วน แทบไม่มีการตกแต่ง มักสงสัยว่าเป็นความตั้งใจหรือเป็นงานที่ทำไม่เสร็จ บทนี้ไม่ได้นิยาม Web Brutalism จากความเห็นของนักวิจารณ์ แต่อ่านจากคำตอบของคนทำเว็บเอง ฟิจิทัลดึงบทสัมภาษณ์จากเว็บรวมผลงานแนวนี้ 52 ชิ้นเมื่อวันที่ 27 กันยายน 2569 โดยเลือกทุกชิ้นที่ 18 ตามลำดับบนหน้าแรก แล้วนับว่าใครทำ ใช้อะไรทำ และทำเพราะอะไร ตัวเลขทั้งหมดในบทนี้มาจากกลุ่มตัวอย่างนี้

"Why do you have a Brutalist Website?" เป็นคำถามข้อแรกที่เจ้าของเว็บทุกรายในหน้าสัมภาษณ์ของ [brutalistwebsites.com](https://brutalistwebsites.com/) ต้องตอบ ตามด้วยใครออกแบบ ใครเขียนโค้ด และใช้โปรแกรมอะไร หน้าแรกของเว็บมีรายชื่อ 1,600 รายการ และ 920 รายการมีลิงก์ไปบทสัมภาษณ์ชุดนี้

## คำถามสี่ข้อที่ทุกเว็บในรายชื่อต้องตอบ

หน้าแรกของ brutalistwebsites.com มีข้อความอธิบายเพียงประโยคเดียว "In its ruggedness and lack of concern to look comfortable or easy, Brutalism can be seen as a reaction by a younger generation to the lightness, optimism, and frivolity of today's web design." แปลได้ว่า ด้วยความหยาบและการไม่สนใจว่าจะดูสบายตาหรือใช้ง่าย Brutalism อาจมองได้ว่าเป็นปฏิกิริยาของคนรุ่นใหม่ต่อความเบา การมองโลกแง่ดี และความไม่จริงจังของงานออกแบบเว็บยุคนี้

### บทสัมภาษณ์หนึ่งชิ้นมีอะไรบ้าง

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

### รายชื่อนี้ครอบคลุมช่วงไหน

รายการเรียงจากใหม่ไปเก่า ด้านล่างสุดของหน้ามีเว็บอย่าง 37signals และ txti ส่วนรายการที่มีปีอยู่ในชื่อล่าสุดที่พบคือปี 2019 หน้าแรกไม่ได้ระบุวันที่เพิ่มแต่ละรายการ บทนี้จึงไม่ระบุว่ารายชื่อเริ่มเมื่อไร และไม่ถือว่าเว็บในรายชื่อยังหน้าตาเหมือนตอนถูกบันทึก

## ใครออกแบบ ใครเขียนโค้ด

ฟิจิทัลแยกคำตอบข้อสองและข้อสามของกลุ่มตัวอย่างออกเป็นสี่แบบ

| ผู้ออกแบบกับผู้เขียนโค้ด                                 | จำนวน (จาก 52) |
| ------------------------------------------------------------- | -------------- |
| คนเดียวกันหรือทีมเดียวกัน                                 | 35             |
| บางส่วนซ้อนกัน เช่น ออกแบบเองแล้วเพื่อนช่วยเขียนโค้ด | 6              |
| คนละคนหรือคนละบริษัท                                      | 10             |
| ตอบเล่น ไม่ระบุชัด                                         | 1              |

### เว็บที่ใช้คนออกแบบกับคนเขียนโค้ดแยกกันเป็นแบบไหน

ใน 10 เว็บที่ใช้คนละคน มีทั้งเว็บส่วนตัวและเว็บขององค์กร ตัวอย่างเช่น นิตยสาร PIN-UP ให้ Jon Lucas ออกแบบและ Flashing & Drooping เขียนโค้ด สตูดิโอสถาปัตยกรรม Counterspace ให้ Henn+Honeyball ออกแบบและ Pete Reynolds เขียนโค้ด ส่วนห้องอ่านหนังสือออนไลน์ของ Unthinkable สร้างบน WordPress โดยนักออกแบบกับนักพัฒนาคนละคน การแยกงานจึงเกิดได้ทั้งกับเว็บเล็กและเว็บขององค์กร ไม่ได้ขึ้นกับขนาดอย่างเดียว

### เขียนเว็บด้วยโปรแกรมอะไร

คำตอบข้อที่สี่ระบุ Sublime Text 22 ครั้ง Atom 7 ครั้ง และ Brackets 4 ครั้ง ซึ่งเป็นโปรแกรมแก้ไขโค้ดทั้งหมด อีก 7 คำตอบระบุระบบสร้างเว็บหรือระบบจัดการเนื้อหา ได้แก่ WordPress, Cargo, Webflow และ Craft CMS และ 3 รายไม่ได้ตอบข้อนี้ หนึ่งคำตอบอาจเอ่ยหลายโปรแกรม ตัวเลขจึงรวมกันไม่เท่ากับ 52

### คนทำเว็บเล่าเรื่องการทำเองว่าอย่างไร

เจ้าของเว็บ archive.pe เล่าว่าเพื่อนขอให้ทำคลังเพลงออนไลน์ และทำเว็บเองเพราะไม่อยากให้มีสิ่งรบกวนการฟังเพลง ส่วนเจ้าของ craigjackson.io บอกตรง ๆ ว่าเบื่อการอัปเดตผลงานบนเว็บเดิม จึงเปลี่ยนเป็นแบบ brutalist และเจ้าของ caiovita.com ต้องทำพอร์ตโฟลิโอส่งสมัครฝึกงาน และไม่อยากให้ดูเหมือนเทมเพลตของ WordPress

## เหตุผลที่คนทำเว็บให้ไว้

ฟิจิทัลอ่านคำตอบข้อแรกทั้ง 52 ชิ้นแล้วจัดเป็นกลุ่ม หนึ่งคำตอบอยู่ได้หลายกลุ่ม

| กลุ่มเหตุผล                             | จำนวนคำตอบ | ตัวอย่างเว็บ                                    |
| ---------------------------------------- | ------------ | ------------------------------------------------ |
| ให้เนื้อหาหรือการอ่านมาก่อน        | 12           | pinupmagazine.org · badnudes.com · trendlist.org |
| อยากต่างจากเว็บที่หน้าตาเหมือนกัน | 9            | chkchkchk.net · webtlak.sk · caiovita.com        |
| ทำง่าย ดูแลง่าย หรือโหลดเร็ว         | 7            | craigjackson.io · amdouglas.uk · bhobrainey.com  |
| ให้เข้ากับเนื้อหาเฉพาะของเว็บ      | 5            | jacobsslum.dk · heimermusic.com                  |
| คิดถึงเว็บยุคแรกหรือเกมยุคเก่า    | 4            | javiloureiro.com · supertokonoma.de              |
| ไม่ได้ให้เหตุผลชัด                   | 5            | reimertz.co · stevesmith.co                      |

### คำตอบที่ให้เนื้อหามาก่อนพูดว่าอะไร

นิตยสาร PIN-UP ตอบว่าสำหรับแพลตฟอร์มข่าว เนื้อหาต้องอยู่ด้านหน้า และทุกการตัดสินใจเรื่องหน้าตามีไว้ให้การอัปโหลด การอ่าน และการค้นหาสะดวก ทีมของ badnudes.com เล่าว่าบรรณาธิการอยากได้พื้นที่ที่คน "read and have a good time" จึงรวมเนื้อหาทั้งหมดไว้หน้าเดียวให้โหลดครั้งเดียว และบอกว่าความเบาของเว็บทำให้โหลดเนื้อหาทั้งหมดได้ในเวลาที่ยอมรับได้

### คำตอบที่ให้หน้าตาเข้ากับเนื้อหาของเว็บ

เจ้าของ jacobsslum.dk ทำเว็บให้พอดแคสต์เรื่องชุมชนแออัดในนิวยอร์กช่วงศตวรรษที่ 19 ซึ่งใช้ภาพถ่ายหยาบของ Jacob A. Riis และอยากให้หน้าเว็บหยาบแบบเดียวกับภาพ ศิลปิน Heimer ใช้เว็บเล่าเรื่องหลังโลกล่มสลายของอัลบั้ม ส่วนทีมของ clickheretosavetheworld.com ทำเว็บเรื่องวิกฤตผู้ลี้ภัยในยุโรปที่ตั้งใจไม่เอาใจผู้ใช้ เพื่อกระตุ้นความเฉยชาของคนดู หน้าตาในกลุ่มนี้จึงเป็นเครื่องมือเล่าเรื่องของเนื้อหาชิ้นนั้น

### ใครไม่เห็นด้วยกับคำว่าหยาบ

Jason Fried ของ 37signals ตอบว่ามองเว็บของบริษัทเป็นจดหมายมากกว่าเว็บไซต์ และแย้งนิยามบนหน้าแรกว่าสำหรับเขา เรื่องนี้คือความสบายและความง่าย โดยเฉพาะตอนอ่าน ส่วนเจ้าของ supertokonoma.de บอกว่า brutalist design คือการถามว่าข้อมูลไหนสำคัญที่สุด และทำให้คนเข้าถึงได้ทันทีโดยไม่ต้องมีลูกเล่น รวมถึงคนที่ใช้โปรแกรมอ่านหน้าจอ

### คำตอบเรื่องความเร็วของเว็บ

เจ้าของ amdouglas.uk ตอบว่าใส่ใจเรื่องประสิทธิภาพของเว็บ จึงทำเว็บให้เรียบเพื่อส่งข้อมูลให้ผู้เข้าชมน้อยที่สุด และเบื่อเว็บที่มีแถบเมนูติดหน้าจอ หน้าต่างเด้ง โฆษณา และวิดีโอเล่นเอง เจ้าของ txti.es บอกว่าเว็บของเขาตั้งใจสวนทางกับเว็บทั่วไปที่ขนาดและความซับซ้อนเพิ่มขึ้นเรื่อย ๆ

## Web Brutalism คืออะไร เมื่ออ่านจากคำตอบ

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

### ชื่อ brutalism มาจากสถาปัตยกรรม

ทีม nile.studio ตอบด้วยการยกสรุปของ Reyner Banham ปี 1955 ว่า brutalism ในสถาปัตยกรรมมีสามข้อ คือแผนผังอ่านได้ชัด แสดงโครงสร้างอย่างเปิดเผย และให้คุณค่ากับวัสดุตามสภาพที่พบ อีกทีมหนึ่งคือ Twistudio ยกนิยามของ Le Corbusier ว่าดิบ เป็นธรรมชาติ และดั้งเดิม คำตอบสองแบบนี้ชี้ว่าคนทำเว็บบางส่วนยืมหลักการจากสถาปัตยกรรม ส่วนบางส่วนใช้คำนี้เพื่อบอกอารมณ์ของเว็บ

### ต่างจาก Neobrutalism อย่างไร

Neobrutalism คือแนวที่ตามมาทีหลัง มีสีจัด เงาทึบ และขอบหนาที่จัดเป็นระเบียบกว่า รายละเอียดอยู่ใน[Neobrutalism คืออะไร ดิบได้แค่ไหนที่ลูกค้ายังอ่านและกดได้](https://phygital.co.th/insights/neobrutalism-bold-raw-web-design-guide) ส่วนเว็บ HTML ที่แทบไม่ตกแต่งจะแสดงลิงก์เป็นสีน้ำเงินขีดเส้นใต้ตามค่าตั้งต้นของเบราว์เซอร์ ที่มาของค่านี้อธิบายไว้ใน[สีน้ำเงินในการสร้างแบรนด์บนเว็บ เมื่อสีแบรนด์ตรงกับสีลิงก์](https://phygital.co.th/insights/blue-color-brand-identity-meaning-guide)

## SME ทำเว็บแนวนี้เองได้แค่ไหน

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

1. **เขียนเนื้อหาทั้งหมดก่อน** ชื่อสินค้า ราคา เวลาเปิด วิธีสั่ง และคำถามที่ลูกค้าถามบ่อย
2. **จัดลำดับตามสิ่งที่ลูกค้าต้องรู้ก่อน** แบบที่ supertokonoma.de ถามว่าข้อมูลไหนสำคัญที่สุด
3. **เลือกเครื่องมือที่ตัวเองแก้ได้** จะเป็นโปรแกรมแก้ไขโค้ดหรือระบบสร้างเว็บก็ได้ ขอให้คนในร้านแก้เองได้
4. **ตัดสิ่งที่ไม่ช่วยให้ลูกค้าตัดสินใจ** เช่น หน้าต่างเด้งหรือวิดีโอเล่นเอง ซึ่ง amdouglas.uk ยกเป็นเหตุผลที่เขาเลิกใช้
5. **เปิดดูบนมือถือทุกครั้งที่แก้** supertokonoma.de บอกว่าหน้าตาเรียบง่ายปรับให้เข้ากับเบราว์เซอร์มือถือได้ง่าย

### เว็บเรียบเกินไปจะดูไม่น่าเชื่อถือไหม

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

### เรื่องอะไรที่ยังควรจ้างผู้เชี่ยวชาญ

แม้เจ้าของทำหน้าตาเองได้ งานบางอย่างยังต้องการความรู้เฉพาะ เช่น การเก็บข้อมูลลูกค้าตามกฎหมาย ระบบชำระเงิน และการตั้งค่าให้เครื่องมือค้นหาอ่านเว็บได้ถูก ร้านจึงควรแยกว่าส่วนไหนทำเองได้ ส่วนไหนต้องจ้าง แทนการจ้างทำทั้งเว็บหรือทำเองทั้งหมด

## ข้อจำกัดของการนับครั้งนี้

กลุ่มตัวอย่าง 52 ชิ้นเป็นส่วนเล็กของบทสัมภาษณ์ 920 ชิ้น และเลือกแบบเว้นระยะเท่ากันตามลำดับบนหน้าแรก ไม่ใช่การสุ่มทางสถิติเต็มรูปแบบ การจัดกลุ่มเหตุผลเป็นการตีความของฟิจิทัล คนอื่นอ่านคำตอบเดียวกันอาจจัดต่างไป เจ้าของเว็บเลือกส่งผลงานเข้ารายชื่อเอง กลุ่มนี้จึงเป็นคนที่ชอบแนว brutalist อยู่แล้ว และไม่ได้บอกว่าผู้เข้าชมใช้เว็บเหล่านี้ได้ดีแค่ไหน

### ทำไมไม่มีชื่อผู้ก่อตั้งเว็บรวบรวม

หน้าแรกของ brutalistwebsites.com ไม่ได้ระบุชื่อผู้รวบรวมหรือปีที่เริ่ม ชื่อที่เห็นในบทความทั่วไปบทนี้ยังไม่พบต้นทางที่เปิดตรวจได้ จึงไม่ได้ยกมา ผู้อ่านที่ต้องการอ้างอิงเว็บนี้ควรอ้างที่อยู่เว็บและวันที่เข้าถึงแทน

## ร่างเว็บจากเนื้อหาก่อนเลือกหน้าตา

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

พื้นผิวดิบอีกแบบที่ใช้ภาพแทนโครงสร้าง และมีผลต่อน้ำหนักหน้าเว็บ อ่านต่อได้ใน[Grunge Design บนเว็บ พื้นผิวดิบทำให้รูปหนักขึ้นแค่ไหน](https://phygital.co.th/insights/grunge-design-david-carson-typography-guide)

## สรุป

Web Brutalism เมื่ออ่านจากบทสัมภาษณ์ใน brutalistwebsites.com คือเว็บที่แสดงโครงสร้างพื้นฐานอย่างเปิดเผยและให้เนื้อหาเป็นหลัก ในกลุ่มตัวอย่าง 52 ชิ้น 35 เว็บออกแบบและเขียนโค้ดโดยคนหรือทีมเดียวกัน Sublime Text ถูกระบุ 22 ครั้ง และเหตุผลที่พบมากที่สุดคือให้เนื้อหามาก่อน SME ที่มีงบจำกัดใช้แนวคิดนี้ได้โดยเริ่มจากเขียนและจัดลำดับเนื้อหา แล้วเลือกเครื่องมือที่ตัวเองแก้ได้

## คำถามที่พบบ่อย (FAQ)

### Web Brutalism คืออะไรโดยย่อ

คือเว็บไซต์ที่เลือกแสดงโครงสร้างพื้นฐานของหน้าเว็บอย่างเปิดเผย ใช้ตัวอักษรและเนื้อหาเป็นหลัก และตกแต่งน้อย หน้าแรกของ brutalistwebsites.com อธิบายว่าเป็นปฏิกิริยาของคนรุ่นใหม่ต่องานออกแบบเว็บที่เบาและมองโลกแง่ดีเกินไป

### signals ใช้เว็บแบบนี้เพราะอะไร

Jason Fried ตอบในบทสัมภาษณ์ว่ามองเว็บเป็นจดหมายมากกว่าเว็บไซต์ และไม่เห็นว่าเว็บของบริษัทหยาบ เพราะสำหรับเขาเป้าหมายคือความสบายและความง่ายในการอ่าน

### ต้องเขียนโค้ดเป็นไหมถึงทำเว็บแนวนี้ได้

ไม่จำเป็นเสมอไป ในกลุ่มตัวอย่าง 52 เว็บ มี 7 คำตอบที่ระบุระบบสร้างเว็บหรือระบบจัดการเนื้อหา เช่น WordPress, Cargo และ Webflow และบางรายระบุว่าเขียน CSS เพิ่มเองบนระบบนั้น

### เว็บแนวนี้เหมาะกับร้านค้าออนไลน์ไหม

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

### เปิดอ่านบทสัมภาษณ์ทั้งหมดได้ที่ไหน

หน้าแรกของ brutalistwebsites.com มีลิงก์คำว่า Interview อยู่ท้ายชื่อเว็บที่มีบทสัมภาษณ์ กดเข้าไปอ่านได้ทีละเว็บ บางลิงก์ของเว็บต้นทางอาจเปลี่ยนหน้าตาหรือปิดไปแล้ว

## เว็บที่ร้านดูแลเองได้ เริ่มจากเนื้อหาที่เรียงถูกลำดับ ไม่ได้เริ่มจากธีมราคาแพง

PHYGITAL AGENCY จัดลำดับเนื้อหาและเขียนข้อความให้ครบ เพื่อให้เจ้าของร้านวางลงบนเว็บที่ตัวเองแก้ไขได้

- [นัดประชุมผ่าน Google Meet](https://calendar.app.google/DotQdE7Ca8LZG6Us5)
- [เพิ่มเพื่อนใน LINE](https://lin.ee/J8Qq8Do)