---
title: "สร้างเว็บไซต์จากเว็บไซต์ที่คุณชอบ | Briks"
url: https://briks.dev/th/docs/build-from-sites-you-like
description: "เพิ่มเว็บไซต์ 1 แห่งและภาพหน้าจอที่ชอบสูงสุด 6 ภาพ Briks อ่านเลย์เอาต์ ระยะห่าง ตัวอักษร การเคลื่อนไหว เมนู แล้วสร้างเว็บไซต์ของคุณในแนวนั้นโดยไม่คัดลอก"
last_updated: 2026-10-08
---

# สร้างเว็บไซต์จากเว็บไซต์ที่คุณชอบ

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

อ่าน 7 นาทีตรวจเทียบกับสตูดิโอเมื่อ 8 ตุลาคม 2569

## การเพิ่มเว็บไซต์และภาพหน้าจอ

1. เปิดขั้นตอน

   ที่ไหน: Show what you like

   เป็นขั้นตอนที่สามของ New project และมีป้ายกำกับ **Optional** แผงนี้บอกว่าใช้ทำอะไร: "Show a site or screenshots you admire. These become rules for the build; the rest is designed for your business."

2. เพิ่มเว็บไซต์

   ที่ไหน: A site to learn from

   พิมพ์หรือวางที่อยู่ แล้วกด **Add** หรือ Enter จะไม่ใส่ https ก็ได้ แต่ละโปรเจกต์ใส่ได้ 1 เว็บไซต์ หากใส่เว็บไซต์ที่สองจะขึ้นข้อความ “One site per project. Remove it to add another.” เว็บไซต์จะแสดงเป็นแท็กพร้อมเครื่องหมายกากบาทสำหรับลบ

3. เพิ่มภาพหน้าจอ

   ที่ไหน: Screenshots

   กด **Add screenshots** แล้วเลือกไฟล์ JPEG, PNG หรือ WebP ขนาดไม่เกิน 12 MB ต่อไฟล์ ตัวนับจะแสดงจำนวนที่คุณมี สูงสุด **6 of 6**

4. บอกว่าภาพหน้าจอแต่ละภาพแสดงอะไร

   ที่ไหน: Screenshots

   เลือก **Whole page** และหากทราบ ให้เลือกหน้าจอที่ใช้ถ่ายภาพ: **Desktop**, **Tablet** หรือ **Phone** (**Screen size: detect** จะหาให้เอง) หรือเลือก **One section** แล้วเลือกส่วนที่ภาพแสดง เช่น hero, pricing, testimonials หรือ footer

5. ไปต่อ

   ที่ไหน: Show what you like

   กด **Next** หน้าตรวจทานจะแสดงที่อยู่ของเว็บไซต์และนับภาพหน้าจอของคุณ

คุณยังนำหนึ่งเว็บไซต์จากกล่องบน briks.dev มาได้ก่อนสมัคร: เปิดเมนู **+** เลือก **Add a site you like** แล้วเว็บไซต์จะมาอยู่ที่ขั้นตอนนี้หลังสมัคร

## สิ่งที่ Briks อ่าน

เว็บไซต์จะถูกอ่านที่ความกว้างของเดสก์ท็อป แท็บเล็ต และโทรศัพท์ หลังจาก Briks ตอบแบนเนอร์คุกกี้และปิดป๊อปอัปแล้ว โดยตรวจสิ่งต่อไปนี้:

- **Layout:** ส่วนต่าง ๆ จากบนลงล่าง ความกว้างของเนื้อหา จำนวนคอลัมน์ และสิ่งที่เปลี่ยนไปบนโทรศัพท์
- **Spacing:** จังหวะระหว่างส่วนต่าง ๆ และภายในแต่ละส่วน
- **ตัวอักษร:** ขนาดและน้ำหนักของหัวข้อและข้อความ และบุคลิกของแบบอักษร
- **Colour:** พื้นหลัง สีของข้อความ และสีเน้น
- **การเคลื่อนไหว:** สิ่งที่ค่อยๆ ปรากฏหรือเลื่อนเข้ามาเมื่อเลื่อนหน้า สิ่งที่ตรึงอยู่กับที่ แถวที่เคลื่อนที่เอง และสิ่งที่ลิงก์กับปุ่มทำเมื่อชี้เมาส์ไปที่มัน
- **ส่วนหัวและเมนู:** แถวลิงก์ธรรมดา เมนูแบบเลื่อนลง หรือแผงขนาดใหญ่ แต่ละแผงจะถูกเปิดและตรวจดู
- **ภาพวาด:** หากหน้านั้นใช้ภาพวาดแทนภาพถ่าย รูปภาพของคุณจะถูกวาดด้วยลายเส้นที่คล้ายกัน

