หากพบนักเรียนที่ขาดเรียนบ่อยและไม่ค่อยส่งงาน จะเลือกใช้เครื่องมือใดที่เหมาะสมที่สุดในการแก้ปัญหา: นี่คือโพสต์ที่เกี่ยวข้องกับหัวข้อนี้
ปัญหาของคนส่วนใหญ่ รวมถึงผมด้วย คือ เราไม่ได้เป็นกราฟิก แล้วการออกเว็บไซต์ทำไงดี? บทเรียนนี้จะพูดถึงวิธีแก้ปัญหาสำหรับคนที่ไม่ได้เป็นกราฟฟิกดีไซน์ แต่อยากทำเว็บให้ออกมาดี
“จะทำ SEO ให้ได้ผลเว็บของคุณต้องดูแล้วสวย
แต่ไม่จำเป็นต้องทำให้มันสวยเพอร์เฟคก็ได้”
Table of Contents
สารบัญ (เนื้อหาแบบสรุป)
ลักษณะของการออกแบบเว็บไซต์ที่ดี
- เว็บที่ดีในด้านทำ SEO ไม่ใช่เว็บที่สวยเพอร์เฟค
- เป็นเว็บที่ดูแล้วมีความน่าเชื่อถือ
- ความสวยของเว็บต้องให้สวยเหมาะกับกลุ่มลูกค้าของคุณ
- มีโครงสร้างข้อมูลที่เข้าใจง่ายๆ
- ลูกค้าอยากรู้สิ่งใด ต้องทำให้เข้าเจอสิ่งนั้นภายใน 3 คลิก
ตัวอย่างโครงสร้างเว็บที่ดี
โครงสร้างของเว็บที่ดี ต้องดูแล้วเข้าใจง่ายๆ แต่หากเราจะแบ่งลักษณะโครงสร้างเว็บเราจะแบ่งได้ 3 ประเภท
- เว็บ Blog/ข่าวสาร
- เว็บบริษัท (Corporate)/ ธุรกิจที่ขายบริการต่าง
- เว็บ eCommerce
หลักการออกแบบด้านความสวยงาม
- เห็นเว็บใครออกแบบสวยๆ เราก็ทำเว็บเลียนแบบไปได้เลย
- หาไอเดียจาก Pinterest
- คุมโทนสี เว็บไซต์ที่ดี อย่าใช้สีเกิน 5 สี
- ปรับสีลิงค์บนเว็บให้ชัดเจน
- ปุ่มต่างๆ บนเว็บให้เป็นไปในทิศทางเดียวกัน
- เพิ่มช่องวางระหว่างเนื้อหา จะได้ดูไม่อึดอัด เมื่อต้องเขียนข้อมูลยาวๆ
- เลือกฟอนต์ให้ดี เน้นฟอนต์ที่อ่านง่ายเป็นหลัก
- เช็คขนาดฟอนต์ให้ดี อย่าให้เล็กเกินไป
- โลโก้เว็บของเราต้องเห็นเด่นชัด จดจำง่าย
- อย่าลืมใส่ไอคอนหัวเว็บด้วย
หลักการออกแบบด้านความน่าเชื่อถือ
- ใส่ภาพคนจริงๆ เข้าไปที่เว็บ
- ข้อมูลที่ติดต่อบริษัทเรา ต้องใส่ให้ครบ
- หน้า About คือ หน้าที่ลูกค้า จะมาส่องเรา จงสร้างภาพ โชว์ภาพโรงงาน รางวัลต่าง ๆ หรือหาจุดเชื่อมโยงระหว่างคุณกับลูกค้า
- ขายสินค้าเกี่ยวกับอาหารเสริม ต้องแสดงใบรับรอง ผลงานวิจัยต่างๆ
- มี call to action ชัดเจน กระตุ้นให้คนอยากติดต่อเข้ามา
- ต้องมีหน้ารีวิว ผลงานที่มา
- หน้าที่จะทำ on page การวางข้อมูล ให้นำสิ่งที่ลูกค้าสนใจขึ้นก่อนเสมอ
บทสรุป
เรียนออนไลน์ฟรี คอร์สเรียนสร้างเว็บ WordPress+Woocommerce
คลิกเข้าเรียนที่นี่
บทเรียนพื้นฐานที่ทุกคนเรียนได้ฟรี มีดังนี้ (คลิกดู)
- การจดโดเมนและเช่าโฮส
- การทำ HTTPS
- การติดตั้ง WordPress
- การใช้ WordPress พื้นฐาน
- การติดตั้งและตั้งค่าพื้นฐาน Woocommerce
- การลงสินค้าประเภทต่างๆ
- การตั้งค่าจัดส่งประเภทต่างๆ
- การตั้งค่าชำระเงิน 3 แบบ
โอนเงิน paypal และบัตรเครดิต - การสร้างหน้าฟอร์มแจ้งชำระเงิน
- การสร้าง Contact Form
- การย้ายเว็บและการ backup เว็บ
- การติดตั้ง Google Analytic
และ Google Search Console
บทเรียนทั้งหมดนี้ ทุกคนสามารถเข้าเรียนได้ฟรี โดยไม่ต้องสมัครเรียน
ความแตกต่างระหว่าง แค่ทำเว็บได้ กับทำเว็บให้ดี ขึ้นอยู่กับความรู้พื้นฐานนั้นเอง
พื้นฐานต้องแน่นก่อน ถึงจะสามารถต่อยอดทำเว็บให้ดีในอนาคตได้ครับ
ลักษณะของการออกแบบเว็บไซตืที่ดี
เพราะเราไม่ได้ทำเว็บไซต์เพื่อส่งประกวด แต่เราสร้างเว็บไซต์เพื่อเพิ่มยอดขายให้กับธุรกิจ
– เป็นเว็บที่ดูแล้วมีความน่าเชื่อถือ
ดังนั้นหลักการออกแบบให้คุณโฟกัสที่ความน่าเชื่อถือเป็นหลัก ความน่าเชื่อถือของเว็บไซต์ มีองค์ประกอบอะไรบ้าง ในบทความนี้จะมีคำแนะนำมาให้ครับ
– ความสวยของเว็บต้องให้สวยเหมาะกับกลุ่มลูกค้าของคุณ
ในธุรกิจ offline หากคุณเปิดร้านขายอาหารตามสั่ง คุณขายอาหาร ราคาถูก ราคาต่อ 1 จานไม่เกิน 40 บาท แต่คุณเงินเหลือเยอะ ก็เลยตกแต่งหน้าร้านแบบจัดเต็ม ดูสวยมาก
ปัญหาที่ตามมา หากคุณตกแต่งหน้าร้านสวยเกินไป บางที่คนที่เดินผ่านหน้าร้านของเรา เขาก็ไม่กล้าเดินเข้ามาในร้านของเรา เพราะเขาอาจจะกลัวว่าราคาอาหารของเราจะราคาแพง
ที่มาของรูป dooddot.com
การออกแบบเว็บไซต์ ก็เช่นเดียวกัน คุณต้องชัดเจนว่า ลูกค้าของคุณคือใคร ระดับรายได้ ล่าง กลาง หรือบน คุณต้องออกแบบเว็บให้เหมาะสมกับกลุ่มลูกค้าของคุณนั้นเอง
กลุ่มลูกค้าหลักของคุณ เป็นผู้หญิง หรือผู้ชาย คุณต้องออกแบบโทนสีภาพรวมของเว็บ ให้เหมาะกับกลุ่มลูกค้าของคุณด้วยเช่นเดียวกัน
ดูตัวอย่างจากเว็บผม
ตอนแรกที่ผมเริ่มต้นสอนทำเว็บไซต์เว็บของผมยังไม่ได้ออกแบบโทนสีเป็นแบบนี้ เพราะผมคิดว่าลูกค้าหรือผู้สนใจเรียนกับผมน่าจะเป็นผู้ชายเป็นหลัก แต่พอเวลาผ่านไป คนที่สมัครเรียนส่วนใหญ่มีแต่ผู้หญิง
ผมก็เลยเปลี่ยนโทนสีของเว็บไซต์ใหม่ โดยมองหาโทนสีที่มองแล้วทำให้เกิดความรู้สึกไว้วางใจ เลยเลือกใช้สีที่เป็นโทนพาสเทล เพราะว่าคนที่เรียนคือผู้หญิง เราต้องไปสอนเขาถึงบ้าน จึงต้องเลือกโทนสีที่ดูเป็นมิตรมากที่สุด
– มีโครงสร้างข้อมูลที่เข้าใจง่ายๆ
เว็บที่ดีต้องมีโครงสร้างข้อมูลที่ดูแล้วเข้าใจง่าย โครงสร้างเว็บที่เข้าใจง่ายเป็นอย่างไร เดี๋ยวผมจะพูดถึงในหัวข้อถัดไปนะ
– ลูกค้าอยากรู้สิ่งใด ต้องทำให้เข้าเจอสิ่งนั้นภายใน 3 คลิก
หลักการออกแบบเว็บไซต์ที่ดี ต้องมีข้อมูลทุกอย่างที่ลูกค้าอยากรู้ และต้องทำให้เขาเข้าถึงสิ่งนั้นภายใน 3 คลิก จุดนี้เป็นอย่างไร ลองดูตัวอย่างเว็บ Lazada
สินค้าบนเว็บ Lazada มีหลายแสนชิ้น ทำอย่างไรให้ลูกค้าจะเจอสิ่งที่เขาสนใจไวที่สุด ลูกค้าจะค้นเจอสิ่งที่เขาสนใจผ่าน ช่องค้นหาสินค้านั้นเอง
ดังนั้นหากเว็บคุณขายสินค้าจำนวนมาก ทีตัวเว็บคุณต้องทำช่องค้นหาสินค้า ให้มันเด่นชัด และการแสดงข้อมูล ต้องทำเป็นแบบ auto fill ด้วย คือ user พิมพ์ไปยังไม่ต้องครบ จะมีชื่อสินค้าที่เกี่ยวข้องมาโชว์แบบอัตโนมัติด้วย จะช่วยให้ user เจอสิ่งเขาอยากรู้ได้อย่างรวดเร็ว
ตัวอย่างโครงสร้างเว็บที่ดี
โครงสร้างของเว็บที่ดี ต้องดูแล้วเข้าใจง่ายๆ แต่หากเราจะแบ่งลักษณะโครงสร้างเว็บเราจะแบ่งได้ 3 ประเภท
- เว็บ Blog/ข่าวสาร
- เว็บบริษัท (Corporate)/ ธุรกิจที่ขายบริการต่าง
- เว็บ eCommerce
โครงสร้างเว็บ Blog/ข่าวสาร
เว็บ Blog หรือเว็บข่าวสาร จะมีจำนวนบทความจำนวนมาก วิธีการที่จะให้ user เข้าถึงบทความหรือข่าวสารได้ง่ายๆ คุณต้องจัดหมวดหมู่บทความให้ชัดเจน
โครงสร้างเว็บประเภท Blog/ข่าวสาร จะนิยมเอาหมวดหมู่ มาวางที่เมนูบนหน้าเว็บเลย ดูการวางโครงสร้างเว็บตามรูปภาพประกอบนะ
ตัวอย่างการจัดวางหมวดหมู่ข่าวสารบนเว็บ thestandard.co
อ่านเพิ่มเติม: Category และ Tag คืออะไร อันไหนใช้เมื่อไรอย่างไร
โครงสร้างเว็บบริษัท / ธุรกิจที่ขายบริการต่างๆ
หากคุณกำลังทำเว็บบริษัท หรือธุรกิจที่ขายบริการ เช่น เว็บคลินิกเสริมความงาม เว็บสปา เว็บรับทำบัญชี ฯลฯ
หน้าเว็บหลักๆ ที่คุณจำเป็นต้องมี หากคุณทำธุรกิจเป็นเภทบริการ คือ หน้าหลัก (home page) หน้า about หน้า service และหน้า contact ซึ่งคุณต้องออกแบบและแสดงให้มันชัดเจน
หน้า service ที่ดี คุณต้องออกแบบให้ลูกค้าเข้าใจง่ายที่สุด ออกแบบตามโครงสร้างด้านล่างได้เลย
ตัวอย่างเว็บจริงที่ออกแบบโครงสร้างเว็บดี
ลองเข้าไปดูการออกแบบโครงสร้างเว็บจากเว็บตัวอย่างด้านบนนะ แล้วทำเลียนแบบเว็บเหล่านั้นได้เลยครับ
จุดต่อมาสำหรับออกแบบเว็บบริษัท / ธุรกิจที่ขายบริการต่างๆ คุณต้องสร้างความน่าเชื่อถือ ด้วยการเติมหน้า about และหน้า contact คือ ต้องมีข้อมูลที่เกี่ยวกับบริษัทตัวเองให้ครบ ที่อยู่หรือช่องทางติดต่อต้องชัดเจนและเปิดเผย
โครงสร้างเว็บ E-commerce
ถ้าคุณกำลังทำเว็บ E-commerce และมีสินค้าจำนวนมาก ก่อนที่คุณจะลงสินค้าบนเว็บ คุณต้องวางแผน site map ก่อน คือ คุณต้องจัดหมวดหมู่สินค้า จากใหญ่ไปหาเล็ก มีหมวดหมู่หลัก หมวดหมู่ย่อย
นอกจากนี้คุณต้องแสดงปุ่มตะกร้าสินค้า (cart) ให้ชัดเจน
การเรียงเมนู ต้องแบ่งจากหมวดหมู่หลัก หมวดหมู่รอง เข้าไปหาหมวดหมู่ย่อย
และที่หน้าสินค้าที่เป็นหมวดหมู่ใหญ่ หากเว็บของคุณมีสินค้าจำนวนมาก คุณควรออกแบบการวางสินค้าให้มีลักษณะเป็น Hub content หน้าตาเป็นอย่างไร ผมแนะนำให้คุณลองเข้าไปดูไอเดียการจัดวางหมวดหมู่สินค้า จาก 3 เว็บนี้ครับ
– การออกแบบเว็บที่ดี เราต้องพา user กดหน้าต่างๆ ตามที่เราวางแผนไว้ แตกประเด็นเนื้อหา จากใหญ่ไปหาเล็ก ลองดูตัวอย่างเว็บนี้ครับ
หน้าแรกของเว็บ วางเป็นหมวดหมู่ใหญ่
พอคลิกที่รูปปั๊มน้ำ จะเข้าไปเจอหมวดหมู่ย่อยของปั๊มน้ำอีกที
พอคลิกเข้าไปที่หมวดหมู่ย่อย ถึงจะค่อยเจอสินค้าทีละชิ้น
หากสินค้าบนเว็บของคุณมีจำนวนมาก อย่าลืมทำช่องค้นหาสินค้าให้มันเด่นชัด
หลักการปรับโครงสร้างด้านบน คุณต้องลองนำหลักการพวกนี้ไปปรับใช้ให้เหมาะกับธุรกิจของคุณเองนะ ซึ่งมันก็ไม่ได้มีสูตรสำเร็จตายตัว แต่ให้คำนึงการใช้งานของ user เป็นหลัก
หลักการออกแบบด้านความสวยงาม
– เห็นเว็บใครออกแบบสวยๆ เราก็ทำเว็บเลียนแบบไปได้เลย
ถ้าคุณไม่ได้ใช่กราฟฟิคดีไซต์ หรือนักออกแบบ หลักการออกแบบด้านความสวยงามที่ง่ายที่สุด คือ เห็นเว็บใครสวยๆ เราก็ออกแบบเว็บเลียนแบบไปเลย เช่น คุณขายรับผลิตร่ม แต่คุณไม่อยากไปลอกเลียนแบบเว็บไซต์ที่อยู่ในวงการเดียวกับคุณ
คุณอาจลองค้นหาตัวอย่างเว็บไซต์สวยๆ จากวงการอื่นๆ ได้ เช่น คุณลองค้นหาคำว่า “ชั้นวางสินค้า” ลงไปใน Google แล้วคุณก็ไปเจอเว็บที่ติดอันดับ 1 คือเว็บนี้ pnsteelproduct.com
สมมุติว่าคุณรู้สึกว่าเว็บนี้ออกแบบมาสวย แถมยังปรับ on page seo มาเป็นอย่างดี จนทำให้เว็บของเขาติดอันดับ 1 google ได้ ผมแนะนำว่าให้คุณออกแบบเว็บ วางข้อมูลต่างๆ เลียนแบบเว็บนี้ไปได้เลย แต่ให้เปลี่ยนสินค้าของเขาที่เป็นชั้นวางสินค้า เป็นสินค้าที่คุณขายนั้นเอง
อีก 1 ตัวอย่างการออกแบบเว็บไซต์
เว็บผมกับเว็บ thaiprostatecancer.com วางโครงสร้างข้อมูลคล้ายๆ กันเลย การเลียนแบบโครงสร้างเว็บคนอื่นแบบนี้ได้ไม่ผิด เพราะเนื้อหาด้านในเว็บเราไม่เหมือนกัน
หรือคุณอาจจะชอบเว็บ บานาน่าไอที แม้ว่าคุณจะไม่ได้ขายสินค้าไอที แต่คุณก็สามารถเลียนแบบโครงสร้างเว็บของเขาได้ คุณพอเริ่มเห็นไอเดียในการเลียนแบบเว็บคนอื่นด้านความสวยงามมั้ย
อ่านเพิ่มเติม: ตัวอย่างเว็บไซต์ WordPress สวยๆ สำหรับคนไม่มีไอเดีย
– หาไอเดียจาก Pinterest
พินเทอเรสเป็นโซเชี่ยลที่ใช้รวบรวมอินสไปเรชั่น ตัวอย่างงานหลากหลายที่ไม่ว่าใครก็ต้องรู้จัก โดยเฉพาะอย่างยิ่งงานดีไซน์ อยากได้ตัวอย่างเว็บดีไซน์สวยๆเข้ามาใช้บริการที่นี่ก็ไม่ผิดหวัง เพียงแค่พิมพ์คำว่า Web Design เข้าไปก็มีเว็บสวยๆให้ดูกันเพียบเลย แต่ถ้าใครไม่อยากหาตัวอย่างใหม่เองก็ตามมา Follow ที่บอร์ด Web Design Layout ได้เลยครับ มีตัวอย่างกว่า 500 ไอเดียอยู่ในนั้น
อ่านเพิ่มเติม: 15 แหล่งไอเดีย เว็บไซต์ดีไซน์สวย ปัง ดูดีมีสไตล์ 2020
– คุมโทนสี เว็บไซต์ที่ดี อย่าใช้สีเกิน 5 สี
เว็บจะดูสวยและน่าเชื่อถือ คุณต้องคุมโทนสี เว็บที่ดีไม่ควรใช้สีเกิน 5 สี เพราะว่าถ้าเว็บของเราใส่สีเยอะเกินไป มันจะดูเป็นลิเกๆ ไปหน่อย มันอาจจะดูลายตา หรือดูไม่ค่อยเป็นมืออาชีพ คุณลองสังเกตเว็บดังๆ ส่วนใหญ่จะมีโทนสีไม่เกิน 5 สี
หลักการหาโทนสี จะมีอยู่ด้วยกัน 2 วิธี คือ
1.หาโทนสีจากเว็บที่เราชอบ
คุณชอบเสียเขียว ก็อาจจะไปเลียนแบบโทนสีจากเว็บ ธนาคารกสิกรไทย หรือ เว็บ AIS เป็นต้น
แนะนำเครื่องมือดูสีเว็บไซต์ผ่าน Chrome : ColorZilla ลองไปติดตั้งมาเล่นดูนะ
2.หาโทนสีจากเว็บ coolors.co
ถ้าคุณไม่ใช่วิธีดูดโทนสีจากเว็บที่ชอบ คุณอาจจะค้นหาโทนสีจากเว็บแจกโทนสีโดยเฉพาะ เช่น เว็บนี้ coolors.co
-ปรับสีลิงค์บนเว็บให้ชัดเจน
เว็บที่ดีในการทำ seo ก็คือ ต้องออกแบบให้ user ที่เข้ามาบนเว็บ มีส่วนร่วมบนเว็บของเราให้มากที่สุด คือ ออกแบบเว็บยังไงก็ได้ ให้คนเข้าชมเว็บอยากกดดูนู้น ดูนี่ ไปเรื่อยๆ
ดังนั้นจุดไหนที่เราทำเป็นลิงค์บนเว็บของเรา คุณต้องใส่สีลงไปให้แตกต่างจากเนื้อหาด้วย เพื่อจะได้เป็นตัวกระตุ้นให้คนกดเข้าไปดูตามลิงค์ต่างๆ ที่เราได้วางแผนเอาไว้
อ่านเพิ่มเติมเกี่ยวกับเรื่องนี้: เทคนิคสร้าง Internal/External Link สำหรับทำ SEO อย่างมืออาชีพ
-ปุ่มต่างๆ บนเว็บให้เป็นไปในทิศทางเดียวกัน
ทุกเว็บต้องมีสิ่งที่เรียกว่า Call to Action การออกแบบ Call to action ที่ง่ายที่สุด คือ ใส่ปุ่มลงไป แน่นอนบนหน้าเว็บของคุณต้องมีปุ่ม Call to Action อยู่หลายตำแหน่ง
การทำเว็บให้ออกมาดูน่าเชื่อถือ ภาพรวมของเว็บมันต้องออกมาในแนวทางเดียวกัน ดังนั้น ปุ่มต่างๆ บนเว็บ ควรออกแบบให้มันมีหน้าตาเหมือนกัน ถ้าปุ่มมุมโค้ง ก็ต้องทำให้ปุ่มมันมีมุมโค้งมล เท่ากันทุกปุ่ม ถ้าจะทำปุ่มเป็นมุมสีเหลี่ยมๆ ก็ต้องให้มีมุมเหลี่ยมเท่ากัน เพื่อให้ภาพรวมมันออกมาดูดี
-เพิ่มช่องวางระหว่างเนื้อหา จะได้ดูไม่อึดอัด เมื่อต้องเขียนข้อมูลยาวๆ
1 หน้าเว็บ หรือ 1 หน้าที่เราทำ Landing Page สำหรับการทำ SEO คุณจำเป็นต้องเขียนให้มีตัวอักษรเยอะๆ ขั้นต่ำ 1000 คำ (ms-word) ปัญหาที่จะเกิดตามมาก็คือ พอเราใส่ตัวอักษรเยอะๆ บางทีมันดูแล้วรู้สึกอึดอัด
ทางแก้สำหรับปัญหานี้ ถ้า 1 หน้าเว็บของคุณมีตัวอักษรเยอะ ให้คุณเพิ่มช่องว่างระหว่างเนื้อหา (gap) ให้มันห่างขึ้นนั้นเอง เว็บของคุณจะได้ดูแล้วไม่อึดอัด เมื่อต้องเขียนข้อมูลยาวๆ
ลองเข้าไปดูตัวอย่างการเพิ่มความห่าง (gap) บนหน้าเว็บของผมก็ได้ครับ padveewebschool.com จะเห็นว่าผมเพิ่มช่องว่างระหว่างเนื้อหาให้เยอะขึ้น ก็จะช่วยทำให้เว็บของคุณดูสบายตาได้
– เลือกฟอนต์ให้ดี เน้นฟอนต์ที่อ่านง่ายเป็นหลัก
อย่าเลือกใช้ฟอนต์ที่ดูสวย แต่ให้เลือกใช้ฟอนต์ ที่ดูแล้วอ่านง่ายเป็นหลัก เพราะหากคุณต้องการทำ SEO ให้เว็บติดหน้าแรก Google คุณต้องทำให้ User อ่านบทความยาวๆ รู้เรื่อง และอ่านจนจบ คนจะอ่านบทความจนจบได้ เขาต้องใช้ความอดทน เราจึงเน้นเลือกฟอนต์หรือตัวอักษรที่อ่านง่ายๆ เป็นหลัก
1 เว็บ เราสามารถเลือกใส่ฟอนต์ ได้ 2 สไตล์ คือ 1 สไตล์สำหรับฟอนต์ที่เป็นหัวข้อ (h1-h6) และอีก 1 สไตล์สำหรับฟอนต์ที่เป็นเนื้อหา (p) หรือคุณจะเลือกใช้ทั้งหัวข้อ และเนื้อหาเป็นฟอนต์สไตล์ เดียวกันก็ได้ แต่จงเลือกดูฟอนต์ที่มองแล้วอ่านง่ายๆ สำหรับการอ่านข้อมูลยาวๆ เป็นหลัก
แต่ถ้าให้ผมแนะนำ ฟอนต์ที่เป็นเนื้อหา ผมแนะนำให้คุณใช้ฟอนต์สไตล์ แบบมีหัวเป็นหลักครับ หากต้องอ่านเนื้อหาที่ยาวๆ ฟอนต์มีหัว จะอ่านง่ายกว่าฟอนต์ไม่มีหัวครับ ถ้าสังเกตลองเปิดหนังสือทุกเล่มเลย ส่วนที่เป็นเนื้อหาเขาจะเลือกใช้ฟอนต์แบบมีหัวทั้งหมด แทบจะ 100% เลย
อ่านเพิ่มเติม:
– วิธีเลือกฟอนต์ไทย ให้เข้ากับเว็บไซต์และแบรนด์ตัวเอง
– วิธีเปลี่ยนฟอนต์ WordPress
– เช็คขนาดฟอนต์ให้ดี อย่าให้เล็กเกินไป
นอกจากเลือกฟอนต์ที่ดูอ่านง่ายเป็นหลัก ต้องปรับขนาดฟอนต์ อย่าให้มันดูตัวเล็กเกินไป เพราะหากเราเปิดเว็บบนมือถือ ตัวอักษรมันจะยิ่งเล็กลงไปอีกทำให้ user อ่านข้อมูลบนเว็บของเราไม่จบได้
เราควรปรับฟอนต์ให้มีขนาดใหญ่แค่ไหนดี คำแนะนำของผมคือ ให้คุณลองไปเปิดเว็บ kapook หรือ sanook ดูครับ เราอย่างปรับตัวอักษรให้เล็กกว่าเว็บพวกนี้ ถือว่าเป็นใช้ได้แล้ว
– โลโก้เว็บของเราต้องเห็นเด่นชัด จดจำง่าย
คุณต้องออกแบบโลโก้บนเว็บของคุณให้ดูเด่นชัด แบบว่าพอคนมาเจอเว็บเรา ต้องทำให้เขาจำได้เลยว่าโลโก้แบบนี้ คือเว็บของเรา ทำให้เขาไม่ต้องเดา เจอปุ๊บรู้ปั๊บ ว่าคือแบรนด์ของเรา จุดนี้คุณอาจจำเป็นต้องจ้างกราฟฟิคดีไซต์ มาช่วยออกแบบจะดีที่สุด
แนะนำบริษัทออกแบบโลโก้: branding-one.com
– อย่าลืมใส่ไอคอนหัวเว็บด้วย
ไอคอนหัวเว็บคืออะไร ลองดูภาพด้านล่างประกอบนะ
แม้ว่า site icon จะเป็นรูปภาพขนาดเล็ก แต่คุณจำเป็นต้องออกแบบให้คนจดจำได้ง่ายๆ คุณลองดูภาพด้านบน แค่เราเห็น site icon เราก็เดาได้เลยว่าเว็บเหล่านั้นคือเว็บอะไร
ดังนั้นจุดนี้คือการบ้าน คุณต้องออกแบบไอคอนหัวเว็บ ให้มันเข้าใจง่ายที่สุด ผ่านพื้นที่ขนาดเล็กให้ได้ เพื่อช่วยสร้างการจดจำในสิ่งที่เรียกว่า Brand awareness นั้นเอง
หลักการออกแบบด้านความน่าเชื่อถือ
- ใส่ภาพคนจริงๆ เข้าไปที่เว็บ
- ข้อมูลที่ติดต่อบริษัทเรา ต้องใส่ให้ครบ
- หน้า About คือ หน้าที่ลูกค้า จะมาส่องเรา จงสร้างภาพ โชว์ภาพโรงงาน รางวัลต่าง ๆ หรือหาจุดเชื่อมโยงระหว่างคุณกับลูกค้า
- ขายสินค้าเกี่ยวกับอาหารเสริม ต้องแสดงใบรับรอง ผลงานวิจัยต่างๆ
- มี call to action ชัดเจน กระตุ้นให้คนอยากติดต่อเข้ามา
- ต้องมีหน้ารีวิว ผลงานที่มา
- หน้าที่จะทำ on page การวางข้อมูล ให้นำสิ่งที่ลูกค้าสนใจขึ้นก่อนเสมอ
สรุป
การออกแบบเว็บเน้นที่ความน่าเชื่อถือ ก่อนความสวยงาม ออกแบบหน้าตาเว็บให้เหมาะกับกลุ่มลูกค้าของคุณเป็นหลัก และมีข้อมูลทุกอย่างที่ลูกค้าคุณอยากรู้
**วิธีหาไอเดียว่าลูกค้าคุณอยากรู้อะไรบ้างเกี่ยวกับธุรกิจหรือบริการของคุณ ให้คุณไปเข้าร่วม Facebook group ที่เกี่ยวข้องกับธุรกิจของคุณ แล้วไปดูว่าคนหน้าใหม่ ชอบตั้งคำถามว่าอะไรบ้าง แล้วคุณก็นำเรื่องนั้นไปเขียนไว้ที่เว็บคุณนั้นเอง
ประชาสัมพันธ์
สำหรับท่านใดที่อ่านบทความนี้แล้ว สนใจการสร้างเว็บร้านค้าออนไลน์ด้วย WordPress + Woocommerce แบบมืออาชีพ ในวันที่ 21 – 22 สิงหาคม 2564 นี้ ผมได้เปิดคอร์สสอน Woocommerce Expert แบบกลุ่มเล็กๆ 1 รอบ สอนสดรอบละ 6 คน เพื่อให้ผู้เรียนได้ประโยชน์สูงสุด เรียนรู้และทำตามไปพร้อมๆ กันได้
รายละเอียดคอร์สเรียน
สร้างเว็บร้านค้าออนไลน์ Woocommerce expert
- ค่าเรียน 9,500 บาท 21 – 22 สิงหาคม 2564
- เวลาเรียน 10.00- 16.00 น.
- เรียนกลุ่มเล็กรอบละ 6 คนเท่านั้น (ว่าง)
- เราสอนด้วยธีม Flatsome Theme
(No.1 Best selling Woocommerce Theme 2020)
- สถานที่เรียน Seatz Station
- ปากซอยงามวงศ์วาน 44 ก่อนถึง รพ.วิภาวดี ฝั่งตรงข้าม ม.เกษตรประตูงามวงศ์วาน 3
- จองที่นั่งเรียนผ่าน Lind ID : padveewebschool ได้เลยครับ
ทุกคอร์สเรียนรอบสอนสด ได้คอร์สเรียนออนไลน์แถมฟรีครับ
ทุกคอร์สเรียนรอบสอนสด
ได้คอร์สเรียนออนไลน์แถมฟรีครับ
สอบถามเพิ่มเติม
ดูตารางเรียนรอบถัดไป
คอร์สเรียนนี้เหมาะกับใคร ?
- เนื่องจากคอร์สเรียนนี้เราสอนเป็นกลุ่ม จึงไม่เหมาะกับทุกคน
- คอร์สนี้เหมาะสำหรับผู้ที่เคยใช้งาน WordPress มาบ้าง รู้พื้นฐานแบบงูๆปลาๆ หากคุณเคยลง WordPress เอง ลงปลั๊กอินได้ เคยสร้าง page หรือ post แบบนี้เรียนได้
- หรือหากคุณไม่เคยใช้งาน WordPress มาก่อนเลย แต่คุณมีทักษะไอที เช่น เคยใช้พวกโปรแกรมกราฟฟิค Photoshop, illustrator เคยใช้พวกโปรแกรมตัดต่อวีดีโอ อะไรก็ได้มาบ้าง
- ถ้าคุณเคยใช้โปรแกรมดังกล่าวข้างต้น แสดงว่าคุณมีทักษะไอที สามารถลงเรียนคอร์สนี้ได้
- เนื่องจากเราเรียนกันหลายคน หากผู้เรียนไม่มีทักษะไอทีเลยจะทำให้เรียนรู้ตามเพื่อนไม่ทันนั้นเอง
คอร์สเรียนนี้ไม่เหมาะกับใครบ้าง ?
- ผู้ที่ไม่มีทักษะด้านไอทีต่างๆ
- ผู้สูงวัยที่ใช้คอมพิวเตอร์ยังไม่คล่อง หรือหากรู้สึกว่าตัวเองเรียนรู้ได้ช้า คุณไม่เหมาะกับคอร์สเรียนนี้
- สำหรับคนที่ไม่มีทักษะด้านไอที หรือคิดว่าตนเองเรียนรู้ได้ช้า และชอบความเป็นส่วนตัว แต่ต้องการที่จะสร้างเว็บด้วยตนเอง
- ผมแนะนำให้ลงเรียนรอบสอนแบบตัวต่อตัวจะดีที่สุดครับ
เรียนแบบตัวต่อตัว
แผนที่สถานที่เรียน (รอบสอนกลุ่ม)
สถานที่เรียน Seatz Station
ปากซอยงามวงศ์วาน 44 ก่อนถึง รพ.วิภาวดี
ฝั่งตรงข้าม ม.เกษตรประตูงามวงศ์วาน 3
บรรยากาศคลาสเรียน
[NEW] การออกแบบเว็บไซต์ที่ดี ในด้าน SEO มีหลักการอย่างไร ปรับแต่งจุดไหนบ้าง? | หากพบนักเรียนที่ขาดเรียนบ่อยและไม่ค่อยส่งงาน จะเลือกใช้เครื่องมือใดที่เหมาะสมที่สุดในการแก้ปัญหา – NATAVIGUIDES
ปัญหาของคนส่วนใหญ่ รวมถึงผมด้วย คือ เราไม่ได้เป็นกราฟิก แล้วการออกเว็บไซต์ทำไงดี? บทเรียนนี้จะพูดถึงวิธีแก้ปัญหาสำหรับคนที่ไม่ได้เป็นกราฟฟิกดีไซน์ แต่อยากทำเว็บให้ออกมาดี
“จะทำ SEO ให้ได้ผลเว็บของคุณต้องดูแล้วสวย
แต่ไม่จำเป็นต้องทำให้มันสวยเพอร์เฟคก็ได้”
สารบัญ (เนื้อหาแบบสรุป)
ลักษณะของการออกแบบเว็บไซต์ที่ดี
- เว็บที่ดีในด้านทำ SEO ไม่ใช่เว็บที่สวยเพอร์เฟค
- เป็นเว็บที่ดูแล้วมีความน่าเชื่อถือ
- ความสวยของเว็บต้องให้สวยเหมาะกับกลุ่มลูกค้าของคุณ
- มีโครงสร้างข้อมูลที่เข้าใจง่ายๆ
- ลูกค้าอยากรู้สิ่งใด ต้องทำให้เข้าเจอสิ่งนั้นภายใน 3 คลิก
ตัวอย่างโครงสร้างเว็บที่ดี
โครงสร้างของเว็บที่ดี ต้องดูแล้วเข้าใจง่ายๆ แต่หากเราจะแบ่งลักษณะโครงสร้างเว็บเราจะแบ่งได้ 3 ประเภท
- เว็บ Blog/ข่าวสาร
- เว็บบริษัท (Corporate)/ ธุรกิจที่ขายบริการต่าง
- เว็บ eCommerce
หลักการออกแบบด้านความสวยงาม
- เห็นเว็บใครออกแบบสวยๆ เราก็ทำเว็บเลียนแบบไปได้เลย
- หาไอเดียจาก Pinterest
- คุมโทนสี เว็บไซต์ที่ดี อย่าใช้สีเกิน 5 สี
- ปรับสีลิงค์บนเว็บให้ชัดเจน
- ปุ่มต่างๆ บนเว็บให้เป็นไปในทิศทางเดียวกัน
- เพิ่มช่องวางระหว่างเนื้อหา จะได้ดูไม่อึดอัด เมื่อต้องเขียนข้อมูลยาวๆ
- เลือกฟอนต์ให้ดี เน้นฟอนต์ที่อ่านง่ายเป็นหลัก
- เช็คขนาดฟอนต์ให้ดี อย่าให้เล็กเกินไป
- โลโก้เว็บของเราต้องเห็นเด่นชัด จดจำง่าย
- อย่าลืมใส่ไอคอนหัวเว็บด้วย
หลักการออกแบบด้านความน่าเชื่อถือ
- ใส่ภาพคนจริงๆ เข้าไปที่เว็บ
- ข้อมูลที่ติดต่อบริษัทเรา ต้องใส่ให้ครบ
- หน้า About คือ หน้าที่ลูกค้า จะมาส่องเรา จงสร้างภาพ โชว์ภาพโรงงาน รางวัลต่าง ๆ หรือหาจุดเชื่อมโยงระหว่างคุณกับลูกค้า
- ขายสินค้าเกี่ยวกับอาหารเสริม ต้องแสดงใบรับรอง ผลงานวิจัยต่างๆ
- มี call to action ชัดเจน กระตุ้นให้คนอยากติดต่อเข้ามา
- ต้องมีหน้ารีวิว ผลงานที่มา
- หน้าที่จะทำ on page การวางข้อมูล ให้นำสิ่งที่ลูกค้าสนใจขึ้นก่อนเสมอ
บทสรุป
เรียนออนไลน์ฟรี คอร์สเรียนสร้างเว็บ WordPress+Woocommerce
คลิกเข้าเรียนที่นี่
บทเรียนพื้นฐานที่ทุกคนเรียนได้ฟรี มีดังนี้ (คลิกดู)
- การจดโดเมนและเช่าโฮส
- การทำ HTTPS
- การติดตั้ง WordPress
- การใช้ WordPress พื้นฐาน
- การติดตั้งและตั้งค่าพื้นฐาน Woocommerce
- การลงสินค้าประเภทต่างๆ
- การตั้งค่าจัดส่งประเภทต่างๆ
- การตั้งค่าชำระเงิน 3 แบบ
โอนเงิน paypal และบัตรเครดิต - การสร้างหน้าฟอร์มแจ้งชำระเงิน
- การสร้าง Contact Form
- การย้ายเว็บและการ backup เว็บ
- การติดตั้ง Google Analytic
และ Google Search Console
บทเรียนทั้งหมดนี้ ทุกคนสามารถเข้าเรียนได้ฟรี โดยไม่ต้องสมัครเรียน
ความแตกต่างระหว่าง แค่ทำเว็บได้ กับทำเว็บให้ดี ขึ้นอยู่กับความรู้พื้นฐานนั้นเอง
พื้นฐานต้องแน่นก่อน ถึงจะสามารถต่อยอดทำเว็บให้ดีในอนาคตได้ครับ
ลักษณะของการออกแบบเว็บไซตืที่ดี
เพราะเราไม่ได้ทำเว็บไซต์เพื่อส่งประกวด แต่เราสร้างเว็บไซต์เพื่อเพิ่มยอดขายให้กับธุรกิจ
– เป็นเว็บที่ดูแล้วมีความน่าเชื่อถือ
ดังนั้นหลักการออกแบบให้คุณโฟกัสที่ความน่าเชื่อถือเป็นหลัก ความน่าเชื่อถือของเว็บไซต์ มีองค์ประกอบอะไรบ้าง ในบทความนี้จะมีคำแนะนำมาให้ครับ
– ความสวยของเว็บต้องให้สวยเหมาะกับกลุ่มลูกค้าของคุณ
ในธุรกิจ offline หากคุณเปิดร้านขายอาหารตามสั่ง คุณขายอาหาร ราคาถูก ราคาต่อ 1 จานไม่เกิน 40 บาท แต่คุณเงินเหลือเยอะ ก็เลยตกแต่งหน้าร้านแบบจัดเต็ม ดูสวยมาก
ปัญหาที่ตามมา หากคุณตกแต่งหน้าร้านสวยเกินไป บางที่คนที่เดินผ่านหน้าร้านของเรา เขาก็ไม่กล้าเดินเข้ามาในร้านของเรา เพราะเขาอาจจะกลัวว่าราคาอาหารของเราจะราคาแพง
ที่มาของรูป dooddot.com
การออกแบบเว็บไซต์ ก็เช่นเดียวกัน คุณต้องชัดเจนว่า ลูกค้าของคุณคือใคร ระดับรายได้ ล่าง กลาง หรือบน คุณต้องออกแบบเว็บให้เหมาะสมกับกลุ่มลูกค้าของคุณนั้นเอง
กลุ่มลูกค้าหลักของคุณ เป็นผู้หญิง หรือผู้ชาย คุณต้องออกแบบโทนสีภาพรวมของเว็บ ให้เหมาะกับกลุ่มลูกค้าของคุณด้วยเช่นเดียวกัน
ดูตัวอย่างจากเว็บผม
ตอนแรกที่ผมเริ่มต้นสอนทำเว็บไซต์เว็บของผมยังไม่ได้ออกแบบโทนสีเป็นแบบนี้ เพราะผมคิดว่าลูกค้าหรือผู้สนใจเรียนกับผมน่าจะเป็นผู้ชายเป็นหลัก แต่พอเวลาผ่านไป คนที่สมัครเรียนส่วนใหญ่มีแต่ผู้หญิง
ผมก็เลยเปลี่ยนโทนสีของเว็บไซต์ใหม่ โดยมองหาโทนสีที่มองแล้วทำให้เกิดความรู้สึกไว้วางใจ เลยเลือกใช้สีที่เป็นโทนพาสเทล เพราะว่าคนที่เรียนคือผู้หญิง เราต้องไปสอนเขาถึงบ้าน จึงต้องเลือกโทนสีที่ดูเป็นมิตรมากที่สุด
– มีโครงสร้างข้อมูลที่เข้าใจง่ายๆ
เว็บที่ดีต้องมีโครงสร้างข้อมูลที่ดูแล้วเข้าใจง่าย โครงสร้างเว็บที่เข้าใจง่ายเป็นอย่างไร เดี๋ยวผมจะพูดถึงในหัวข้อถัดไปนะ
– ลูกค้าอยากรู้สิ่งใด ต้องทำให้เข้าเจอสิ่งนั้นภายใน 3 คลิก
หลักการออกแบบเว็บไซต์ที่ดี ต้องมีข้อมูลทุกอย่างที่ลูกค้าอยากรู้ และต้องทำให้เขาเข้าถึงสิ่งนั้นภายใน 3 คลิก จุดนี้เป็นอย่างไร ลองดูตัวอย่างเว็บ Lazada
สินค้าบนเว็บ Lazada มีหลายแสนชิ้น ทำอย่างไรให้ลูกค้าจะเจอสิ่งที่เขาสนใจไวที่สุด ลูกค้าจะค้นเจอสิ่งที่เขาสนใจผ่าน ช่องค้นหาสินค้านั้นเอง
ดังนั้นหากเว็บคุณขายสินค้าจำนวนมาก ทีตัวเว็บคุณต้องทำช่องค้นหาสินค้า ให้มันเด่นชัด และการแสดงข้อมูล ต้องทำเป็นแบบ auto fill ด้วย คือ user พิมพ์ไปยังไม่ต้องครบ จะมีชื่อสินค้าที่เกี่ยวข้องมาโชว์แบบอัตโนมัติด้วย จะช่วยให้ user เจอสิ่งเขาอยากรู้ได้อย่างรวดเร็ว
ตัวอย่างโครงสร้างเว็บที่ดี
โครงสร้างของเว็บที่ดี ต้องดูแล้วเข้าใจง่ายๆ แต่หากเราจะแบ่งลักษณะโครงสร้างเว็บเราจะแบ่งได้ 3 ประเภท
- เว็บ Blog/ข่าวสาร
- เว็บบริษัท (Corporate)/ ธุรกิจที่ขายบริการต่าง
- เว็บ eCommerce
โครงสร้างเว็บ Blog/ข่าวสาร
เว็บ Blog หรือเว็บข่าวสาร จะมีจำนวนบทความจำนวนมาก วิธีการที่จะให้ user เข้าถึงบทความหรือข่าวสารได้ง่ายๆ คุณต้องจัดหมวดหมู่บทความให้ชัดเจน
โครงสร้างเว็บประเภท Blog/ข่าวสาร จะนิยมเอาหมวดหมู่ มาวางที่เมนูบนหน้าเว็บเลย ดูการวางโครงสร้างเว็บตามรูปภาพประกอบนะ
ตัวอย่างการจัดวางหมวดหมู่ข่าวสารบนเว็บ thestandard.co
อ่านเพิ่มเติม: Category และ Tag คืออะไร อันไหนใช้เมื่อไรอย่างไร
โครงสร้างเว็บบริษัท / ธุรกิจที่ขายบริการต่างๆ
หากคุณกำลังทำเว็บบริษัท หรือธุรกิจที่ขายบริการ เช่น เว็บคลินิกเสริมความงาม เว็บสปา เว็บรับทำบัญชี ฯลฯ
หน้าเว็บหลักๆ ที่คุณจำเป็นต้องมี หากคุณทำธุรกิจเป็นเภทบริการ คือ หน้าหลัก (home page) หน้า about หน้า service และหน้า contact ซึ่งคุณต้องออกแบบและแสดงให้มันชัดเจน
หน้า service ที่ดี คุณต้องออกแบบให้ลูกค้าเข้าใจง่ายที่สุด ออกแบบตามโครงสร้างด้านล่างได้เลย
ตัวอย่างเว็บจริงที่ออกแบบโครงสร้างเว็บดี
ลองเข้าไปดูการออกแบบโครงสร้างเว็บจากเว็บตัวอย่างด้านบนนะ แล้วทำเลียนแบบเว็บเหล่านั้นได้เลยครับ
จุดต่อมาสำหรับออกแบบเว็บบริษัท / ธุรกิจที่ขายบริการต่างๆ คุณต้องสร้างความน่าเชื่อถือ ด้วยการเติมหน้า about และหน้า contact คือ ต้องมีข้อมูลที่เกี่ยวกับบริษัทตัวเองให้ครบ ที่อยู่หรือช่องทางติดต่อต้องชัดเจนและเปิดเผย
โครงสร้างเว็บ E-commerce
ถ้าคุณกำลังทำเว็บ E-commerce และมีสินค้าจำนวนมาก ก่อนที่คุณจะลงสินค้าบนเว็บ คุณต้องวางแผน site map ก่อน คือ คุณต้องจัดหมวดหมู่สินค้า จากใหญ่ไปหาเล็ก มีหมวดหมู่หลัก หมวดหมู่ย่อย
นอกจากนี้คุณต้องแสดงปุ่มตะกร้าสินค้า (cart) ให้ชัดเจน
การเรียงเมนู ต้องแบ่งจากหมวดหมู่หลัก หมวดหมู่รอง เข้าไปหาหมวดหมู่ย่อย
และที่หน้าสินค้าที่เป็นหมวดหมู่ใหญ่ หากเว็บของคุณมีสินค้าจำนวนมาก คุณควรออกแบบการวางสินค้าให้มีลักษณะเป็น Hub content หน้าตาเป็นอย่างไร ผมแนะนำให้คุณลองเข้าไปดูไอเดียการจัดวางหมวดหมู่สินค้า จาก 3 เว็บนี้ครับ
– การออกแบบเว็บที่ดี เราต้องพา user กดหน้าต่างๆ ตามที่เราวางแผนไว้ แตกประเด็นเนื้อหา จากใหญ่ไปหาเล็ก ลองดูตัวอย่างเว็บนี้ครับ
หน้าแรกของเว็บ วางเป็นหมวดหมู่ใหญ่
พอคลิกที่รูปปั๊มน้ำ จะเข้าไปเจอหมวดหมู่ย่อยของปั๊มน้ำอีกที
พอคลิกเข้าไปที่หมวดหมู่ย่อย ถึงจะค่อยเจอสินค้าทีละชิ้น
หากสินค้าบนเว็บของคุณมีจำนวนมาก อย่าลืมทำช่องค้นหาสินค้าให้มันเด่นชัด
หลักการปรับโครงสร้างด้านบน คุณต้องลองนำหลักการพวกนี้ไปปรับใช้ให้เหมาะกับธุรกิจของคุณเองนะ ซึ่งมันก็ไม่ได้มีสูตรสำเร็จตายตัว แต่ให้คำนึงการใช้งานของ user เป็นหลัก
หลักการออกแบบด้านความสวยงาม
– เห็นเว็บใครออกแบบสวยๆ เราก็ทำเว็บเลียนแบบไปได้เลย
ถ้าคุณไม่ได้ใช่กราฟฟิคดีไซต์ หรือนักออกแบบ หลักการออกแบบด้านความสวยงามที่ง่ายที่สุด คือ เห็นเว็บใครสวยๆ เราก็ออกแบบเว็บเลียนแบบไปเลย เช่น คุณขายรับผลิตร่ม แต่คุณไม่อยากไปลอกเลียนแบบเว็บไซต์ที่อยู่ในวงการเดียวกับคุณ
คุณอาจลองค้นหาตัวอย่างเว็บไซต์สวยๆ จากวงการอื่นๆ ได้ เช่น คุณลองค้นหาคำว่า “ชั้นวางสินค้า” ลงไปใน Google แล้วคุณก็ไปเจอเว็บที่ติดอันดับ 1 คือเว็บนี้ pnsteelproduct.com
สมมุติว่าคุณรู้สึกว่าเว็บนี้ออกแบบมาสวย แถมยังปรับ on page seo มาเป็นอย่างดี จนทำให้เว็บของเขาติดอันดับ 1 google ได้ ผมแนะนำว่าให้คุณออกแบบเว็บ วางข้อมูลต่างๆ เลียนแบบเว็บนี้ไปได้เลย แต่ให้เปลี่ยนสินค้าของเขาที่เป็นชั้นวางสินค้า เป็นสินค้าที่คุณขายนั้นเอง
อีก 1 ตัวอย่างการออกแบบเว็บไซต์
เว็บผมกับเว็บ thaiprostatecancer.com วางโครงสร้างข้อมูลคล้ายๆ กันเลย การเลียนแบบโครงสร้างเว็บคนอื่นแบบนี้ได้ไม่ผิด เพราะเนื้อหาด้านในเว็บเราไม่เหมือนกัน
หรือคุณอาจจะชอบเว็บ บานาน่าไอที แม้ว่าคุณจะไม่ได้ขายสินค้าไอที แต่คุณก็สามารถเลียนแบบโครงสร้างเว็บของเขาได้ คุณพอเริ่มเห็นไอเดียในการเลียนแบบเว็บคนอื่นด้านความสวยงามมั้ย
อ่านเพิ่มเติม: ตัวอย่างเว็บไซต์ WordPress สวยๆ สำหรับคนไม่มีไอเดีย
– หาไอเดียจาก Pinterest
พินเทอเรสเป็นโซเชี่ยลที่ใช้รวบรวมอินสไปเรชั่น ตัวอย่างงานหลากหลายที่ไม่ว่าใครก็ต้องรู้จัก โดยเฉพาะอย่างยิ่งงานดีไซน์ อยากได้ตัวอย่างเว็บดีไซน์สวยๆเข้ามาใช้บริการที่นี่ก็ไม่ผิดหวัง เพียงแค่พิมพ์คำว่า Web Design เข้าไปก็มีเว็บสวยๆให้ดูกันเพียบเลย แต่ถ้าใครไม่อยากหาตัวอย่างใหม่เองก็ตามมา Follow ที่บอร์ด Web Design Layout ได้เลยครับ มีตัวอย่างกว่า 500 ไอเดียอยู่ในนั้น
อ่านเพิ่มเติม: 15 แหล่งไอเดีย เว็บไซต์ดีไซน์สวย ปัง ดูดีมีสไตล์ 2020
– คุมโทนสี เว็บไซต์ที่ดี อย่าใช้สีเกิน 5 สี
เว็บจะดูสวยและน่าเชื่อถือ คุณต้องคุมโทนสี เว็บที่ดีไม่ควรใช้สีเกิน 5 สี เพราะว่าถ้าเว็บของเราใส่สีเยอะเกินไป มันจะดูเป็นลิเกๆ ไปหน่อย มันอาจจะดูลายตา หรือดูไม่ค่อยเป็นมืออาชีพ คุณลองสังเกตเว็บดังๆ ส่วนใหญ่จะมีโทนสีไม่เกิน 5 สี
หลักการหาโทนสี จะมีอยู่ด้วยกัน 2 วิธี คือ
1.หาโทนสีจากเว็บที่เราชอบ
คุณชอบเสียเขียว ก็อาจจะไปเลียนแบบโทนสีจากเว็บ ธนาคารกสิกรไทย หรือ เว็บ AIS เป็นต้น
แนะนำเครื่องมือดูสีเว็บไซต์ผ่าน Chrome : ColorZilla ลองไปติดตั้งมาเล่นดูนะ
2.หาโทนสีจากเว็บ coolors.co
ถ้าคุณไม่ใช่วิธีดูดโทนสีจากเว็บที่ชอบ คุณอาจจะค้นหาโทนสีจากเว็บแจกโทนสีโดยเฉพาะ เช่น เว็บนี้ coolors.co
-ปรับสีลิงค์บนเว็บให้ชัดเจน
เว็บที่ดีในการทำ seo ก็คือ ต้องออกแบบให้ user ที่เข้ามาบนเว็บ มีส่วนร่วมบนเว็บของเราให้มากที่สุด คือ ออกแบบเว็บยังไงก็ได้ ให้คนเข้าชมเว็บอยากกดดูนู้น ดูนี่ ไปเรื่อยๆ
ดังนั้นจุดไหนที่เราทำเป็นลิงค์บนเว็บของเรา คุณต้องใส่สีลงไปให้แตกต่างจากเนื้อหาด้วย เพื่อจะได้เป็นตัวกระตุ้นให้คนกดเข้าไปดูตามลิงค์ต่างๆ ที่เราได้วางแผนเอาไว้
อ่านเพิ่มเติมเกี่ยวกับเรื่องนี้: เทคนิคสร้าง Internal/External Link สำหรับทำ SEO อย่างมืออาชีพ
-ปุ่มต่างๆ บนเว็บให้เป็นไปในทิศทางเดียวกัน
ทุกเว็บต้องมีสิ่งที่เรียกว่า Call to Action การออกแบบ Call to action ที่ง่ายที่สุด คือ ใส่ปุ่มลงไป แน่นอนบนหน้าเว็บของคุณต้องมีปุ่ม Call to Action อยู่หลายตำแหน่ง
การทำเว็บให้ออกมาดูน่าเชื่อถือ ภาพรวมของเว็บมันต้องออกมาในแนวทางเดียวกัน ดังนั้น ปุ่มต่างๆ บนเว็บ ควรออกแบบให้มันมีหน้าตาเหมือนกัน ถ้าปุ่มมุมโค้ง ก็ต้องทำให้ปุ่มมันมีมุมโค้งมล เท่ากันทุกปุ่ม ถ้าจะทำปุ่มเป็นมุมสีเหลี่ยมๆ ก็ต้องให้มีมุมเหลี่ยมเท่ากัน เพื่อให้ภาพรวมมันออกมาดูดี
-เพิ่มช่องวางระหว่างเนื้อหา จะได้ดูไม่อึดอัด เมื่อต้องเขียนข้อมูลยาวๆ
1 หน้าเว็บ หรือ 1 หน้าที่เราทำ Landing Page สำหรับการทำ SEO คุณจำเป็นต้องเขียนให้มีตัวอักษรเยอะๆ ขั้นต่ำ 1000 คำ (ms-word) ปัญหาที่จะเกิดตามมาก็คือ พอเราใส่ตัวอักษรเยอะๆ บางทีมันดูแล้วรู้สึกอึดอัด
ทางแก้สำหรับปัญหานี้ ถ้า 1 หน้าเว็บของคุณมีตัวอักษรเยอะ ให้คุณเพิ่มช่องว่างระหว่างเนื้อหา (gap) ให้มันห่างขึ้นนั้นเอง เว็บของคุณจะได้ดูแล้วไม่อึดอัด เมื่อต้องเขียนข้อมูลยาวๆ
ลองเข้าไปดูตัวอย่างการเพิ่มความห่าง (gap) บนหน้าเว็บของผมก็ได้ครับ padveewebschool.com จะเห็นว่าผมเพิ่มช่องว่างระหว่างเนื้อหาให้เยอะขึ้น ก็จะช่วยทำให้เว็บของคุณดูสบายตาได้
– เลือกฟอนต์ให้ดี เน้นฟอนต์ที่อ่านง่ายเป็นหลัก
อย่าเลือกใช้ฟอนต์ที่ดูสวย แต่ให้เลือกใช้ฟอนต์ ที่ดูแล้วอ่านง่ายเป็นหลัก เพราะหากคุณต้องการทำ SEO ให้เว็บติดหน้าแรก Google คุณต้องทำให้ User อ่านบทความยาวๆ รู้เรื่อง และอ่านจนจบ คนจะอ่านบทความจนจบได้ เขาต้องใช้ความอดทน เราจึงเน้นเลือกฟอนต์หรือตัวอักษรที่อ่านง่ายๆ เป็นหลัก
1 เว็บ เราสามารถเลือกใส่ฟอนต์ ได้ 2 สไตล์ คือ 1 สไตล์สำหรับฟอนต์ที่เป็นหัวข้อ (h1-h6) และอีก 1 สไตล์สำหรับฟอนต์ที่เป็นเนื้อหา (p) หรือคุณจะเลือกใช้ทั้งหัวข้อ และเนื้อหาเป็นฟอนต์สไตล์ เดียวกันก็ได้ แต่จงเลือกดูฟอนต์ที่มองแล้วอ่านง่ายๆ สำหรับการอ่านข้อมูลยาวๆ เป็นหลัก
แต่ถ้าให้ผมแนะนำ ฟอนต์ที่เป็นเนื้อหา ผมแนะนำให้คุณใช้ฟอนต์สไตล์ แบบมีหัวเป็นหลักครับ หากต้องอ่านเนื้อหาที่ยาวๆ ฟอนต์มีหัว จะอ่านง่ายกว่าฟอนต์ไม่มีหัวครับ ถ้าสังเกตลองเปิดหนังสือทุกเล่มเลย ส่วนที่เป็นเนื้อหาเขาจะเลือกใช้ฟอนต์แบบมีหัวทั้งหมด แทบจะ 100% เลย
อ่านเพิ่มเติม:
– วิธีเลือกฟอนต์ไทย ให้เข้ากับเว็บไซต์และแบรนด์ตัวเอง
– วิธีเปลี่ยนฟอนต์ WordPress
– เช็คขนาดฟอนต์ให้ดี อย่าให้เล็กเกินไป
นอกจากเลือกฟอนต์ที่ดูอ่านง่ายเป็นหลัก ต้องปรับขนาดฟอนต์ อย่าให้มันดูตัวเล็กเกินไป เพราะหากเราเปิดเว็บบนมือถือ ตัวอักษรมันจะยิ่งเล็กลงไปอีกทำให้ user อ่านข้อมูลบนเว็บของเราไม่จบได้
เราควรปรับฟอนต์ให้มีขนาดใหญ่แค่ไหนดี คำแนะนำของผมคือ ให้คุณลองไปเปิดเว็บ kapook หรือ sanook ดูครับ เราอย่างปรับตัวอักษรให้เล็กกว่าเว็บพวกนี้ ถือว่าเป็นใช้ได้แล้ว
– โลโก้เว็บของเราต้องเห็นเด่นชัด จดจำง่าย
คุณต้องออกแบบโลโก้บนเว็บของคุณให้ดูเด่นชัด แบบว่าพอคนมาเจอเว็บเรา ต้องทำให้เขาจำได้เลยว่าโลโก้แบบนี้ คือเว็บของเรา ทำให้เขาไม่ต้องเดา เจอปุ๊บรู้ปั๊บ ว่าคือแบรนด์ของเรา จุดนี้คุณอาจจำเป็นต้องจ้างกราฟฟิคดีไซต์ มาช่วยออกแบบจะดีที่สุด
แนะนำบริษัทออกแบบโลโก้: branding-one.com
– อย่าลืมใส่ไอคอนหัวเว็บด้วย
ไอคอนหัวเว็บคืออะไร ลองดูภาพด้านล่างประกอบนะ
แม้ว่า site icon จะเป็นรูปภาพขนาดเล็ก แต่คุณจำเป็นต้องออกแบบให้คนจดจำได้ง่ายๆ คุณลองดูภาพด้านบน แค่เราเห็น site icon เราก็เดาได้เลยว่าเว็บเหล่านั้นคือเว็บอะไร
ดังนั้นจุดนี้คือการบ้าน คุณต้องออกแบบไอคอนหัวเว็บ ให้มันเข้าใจง่ายที่สุด ผ่านพื้นที่ขนาดเล็กให้ได้ เพื่อช่วยสร้างการจดจำในสิ่งที่เรียกว่า Brand awareness นั้นเอง
หลักการออกแบบด้านความน่าเชื่อถือ
- ใส่ภาพคนจริงๆ เข้าไปที่เว็บ
- ข้อมูลที่ติดต่อบริษัทเรา ต้องใส่ให้ครบ
- หน้า About คือ หน้าที่ลูกค้า จะมาส่องเรา จงสร้างภาพ โชว์ภาพโรงงาน รางวัลต่าง ๆ หรือหาจุดเชื่อมโยงระหว่างคุณกับลูกค้า
- ขายสินค้าเกี่ยวกับอาหารเสริม ต้องแสดงใบรับรอง ผลงานวิจัยต่างๆ
- มี call to action ชัดเจน กระตุ้นให้คนอยากติดต่อเข้ามา
- ต้องมีหน้ารีวิว ผลงานที่มา
- หน้าที่จะทำ on page การวางข้อมูล ให้นำสิ่งที่ลูกค้าสนใจขึ้นก่อนเสมอ
สรุป
การออกแบบเว็บเน้นที่ความน่าเชื่อถือ ก่อนความสวยงาม ออกแบบหน้าตาเว็บให้เหมาะกับกลุ่มลูกค้าของคุณเป็นหลัก และมีข้อมูลทุกอย่างที่ลูกค้าคุณอยากรู้
**วิธีหาไอเดียว่าลูกค้าคุณอยากรู้อะไรบ้างเกี่ยวกับธุรกิจหรือบริการของคุณ ให้คุณไปเข้าร่วม Facebook group ที่เกี่ยวข้องกับธุรกิจของคุณ แล้วไปดูว่าคนหน้าใหม่ ชอบตั้งคำถามว่าอะไรบ้าง แล้วคุณก็นำเรื่องนั้นไปเขียนไว้ที่เว็บคุณนั้นเอง
ประชาสัมพันธ์
สำหรับท่านใดที่อ่านบทความนี้แล้ว สนใจการสร้างเว็บร้านค้าออนไลน์ด้วย WordPress + Woocommerce แบบมืออาชีพ ในวันที่ 21 – 22 สิงหาคม 2564 นี้ ผมได้เปิดคอร์สสอน Woocommerce Expert แบบกลุ่มเล็กๆ 1 รอบ สอนสดรอบละ 6 คน เพื่อให้ผู้เรียนได้ประโยชน์สูงสุด เรียนรู้และทำตามไปพร้อมๆ กันได้
รายละเอียดคอร์สเรียน
สร้างเว็บร้านค้าออนไลน์ Woocommerce expert
- ค่าเรียน 9,500 บาท 21 – 22 สิงหาคม 2564
- เวลาเรียน 10.00- 16.00 น.
- เรียนกลุ่มเล็กรอบละ 6 คนเท่านั้น (ว่าง)
- เราสอนด้วยธีม Flatsome Theme
(No.1 Best selling Woocommerce Theme 2020)
- สถานที่เรียน Seatz Station
- ปากซอยงามวงศ์วาน 44 ก่อนถึง รพ.วิภาวดี ฝั่งตรงข้าม ม.เกษตรประตูงามวงศ์วาน 3
- จองที่นั่งเรียนผ่าน Lind ID : padveewebschool ได้เลยครับ
ทุกคอร์สเรียนรอบสอนสด ได้คอร์สเรียนออนไลน์แถมฟรีครับ
ทุกคอร์สเรียนรอบสอนสด
ได้คอร์สเรียนออนไลน์แถมฟรีครับ
สอบถามเพิ่มเติม
ดูตารางเรียนรอบถัดไป
คอร์สเรียนนี้เหมาะกับใคร ?
- เนื่องจากคอร์สเรียนนี้เราสอนเป็นกลุ่ม จึงไม่เหมาะกับทุกคน
- คอร์สนี้เหมาะสำหรับผู้ที่เคยใช้งาน WordPress มาบ้าง รู้พื้นฐานแบบงูๆปลาๆ หากคุณเคยลง WordPress เอง ลงปลั๊กอินได้ เคยสร้าง page หรือ post แบบนี้เรียนได้
- หรือหากคุณไม่เคยใช้งาน WordPress มาก่อนเลย แต่คุณมีทักษะไอที เช่น เคยใช้พวกโปรแกรมกราฟฟิค Photoshop, illustrator เคยใช้พวกโปรแกรมตัดต่อวีดีโอ อะไรก็ได้มาบ้าง
- ถ้าคุณเคยใช้โปรแกรมดังกล่าวข้างต้น แสดงว่าคุณมีทักษะไอที สามารถลงเรียนคอร์สนี้ได้
- เนื่องจากเราเรียนกันหลายคน หากผู้เรียนไม่มีทักษะไอทีเลยจะทำให้เรียนรู้ตามเพื่อนไม่ทันนั้นเอง
คอร์สเรียนนี้ไม่เหมาะกับใครบ้าง ?
- ผู้ที่ไม่มีทักษะด้านไอทีต่างๆ
- ผู้สูงวัยที่ใช้คอมพิวเตอร์ยังไม่คล่อง หรือหากรู้สึกว่าตัวเองเรียนรู้ได้ช้า คุณไม่เหมาะกับคอร์สเรียนนี้
- สำหรับคนที่ไม่มีทักษะด้านไอที หรือคิดว่าตนเองเรียนรู้ได้ช้า และชอบความเป็นส่วนตัว แต่ต้องการที่จะสร้างเว็บด้วยตนเอง
- ผมแนะนำให้ลงเรียนรอบสอนแบบตัวต่อตัวจะดีที่สุดครับ
เรียนแบบตัวต่อตัว
แผนที่สถานที่เรียน (รอบสอนกลุ่ม)
สถานที่เรียน Seatz Station
ปากซอยงามวงศ์วาน 44 ก่อนถึง รพ.วิภาวดี
ฝั่งตรงข้าม ม.เกษตรประตูงามวงศ์วาน 3
บรรยากาศคลาสเรียน
เฉี๊ยบ เฉียบ Ep.83 : เรียนออนไลน์ที่ไหนก็ได้ ?? กระทั่งในห้องน้ำ !!
อู๊ยยยย ระบบสมัครสมาชิกอะแกรรรร
https://www.youtube.com/channel/UChjKDMnMMG6iZY3twuuS2zg/join
ชื่นชอบกดไลค์ กดซับ กดกระดิ่งให้กันด้วยน้า กดเลยลิงค์ด้านล่าง
https://goo.gl/uJg78I
ฝากกดไลค์แฟนเพจจ้า
https://www.facebook.com/CH.primkung/
Facebook ส่วนตัว
https://www.facebook.com/Puckawut
ติดต่องาน :[email protected]
นอกจากการดูบทความนี้แล้ว คุณยังสามารถดูข้อมูลที่เป็นประโยชน์อื่นๆ อีกมากมายที่เราให้ไว้ที่นี่: ดูเพิ่มเติม
โรคติดเกม | Re-Mind : อารมณ์ ความคิด พฤติกรรม [Mahidol Channel]
ในสังคมปัจจุบันเด็กทุกคนสามารถเข้าถึงโทรศัพท์มือถือได้แทบทุกคน เด็กบางคนอายุยังน้อยก็มีโทรศัพท์มือถือเป็นของตัวเองแล้ว ประกอบกับผู้ปกครองต้องทำงาน ไม่มีเวลาอยู่กับลูก ทำให้เด็กหันไปเล่นเกมในโทรศัพท์มือถือ
จากสิ่งแวดล้อมและพฤติกรรมต่าง ๆ ในครอบครัว ส่งผลให้เด็กหลายคนอาจป่วยเป็น \”โรคติดเกม\” โดยที่ผู้ปกครองอาจไม่รู้ตัว
รศ.นพ.ชาญวิทย์ พรนภดล คุณหมอที่มีความสนใจด้านโรคติดเกม จะมาอธิบายให้ผู้ปกครอง หลาย ๆ ท่านตระหนักถึงอันตรายจากโรคติดเกมว่าอาจส่งผลเสียต่อเด็กได้ หากปล่อยไว้โดยไม่ได้รับการแก้ไข ติดตามได้ในรายการ พบหมอมหิดล ตอน โรคติดเกม
โรคติดเกม อารมณ์ความคิดพฤติกรรม MahidolChannel
––––––––––––––––––––
ติดตามช่องทางใหม่ของ Mahidol Channel
ผ่าน LINE Official Account ได้แล้ววันนี้!
เพียงกดที่ลิงค์ https://lin.ee/d4KkmOg
หรือกดเพิ่มเพื่อน แล้วพิมพ์ @mahidolchannel ที่ช่องค้นหาของแอปพลิเคชัน LINE
––––––––––––––––––––
ช่อง YouTube : Mahidol Channel : http://www.youtube.com/mahidolchannel
Facebook: http://www.facebook.com/mahidolchannel
Mahidol University มหาวิทยาลัยมหิดล: https://www.mahidol.ac.th/th
Website | https://channel.mahidol.ac.th/
คณะแพทยศาสตร์ศิริราชพยาบาล | http://www.si.mahidol.ac.th/th/
![โรคติดเกม | Re-Mind : อารมณ์ ความคิด พฤติกรรม [Mahidol Channel]](https://i.ytimg.com/vi/nQe17aRX06o/hqdefault.jpg)
5 ปัจจัยที่ทำให้เชื่อมเหล็กไม่ติด (รู้แล้วเชื่อมเหล็กติดกันอย่างแน่นอน)
มือใหม่หัดเชื่อมที่บ้าน บ่อยครั้งที่เชื่อมงานแล้วไม่คิดกัยซึ่งเป็นปัญหามากสำหรับมือใหม่ และหากรับงานแล้วงานอาจเกิดการเสียหายต่อชีวิตและทรัพสินตามมา วีดีโอชุด5 ปัจจัยที่ทำให้เชื่อมเหล็กไม่ติด (รู้แล้วเชื่อมเหล็กติดกันแย่างแน่นอน) จะเป็นแนวทางให้มือใหม่เชื่อมแล้วไม่เกิดสแลกฝังใน หากผิดพลาต้องขออภัยครับ
เชื่อมไม่ติด สแลกฝังใน เชื่อมไฟฟ้า
คุณมีสายตาที่เฉียบคมหรือเปล่า? บททดสอบสนุกๆ ที่ท้าทายสายตาของคุณ 😋
ถ้าคุณคิดว่าตัวเองมีสายตาเฉียบคม มาลองบททดสอบของเราหน่อยดีกว่า บางคนเชื่อว่าตัวเองมีสายตาเฉียบคมดั่งเหยี่ยว แต่มีไม่มากนักที่สามารถทำบททดสอบเหล่านี้ได้ในเวลาเพียงไม่กี่วินาที เอาล่ะ พร้อมจะทดสอบสายตาของคุณแล้วหรือยัง? ถ้าคุณตอบได้ จะได้ 1 คะแนนต่อ 1 ข้อนะ
และจำไว้ว่า ปริศนาและการทดสอบสมองเป็นอะไรที่มากกว่าความสนุก เพราะมันเปรียบเสมือนการออกกำลังกายให้สมองและเป็นวิธีสนุกๆ ที่พัฒนาความจำให้คุณได้ด้วย บททดสอบบางข้อนั้นเป็นอะไรที่ง่ายเพื่อให้คุณได้อุ่นเครื่องก่อน ในขณะที่บางข้อก็ทำให้คุณเกาหัวได้เลย ด้วยบททดสอบสายตาและสมองเหล่านี้ จะทำให้คุณได้รู้ว่าตัวเองมีสายตาเฉียบคมมากแค่ไหน!
ชีวิตสดใส
กดติดตามช่องชีวิตสดใส https://bit.ly/3dDWYg2
เพลงของ Epidemic Sound https://www.epidemicsound.com/
ของในสต๊อก (รูปภาพ, วิดีโอ และอื่นๆ):
https://www.depositphotos.com
https://www.shutterstock.com
https://www.eastnews.ru
ข้อคิดสำหรับนักศึกษาที่กำลังจะจบ
ส่วนหนึ่งของงานบรรยายให้น้องนักศึกษาระดับปริญญาตรี
นอกจากการดูบทความนี้แล้ว คุณยังสามารถดูข้อมูลที่เป็นประโยชน์อื่นๆ อีกมากมายที่เราให้ไว้ที่นี่: ดูบทความเพิ่มเติมในหมวดหมู่LEARN TO MAKE A WEBSITE
ขอบคุณมากสำหรับการดูหัวข้อโพสต์ หากพบนักเรียนที่ขาดเรียนบ่อยและไม่ค่อยส่งงาน จะเลือกใช้เครื่องมือใดที่เหมาะสมที่สุดในการแก้ปัญหา