Author Archive Support Dept

วิธีการทำ Redirect HTTP to HTTPS โดย .htaccess หรือ php

ต่อเนื่องจากบทความที่แล้ว เรื่องการทำ HTTPS

การเรียกใช้งานเว็บไซต์ทั่วไป จะเรียกผ่าน Protocal HTTP แต่เมื่อมีการติดตั้ง SSL สำหรับเว็บไซต์แล้ว ควรจะต้องทำการตั้งค่าการใช้งานให้บังคับใช้ SSL ซึ่งก็คือ บังคับให้ใช้งาน HTTPS นั่นเอง ดังนั้น หากลูกค้าไม่ได้ทำการ Redirect การเรียกใช้ Website ทั่วไป ก็จะชี้ไปที่ HTTP ที่เป็นค่าเริ่มต้น ไม่ใช่ HTTPS เพราะฉะนั้นทางทีมงาน SSL.in.th จึงแนะนำให้ทำ Redirect สำหรับ Website ของลูกค้าด้วยเช่นกัน เพื่อความปลอดภัย และเรียกใช้ SSL Certificate ทุกครั้งที่ถูกเรียกใช้งานโดยเราแนะนำอยู่ 2 วิธีต่อไปนี้ คือ ใช้ .htaccess และ php

1. PHP Code redirect

function redirectTohttps()
{
if($_SERVER[‘HTTPS’]!=”on”)
{
$redirect= “https://”.$_SERVER[‘HTTP_HOST’].$_SERVER[‘REQUEST_URI’];
header(“Location:$redirect”);
}
}
?>

2. .htaccess file code (หากไม่มีไฟล์ให้สร้างไฟล์ .htaccess ขึ้นมา)

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

3. .htaccess (CMS WordPress)

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /

RewriteCond %{HTTPS} !=on
RewriteRule ^.*$ https://%{SERVER_NAME}%{REQUEST_URI} [R,L]

# BEGIN WordPress
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

 


 

ขอบคุณที่มา: https://support.netway.co.th/hc/th/articles/115000806592-%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%97%E0%B8%B3-Redirect-HTTP-to-HTTPS-%E0%B9%82%E0%B8%94%E0%B8%A2-htaccess-%E0%B8%AB%E0%B8%A3%E0%B8%B7%E0%B8%AD-php

เมื่อเว็บไซต์ขึ้น Not Secure! แก้ได้โดยเปลี่ยนมาใช้ HTTPS กันเถอะ

ปัจจุบันคนที่ใช้ Google Chrome เวอร์ชั่น 56 อาจจะเจอคำว่า “ไม่ปลอดภัย (Not secure)” อยู่หน้าชื่อโดเมนเวลาเข้าหน้าบางหน้า แต่พอเปลี่ยนไปหน้าอื่นกลับไม่มีคำเตือนขึ้น

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

ในอนาคต Google Chrome จะเพิ่มระดับการแจ้งเตือนให้แสดงคำว่า “ไม่ปลอดภัย (Not Secure)” และใช้สัญลักษณ์เป็นรูปสามเหลี่ยมสีแดงเห็นได้ชัดเจนก่อนชื่อโดเมนเนม โดยจะเริ่มจากผู้ใช้ในโหมดไม่ระบุตัวตน (Incognito) ก่อน หลังจากนั้นจะเพิมเข้ามาในโหมดปกติเป็นค่าเริ่มต้น (default) ของ Google Chrome ต่อไป

เบราว์เซอร์ตัวอื่นเป็นยังไงกันบ้าง

ตอนนี้ Mozilla Firefox ออกเวอร์ชั่น 51 เริ่มแจ้งเตือนเป็นแบบเบา ๆ ด้วยการแสดงไอคอนรูปแม่กุญแจสีดำมีเส้นสีแดงคาดทับ เพื่อแสดงสัญลักษณ์เตือนว่าเว็บไซต์ที่ไม่ได้เข้ารหัสเป็นเว็บไซต์ที่ไม่ปลอดภัย แนวทางเดียวกับ Google Chrome เช่นกัน

ทางแก้? เปลี่ยนมาใช้ HTTPS กันเถอะ

การส่งข้อความในฟอร์มต่าง ๆ ผ่าน http จะถูกดักฟังได้ แต่ถ้าผ่าน https ที่มีการเข้ารหัส จะทำให้ดักฟังไม่ได้ (หรือยากมาก) และผลดีที่เกิดขึ้นก็คือ

ความปลอดภัย

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

อันดับผลการค้นหา

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

ลูกเล่นใหม่ ๆ บน html ไม่สนับสนุน http

ความสามารถของเว็บไซต์ที่น่าสนใจเมื่อเปลี่ยนมาใช้ https นั่นก็คือ การที่เว็บไซต์มีการเชื่อมต่อกับอุปกรณ์ ทำให้เว็บไซต์มีความสามารถที่มากขึ้นใกล้เคียงกับความเป็นแอพพลิเคชั่น หรือที่เรียกกันว่า “Progressive Web Apps” ซึ่งเป็นแนวทางของการทำเว็บไซต์ให้ออกมาเหมือนแอพพลิชั่นนั่นเอง ตัวอย่าง การเชื่อมต่อกับอุปกรณ์ Bluetooth LE ผ่าน Bluetooth API

อยากได้เว็บไซต์ที่เป็น https ต้องทำอย่างไร?

ข่าวดีสำหรับผู้ที่ใช้ Control Panel เป็น DirectAdmin ครับ ตั้งแต่เวอร์ชั่น 1.5 เป็นต้นไป ระบบจะรองรับการใช้งาน Let’s Encrypt มาในตัว สามารถสอบถามไปยังผู้ให้บริการโฮสติ้งที่ใช้งานอยู่เพื่อขอให้ติดตั้ง SSL Certificate ให้กับเว็บไซต์ได้เลย

ติดตั้งเองก็สามารถทำได้

ขั้นตอนการติดตั้ง https ให้กับเว็บไซต์โดยใช้ DirectAdmin นั้นแสนจะง่ายดาย สามารถทำให้เสร็จเรียบร้อยโดยใช้เวลาไม่นาน มาเริ่มกันเลย

Login เข้าสู่ DirectAdmin

เริ่มต้นการติดตั้งโดยการ Login เข้าสู่ DirectAdmin ตาม url ที่ทางผู้ให้บริการแจ้งรายละเอียดมาทางอีเมล์ โดยทั่วไปจะมีลักษณะเป็นเลขไอพีของผู้ให้บริการ 123.45.678.900:2222

เปิดใช้งาน SSL Certificates

ก่อนที่จะเปิดใช้งาน SSL Certificates โดยผ่าน DirectAdmin นั้น ขออธิบายเกี่ยวกับ SSL Certificates ให้เข้าใจก่อนเริ่มติดตั้ง

  • SSL Certificates ทุกชนิดไม่สามารถป้องกัน Hacker ได้
  • SSL Certificates มีหน้าที่เข้ารหัสการเชื่อมต่อข้อมูลให้ปลอดภัย เพื่อไม่ให้สามารถูกดักฟัง หรือดักอ่านข้อมูลระหว่างทางได้เท่านั้น
  • SSL Certificates ของ Let’s Encrypt มีอายุ 60 วันต้องต่ออายุทุก ๆ 60 วัน โดยปกติแล้ว DirectAdmin จะทำการ Auto Renew ให้ใหม่โดยอัตโนมัติ

ขั้นตอนการเปิดใช้งาน SSL Certificate ผ่าน DirectAdmin

  • ไปยังโซน Your Account เลือกเมนู Domain Setup

  • เลือกโดเมนที่ต้องการเปิดใช้งาน SSL Certificates

  • เลือก Secure SSL จากนั้นคลิก Save

  • ในส่วนของ private_html setup ให้เลือก Use a symbolic link from private_html to public_html – allows for same data in http and https

เพิ่มเติม

  • public_html คือที่เก็บไฟล์ สำหรับเข้าหน้าเว็บไซต์แบบปกติ
  • private_html คือที่เก็บไฟล์ สำหรับเข้าหน้าเว็บไซต์ผ่าน https

การเลือก Use a symbolic link from private_html to public_html – allows for same data in http and https หมายถึง การเชื่อมโยงของ public_html กับ private_html ให้ใช้ข้อมูลชุดเดียวกัน ถ้าเราอัพไฟล์ไปไว้ที่ plublic_html จะสามารถเรียกดูได้ทั้ง http และ httpsนั่นเอง

  • จากนั้นคลิก Save

จะเห็นว่าถ้าลองเข้าหน้าเว็บไซต์ผ่าน https ก็จะเจอ “ไม่ปลอดภัย (Not secure) สีแดงก็ไม่ต้องตกใจ ตามที่บอกไป private_html คือที่เก็บไฟล์ สำหรับเข้าหน้าเว็บไซต์ผ่านลิ้ง SSL เพราะว่ายังไม่ได้สร้างใบรับรอง SSL Certificates

แต่ก็ยังสามารถเข้าเว็บไซต์ผ่าน http ได้ตามปกติ

สร้าง SSL Certificates

เมื่อยังไม่ได้สร้าง SSL Certificates ให้กลับมาที่ DirectAdmin อีกครั้ง เพื่อสร้าง SSL Certificates

  • ไปยังโซน Advanced Features เลือกเมนู SSL Certificates

  • เลือกเมนู Use the server’s shared signed certificate.
  • เลือก Free & automatic certificate from Let’s Encrypt
  • เพิ่มข้อมูล อีเมล์ลงไป