ภาพหน้าจอบอก Briks ได้น้อยกว่า คือเลย์เอาต์และการจัดแนว ระยะห่าง ขนาดของพาดหัว สี และว่าเป็นโทนสว่างหรือโทนมืด ภาพหน้าจอที่ทำเครื่องหมาย **One section** ใช้กับส่วนนั้นเท่านั้น

## สิ่งที่ไม่เคยเก็บ

แผงนี้บอกไว้ตรง ๆ ว่า “หนึ่งเว็บไซต์ต่อหนึ่งโปรเจกต์ เราวัดโครงสร้าง จังหวะ และตัวอักษรของเว็บไซต์นั้น ไม่มีการคัดลอกใด ๆ” ในทางปฏิบัติคือ:

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

คำถามก่อนสร้างเขียนจากบรีฟและที่อยู่เว็บของคุณเท่านั้น ไม่ได้มาจากข้อความของเว็บไซต์อื่น

## เว็บไซต์ ภาพหน้าจอ หรือทั้งสองอย่าง

Briks ทำตามเว็บไซต์ได้ใกล้เคียงเพียงใด ขึ้นอยู่กับสิ่งอื่นที่คุณให้

| สิ่งที่คุณเพิ่ม | Briks ทำอะไรได้บ้าง |
| --- | --- |
| หนึ่งเว็บไซต์และไม่มีอะไรอื่น | หน้านั้นกำหนดลำดับส่วนต่าง ๆ ของหน้าแรก สร้างขึ้นให้เหมาะกับธุรกิจของคุณ |
| เว็บไซต์พร้อมภาพหน้าจอ | ทั้งสองอย่างร่วมกันนำทางการสร้าง เว็บไซต์จึงไม่ได้กำหนดลำดับอีกต่อไป ภาพหน้าจอของหนึ่งส่วนจะกำหนดส่วนนั้น |
| ภาพหน้าจอเท่านั้น | ใช้เป็นแนวทางของเลย์เอาต์และหน้าตา ส่วนภาพหน้าจอของแต่ละส่วนจะเป็นตัวกำหนดส่วนนั้น |
| การตั้งค่าใน **Your brand** | สิ่งเหล่านี้สำคัญกว่าเว็บอ้างอิงทุกเว็บ สีเฉพาะของคุณจึงยังคงอยู่ แม้เว็บที่คุณชอบจะเป็นสีเขียว |

ชี้ไปยังหน้าที่ต้องการอย่างตรงจุด

Briks อ่านหน้าที่ที่อยู่ที่คุณให้ ไม่ใช่ทั้งเว็บไซต์ หากเป็นหน้าราคาที่คุณชอบ ให้วางที่อยู่ของหน้าราคา ไม่ใช่ของหน้าแรก

## วัดผลงานที่สร้างเทียบกับเว็บไซต์

เมื่อเพิ่มเว็บไซต์แล้ว ขั้นตอนนี้จะแสดง **Measure the build against the reference** ซึ่งปิดไว้เป็นค่าเริ่มต้น เมื่อเปิด Briks จะเปรียบเทียบหน้าที่สร้างกับเว็บไซต์ที่คุณชอบก่อนเผยแพร่ และแก้ความแตกต่างที่วัดได้ ใช้ได้เฉพาะเมื่อเว็บไซต์เป็นข้อมูลอ้างอิงเดียวของคุณ โดยไม่มีภาพหน้าจอ เพราะเป็นกรณีที่หน้าของคุณทำตามเลย์เอาต์ของเว็บไซต์นั้น ตัวเลือกนี้ใช้เครดิตและเวลาในการสร้างเพิ่ม จึงควรปิดไว้ เว้นแต่คุณต้องการให้ตรงกันมาก ภายหลังเปลี่ยนได้ใน **Preferences** ที่ **Measure builds against the reference**

## เว็บไซต์ส่งผลต่อส่วนอื่นของการตั้งค่าอย่างไร

