การออกแบบเว็บไซต์ที่ดี ในด้าน SEO มีหลักการอย่างไร ปรับแต่งจุดไหนบ้าง?

ออกแบบเว็บไซต์

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

“จะทำ 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

บทเรียนทั้งหมดนี้ ทุกคนสามารถเข้าเรียนได้ฟรี โดยไม่ต้องสมัครเรียน

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

ลักษณะของการออกแบบเว็บไซตืที่ดี

– เว็บที่ดีในด้านทำ SEO ไม่ใช่เว็บที่สวยเพอร์เฟค

เพราะเราไม่ได้ทำเว็บไซต์เพื่อส่งประกวด แต่เราสร้างเว็บไซต์เพื่อเพิ่มยอดขายให้กับธุรกิจ

– เป็นเว็บที่ดูแล้วมีความน่าเชื่อถือ

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

– ความสวยของเว็บต้องให้สวยเหมาะกับกลุ่มลูกค้าของคุณ

ในธุรกิจ offline หากคุณเปิดร้านขายอาหารตามสั่ง คุณขายอาหาร ราคาถูก ราคาต่อ 1 จานไม่เกิน 40 บาท แต่คุณเงินเหลือเยอะ ก็เลยตกแต่งหน้าร้านแบบจัดเต็ม ดูสวยมาก

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

ตัวอย่างการออกแบบ

ที่มาของรูป dooddot.com

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

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

ดูตัวอย่างจากเว็บผม

การออกแบบเว็บไซต์ที่ดี

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

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

– มีโครงสร้างข้อมูลที่เข้าใจง่ายๆ

เว็บที่ดีต้องมีโครงสร้างข้อมูลที่ดูแล้วเข้าใจง่าย โครงสร้างเว็บที่เข้าใจง่ายเป็นอย่างไร เดี๋ยวผมจะพูดถึงในหัวข้อถัดไปนะ

– ลูกค้าอยากรู้สิ่งใด ต้องทำให้เข้าเจอสิ่งนั้นภายใน 3 คลิก

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

lazada

สินค้าบนเว็บ Lazada มีหลายแสนชิ้น ทำอย่างไรให้ลูกค้าจะเจอสิ่งที่เขาสนใจไวที่สุด ลูกค้าจะค้นเจอสิ่งที่เขาสนใจผ่าน ช่องค้นหาสินค้านั้นเอง

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

ตัวอย่างโครงสร้างเว็บที่ดี

โครงสร้างของเว็บที่ดี ต้องดูแล้วเข้าใจง่ายๆ แต่หากเราจะแบ่งลักษณะโครงสร้างเว็บเราจะแบ่งได้ 3 ประเภท

  • เว็บ Blog/ข่าวสาร
  • เว็บบริษัท (Corporate)/ ธุรกิจที่ขายบริการต่าง
  • เว็บ eCommerce

โครงสร้างเว็บ Blog/ข่าวสาร

เว็บ Blog หรือเว็บข่าวสาร จะมีจำนวนบทความจำนวนมาก วิธีการที่จะให้ user เข้าถึงบทความหรือข่าวสารได้ง่ายๆ คุณต้องจัดหมวดหมู่บทความให้ชัดเจน

โครงสร้างเว็บประเภท Blog/ข่าวสาร จะนิยมเอาหมวดหมู่ มาวางที่เมนูบนหน้าเว็บเลย ดูการวางโครงสร้างเว็บตามรูปภาพประกอบนะ

โครงสร้างเว็บข่าว

ตัวอย่างการจัดวางหมวดหมู่ข่าวสารบนเว็บ thestandard.co

the standard

อ่านเพิ่มเติม: Category และ Tag คืออะไร อันไหนใช้เมื่อไรอย่างไร

โครงสร้างเว็บบริษัท / ธุรกิจที่ขายบริการต่างๆ

หากคุณกำลังทำเว็บบริษัท หรือธุรกิจที่ขายบริการ เช่น เว็บคลินิกเสริมความงาม เว็บสปา เว็บรับทำบัญชี ฯลฯ

หน้าเว็บหลักๆ ที่คุณจำเป็นต้องมี หากคุณทำธุรกิจเป็นเภทบริการ คือ หน้าหลัก (home page) หน้า about หน้า service และหน้า contact ซึ่งคุณต้องออกแบบและแสดงให้มันชัดเจน

หน้า service ที่ดี คุณต้องออกแบบให้ลูกค้าเข้าใจง่ายที่สุด ออกแบบตามโครงสร้างด้านล่างได้เลย

โครงสร้างเว็บที่ดี

ตัวอย่างเว็บจริงที่ออกแบบโครงสร้างเว็บดี

chaijaroentech

ลองเข้าไปดูการออกแบบโครงสร้างเว็บจากเว็บตัวอย่างด้านบนนะ แล้วทำเลียนแบบเว็บเหล่านั้นได้เลยครับ

จุดต่อมาสำหรับออกแบบเว็บบริษัท / ธุรกิจที่ขายบริการต่างๆ คุณต้องสร้างความน่าเชื่อถือ ด้วยการเติมหน้า about และหน้า contact คือ ต้องมีข้อมูลที่เกี่ยวกับบริษัทตัวเองให้ครบ ที่อยู่หรือช่องทางติดต่อต้องชัดเจนและเปิดเผย

โครงสร้างเว็บ E-commerce

