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

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

“จะทำ SEO ให้ได้ผลเว็บของคุณต้องดูแล้วสวย
แต่ไม่จำเป็นต้องทำให้มันสวยเพอร์เฟคก็ได้”

ทดลองเล่นสลอต

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

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

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

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

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

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

ทดลองเล่นสล๊อต

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

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

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

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

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

ทดลองเล่นสล๊อต

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

โครงสร้างเว็บประเภท Blog/ข่าวสาร จะนิยมเอาหมวดหมู่ มาวางที่เมนูบนหน้าเว็บเลย ดูการวางโครงสร้างเว็บตามรูปภาพประกอบนะ
โครงสร้างเว็บบริษัท / ธุรกิจที่ขายบริการต่างๆ
หากคุณกำลังทำเว็บบริษัท หรือธุรกิจที่ขายบริการ เช่น เว็บคลินิกเสริมความงาม เว็บสปา เว็บรับทำบัญชี ฯลฯ

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

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

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

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

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

โปรสล๊อต

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

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

คุณอาจลองค้นหาตัวอย่างเว็บไซต์สวยๆ จากวงการอื่นๆ ได้ เช่น คุณลองค้นหาคำว่า “ชั้นวางสินค้า” ลงไปใน Google แล้วคุณก็ไปเจอเว็บที่ติดอันดับ 1 คือเว็บนี้

สมมุติว่าคุณรู้สึกว่าเว็บนี้ออกแบบมาสวย แถมยังปรับ on page seo มาเป็นอย่างดี จนทำให้เว็บของเขาติดอันดับ 1 google ได้ ผมแนะนำว่าให้คุณออกแบบเว็บ วางข้อมูลต่างๆ เลียนแบบเว็บนี้ไปได้เลย แต่ให้เปลี่ยนสินค้าของเขาที่เป็นชั้นวางสินค้า เป็นสินค้าที่คุณขายนั้นเอง

อีก 1 ตัวอย่างการออกแบบเว็บไซต์

วางโครงสร้างข้อมูลคล้ายๆ กันเลย การเลียนแบบโครงสร้างเว็บคนอื่นแบบนี้ได้ไม่ผิด เพราะเนื้อหาด้านในเว็บเราไม่เหมือนกัน

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

– หาไอเดียจาก Pinterest
พินเทอเรสเป็นโซเชี่ยลที่ใช้รวบรวมอินสไปเรชั่น ตัวอย่างงานหลากหลายที่ไม่ว่าใครก็ต้องรู้จัก โดยเฉพาะอย่างยิ่งงานดีไซน์ อยากได้ตัวอย่างเว็บดีไซน์สวยๆเข้ามาใช้บริการที่นี่ก็ไม่ผิดหวัง เพียงแค่พิมพ์คำว่า Web Design เข้าไปก็มีเว็บสวยๆให้ดูกันเพียบเลย แต่ถ้าใครไม่อยากหาตัวอย่างใหม่เองก็ตามมา Follow ที่บอร์ด Web Design Layout ได้เลยครับ มีตัวอย่างกว่า 500 ไอเดียอยู่ในนั้น

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

1.หาโทนสีจากเว็บที่เราชอบ
คุณชอบเสียเขียว ก็อาจจะไปเลียนแบบโทนสีจากเว็บ ธนาคารกสิกรไทย หรือ เว็บ AIS เป็นต้น

2.หาโทนสีจากเว็บ
ถ้าคุณไม่ใช่วิธีดูดโทนสีจากเว็บที่ชอบ คุณอาจจะค้นหาโทนสีจากเว็บแจกโทนสีโดยเฉพาะ เช่น เว็บนี้
-ปรับสีลิงค์บนเว็บให้ชัดเจน
เว็บที่ดีในการทำ 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) บนหน้าเว็บของผมก็ได้ครับ จะเห็นว่าผมเพิ่มช่องว่างระหว่างเนื้อหาให้เยอะขึ้น ก็จะช่วยทำให้เว็บของคุณดูสบายตาได้

– เลือกฟอนต์ให้ดี เน้นฟอนต์ที่อ่านง่ายเป็นหลัก
อย่าเลือกใช้ฟอนต์ที่ดูสวย แต่ให้เลือกใช้ฟอนต์ ที่ดูแล้วอ่านง่ายเป็นหลัก เพราะหากคุณต้องการทำ SEO ให้เว็บติดหน้าแรก Google คุณต้องทำให้ User อ่านบทความยาวๆ รู้เรื่อง และอ่านจนจบ คนจะอ่านบทความจนจบได้ เขาต้องใช้ความอดทน เราจึงเน้นเลือกฟอนต์หรือตัวอักษรที่อ่านง่ายๆ เป็นหลัก

1 เว็บ เราสามารถเลือกใส่ฟอนต์ ได้ 2 สไตล์ คือ 1 สไตล์สำหรับฟอนต์ที่เป็นหัวข้อ (h1-h6) และอีก 1 สไตล์สำหรับฟอนต์ที่เป็นเนื้อหา (p) หรือคุณจะเลือกใช้ทั้งหัวข้อ และเนื้อหาเป็นฟอนต์สไตล์ เดียวกันก็ได้ แต่จงเลือกดูฟอนต์ที่มองแล้วอ่านง่ายๆ สำหรับการอ่านข้อมูลยาวๆ เป็นหลัก

แต่ถ้าให้ผมแนะนำ ฟอนต์ที่เป็นเนื้อหา ผมแนะนำให้คุณใช้ฟอนต์สไตล์ แบบมีหัวเป็นหลักครับ หากต้องอ่านเนื้อหาที่ยาวๆ ฟอนต์มีหัว จะอ่านง่ายกว่าฟอนต์ไม่มีหัวครับ ถ้าสังเกตลองเปิดหนังสือทุกเล่มเลย ส่วนที่เป็นเนื้อหาเขาจะเลือกใช้ฟอนต์แบบมีหัวทั้งหมด แทบจะ 100% เลย
– เช็คขนาดฟอนต์ให้ดี อย่าให้เล็กเกินไป
นอกจากเลือกฟอนต์ที่ดูอ่านง่ายเป็นหลัก ต้องปรับขนาดฟอนต์ อย่าให้มันดูตัวเล็กเกินไป เพราะหากเราเปิดเว็บบนมือถือ ตัวอักษรมันจะยิ่งเล็กลงไปอีกทำให้ user อ่านข้อมูลบนเว็บของเราไม่จบได้

ขนาดฟอนต์
เราควรปรับฟอนต์ให้มีขนาดใหญ่แค่ไหนดี คำแนะนำของผมคือ ให้คุณลองไปเปิดเว็บ kapook หรือ sanook ดูครับ เราอย่างปรับตัวอักษรให้เล็กกว่าเว็บพวกนี้ ถือว่าเป็นใช้ได้แล้ว

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

แนะนำบริษัทออกแบบโลโก้: branding-one.com

– อย่าลืมใส่ไอคอนหัวเว็บด้วย
ไอคอนหัวเว็บคืออะไร ลองดูภาพด้านล่างประกอบนะ

site icon
แม้ว่า site icon จะเป็นรูปภาพขนาดเล็ก แต่คุณจำเป็นต้องออกแบบให้คนจดจำได้ง่ายๆ คุณลองดูภาพด้านบน แค่เราเห็น site icon เราก็เดาได้เลยว่าเว็บเหล่านั้นคือเว็บอะไร

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

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

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