- **ไม่มีรูปลักษณ์หรือฮีโร่ให้เลือก** ขั้นตอน **How it is built** แสดงข้อความ "Your reference site decides the look and the hero, so there is none to choose." บน briks.dev **Pick a look first** จะปิดอยู่พร้อมข้อความ "The site you like sets the look." ดู [เลือกรูปลักษณ์](https://briks.dev/th/docs/pick-a-look)
- **คำถามน้อยลง** Briks ไม่ถามเรื่องเลย์เอาต์ หน้าตา หรือสิ่งที่ควรนำหน้า เพราะเว็บไซต์ตอบเรื่องเหล่านั้นอยู่แล้ว
- **Dashboards** ใช้ภาพอ้างอิงได้เช่นกัน Briks อ่านหน้าจอเพื่อดูการนำทาง (แถบด้านข้างหรือแถบด้านบน) และจำนวนแผง ตาราง และแผนภูมิที่มี แดชบอร์ดส่วนใหญ่อยู่หลังการลงชื่อเข้าใช้ จึงมักใช้สกรีนช็อตเพื่อแสดง

ระหว่างที่กำลังสร้าง การสนทนาจะมีกล่องชื่อ **What your references decided** แสดงสิ่งที่แต่ละรายการกำหนดไว้ ได้แก่ ความกว้างของเนื้อหา จังหวะ เมนูของส่วนหัว และการเคลื่อนไหว

## เมื่ออ่านเว็บไซต์ไม่ได้

หน้าสาธารณะส่วนใหญ่อ่านได้ปกติ เหตุผลที่พบบ่อยที่ทำให้บางหน้าอ่านไม่ได้มีดังนี้

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

หากอ่านเว็บไซต์ไม่ได้แต่อ่านภาพหน้าจอของคุณได้ การสร้างจะดำเนินต่อโดยไม่ใช้เว็บไซต์นั้น และกล่องจะแสดงว่า "1 reference could not be read and was skipped." หากอ่านสิ่งที่คุณเพิ่มไม่ได้เลย การสร้างจะหยุด แทนที่จะออกแบบเว็บไซต์ที่คุณไม่ได้ขอ การสร้างที่หยุดแบบนี้จะไม่ถูกเรียกเก็บเงิน และเครดิตที่กันไว้จะคืนให้ สิ่งที่สตูดิโอแจ้งขึ้นอยู่กับสาเหตุ:

| สิ่งที่สตูดิโอแจ้ง | สิ่งที่ต้องทำ |
| --- | --- |
| ‘ไม่สามารถเปิดที่อยู่อ้างอิงได้’ และ ‘ไม่มีการเรียกเก็บเงิน’ | กด **Build without it** เพื่อสร้างตามคำขอเดิมด้วยคำและคำตอบของคุณตามที่เป็นอยู่ โดยจะกันเครดิตของโปรเจกต์ใหม่ไว้อีกครั้ง หรือกด **Remove it** ซึ่งจะเปิด **Reference site** ใน **Preferences** ที่ปุ่ม **Remove** จะนำที่อยู่ออก |
| “The reference site turned the studio's browser away, so it could not be read. Please try a different reference.” | เริ่มโปรเจกต์ใหม่ด้วยภาพหน้าจอของหน้าเว็บใต้ **Screenshots** หรือด้วยเว็บไซต์อื่น |
| "ไม่สามารถอ่านเว็บไซต์อ้างอิงของคุณได้เนื่องจากข้อผิดพลาดของระบบ โปรดลองอีกครั้งภายหลัง" | กด **Try again** ภายหลัง ข้อความและคำตอบของคุณถูกเก็บไว้ จึงไม่ต้องตอบคำถามซ้ำ หรือพิมพ์ในช่องเพื่อเริ่มใหม่โดยเพิ่มข้อความใหม่ของคุณเข้าไป |

กลุ่ม **Reference site** ใน **Preferences** แสดงที่อยู่จนกว่าเว็บไซต์จะถูกเผยแพร่ครั้งแรก คุณจึงตรวจได้ว่าบันทึกตามที่ตั้งใจ

ที่ไหน

1. Projects
2. Your project
3. Settings
4. Preferences
5. Reference site

## ตัวอย่างการใช้งานจริง

หนึ่งเว็บไซต์คลินิกทันตกรรมที่ชอบความสงบแบบโรงแรม

> บรีฟ: คลินิกทันตกรรมครอบครัวในแฮร์โรเกตที่มีทันตแพทย์สี่คน เปิดเช้าวันเสาร์ และมีฟอร์มขอนัด เว็บไซต์ที่เพิ่มเข้ามา: หน้าแรกของโรงแรมเล็กๆ ที่เจ้าของรู้สึกว่าสงบและโปร่งสบาย ไม่มีอะไรอื่นอีก

หน้าแรกของคลินิกใช้ลำดับและระยะห่างที่โปร่งโล่งตามหน้าของโรงแรม แต่ใช้ถ้อยคำ การรักษา และรูปภาพของคลินิกเอง ชื่อ รูปภาพ และถ้อยคำของโรงแรมไม่ปรากฏเลย

เว็บไซต์หนึ่งเว็บและภาพหน้าจอหนึ่งภาพ ร้านคั่วกาแฟที่มีเว็บไซต์และภาพหน้าจอ

> เว็บไซต์: ร้านคั่วกาแฟที่เมนูเปิดออกเป็นแผงขนาดใหญ่ ภาพหน้าจอ: กริดสินค้าของร้านค้าแห่งหนึ่ง ทำเครื่องหมายเป็น **One section** พร้อมเลือกสินค้าแล้ว **Your brand**: สีเน้น `#B4542D`

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

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

### เพิ่มข้อมูลอ้างอิงหลังสร้างเว็บไซต์เสร็จได้หรือไม่

ได้ ในรูปแบบรูปภาพ ในกล่องข้อความของสตูดิโอ ให้แนบภาพหน้าจอ คงไว้ที่ **Reference** แล้วบอกว่าจะให้นำอะไรจากภาพนั้น: `ทำส่วนราคาให้ให้ความรู้สึกแบบนี้ สามคอลัมน์ โดยคอลัมน์กลางยกสูงขึ้น`

### ฉันสามารถทำเว็บไซต์ที่ต้องใช้รหัสผ่านได้หรือไม่

ไม่เป็นประโยชน์ Briks เห็นเพียงหน้าสาธารณะ ให้แคปภาพหน้าจอแทนและเพิ่มใต้ **Screenshots**

### ทำไมฉันจึงเลือกลุคไม่ได้อีกแล้ว

เว็บไซต์ที่คุณชอบจะเป็นตัวกำหนดหน้าตา หากต้องการเลือกจากสามบอร์ดแทน ให้นำออกที่ **Show what you like**

## อ่านต่อ

- [กำลังสร้าง **เริ่มโปรเจกต์ใหม่** ทุกตัวเลือกในหน้า New project ทีละขั้น: ประเภทโปรเจกต์ บรีฟของคุณ เว็บไซต์ที่ชอบ แบรนด์ รูปภาพ ตัวเลือกการสร้าง และค่าใช้จ่ายเมื่อเริ่มต้น](https://briks.dev/th/docs/new-project)
- [กำลังสร้าง **เลือกลุคของเว็บไซต์** ดูสามลุคก่อนสร้างเว็บไซต์ แต่ละลุคเป็นบอร์ดสี ตัวอักษร มุม ปุ่ม และการ์ด พร้อมคำบนส่วนหัวของคุณเอง แล้วสร้างลุคที่เลือก](https://briks.dev/th/docs/pick-a-look)
- [กำลังสร้าง **วิธีเขียนบรีฟที่ดี** สิ่งที่ควรใส่ในบรีฟเพื่อให้การสร้างครั้งแรกตรงใจ: ธุรกิจ ผู้ชม หน้าเว็บ การกระทำหลัก ข้อเท็จจริงและน้ำเสียง พร้อมตัวอย่างก่อนและหลัง 6 ชุด](https://briks.dev/th/docs/writing-a-brief)
- [กำลังสร้าง **เว็บแอปและแดชบอร์ด** เครื่องมือสร้างแอปและแดชบอร์ดด้วย AI: สิ่งที่สร้างได้ ข้อมูลเก็บที่ไหน อะไรที่ยังไม่มี พร้อมตัวอย่างการจอง สต็อก และออเดอร์ของคาเฟ่](https://briks.dev/th/docs/web-apps-and-dashboards)

ยังติดปัญหาอยู่ไหม

เขียนถึง [hello@briks.dev](mailto:hello@briks.dev) พร้อมชื่อโปรเจกต์และสิ่งที่คุณคาดว่าจะเห็น ภาพหน้าจอช่วยได้