เพิ่มเติม

  • Common Name ชื่อโดเมน หรือชื่อบริษัท จริง ๆ แล้วใช้ตามเดิมได้เลย
  • E-Mail ให้เราใส่อีเมล์ของเราลงไป เวลาไกล้หมดอายุมันจะส่ง อีเมล์มาแจ้งให้เราทราบ
  • Key Size (bits) ขนาดของใบรับรอง แนะนำเลือกที่ 2048
  • Certificate Type ประเภทใบรับรอง แนะนำให้เลือกเป็น SHA256

Key Length หรือ Key size คือ ความยาวของคีย์ที่เรียกว่า Private Key ที่จะทำการ Generate key pair ออกมา ตอนที่ผู้ขอใบรับรอง SSL ทำการ Generate CSR ซึ่งจะแสดงให้เห็นใน Certificate path เวลาที่มีการติดตั้ง SSL Certificate เรียบร้อยแล้ว

ปัจจุบันผู้ออกใบรับรอง SSL ส่วนใหญ่ จะกำหนดให้ผู้ขอใบรับรอง SSL ทำการ Generate CSR ที่ความยาวของคีย์ (Key length) ไว้ที่ 2048-bit

Private Key คือ กุญแจสำคัญที่ใช้เข้ารหัส – ถอดรหัสข้อมูลระหว่างเครื่องเซิร์ฟเวอร์ของผู้ขอใบรับรอง SSL

สำหรับไฟล์ Private Key จะได้ออกมาในขั้นตอน Generate CSR หากไม่มีการสำรองไฟล์ดังกล่าวไว้บนเครื่องหรือเก็บรักษาให้ดี จะทำให้ไม่สามารถติดตั้ง SSL Certificate ได้ เพราะผู้ออกใบรับรอง SSL Certificate จะใช้การตรวจสอบว่า Certificate นี้ Match กับไฟล์ Private Key ของเซิร์ฟเวอร์ที่ขอใบรับรองหรือไม่

CSR (Certificate Signing Request) คือ รหัสข้อความชุดหนึ่ง เพื่อนำไปใช้ในการสั่งซื้อ SSL โดยที่ผู้ขอใบรับรอง SSL จะต้องทำการสร้างขึ้นมาผ่านเซิร์ฟเวอร์ ที่ต้องการติดตั้ง SSL Certificate โดยที่ CSR จะถูกสร้างขึ้นจาก Private Key อีกครั้งหนึ่ง

ตัวอย่างของ CSR

Certificate Type ประเภทใบรับรอง ที่แนะนำให้เลือกเป็น SHA256 นั่นก็เพราะว่า Google Chrome ออกมาประกาศนโยบาย ว่าใบรับรอง SSL ที่ใช้ SHA-1 ไม่ปลอดภัยตั้งแต่ต้นปี 2015 เป็นต้นไป

  • จากนั้นคลิก Save ด้านล่างสุด

  • ระบบจะแสดงหน้า Certificate and Key Saved. หากยังไม่ขึ้นว่า Certificate and Key Saved. ให้กลับไป Advanced Features เลือกเมนู SSL Certificates อีกครั้ง จากนั้นทำตามขั้นตอนเดิมจนกว่าจะขึ้น Certificate and Key Saved.

  • หากระบบทำการสร้าง Certificate and Key เรียบร้อยเมื่อเลือกเมนู SSL Certificates อีกครั้ง ด้านล่างสุดก่อนถึงปุ่ม Save จะมีอายุของ Certificate and Key โดยปกติระบบจะทำการต่ออายุของ Certificate and Key ให้อัตโนมัติ และจะแสดงวันที่จะทำการต่ออายุให้อัตโนมัติในอีกกี่วัน

ข้อควรระวัง

สำหรับเว็บไซต์ที่พึ่งเปลี่ยนจาก http เป็น https ในการเปิดใช้งาน https จะยังไม่ขึ้นสีเขียวแต่เว็บไซต์จะเปลี่ยนจาก http เป็น https เรียบร้อยแล้ว ให้ตรวจสอบ url ต่าง ๆ ภายในเว็บไซต์ว่ามีส่วนไหนที่เรียกใช้งาน http อยู่บ้าง หากว่ามีให้ทำการเปลี่ยนจาก http เป็น https ให้เรียบร้อย จากนั้น https ก็จะขึ้นรูปกุญแจสีเขียว

ภาพตัวอย่างปัญหา Mixed Content มีการเรียกใช้ URL แบบ http ภายในเว็บไซต์

ตอนนี้ถ้าลองเข้าเว็บไซต์ผ่าน https จะเห็นว่าเว็บไซต์แสดงคำว่า “ปลอดภัย(Secure)” เรียบร้อยแล้ว

และยังสามารถเข้าผ่าน http แบบปกติได้อีกด้วย

เพิ่มเติม

การที่สามารถเข้าถึงเว็บไซต์ได้ทั้งแบบ http ปกติและแบบ https นั้นในทาง SEO แล้วไม่เป็นผลดีเท่าไหร่ เพราะว่า Search Engine จะมองว่าเว็บไซต์ที่เป็นแบบ http และ https นั้นเป็นคนละเว็บไซต์กัน ซึ่งศัพท์ทางเทคนิคเรียกว่า “Duplicate Content” กรณีเดียวกันกับการเข้าถึงเว็บไซต์ที่มี www และ non-www ในลักษณะนี้ Search Engine เองก็มองว่าเป็นคนละเว็บไซต์เช่นเดียวกัน

ทางแก้? ทำ 301 redirect เปลี่ยน http เป็น https ซะเลย

การทำ 301 redirect นั้นเป็นวิธีที่จะบอก Search Engine และผู้ใช้ทั่วไปว่าเว็บไซต์ ตอนนี้เปลี่ยนจาก http เป็น https แล้ว รวมไปถึง redirect ผู้ชมจาก http มาเป็น https ทั้งหมดด้วย

วิธีทำ 301 rediract ที่ง่ายที่สุดคือ สร้างไฟล์ .htaccess

  • ไปที่โซน เมนูหลัก เลือก Files ( อยู่บริเวณรูปดาวที่เขียนว่า Logout )

  • เลือก public_html

  • ไปยังส่วนล่างสุดของเว็บไซต์เพื่อสร้างไฟล์ .htaccess ในส่วนของ Create New File พิมพ์คำว่า .htaccess จากนั้นกด Create

  • ระบบจะพามายังส่วนของการแก้ไขไฟล์

เพิ่ม code ด้านล่างนี้ลงไป

# BEGIN Force http to https
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
# END Force http to https

  • จากนั้นกด Save As

เสร็จเรียบร้อยแล้วลองเข้าเว็บไซต์ผ่าน http แบบปกติ ระบบจะทำการ redirect ไปยังเว็บไซต์แบบ https ทันที

ขอบคุณที่มาจาก: https://th.seedthemes.com/blog/secure-websites-with-https/

เทคนิคทำเว็บสร้างรายได้ : ตัวอย่างความสำเร็จจาก 3 เว็บดังในญี่ปุ่น

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

เมื่อมองธุรกิจเว็บและ Content ดิฉันก็รู้สึกว่า ญี่ปุ่นเชี่ยวชาญในการจัดระบบข้อมูลให้เป็นระเบียบเหลือเกิน มันคงฝังใน DNA คนญี่ปุ่นไปแล้ว แถมมีบางเว็บ ประสบความสำเร็จมากจนสามารถแปลงการจัดระบบตรงนั้น กลายมาเป็นรายได้ มีผู้เข้าชมเป็นล้านคนต่อเดือน โดยไม่ต้องพึ่งค่าโฆษณา

Krungsri Guru ฉบับนี้ ดิฉันจึงขอยก 3 เว็บดังในญี่ปุ่น ที่ประสบความสำเร็จในการสร้างและจัด Content เผื่อเป็นไอเดียแก่ Startup ในไทยทุกท่านนะคะ

1. CAKES.mu – สละชาเขียว 1 ขวดแลกกับนิตยสารเฉพาะในแบบของคุณ


ขณะที่สื่อสิ่งพิมพ์ ทั้งนิตยสารและหนังสือพิมพ์ทั่วโลกกำลังหวาดหวั่นกับยอดขายลดลงเนื่องจากผู้บริโภคหันไปอ่านเนื้อหาฟรีทางออนไลน์แทน มีเว็บญี่ปุ่นเว็บหนึ่งกำลังประสบความสำเร็จอย่างงดงามกับการสร้าง Digital Content เพื่อจำหน่าย

Cakes.mu เป็น Platform ออนไลน์ที่รวบรวมบทความจากคนในวงการต่าง ๆ อาทิ นักธุรกิจ นักเขียนมืออาชีพ นักจิตวิทยา นักดนตรี ดารา นักร้อง นักกีฬา นักวาดการ์ตูนชื่อดัง มาจำหน่ายบนเว็บ ผู้อ่านต้องเสียค่าสมาชิกสัปดาห์ละ 150 เยน (ประมาณ 50 บาท) โดยสามารถอ่านบทความต่าง ๆ กว่า 10,000 บทความในแต่ละสัปดาห์ และสามารถ Follow นักเขียนหรือบทความที่ตนเองชอบได้ โปรดนึกถึงภาพเว็บเว็บหนึ่งที่มีบทความคุณนิ้วกลม คุณซิโก้ เกียรติศักดิ์ เสนาเมือง คุณแชมป์ ทีปกร คุณวิษณุ เครืองาม อยู่ในเว็บเดียวกัน

ความน่าสนใจของเว็บนี้ คือ ระบบ Algorithm ของเว็บจะคัดกรองบทความที่สมาชิกแต่ละคน “น่าจะชอบ” จากบทความที่สมาชิกอ่านในอดีต เพื่อสร้างประสบการณ์เฉพาะและรื่นรมย์แก่ผู้อ่านมากขึ้น แทนที่ลูกค้าต้องคอยตามซื้อนิตยสารหลาย ๆ ฉบับ เพียงเข้ามาที่เว็บ Cakes ที่เดียว ก็สามารถเลือกอ่านบทความที่ตนเองถูกใจในสไตล์ของตัวเองได้ จัดว่าเป็นการก้าวข้ามข้อจำกัดของนิตยสารไปได้อย่างงดงาม

รายได้ของ Cakes มาจากค่าสมาชิกเป็นหลัก ตลอดจนค่าหนังสือหากบทความนั้นรวมเป็น E-book หรือตีพิมพ์เป็นหนังสือ โดยทางบริษัทจะแบ่งรายได้กับผู้เขียนบทความด้วย หากบทความนั้นรวมตีพิมพ์เป็นหนังสือจำหน่าย ส่วนวิธีการโปรโมท ก็ให้ผู้เขียนแต่ละคนโปรโมทเว็บกับแฟน ๆ ใน Social Media ของตนแทน เป็นการประหยัดค่าการตลาด แต่เข้าถึงกลุ่มเป้าหมายได้มีประสิทธิภาพมากเป็นอย่างยิ่งเลยทีเดียว

2. Cookpad.com – เว็บรวมสูตรอาหารที่ทำกำไรถึงร้อยละ 50


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

Cookpad.com เป็นเว็บที่เข้ามาตอบโจทย์ปัญหานี้ ทางเว็บรวบรวมสูตรอาหารต่าง ๆ ใครก็ได้สามารถเข้ามาดูได้ฟรี ปัจจุบันมีผู้เข้าชมเว็บสูงถึง 5.5 ล้านคนต่อเดือน (คำนวณง่าย ๆ คือ ประชากรครึ่งหนึ่งของคนกรุงเทพฯ กำลังใช้เว็บนี้) เสน่ห์ของ Cookpad คือ มีสูตรอาหารต่าง ๆ ประมาณ 2 ล้านกว่าสูตร ดิฉันเคยลองหาสูตรทำต้มยำกุ้ง ก็พบประมาณ 100 กว่าสูตรเลยทีเดียว ทาง Cookpad ไม่ได้เป็นผู้คิดค้นสูตรอาหารกว่า 2 ล้านสูตรนี้ แต่เป็น User ของเว็บ โดยทางเว็บสร้างระบบให้แม่บ้านญี่ปุ่นหรือ User ทั่วไป สามารถอัพโหลดสูตรอาหารของตนได้ง่ายที่สุด เพื่อแบ่งปันและเรียนรู้วิธีทำอาหารใหม่ ๆ จากกันและกัน ขณะเดียวกัน มีปุ่มให้เราเขียนคอมเม้นท์หรือส่งภาพอาหารที่ทำให้เจ้าของสูตร ทำให้เจ้าของสูตรมีกำลังใจในการอัพสูตรอาหารต่อไป

เสน่ห์อีกประการของ Cookpad คือ แทนที่จะเสิร์ชหาวิธีทำเมนูต่าง ๆ เช่น “วิธีทำยำวุ้นเส้น” ผู้ใช้สามารถค้นสูตรโดยพิมพ์คีย์เวิร์ดจากวัตถุดิบที่เหลือในตู้เย็น เช่น “กะหล่ำปลี” “หมูสับ” หรือวัตถุดิบกับวิธีทำอาหารก็ได้ เช่น “กะหล่ำปลี x ต้ม” ระบบของ Cookpad ก็จะกรองสูตรที่มีคีย์เวิร์ดเช่นนั้นมาให้
รายได้ของ Cookpad มาจาก 2 ทางหลัก หนึ่ง คือ ค่าสมาชิก โดยปกติแล้ว User สามารถเข้าชมเว็บได้ฟรี แต่หากใครต้องการดูแค่สูตรที่ได้รับความนิยมหรือสูตรจากเชฟพิเศษเพื่อประหยัดเวลา ก็สามารถสมัครเป็น Premium User ได้โดยเสียค่าสมาชิกเดือนละ 280 เยน หรือประมาณ 90 บาท (ปัจจุบันมีผู้สมัครถึง 1.7 ล้านคน) รายได้อีกทาง มาจากการจัด Event ร่วมกับบริษัทต่าง ๆ เช่น การประกวดสูตรอาหารบนเว็บ

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

 

3. Storys.jp – เพราะทุกคนมีเรื่องราว



คอนเซปท์คล้ายเว็บ https://storylog.co/ ของไทย กล่าวคือ ให้ User มาแบ่งปันเรื่องราวต่าง ๆ ของตัวเอง จุดเด่น คือ ตัวเว็บที่ให้ User สามารถพิมพ์และอัปโหลดเรื่องราวได้ง่าย หนึ่งในฟังก์ชั่นที่เก๋ คือ ฟังก์ชั่นสร้าง Bubble บทสนทนา โดย User สามารถพิมพ์ชื่อบุคคล และประโยคที่คนนั้นพูดในลักษณะของ Bubble ได้ เช่น

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

ส่วนกิมมิคในการกระตุ้นให้ User มีกำลังใจโพสท์ต่อก็เด็ดไม่แพ้กัน ผู้ที่เข้ามาอ่านสามารถคลิก Comment ในทุกย่อหน้าของ Story นั้นได้เลย (ไม่ต้องรอ Comment ท้ายบทความแบบเว็บอื่น ๆ) ถ้าอยากอ่านเรื่องราวจากผู้เขียนต่อ ก็กดปุ่ม “อยากอ่านต่อ” ได้ ผู้เขียนจะได้มีกำลังใจอยากเขียนต่อไป นอกจากนี้ ตัวผู้เขียนเอง สามารถคลิกเข้าไปดูได้ว่า ใครเข้ามาอ่านเรื่องราวของตนเองแล้วบ้าง
นักเขียนที่มีผู้อ่านเยอะมาก ๆ ก็อาจพิมพ์ผลงานตนเองเป็นหนังสือ หรือเป็น E-book หรือบางครั้ง ค่ายหนังค่ายละครญี่ปุ่น ก็จะเข้ามาควานหา Story ที่น่าสนใจไปทำหนังเช่นกัน เนื่องจากสามารถคาดเดาเรทติ้งล่วงหน้าได้ เรื่องที่คนอ่านเยอะในเว็บ หากนำมาทำเป็นหนังหรือละคร ก็ต้องมีผู้สนใจมากเช่นกัน เหมือนเรื่อง Birigal … เรื่องเด็กสาวม.ปลายที่เรียนไม่เก่ง แต่สามารถสอบเข้ามหาวิทยาลัยเคโอ ซึ่งถูกนำมาสร้างเป็นหนัง ละคร และตีพิมพ์เป็นหนังสือ Best Seller

Storys.jp สร้างรายได้จากการทำงานร่วมกับบริษัทโทรทัศน์หรือช่วยเป็นตัวกลางระหว่างสำนักพิมพ์กับนักเขียน ตลอดจนช่วยทำ E-book นั่นเอง

สรุป ทั้ง 3 ตัวอย่างเว็บดังในญี่ปุ่นข้างต้น ไม่ว่าจะเป็น Cakes.mu เว็บรวมบทความจากนักเขียนชื่อดัง Cookpad.com เว็บรวมสูตรอาหาร หรือ Storys.jp เว็บที่เชื่อว่าทุกคนมีเรื่องราวพิเศษของตัวเอง ได้พิสูจน์ให้เราเห็นแล้วว่า …..

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

2. เว็บไม่จำเป็นต้องทำ Content ทุกอย่างเอง
แทนที่เว็บจะคิดและเขียนทุกอย่างด้วยตนเอง เราอาจใช้ User-Generated Content ได้ กล่าวคือ เปิดเป็น Platform แล้วให้ User เข้ามาเขียน ข้อดี คือ ได้ Content ที่หลากหลาย ปริมาณมากในช่วงเวลาอันสั้น

นอกจากนี้ User แต่ละคน จะเป็นคนช่วยทำการตลาดให้เรา เนื่องจากเขาจะช่วยเผยแพร่ Content ของเขาให้แก่เพื่อน ๆ ใน SNS ทำให้เว็บเป็นที่รู้จักมากขึ้น

สิ่งสำคัญ คือ ทำอย่างไรให้ User สร้าง Content ได้ง่าย และสามารถรักษาให้ User เขียน content ได้อย่างสม่ำเสมอ ดังฟังก์ชั่นส่งภาพอาหารขอบคุณเจ้าของสูตรในเว็บ Cookpad หรือปุ่ม “อยากอ่านต่อ” ในเว็บ Storys.jp เป็นต้น

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

ใครสนใจการตลาดแบบญี่ปุ่น สามารถอ่านบทความเก่าวิเคราะห์สินค้าญี่ปุ่นที่สามารถปรับใช้ได้กับตลาดไทยกันนะคะ

 


 

ขอบคุณ Content ดี ๆ ที่มีประโยชน์มาก ๆ จาก คุณเกตุวดี Marumura ครับ 🙂

เทคนิคการทำเว็บไซต์ให้ติดอันดับ Google ด้วยการส่งเว็บของเราเข้าสู่สารบัญเว็บไซต์ด้วยวิธีง่าย ๆ

วิธีการส่งเว็บไซต์ของเราเข้าสู่สารบัญเว็บไซต์

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

สารบัญเว็บไซต์แรกชื่อว่า http://info.cern.ch ซึ่งถือว่าเป็นเว็บแรกที่ถือว่าเกิดขึ้นมาบนโลกอินเทอร์เน็ต จนต่อมาได้มีเว็บไดเร็คทอรี่อีกมากมายที่เกิดขึ้นมา อาทิเช่น DMOZ / Yahoo! ต่างก็ทำหน้าที่ในการจัดเก็บข้อมูลเว็บไซต์นับแสนที่เกิดขึ้นมาอย่างรวดเร็วเพียงแค่ไม่กี่ปี

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

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

วิธีการ ส่งเว็บไซต์ของเราเข้าสู่สารบัญเว็บไซต์มี 2 วิธีดังนี้

  1. การส่ง Website URL ด้วยตัวเอง

2. การส่ง Website URL ผ่าน Website ที่ให้บริการ

เรามาเริ่มวิธีที่ 1 กันครับ การส่ง Website Url ด้วยตัวเอง
Search Engines Google

1. การส่งเว็บไซต์ให้ Google เข้า Google พิมพ์ submit website google เราจะเจอที่ที่ให้เราส่งเว็บไซต์ไป ซึ้งอยู่ลำดับแรกเลย ให้เรา เพิ่ม URL เว็บไซต์ของเราลงไปแล้วกดส่ง เพียงเท่านี้ Bot ของ Google ก็จะรู้จักเว็บไซต์ของเราแล้วครับ

Search Engines Bing
2. การส่งเว็บไซต์ให้ Bing ไปที่ : http://www.bing.com/docs/submit.aspx เราจะเห็นที่ใส่ URL พอใส่ URL เสร็จเรียบร้อย ก็กรอก captcha text ที่แสดง เสร็จกด SUBMIT เลยครับ

วิธีที่ 2 การส่ง Website Url ผ่าน Website ที่ให้บริการ
เราสามารถ ส่ง Url ผ่าน Website ที่ให้บริการเหล่านี้ได้ http://www.freewebsubmission.com
http://www.entireweb.com/free_submission

โดย Website เหล่านี้จะทำการ ส่ง Url ไปให้ Search Engines และ Web Directories ต่างๆ โดยที่เราไม่ต้องทำการ ส่ง Url เองทีละตัวเหมือนวิธีแรก


สรุป

การทำ SEO นั้นสิ่งแรกที่เราจะทำเลยนั้นก็คือ การส่งเว็บไซต์ของเราเข้าไปสู่สารบัญเว็บไซต์ให้ Search Engines รู้จักเรา และเรายังได้ลิงก์กลับมาสู่เว็บไซต์ของเราด้วย
นี้คือ list เว็บสารบัญเว็บไซต์เพื่อทำ Blicklink ครับ http://www.directorycritic.com/free-directory-list.html

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


ขอบคุณที่มา: https://medium.com/artisan-digital-agency/

4 วิธีการทำเว็บไซต์แบบ Responsive ที่ใช้กันทั่วโลก !!

การทำเว็บไซต์แบบ Responsive ซึ่งก็คือ การทำให้เว็บไซต์รองรับหน้าจอ Smartphone, Tablet, และ Desktop ในเว็บไซต์เดียว ตอนนี้กำลังได้รับความนิยมมากครับ ซึ่งถ้าแนะนำให้อ่านบลอคเรื่อง Responsive Website คืออะไร ก่อนอ่านบทความนี้นะครับ

นอกจากนั้น ถ้าท่านใดสนใจเกี่ยวกับการเอา Twitter Bootstrap มาทำ Responsive Website สามารถอ่านบลอคเรื่อง Case Study – Genie Records Responsive Website ได้เลยครับ

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

เทคนิคการทำ Responsive Website ที่จะมาอธิบายในวันนี้แบ่งเป็น 4 วิธีครับ คือ

  1. Responsive Retrofitting – แปลงเว็บเก่าให้กลายเป็น Responsive
  2. Responsive Mobile Site – ปลูกเมล็ด Mobile Site แล้วแปลงเป็น Responsive
  3. Mobile-First Responsive Site – ทำเว็บใหม่แบบ Mobile-First (หรือบางคนเรียก Progressive Enhancement)
  4. Piecemeal – แปลงเว็บเก่าให้กลายเป็น Responsive ทีละนิด

มาดูกันเลยครับว่าแต่ละวิธีเป็นยังไง และมีข้อดี ข้อเสียอย่างไรบ้าง

RESPONSIVE RETROFITTING

การทำเว็บไซต์ Responsive แบบ Desktop-First (คลิกเพื่อดูรูปใหญ่)

การทำเว็บไซต์ Responsive แบบ Desktop-First (คลิกเพื่อดูรูปใหญ่)

เป็นการเอา Desktop Site (เว็บไซต์ที่ทำขึ้นมาเพื่อรองรับหน้าจอคอมพิวเตอร์) ที่มีอยู่แล้วมาเขียน CSS3 Media Query เพิ่มเข้าไป เพื่อให้รองรับหน้าจอแบบ Responsive วิธีนี้ใช้กันเยอะมากครับ เพราะเป็นวิธีที่ Developer ไม่เหนื่อยมาก แต่จะเหนื่อยที่ User แทนครับ ลองมาดูกันว่าดีไม่ดียังไง

ข้อดีของ RESPONSIVE RETROFITTING

  • ทำได้เร็ว ง่าย แค่ใส่ CSS เพิ่มไปอีกไฟล์ก็รองรับ Responsive แล้ว
  • User เก่าไม่งง ดีไซน์เก่ายังอยู่
  • ไม่ต้อง Redesign ทำให้ไม่ต้องถกปัญหาเรื่อง Branding กับบริษัทใหม่อีกครั้ง และไม่เสียงบค่าดีไซน์เพิ่มด้วย

ข้อเสียของ RESPONSIVE RETROFITTING

  • User Experience ในการใช้งานบน Mobile Site อาจไม่เต็มที่นัก เพราะเน้นแค่ให้ Layout เปิดได้บนมือถือเฉย ๆ บางส่วนเช่น Navigation, Slider อาจจะยังใช้บนมือถือไม่ได้
  • เว็บ Desktop เป็นเว็บที่หนัก มี Component มากมาย (โดยเฉพาะคนที่ชอบใช้ Bootstrap ซึ่งค่อนข้างหนักเว็บไซต์) พอเปิดในมือถือเหมือนกับพยายามเอาช้างไปยัดใส่ตู้เย็นเล็ก ๆ เลยครับ
  • เว็บโหลดช้าลงทั้งในมือถือและในคอม เพราะเขียนโค้ดมากขึ้นเพื่อให้ไปรองรับ Responsive ยิ่งมือถือเน็ตช้า ๆ ยิ่งช้าเข้าไปอีก
  • บาง Device ไม่รองรับ Media Query ทำให้เปิดไม่เจอเวอร์ชั่น Responsive ถึงแม้จะแก้ได้โดยการใช้ Javascript ช่วย แต่ทำให้เว็บหนักขึ้นไปอีก ดังนั้นทำแบบ Mobile First จะครอบคลุมมากกว่า
  • เป็นวิธีที่ค่อนข้างฉาบฉวย คือทำแบบนี้จะไม่ใช่ Responsive ที่ทำให้ User บนมือถือได้รับประโยชน์อย่างแท้จริง (อาจจะให้โทษมากกว่า)

RESPONSIVE MOBILE SITE

การทำเว็บไซต์ Responsive แบบ Responsive Mobile Site (คลิกเพื่อดูรูปใหญ่)

การทำเว็บไซต์ Responsive แบบ Responsive Mobile Site (คลิกเพื่อดูรูปใหญ่)

วิธีนี้เป็นการทำ Responsive Website เหมือนหว่านเมล็ดเป็น Mobile Site (เว็บไซต์ที่ทำขึ้นเพื่อรองรับหน้าจอมือถือโดยเฉพาะ) แยกออกมาก่อน คนที่เข้าทาง Desktop ก็เจอเว็บเก่า ส่วนคนที่เข้าจากมือถือก็เจอเว็บใหม่ จากนั้นค่อย ๆ ทำการพัฒนา Mobile Site ตัวนี้ให้สามารถดูใน Tablet และ Desktop ได้สวยงาม ซึ่งพอเสร็จสมบูรณ์แล้ว ก็ย้ายคนที่เข้าทาง Desktop ให้เปิดมาเจอเว็บไซต์ใหม่ด้วย และทิ้งเว็บเก่าไป

เว็บไซต์ใหญ่ ๆ ในต่างประเทศ เช่น BBC ก็ใช้วิธีนี้ครับ

ข้อดีของ RESPONSIVE MOBILE SITE

  • ไม่ต้องกลัวว่าเว็บแบบ Responsive จะทำให้เกิดปัญหากับ User เก่าที่เข้าทางคอม เพราะเว็บเก่ายังใช้ได้อยู่
  • มีเวลาให้ทีม Designer ค่อย ๆ เรียนรู้ในการดีไซน์เว็บไซต์ที่เหมาะกับ Responsive โดยใช้เว็บ Mobile site เป็นที่ทดสอบ
  • สำหรับทีมอื่น ๆ เช่น ฝ่าย Content ก็มีเวลาเรียนรู้ในการปรับ Content ให้เหมาะกับการอ่านบนหน้าจอหลายรูปแบบเช่นกัน
  • ช่วยลดขนาดเว็บให้เล็กลงกว่าเดิมได้ โดยการตัดทอน Element เก่าใน Desktop Site ที่ไม่จำเป็นออก

ข้อเสียของ RESPONSIVE MOBILE SITE

  • การทำ Mobile Site แยกจากเว็บหลัก อาจทำให้เกิดปัญหาเรื่อง URL Redirect, SEO เป็นต้น ซึ่งในความเห็นของแอดมิน (Designil) ปัญหานี้เป็น Cost ที่เราต้องจ่ายเพื่อไปสู่จุดที่ดีขึ้นครับ
  • การทำ Mobile Site ขึ้นมาได้สำเร็จ ไม่ได้แปลว่าในอนาคตจะสามารถพัฒนาต่อเป็น Desktop Site เพื่อใช้แทนเว็บเก่าได้ง่าย จะเจอปัญหาทั้งเรื่องระยะเวลา ความสามารถของทีมงาน และแรงกดดันในการเปลี่ยนจากผู้อ่านเก่า ๆ
  • องค์กรบางแห่งไม่อดทนพอที่จะผลักดันให้ Mobile Site กลายเป็น Desktop Site ได้ในอนาคต ทำให้โปรเจคโดนทิ้งครึ่ง ๆ กลาง ๆ เนื่องจากโดนตัดเงินทุนก่อน

MOBILE-FIRST RESPONSIVE SITE

การทำเว็บไซต์ Responsive แบบ Mobile-First (คลิกเพื่อดูรูปใหญ่)

การทำเว็บไซต์ Responsive แบบ Mobile-First (คลิกเพื่อดูรูปใหญ่)

เทคนิค Mobile-First Responsive Website เป็นการสร้างเว็บไซต์ใหม่ขึ้นมาเลย โดยดีไซน์ให้รองรับ Mobile ก่อน เน้นทำให้เว็บไซต์มีเฉพาะ Element ที่สำคัญจะได้โหลดไว เขียน CSS สำหรับ Mobile โดยไม่ต้องใช้ Media Query เลย จากนั้นค่อยพัฒนาให้เหมาะกับ Desktop Site โดยเติม CSS สำหรับ Desktop เข้าไป (ใช้ Media Query ช่วย)

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

ข้อดีของ MOBILE-FIRST RESPONSIVE WEBSITE

  • การทำเว็บไซต์แบบเริ่มใหม่ทั้งหมด ทำให้ Designer / Developer ทำงานได้ง่ายขึ้น ต่างกับที่ต้องทำเพิ่มเติมจากเว็บเดิม ซึ่งเปลี่ยนทีต้องมาคอยระวังทีว่าโค้ดเดิมจะพังมั้ย
  • รองรับ Mobile ได้ทันที โดยที่ Device นั้นไม่ต้องรองรับ Media Query ก็ได้
  • ปรับแต่งให้เว็บไซต์โหลดไวบนมือถือได้ไม่ยาก
  • ปรับแต่งให้รองรับหน้าจอหลายขนาดได้ง่าย เพราะเราทำจากเล็กไปใหญ่ เราจะเห็นหมดว่าพอขยายหน้าจอถึงไหนแล้วหน้าตาจะเป็นยังไง
  • เหมาะกับการพัฒนาเป็น Desktop Site ต่อในอนาคต

ข้อเสียของ MOBILE-FIRST RESPONSIVE WEBSITE

  • ใช้เวลาเยอะกว่าเว็บจะสามารถปล่อยให้ User เข้ามาใช้ได้ เพราะต้องสร้างขึ้นมาใหม่หมด กว่าจะเทส กว่าจะดีไซน์เสร็จ
  • การทำแบบ Mobile First ต้องปรับแนวคิดการทำเว็บไซต์แบบเก่าในสมองออกไป ซึ่งเราต้องให้ความรู้กับทีมงานเยอะ ๆ ถึงจะทำได้
  • การต้องดีไซน์เว็บใหม่อาจมีปัญหากับ Branding ขององค์กร บางครั้งผู้บริหารอยากได้โลโก้ใหญ่ หรืออยากได้สีนั้นสีนี้ ก็จะทำให้การทำเว็บไซต์ใหม่ล่าช้าขึ้นไปอีก
  • Interface ใหม่อาจทำให้ User สับสนในช่วงแรก (เหมือนที่ Pantip ตอนรีดีไซน์ใหม่ ๆ) เพราะฉะนั้นต้องใส่ใจให้คำตอบ User และรับ Feedback ตลอดเวลา

PIECEMEAL

วิธีสุดท้ายนี้เป็นการค่อย ๆ แปลงทีละส่วนบนเว็บไซต์ให้เป็น Responsive ซึ่งเหมาะกับเว็บไซต์บางเว็บที่ไม่สามารถ Redesign ใหม่หมดได้ อาจจะติดเรื่อง Branding, งบประมาณ หรืออะไรก็แล้วแต่ ซึ่งการทำแบบ Piecemeal นี้ก็มีแยกย่อยเป็นหลายแบบ คือ

PIECEMEAL แบบที่ 1 – PAGE BY PAGE

ทำเป็น Responsive ทีละหน้า วิธีนี้ถูกใช้โดย Microsoft คือทำหน้าแรกให้ Responsive ก่อน แล้วเปิดให้คนใช้ โดยที่หน้าอื่น ๆ ยังไม่ได้ทำให้รองรับ Responsive

ข้อดีของ PAGE BY PAGE RESPONSIVE

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

ข้อเสียของ PAGE BY PAGE RESPONSIVE

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

PIECEMEAL แบบที่ 2 – COMPONENT BY COMPONENT

วิธีการทำ Responsive Website แบบ Component by Component นี่ค่อนข้างแปลกใหม่ครับ เป็นการทำให้ Element ทีละส่วนในเว็บกลายเป็น Responsive (เช่น header ก่อน แล้วค่อยมาทำ footer)

ข้อดีของเทคนิค COMPONENT BY COMPONENT

  • การค่อย ๆ เปลี่ยน Interface ทำให้ User ค่อย ๆ เรียนรู้หน้าตาเว็บแบบใหม่ทีละนิด ทำให้ User ไม่รู้สึกตกใจตอนเราทำเสร็จแล้ว
  • การแบ่งส่วนในเว็บเป็น Element ย่อย ๆ ทำให้ Developer สามารถทำเว็บไซต์ได้ง่ายขึ้น และ Design ไปในทิศทางเดียวกันมากขึ้น (เป็นเรื่องของ Atomic Design ครับ ซึ่งถ้ามีโอกาสจะนำมาเขียนเล่าให้ฟัง)
  • การแบ่งส่วนในเว็บเป็น Element ย่อย ๆ ทำให้สามารถส่งให้ลูกค้าตรวจเช็คได้ง่ายขึ้น และทำงานกันได้เร็วขึ้น โดยส่งเป็นทีละ Element ไป

ข้อเสียของเทคนิค COMPONENT BY COMPONENT

  • ในระหว่างที่ยังไม่เสร็จสมบูรณ์ User อาจรู้สึกแปลก ๆ ที่บาง Element ดูใหม่ บาง Element ดูเก่า
  • เหมือนกับการทำ Page by Page คืออาจไม่มี Deadline แน่นอน ทำให้เว็บไม่เสร็จสักที
  • อาจเกิดปัญหาในการใช้เทคโนโลยีใหม่แล้วไปตีกับเทคโนโลยีเก่าที่ใช้อยู่ได้

สรุปว่าเลือกวิธีการทำเว็บ RESPONSIVE แบบไหนดี

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

  1. เวลาที่มีในการพัฒนาเว็บไซต์
  2. งบประมาณในการพัฒนาเว็บไซต์
  3. รูปแบบองค์กร (มีผลว่าเทคนิคไหนจะล่มไม่ล่ม จะมีงบประมาณต่อในปีหน้ามั้ย หรือมีแค่ก้อนเดียวจบ)
  4. ความสามารถของสมาชิกในทีม (Web Developer, Web Designer, Content Manager, etc.)
  5. ผลลัพธ์ที่เราต้องการจากการทำเว็บไซต์แบบ Responsive (เช่น ทำให้คนซื้อสินค้าในเว็บได้ง่ายขึ้น หรือเว็บไซต์โหลดเร็วขึ้นบนมือถือ)

ขอบคุณที่มา: https://www.designil.com/responsive-web-design-4-ways.html

 

เทคนิคการทำเว็บไซต์ ให้โดนใจลูกค้า

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

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

 

ทุกอย่างเริ่มต้นแค่ Customer Goals และ Business Goals 

สิทธิพงศ์ กล่าวว่า ผู้ประกอบการจะต้องตอบโจทย์ 2 ข้อนี้ให้ได้ก่อน นั่นคือ “Customer Goals” คืออะไร หมายถึง ลูกค้าเข้ามาในเว็บไซต์เรา เข้ามาทำอะไร และ Business Goals” คือ เว็บไซต์ของเรา มีหน้าที่อะไรที่จะทำให้ธุรกิจเราดีขึ้น โดยยกตัวอย่าง เฟซบุ๊ก ซึ่ง Customer Goals คือ (1) เราอยากรู้เรื่องชาวบ้าน (2) เราอยากให้ชาวบ้านรู้เรื่องเรา ส่วน Business Goals คือ เฟซบุ๊กได้ประโยชน์จากการขายโฆษณา ดังนั้นแปลว่า เว็บไซต์และแอปพลิเคชันของเขา ต้องทำได้ 2 หน้าที่ ก็คือ ทุกคนที่เข้าไปในเฟซบุ๊ก ต้องสามารถที่จะรู้เรื่องเพื่อนได้ และเพื่อนต้องรู้เรื่องเราได้ ในขณะเดียวกันเฟซบุ๊กเองต้องสามารถขายโฆษณาได้

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

พฤติกรรมลูกค้าสมัยนี้มีอะไรบ้าง  

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

  1. ชอบเอาตัวเองเป็นจุดศูนย์กลาง (Self-centered)
  2. เวลาซื้อของต้องมีความเชื่อมั่นและความน่าเชื่อถือ
  3. ชอบอะไรที่เป็นรายละเอียด
  4. ชอบ Human Touch
  5. สมาธิสั้น
  6. ชอบอะไรง่าย ๆ

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

ใช้ทฤษฎี Start with Why 

ในการจัดการกับมนุษย์สมัยนี้ที่ชอบเอาตัวเองเป็นจุดศูนย์กลาง (Self-centered) ให้ขายของโดยใช้ทฤษฎี Start with Why คือ มุ่งเน้นไปที่เหตุผลว่า ลูกค้าเขาจะเอาไปทำไม ทำไมเขาต้องซื้อ และทำไมต้องซื้อของเรา แทนที่จะเริ่มต้นว่า สินค้าของเราคืออะไร โดยยกตัวอย่างให้เข้าใจง่าย ๆ ว่า

“ผมชอบไปเดินฟอร์จูน เจอคนที่มาขายคอมพิวเตอร์ให้เรา ก็มักจะพูดว่า พี่เอาคอมพิวเตอร์สเปกอะไร ใครเจอแบบผมนี่ก็จะอึ้งแบบผมเหมือนกัน สเปกคืออะไร เขาก็บอกว่า พี่เอา 2 GB 3 GB หรือ 4 GB เอา RAM เท่าไร ฮาร์ดดิสก์มากน้อยขนาดไหน จอใหญ่จอเล็ก ความละเอียดเท่าไร เอาการ์ดจอไหม งงไหมครับ งงสิครับ แต่ถ้าเริ่มต้นที่เราซื้อไปทำไม เขาถาม พี่จะเอาคอมพิวเตอร์ไปทำอะไรครับ อ๋อ เอาไปเล่นเฟซบุ๊กกับเอาไปใช้ word กับ excel นิดหน่อยเท่านั้นเอง เกมเล่นไหมครับพี่ อ๋อ ถ้าไม่เล่น พี่เอารุ่นนี้ไปเลยครับ 2 GB RAM ก็ไม่ต้องเยอะ การ์ดจอไม่ต้องนะครับ รับรองเหมาะกับสิ่งที่พี่เอาไป แบบนี้ขายง่ายกว่าไหมครับ น่าซื้อกว่านะครับ” 

ไม่มองข้าม About Us ไม่ละเลย Security

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

“จากสถิติพบว่า คนประมาณ 7% ที่เข้ามาในเว็บไซต์อีคอมเมิร์ซ จะเข้าไปดูหน้า About Us เหมือนจะน้อยนะครับ แต่ว่า 30% ของกลุ่มนั้น เป็นกลุ่มที่จะเปลี่ยนกลายเป็นลูกค้าเรา ดังนั้นอย่าลืม มีหน้า About Us แล้วตั้งใจเขียนด้วย”

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

รีวิวควรมี รูปภาพต้องใช่ เนื้อหาดึงดูดใจ ขายได้ด้วยเรื่องเล่า

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

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

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

สำหรับเรื่อง Wording หรือข้อความที่เขียน ก็มีส่วนที่จะทำให้ผู้บริโภคตัดสินใจซื้อได้ง่ายขึ้น เช่น หากเราเขียนว่า “ซื้อวันนี้ลด 50%” กับ “ซื้อวันนี้ลด 50%” โดยด้านล่างจะย้ำเลยว่า “ทุกชิ้น ทุกราคา วันเดียวเท่านั้น” เพื่อเป็นการตอกย้ำ 2 รอบ ซึ่งพบว่าคนสนใจคลิกต่อ ข้อความแบบแรกที่มีบรรทัดเดียว 20% แต่อย่างที่ 2 ที่มีตัวย้ำซ้ำไปอีกรอบ คนจะคลิกเพิ่มขึ้นกลายเป็น 50%

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

“หนึ่งใน storytelling ที่ผมชอบมากคือ โฆษณากล้อง Leica เขาตั้งชื่อว่าเป็นโฆษณาที่น่าเบื่อที่สุด (The Most Boring Ad Ever Made?) เพราะว่าโฆษณานี้ยาวถึง 45 นาที มีภาพอะไรบ้าง ไม่มีอะไรเลย นอกจากเขาเอากระดาษทรายมาขัดกล้อง ขัดไปเรื่อย ๆ อย่างเดียว แต่มันได้อะไรครับ คนดูจบหลายคน เยอะนะครับ เพราะว่าพอดูแล้วอิน รู้สึกว่า โอ้โห! กว่าจะได้กล้องมาตัวหนึ่งต้องทำละเอียดขนาดนี้ Handmade ขนาดนี้เลยหรือ เริ่มรู้แล้วว่า ทำไมกล้องเขาถึงต้องราคาแพง เพราะงานเนี้ยบนี่เอง ไม่เหมือนกล้องยี่ห้ออื่น ก็เป็นตัวที่จะมาช่วยขยายเรื่องราว บอกรายละเอียดให้กับลูกค้าได้รู้ว่าสินค้านั้นไม่ได้ได้มาง่าย ๆ”

อย่าลืม Good Impression, Emotion, Character, Conversation & Follow up

คนเราชอบ Human Touch การสร้างความสัมพันธ์ด้วยเว็บไซต์ สามารถทำได้โดย

  • ต้องมี Good Impression คือความประทับใจตั้งแต่แรกเห็น เว็บไซต์หน้าแรกเปิดมาก็ต้องทำให้คนดูแล้วรู้สึกแล้วประทับใจ อยากดูต่อ ไม่ใช่ว่าเปิดหน้าแรกมารูปแบบก็ไม่สวย หรือรูปที่ใช้ความละเอียดไม่ดี คนเห็นแล้วไม่ประทับใจก็ไม่ดูต่อ
  • ถัดมาคือ การสร้าง Emotion หรือสร้างอารมณ์ เช่น LINE เป็นแอปพลิเคชันที่สื่อด้านอารมณ์มาก มีสติกเกอร์เป็นตัวสร้างอารมณ์ นั่นคือเหตุผลที่เราหันมาใช้ LINE กันหมดเลย ดังนั้นในการทำเว็บไซต์หรือการทำแอปพลิเคชันของเรา ไม่ควรละเลยในเรื่องนี้ ต้องพยายามสื่อสารด้านอารมณ์ด้วย
  • Character ของเว็บไซต์หรือสินค้าของเราต้องมี ต้องมีจุดขายที่เด่นชัด (Unique Selling Point)

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

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

“การส่งอีเมล บางทีมันมี strategy นิด ๆ หน่อย ๆ เช่น สมมติผมทำให้อสังหาฯ ผมอยากรู้ว่าในห้องนี้มีใครสนใจคอนโดบ้าง สมมติว่าในนี้ 1,000 คน ผมมีอีเมลหมดเลย อีเมลฉบับแรกขายบ้าน เปิดกันประมาณ 20 คน ฉบับที่ 2 ยิงไปขายคอนโด ปรากฏว่าเปิดกันประมาณ 300 คน เฮ้ย! คอนโดใช้ได้ ผมก็จะเก็บกลุ่มนี้ไว้ ต่อไปผมก็จะโฟกัสแล้วว่า เราลองเล่นคอนโดราคาถูกดีกว่า แต่อยู่นอกเมือง คอนโดเริ่มต้นที่ล้านกว่าบาท ยิงไปเลยที่ 300 คนนี้ 300 คนนี้ แน่นอนครับเป็นคนที่สนใจคอนโด แต่เขาสนใจคอนโดราคาถูกหรือแพงเราไม่รู้ ส่งราคาถูกไปก่อน ปรากฏว่าเปิดประมาณ 150 คน แล้วหลังจากนั้น เราค่อยมากรองครับ ก็ส่งไปเรื่อย ๆ สุดท้ายเราก็จะได้กลุ่มเป้าหมายที่ถูกต้อง โดยไม่จำเป็นต้องซื้ออีเมลมาเป็นก้อน ๆ ใหญ่ ๆ ซึ่งเราต้องพยายามหาเวลาเทคแคร์กับคนที่ไม่รู้จักเราอีก ซึ่งนั่นก็จะยากกว่า”

 

เรียกร้องความสนใจ

จากการที่คนเราสมาธิสั้น โดยจากสถิติมีสมาธิอยู่กับการจดจ่อแค่ 8 วินาที ดังนั้นวิธีง่าย ๆ ก็คือการทำอย่างไรก็ได้ให้เขาสนใจเรา

  • การใช้ทฤษฎี Eye Contact เช่น การใช้ภาพพรีเซ็นเตอร์ที่มี Eye Contact หรือมองตาคนดูอยู่ตลอดเวลา แรก ๆ เราอาจจะไม่ได้สนใจอะไรกับโฆษณานี้ แต่เห็นแล้วเราก็มักสะดุดหยุดดูครู่หนึ่ง ถ้าเห็นหลายครั้งแล้วหยุดดูเรื่อย ๆ ก็แสดงว่าการใช้  Eye Contact  นั้นได้ผล หรือการใช้ Eye Direction เพื่อให้เกิดเส้นนำสายตาที่ไปจบที่ตัวสินค้า ดังนั้น ต่อไปนี้เราทำสินค้า ทำโฆษณา ไม่ว่าจะบนเฟซบุ๊กหรือบนเว็บไซต์ ให้ลองดูว่ามี Eye Contact หรือ Eye Direction ไหม
  • การใช้สี ก็มีความสำคัญ สีแดงเป็นสีที่ร้อนแรง สีฟ้าทำให้รู้สึกเย็นใจ สีส้มเป็นสีที่มีวิจัยออกมาว่า เป็นสีที่ทำให้คนอยากกดปุ่มมากที่สุด จึงเป็นสีที่ใช้กับพวกปุ่ม Buy Now ซื้อเลย ดังนั้นสีก็มีผลมาก ๆ กับการตัดสินใจหรือว่ากับอารมณ์ของคน

Search ต้องเจอ เข้าถึงต้องง่าย

การที่คนเราชอบอะไรที่ง่าย ๆ ดังนั้นการเข้าถึงก็ต้องง่าย โดยมีเทคนิค เช่น

  • ทำ UI หรือ User Interface ให้ใช้ง่าย แปลว่า เวลาลูกค้าเข้ามาในเว็บไซต์ อยากจะหาปุ่มซื้อ ต้องหาได้ อยากจะหาปุ่ม save ไว้ก่อน เดี๋ยวค่อยมาดูใหม่ก็ต้องหาได้ มีทฤษฎีว่า Interface ของเว็บไซต์ที่ดี คือต้อง No Interface นั่นคือ ผู้ใช้ต้องรู้สึกว่ามันไม่มีอยู่ ความง่ายก็คือ เขาต้องเข้าถึงทุกอย่างได้
  • มือถือต้องเข้าถึงได้เช่นเดียวกับเว็บไซต์ อย่างไรก็ตาม เวลาจะซื้อ คนก็ยังเลือกใช้คอมพิวเตอร์ ดังนั้นจะเน้นพัฒนาบนมือถืออย่างเดียวก็ไม่ได้

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

 


 

ขอบคุณที่มา: https://www.etda.or.th/content/technics-for-e-commerce-website.html

Google Chrome เตรียมขึ้นข้อความ “Not Secure” บนเว็บ HTTP ตั้งแต่เดือนกรกฎาคมนี้

กูเกิลมีนโยบายผลักดันให้เว็บทั้งหลายเลิกใช้การเชื่อมต่อไม่เข้ารหัส (HTTP) และหันไปใช้ HTTPS แทนมาเป็นเวลานาน ตอนนี้ถึงเดือนสุดท้ายที่ Chrome จะเริ่มเตือนครั้งแรกว่า HTTP ไม่ปลอดภัยอีกต่อไป

Google ออกแถลงการณ์ เตรียมแสดงข้อความ “Not Secure” บนเบราว์เซอร์ Chrome สำหรับการเข้าถึงเว็บไซต์ประเภท HTTP ซึ่งไม่มีการเข้ารหัสข้อมูล โดยจะเริ่มดำเนินการใน Google Chrome 68 ที่จะเปิดให้ใช้งานในเดือนกรกฎาคม 2018 นี้

การตัดสินใจของ Google ครั้งนี้ คาดว่ามาจากการเติบโตของเว็บไซต์ประเภท HTTPS และทราฟฟิกบนอินเทอร์เน็ตในปัจจุบันที่มีการเข้ารหัสข้อมูลเสียเป็นส่วนใหญ่ โดย Google ระบุว่า มากกว่า 68% ของทราฟฟิกของ Chrome บน Android/Windows และมากกว่า 78% ของทราฟฟิกของ Chrome OS/macOS ถูกเข้ารหัสข้อมูลแบบ HTTPS

การแสดงข้อความ “Not Secure” บน Address Bar นี้ เป็นแผนกลยุทธ์ระยะยาวของ Google โดยเริ่มจาก Chrome 56 ที่จะแสดงข้อความนี้บนเว็บ HTTP ที่มีช่องใส่รหัสผ่านหรือข้อมูลบัตรเครดิต ตามมาด้วย Chrome 62 ที่จะแสดงข้อความบนเว็บ HTTP เมื่อเปิดหน้าต่าง Private Browsing และสุดท้าย Chrome 68 ที่จะแสดงข้อความแจ้งเตือนผู้ใช้เมื่อเข้าถึงเว็บ HTTP ทั้งหมด

Google ไม่ใช่รายเดียวที่ตัดสินใจแบนเว็บ HTTP ทางฝั่ง Mozilla เองก็เริ่มทำแบบเดียวกันตั้งแต่เดือนธันวาคมปีที่ผ่านมา เมื่อทีมวิศวกรเริ่มวางรากฐานใหม่แก่ Firefox ในการแจ้งเตือน “Not Secure” บน Firefox เมื่อเข้าถึงเว็บ HTTP อย่างไรก็ตาม Mozilla ยังไม่กำหนดเส้นตายแน่ชัดเกี่ยวกับมาตรการดังกล่าว

 


ที่มาและเครดิตรูปภาพ: https://www.bleepingcomputer.com/news/google/google-chrome-to-mark-all-http-sites-not-secure-starting-july-2018/

วิธีเชื่อมต่อ WooCommerce กับ Google Analytic เพื่อติดตามยอด Ecommerce

พอดีว่ามีโอกาสได้หาวิธีเชื่อมต่อให้ Google Analytic สามารถตรวจจับการซื้อขายบนเว็บไซต์ที่ใช้ WooCommerce ได้ แล้วก็เห็นว่ายังไม่มี Tutorial ที่เป็นภาษาไทย ก็เลยขอโอกาสตรงนี้มาเขียนให้อ่านกันว่าต้องทำอย่างไรบ้างครับ

ใช้ Plug-in ตัวไหนในการติดตั้ง ?

เท่าที่ลองหลาย ๆ ตัว ผมพบว่า Enhanced Ecommerce Google Analytics เป็นตัวที่ติดตั้งง่ายมาก! แค่ลงปลั๊กอิน ใส่เลข Google Analytics ID แล้วก็ติ๊กเปิดใช้งาน ก็สามารถทำงานได้แล้ว

หน้าต่างปลั๊กอิน Enhanced Ecommerce Google Analytic ก็ประมาณนี้ครับ ง่ายๆ ติ๊กมันทุกอันเลย

พอเสร็จแล้วให้เราไปเปิดที่ Google Analytic และเข้าไปตั้งค่า Ecommerce Setting โดยเข้าจาก Admin > View > E-commerce Settings

จะพบหน้าต่าง Ecommerce Set-up ให้เราเปิด Status ให้เป็น On แล้วกด Next Step เพื่อไปยังหน้าต่อไปครับ

เสร็จแล้วก็มาเปิด Enhanced Ecommerce Reporting เพื่อดูว่า User ที่เข้ามาซื้อของ มีพฤติกรรมอะไรบ้าง เช่น ลบสินค้าออกจากตะกร้ากี่ครั้ง เข้าไปดู Related products กี่ครั้ง

(สำหรับส่วนนี้ทางผู้เขียนบทความก็ยังไม่ได้ศึกษาโดยละเอียด แต่ทางเจ้าของ Plugin แนะนำมาว่าให้ติดตั้งครับ)

และให้ตั้งค่า Checkout Labeling ตามที่ผมเขียนเอาไว้ได้แก่

Step 1 : Checkout View
Step 2 : Billing Info
Step 3 : Proceed to payment

และขั้นตอนสุดท้าย หากสินค้าของเรา รับชำระเป็นเงินบาท ต้องไปตั้งค่าทั้งใน Google Analytic ให้เป็น THB และใน Woocommerce ให้เป็น THB ตรงกัน

ตั้งค่าตามวงกลมนี้เลยครับ

พอตอนสุดท้าย ก็คือการทดสอบซื้อสินค้า ในที่นี้ผมได้ลองตั้งสินค้าที่มีราคา 1 บาท แล้วลองทำการซื้อผ่านออนไลน์ ก็จะขึ้นในหน้าต่าง Product Performance ตามภาพด้านล่างนี้ครับ

ก็เป็นอันเสร็จสิ้นในการตั้งค่าให้ WooCommerce และ Google Analytic ทำงานร่วมกันและแสดงผล ซึ่งจากตรงนี้ เราสามารถนำไปใช้คู่กับ UTM Link เพิ่มเติม เพื่อหาว่า Channel ใดที่มีคนเข้ามาซื้อมากที่สุด หรือสินค้าแบบไหนที่คนเข้ามาดูแต่ไม่ซื้อ เพื่อปรับปรุงกันต่อไป


Credit: medium.com/@kittypunkz

ข้อดีข้อเสียของ WooCommerce คืออะไรบ้าง?

เคยสงสัยกันไหมทำไมเว็บไซต์ E-Commerce บ้านเราทำไมมีเยอะแยะเต็มไปหมด แล้วเขาสร้างมันขึ้นมากันได้ยังไง มันไม่ใช้เรื่องง่ายเลยที่จะพัฒนาระบบขึ้นมาระบบหนึ่ง บางเจ้าถึงกับไปต้องไปฝากร้านกับ lnwshop เนื่องจากจัดการสินค้าและข้อมูลง่าย แต่จะดีกว่าไหมถ้าเราสร้างมันขึ้นมาเองง่าย ๆ แบบคนไม่รู้ Code เลย ไม่ได้บอกว่า lnwshop ไม่ดีนะ เพียงแค่ Concept Blog นี้จะพาไปสร้างมันขั้นมาเอง

เพราะ Woocommerce เป็น Plugin ของ WordPress และ Plugin นี้มืออาชีพมาก เหมือนตีบวก +10 ให้กับตัว WordPress เลย การติดตั้งก็เหมือนเราติดตั้ง plugin ทั่วไปที่มีใน WordPress เลย

ทำไมเราถึงใช้ Woocommerce ?

WordPress + Woocommerce เป็นที่นิยมมากในการพัฒนาเว็ปไซต์ E-Commerce ในปัจจุบัน เพราะติดตั้งง่ายและมีครบทุกอย่าง ทั้ง ระบบจัดการสมาชิก ระบบจัดการสินค้า ระบบ shipping และหลากหลาย เราติดตั้งเจ้าตัวนี้ไปแทบจะไม่ต้องไปแก้ไขอะไรให้มาก เพราะมีพร้อม ก็อยู่ที่เราแล้วแหละว่าจะใช้มันเป็นหรือเปล่า

Woocommerce ไม่ได้รองรับทุก Theme ซะทีเดียว

เห็นหัวข้อของ Paragraph หลายคนที่ทำ WordPress อยู่ก็อาจบอกไม่จำเป็นแค่เอาหน้าไปแทรกแค่นั้นปรับแต่งหน่อยก็ใช้งานได้แล้ว แต่ถ้าเราต้องใจจะเปิดร้านออนไลน์ทำไมไม่หา Theme ที่มันเฉพาะทางเลยละ ดีกว่าไปหมดพลังงานชีวิตไปปรับแต่งเยอะแยะ ซึ่ง wordpress ก็มี theme พวกนี้มากมายทั้ง Free และ เสียเงิน แต่ถ้าใครอยากทดลองสร้างดู แนะนำลองใช้ Theme Storefront ดู เพราะทาง Woocommerce เข้าได้พัฒนามันขึ้นมาเลย

จุดแข็งจุดอ่อนของ Woocommerce

จุดแข็ง

อย่างแรกคือ มัน Free อ่านไม่ผิด เพราะมันฟรี เราสามารถโหลดใช้ Free ได้เลย Woocommerce

และที่เด่นต่อไปมีระบบมากมายให้เราใช้งาน เช่น ระบบจัดการสมาชิก ระบบตะกร้าสินค้า คูปองส่วนลด ระบบ Stock สินค้า ระบบจัดการ ORDER ส่งข้อความหาลูกค้าแต่ละคน ติดตามสถานะการสั่งซื้อ Gallery สำหรับสินค้า คำนวณภาษี รองรับการจ่ายเงินหลายประเภท ขายสินค้าที่มีตัวเลือก ระบบ shipping พูดซะยาวของแบบนี้สิบปากว่าไม่เท่าลงมือทำ อ่าน Blog ต้องลองไปเล่นแล้ว

จุดอ่อน

ไม่สามารถ ปริ้นสลิปบิลออกมาได้ ซึ่งร้านบางร้านก็ต้องการใช้ระบบนี้ที่เป็นรูปแบบ PDF หรือ อย่าง Woocommerce ยังทำไม่ได้ และอีกอย่างก็คือ ไม่มีตัวแจ้งชำระเงิน แต่ก็ไม่ถือว่าเป็นจุดอ่อนหรอกเพราะ Woocommerce เป็นของต่างชาติ แต่ก็มีคนไทยที่พัฒนาตัว Plugin ตัวนี้ขึ้นมา Seed Confirm Pro อาจจะหาไม่เจอเราต้องเข้าไปซื้อ Seed Themes บอกเลยซื้อจากที่นี่ดีที่สุด เพราะสามารถคุยสอบถามหลังซื้อได้ และตอบเร็วมาก

อ้าว ถ้ามันดีขนาดนี้ก็เปิดแข่งกับ Lazada ได้เลยดิ

ถ้าใครกำลังเอา Woocommerce ไปแข่งกับ Lazada ล้มเลิกความคิดแล้วเอาเวลาไปศึกษา WordPress ดีกว่าเพราะมันไม่มีความใกล้เคียงที่จะแข่งกันได้เลย เพราะ Woocommerce เหมาะสำหรับเปิดร้านส่วนตัวมากกว่าที่จะให้คนอื่นมาเปิดร้านได้


Credit: medium.com

WordPress E-Commerce Plugins ตัวไหนชนะเลิศ

ถ้าพูดถึงการสร้างเว็บไซต์ร้านค้าออนไลน์ หรือเว็บไซต์ E-Commerce หลายๆ ท่านอาจจะนึกไปถึงเว็บสำเร็จรูปอย่าง Weloveshopping อันโด่งดัง หรือ Lnwshop ที่กำลังมาแรง ไม่ก็จัด CMS Shopping Carts งามๆ ไปเลยด้วย OpenCart, PrestaShop, Magento หรือจะเลือก Joomla + VirtueMart ไปจนถึงการจ้างเขียนขึ้นมาเฉพาะ แล้วแฟนพันธุ์แท้ WordPress ล่ะ นอกจากเขียนบล็อกแล้วขายของด้วยได้มั้ย ข่าวดี! ทำได้สิจ๊ะ

WordPress ไม่ใช่แค่บล็อกอัจริยะ แน่นอนไอ้เจ้า WordPress นี้ มันสามารถสร้างเว็บร้านค้าออนไลน์ได้ด้วย เพราะมีผู้ช่วยอย่าง plugins และ themes เทพๆ อยู่มากมายบนโลกใบนี้ และด้วยความเยอะ วันนี้เราจะขอเลือกผู้เข้ารอบมาประเมินด้วยกัน 3 ตัว คือ

WordPress E-Commerce Plugins
1. WP Marketplace
2. WP eCommerce
3. WooCommerce

ผลการประเมินออกมาดังนี้…

wp-ecommerce-plugin-evaluation2

 

สภาพแวดล้อมการประเมิน

* Marks : วิจารณญาณและความคิดเห็นส่วนตัวจากประสบการณ์ทำงานในสายงาน E-Commerce
* Hosting : ทดสอบบน localhost ด้วย XAMPP – อ่านวิธีการติดตั้ง WordPress บน localhost (XAMPP)
* Software : WordPress 3.9.1 (ยกเว้น WP Marketplace ใช้ WordPress 3.8.1)
* Theme : ทดสอบเบื้องต้นกับ WordPress Default Theme: Twenty Twelve
* Plugin : ประเมินจาก default ของ plugin ที่ยังไม่รวม add-on
* Target : ประเมินโดยอิงกับพฤติกรรมผู้ซื้อชาวไทยส่วนใหญ่
* Date : 5 มิถุนายน 2014

ผลสรุป

เมื่อลองใช้งานดูเบื้องต้นแล้วขอยกย่องให้ WooCommerce เป็นผู้ชนะ ทั้งฝั่ง admin และฝั่ง user (ผู้ซื้อ)
และขอเสริมว่าเท่าที่เจอ WordPress Theme มาเยอะมาก ส่วนใหญ่จะเห็นคำว่า “compatible with WooCommerce” แสดงว่าได้รับความนิยมเยอะอยู่ จำนวนการดาวน์โหลดก็แซงเค้าหมด …เมื่อมีคนใช้เยอะ แน่นอนว่าเราจะหาข้อมูล support ได้เยอะ มีการต่อยอดและพัฒนาไปอีกไกลสำหรับยี่ห้อ Woo

ทั้งนี้การจะเลือกใช้ WordPress E-Commerce Plugins ตัวไหนก็ต้องขึ้นอยู่กับวัตถุประสงค์ของเว็บไซต์และความชอบความถนัดของคนทำเว็บด้วย ยังมี Shopping Cart อีกหลายตัวที่น่าใช้ทั้งฟรีและเสียเงิน สรุปแล้วตัวไหนที่เหมาะกับเรา “ต้องลองเองถึงจะรู้”

 


Credit: www.webmonsterlab.com