ถ้าคุณกำลังทำเว็บ E-commerce และมีสินค้าจำนวนมาก ก่อนที่คุณจะลงสินค้าบนเว็บ คุณต้องวางแผน site map ก่อน คือ คุณต้องจัดหมวดหมู่สินค้า จากใหญ่ไปหาเล็ก มีหมวดหมู่หลัก หมวดหมู่ย่อย

ecommerce stucture

นอกจากนี้คุณต้องแสดงปุ่มตะกร้าสินค้า (cart) ให้ชัดเจน

การเรียงเมนู ต้องแบ่งจากหมวดหมู่หลัก หมวดหมู่รอง เข้าไปหาหมวดหมู่ย่อย

และที่หน้าสินค้าที่เป็นหมวดหมู่ใหญ่ หากเว็บของคุณมีสินค้าจำนวนมาก คุณควรออกแบบการวางสินค้าให้มีลักษณะเป็น Hub content หน้าตาเป็นอย่างไร ผมแนะนำให้คุณลองเข้าไปดูไอเดียการจัดวางหมวดหมู่สินค้า จาก 3 เว็บนี้ครับ

แนวคิดการออกแบบเว็บไซต์

อุปกรณ์ไอที

– การออกแบบเว็บที่ดี เราต้องพา user กดหน้าต่างๆ ตามที่เราวางแผนไว้ แตกประเด็นเนื้อหา จากใหญ่ไปหาเล็ก ลองดูตัวอย่างเว็บนี้ครับ

หน้าแรกของเว็บ วางเป็นหมวดหมู่ใหญ่

หมวดหมู่สินค้า

พอคลิกที่รูปปั๊มน้ำ จะเข้าไปเจอหมวดหมู่ย่อยของปั๊มน้ำอีกที

พอคลิกเข้าไปที่หมวดหมู่ย่อย ถึงจะค่อยเจอสินค้าทีละชิ้น

หากสินค้าบนเว็บของคุณมีจำนวนมาก อย่าลืมทำช่องค้นหาสินค้าให้มันเด่นชัด

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

บทความแนะนำสำหรับผู้เริ่มต้น WordPress

สอน SEO สอน WordPress สอน WooCommerce

หลักการออกแบบด้านความสวยงาม

– เห็นเว็บใครออกแบบสวยๆ เราก็ทำเว็บเลียนแบบไปได้เลย

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

คุณอาจลองค้นหาตัวอย่างเว็บไซต์สวยๆ จากวงการอื่นๆ ได้ เช่น คุณลองค้นหาคำว่า “ชั้นวางสินค้า” ลงไปใน 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 จะเป็นรูปภาพขนาดเล็ก แต่คุณจำเป็นต้องออกแบบให้คนจดจำได้ง่ายๆ  คุณลองดูภาพด้านบน แค่เราเห็น site icon เราก็เดาได้เลยว่าเว็บเหล่านั้นคือเว็บอะไร

ดังนั้นจุดนี้คือการบ้าน คุณต้องออกแบบไอคอนหัวเว็บ ให้มันเข้าใจง่ายที่สุด ผ่านพื้นที่ขนาดเล็กให้ได้ เพื่อช่วยสร้างการจดจำในสิ่งที่เรียกว่า Brand awareness นั้นเอง

หลักการออกแบบด้านความน่าเชื่อถือ

  • ใส่ภาพคนจริงๆ เข้าไปที่เว็บ
  • ข้อมูลที่ติดต่อบริษัทเรา ต้องใส่ให้ครบ
  • หน้า About คือ หน้าที่ลูกค้า จะมาส่องเรา จงสร้างภาพ โชว์ภาพโรงงาน รางวัลต่าง ๆ หรือหาจุดเชื่อมโยงระหว่างคุณกับลูกค้า
  • ขายสินค้าเกี่ยวกับอาหารเสริม ต้องแสดงใบรับรอง ผลงานวิจัยต่างๆ
  • มี call to action ชัดเจน กระตุ้นให้คนอยากติดต่อเข้ามา
  • ต้องมีหน้ารีวิว ผลงานที่มา
  • หน้าที่จะทำ on page การวางข้อมูล ให้นำสิ่งที่ลูกค้าสนใจขึ้นก่อนเสมอ

สรุป

การออกแบบเว็บเน้นที่ความน่าเชื่อถือ ก่อนความสวยงาม ออกแบบหน้าตาเว็บให้เหมาะกับกลุ่มลูกค้าของคุณเป็นหลัก และมีข้อมูลทุกอย่างที่ลูกค้าคุณอยากรู้

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

ประชาสัมพันธ์

สำหรับท่านใดที่อ่านบทความนี้แล้ว สนใจการสร้างเว็บร้านค้าออนไลน์ด้วย WordPress + Woocommerce แบบมืออาชีพ ในวันที่ 5 - 6 ธันวาคม 2563 นี้ ผมได้เปิดคอร์สสอน Woocommerce Expert  แบบกลุ่มเล็กๆ 1 รอบ สอนสดรอบละ 6 คน เพื่อให้ผู้เรียนได้ประโยชน์สูงสุด เรียนรู้และทำตามไปพร้อมๆ กันได้ 

รายละเอียดคอร์สเรียน

สร้างเว็บร้านค้าออนไลน์ Woocommerce expert

สอน Woocommerce

  • ค่าเรียน 9,500 บาท 5 - 6 ธันวาคม 2563
  • เวลาเรียน 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

seat-station

บรรยากาศคลาสเรียน

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *