ครบรอบ 1 ปีเว็บแมคไทย #3: เบื้องหลังการดีไซน์เว็บ, โปรโมท, การสร้างรายได้

[vc_row][vc_column width=”1/4″][/vc_column][vc_column width=”1/2″][vc_column_text]ตอนสุดท้ายของเบื้องหลังเว็บ MacThai เนื่องในโอกาสครบรอบ 1 ปี โดยในตอนที่ 1 เราเสนอเบื้องหลังทีมงานสร้างเนื้อหาและค่าใช้จ่ายของเว็บ ซึ่งเหมาะกับผู้ที่สนใจเข้ามาในวงการเว็บ หรืออยากรู้เบื้องหลังงานเขียนต่างๆ

ในตอนที่ 2 พูดถึงเรื่องการถ่ายแบบ Model of the Month ล้วนๆ ซึ่งเหมาะกับผู้อ่านทั่วไป และในตอนที่ 3 ตอนสุดท้ายนี้ เราจะพูดถึงเบื้องหลังการดีไซน์ออกแบบเว็บ การโปรโมทและโมเดลสร้างรายได้ ซึ่งเหมาะกับนักพัฒนาเว็บ, Web & Social Media Marketing หรือผู้ที่ทำงานในสายไอทีที่สนใจ[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][vc_separator][vc_column_text css_animation=”bottom-to-top”]

steve-jobs-quote-design-macthai

[/vc_column_text][vc_separator][vc_row_inner][vc_column_inner width=”1/4″][vc_single_image image=”13770″ img_link_target=”_self” img_size=”full”][vc_single_image image=”13768″ img_link_target=”_self” img_size=”full”][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]

เบื้องหลังการออกแบบเว็บ MacThai

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

เมื่อทีมงานคิดว่าจะต้องมองหาผู้ที่มาออกแบบเว็บแมคไทย พี่เม่น หรือที่รู้จักในนาม @iMenn ผู้ออกแบบเว็บไอทีไทยชื่อดังอย่าง Blognone และ Thumbsup เป็นเว็บดีไซน์เนอร์คนเดียวที่ทีมงานคิดถึง ด้วยความเชื่อที่ว่า

“ถ้าจะทำเว็บไอที ต้องให้พี่เม่นเป็นคนปลุกเสก เพื่อความขลังและความเป็นศิริมงคลยิ่ง” #ฮาาา[/vc_column_text][vc_column_text]โดยไอเดียที่เรา Brief ให้กับนักออกแบบเว็บมีดังนี้

  • เว็บเน้น Content เป็นเรื่องสำคัญมากถึงมากที่สุด ไม่ว่าจะเปิดไปหน้าไหนเนื้อหาต้องมาก่อน ทุกอย่างที่เหลืออยู่ข้างใต้ Content (แม้แต่ Banner)
  • รูปเยอะ ดู Rich มากๆ เนื้อหาดูโดดเด่นสุดๆ
  • ไม่ยุ่งรกตา, clean และดูไม่เบื่อง่าย อ่านได้ทุกวัน
  • ต้องสวย

ซึ่งต้องขอบคุณพี่เม่นด้วยที่รับคำเชิญมาออกแบบเว็บให้ และยังให้ราคาพิเศษในการออกแบบเว็บด้วย (ไม่ขอเปิดเผย) ซึ่งนับเป็นการลงทุนตั้งต้นเว็บทั้งที่ยังไม่มีโมเดลรายได้เข้ามาเกี่ยวข้อง[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/4″][vc_column_text]

 

 

[/vc_column_text][vc_single_image image=”15250″ css_animation=”left-to-right” img_link_target=”_self” img_size=”full”][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”bottom-to-top”]

macthai-old-template
ธีมแรกของเว็บสมัยยังเป็น MacThai.net ก่อนจะเปลี่ยนมาเป็น MacThai.com ภายหลัง ทำขึ้นมาเพื่อทดสอบระบบและเขียนเนื้อหา รอให้ธีมหลักดีไซน์จนสำเร็จ ใครทันยุคนี้ถือว่าเป็นแฟนพันธุ์แท้จริงๆ

[/vc_column_text][vc_separator][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

imenn
@imenn เม่น – นายจักรกฤษณ์ ตาฬวัฒน์

เบื้องหลังการดีไซน์เว็บ MacThai (เขียนโดย @iMenn)

เว็บ MacThai นั้นเริ่มด้วยแก๊งค์สาวกที่มีใจรักและคิดจริงทำจริง ผมเอง (เม่น: คนทำเว็บในนาม เม่น สตูดิโอ) ได้พูดคุยกับน้องๆ ในทีมแล้วก็เลยคิดว่า ต้องหาทางทำเว็บนี้ให้ได้ ซึ่งเริ่มจากการสร้างแบรนด์ก่อน บันทึกละเอียดเขียนไว้ที่ เบื้องหลังการออกแบบเว็บ MacThai.com (ตอนที่ 1) สรุปว่า

  1. ทำความเข้าใจโมเดลธุรกิจ
  2. ทำความเข้าใจ SWOT
  3. หาสิ่งที่แตกต่างและเติมเต็ม (Differentiation & Relevance)
  4. สร้าง “ลัคนา” ของแบรนด์ (Brand Archetypes)
  5. ออกแบบโลโก้
  6. สรุปฟอนต์, ชุดสี และการใช้โลโก้

แล้วหลังจากนั้นก็คือการสร้างเว็บข่าว (เรียกบันทึกนี้ว่าเป็นตอนที่ 2 ละกันเนาะ)[/vc_column_text][vc_separator][vc_column_text]

เว็บข่าวที่ดี ต้องมีอะไรบ้าง?

เมื่อจะสร้างเว็บให้ตอบโจทย์แบรนด์ ก็ต้องมาดูว่า เราต้องการความสามารถ (Feature / Function) อะไรบ้าง

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text css_animation=”left-to-right”]

macthai-writer

สำหรับนักเขียน

  1. ต้องใช้ง่าย คนทั่วไปใช้เวลาเรียนรู้ไม่นาน
  2. ต้องใช้ร่วมกันได้หลายคน โดยมอบหมายสิทธิให้แต่ละคนได้อิสระ
  3. สามารถสร้างหมวดหมู่ของข่าวได้หลากหลาย มีหมวดหมู่ย่อยได้ มีแท็กหรือคำสำคัญแต่ละข่าวได้
  4. สามารถค้นหาข้อมูลได้สะดวก ดูข้อมูลตามวันเวลา/หมวดหมู่/นักเขียนแต่ละคน ได้
  5. มีเครื่องมือต่างๆ ช่วยให้สะดวกขึ้น เช่น ระบบร่างข่าว, ระบบกู้ข้อมูลบทความเก่าๆ หรือ revision เก่าๆ, ระบบ Layout/Template หลายแบบ เช่นสำหรับ Model of the month หรือ Review สินค้า

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][vc_column_text css_animation=”appear”]

macthai-reader

สำหรับคนอ่าน

  1. อ่านง่าย มีรูปประกอบแต่ข่าวน่าสนใจ
  2. ค้นหาง่าย ทั้งจากการ Search และจากบทความที่เกี่ยวข้องกัน
  3. แชร์ผ่าน Facebook / Twitter หรือ Social Network อื่นๆ ได้ง่าย
  4. สามารถดูผ่านมือถือ / แท็บเบล็ต ได้สะดวก

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][vc_column_text css_animation=”right-to-left”]

macthai-web

สำหรับตัวเว็บ

  1. สามารถจัดการแบนเนอร์โฆษณาได้
  2. สามารถเก็บสถิติผู้เยี่ยมชมได้ โดยบอก Demographic ได้ว่า เป็นใคร (เช่นเพศ, อายุ, ความสนใจ) มาจากที่ไหนบ้าง เมื่อไหร่บ้าง ดูหน้าไหนบ้าง ใช้อุปกรณ์อะไรบ้าง ฯลฯ
  3. ติดอันดับผลการค้นหาใน Google
  4. สามารถปรับแต่งเว็บ รองรับเทศกาลต่างๆ ได้

[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][vc_single_image image=”15895″ css_animation=”appear” img_link_target=”_self” img_size=”full” title=”Theme Website MacThai”][vc_row_inner][vc_column_inner width=”1/2″][vc_single_image image=”15924″ css_animation=”left-to-right” img_link_target=”_self” img_size=”medium”][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]

แง่มุมการออกแบบเว็บแมคไทย

เมื่อสรุป Function ได้แล้ว ก็ต้องหาว่า ในแง่การออกแบบ (Design / Form) เราต้องคำนึงอะไรบ้าง

  1. บุคลิก: เป็นแบบ Apple คือ เรียบง่าย ทันสมัย ยิ่งใช้ยิ่งชอบ
  2. การตกแต่ง: ใช้ของตกแต่งน้อย เน้นให้เนื้อหาเด่น ไม่ใช่การนำเสนอเด่น
  3. โครงสร้างเนื้อหา: หรือเรียกว่า Sitemap ว่าจะแบ่งประเภทอย่างไร วางเมนูเพื่อให้เกิดการเข้าถึงอย่างไร

หมายเหตุ: สังเกตว่า เราต้องสรุป Function ก่อนคิด Form ตามที่ฝรั่งเค้าว่ากันว่า Form follows function นั่นแล[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]

ข้อจำกัด

แต่เมื่อออกแบบไปซักพัก เราก็ย่อมพบว่า การเป็นเว็บข่าวมีข้อจำกัดบางอย่างที่ทำให้ทำแบบเว็บอื่นๆ ไม่ได้

  1. ไม่มีรูปสวยๆ ขนาดลงปกหนังสือได้: หากมองเว็บข่าวเป็นนิตยสาร เราต้องการปกสวยๆ ที่เตะตา มีจุดสนใจใหญ่ๆ จุดเดียว (ลองดูเว็บ Apple.com สิ) แต่ MacThai เป็นเว็บที่ข่าวเกิดขึ้นตลอดเวลา ยากที่จะหารูปประกอบสวยๆ ได้พอดี
  2. รูปที่หาได้มีขนาดเล็ก: นอกจากหารูปสวยยาก รูปยังไม่ค่อยใหญ่อีกด้วย
  3. ต้องรองรับแบนเนอร์โฆษณาในหลายตำแหน่ง โดยเฉพาะตำแหน่งที่เห็นได้ชัดๆ: ซึ่งอาจทำให้ออกแบบไม่ได้ดั่งใจ

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”15919″ css_animation=”right-to-left” img_link_target=”_self” title=”Content สำคัญกว่า Banner” img_size=”large”][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”appear”]design-1

ตอนแรกจะออกแบบหน้าแสดงข่าวเดี่ยวๆ ก่อน เพราะเป็นสิ่งที่คนจะเห็นบ่อยที่สุด ผมเองพยายามใช้แนวทางของ Apple หลายๆ อย่างมาใส่ในเว็บ ทั้ง Thumbnail ที่เลียนแบบหน้าจอล็อกอิน หรือปุ่ม, การไล่เฉดสี ฯลฯ โดยให้ทีมงานเลือกว่าชอบพื้นหลังมืดหรือสว่าง[/vc_column_text][vc_column_text css_animation=”appear”]design-2

หลังจากนั้นก็ออกแบบหน้าแรกแบบต่างๆ เพื่อแสดงข่าวเด่น ซึ่งทีมงานดันชอบแนวทางแบบ Metro (ซึ่งริเริ่มโดย Windows) ตอนเปิดตัวเว็บเลยมีเหล่าสาวกมาแซวกันพอหอมปากหอมคอ[/vc_column_text][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

ผลลัพธ์

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

ส่วนดีไซน์ เมื่อแก้ไขกันไปมา ก็พบว่า การแสดงรูปข่าวหลายๆ รูป (แต่มีรูปใหญ่สุด 1 รูป) น่าจะเป็นทางออกที่ทำให้เว็บแตกต่างจากเว็บอื่นๆ และเนื้อหาถูกนำเสนออย่างน่าอ่าน ส่วนแบนเนอร์โฆษณาก็อยู่ในตำแหน่งที่เด่นพอสมควร แต่ไม่มากกว่าเนื้อหาตัวเอง ทำให้ยังอยากดูโฆษณาได้อยู่ (ไม่ใช่เผลอกดผิดแบบเว็บดักคลิกทั่วๆ ไป ที่แม้จะได้ยอดคลิกโฆษณาเยอะกว่า แต่ก็กำลัง “ไล่คนอ่านออกจากเว็บ” ไปทีละน้อย)[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/1″][vc_single_image image=”15899″ css_animation=”appear” img_link_target=”_self” img_size=”full”][vc_column_text]การใช้ Facebook Comment ก็ทำให้การพูดคุยทำได้ง่าย เพื่อนของเพื่อนก็มาแจมได้ง่าย และไม่ค่อยเจอ Spam (เพราะ Facebook ก็ช่วยกรองให้) สามารถตั้งให้ไปเตือน Moderator เมื่อมีคนมาคอมเม้นท์ได้

ส่วนการใส่กล่องแฟนเพจด้านล่างสุดของทุกหน้า ข้อดีคือ เมื่อคนอ่านเนื้อหาจบแล้วประทับใจ เค้าจะคลิก Like Page ต่อแทบจะทันที ทำให้เพิ่มสมาชิกของเพจได้อย่างมีประสิทธิภาพ[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]design-3

ซึ่งเมื่อเลือกแบบกริด ก็ต้องซูมเพื่อจัดระยะ Pixel ต่างๆ ให้เท่ากัน[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]design-4

ในส่วนของหลังบ้าน ก็ต้องจัดให้เวลาเขียน เห็นเหมือนจริงมากที่สุด (คือแก้ editor-style.css ใน WordPress นั่นเอง) กับเพิ่มช่องใส่ค่าอื่นๆ สำหรับระบบรีวิว[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_separator][vc_row_inner][vc_column_inner width=”2/3″][vc_single_image image=”4879″ css_animation=”right-to-left” img_link_target=”_self” img_size=”large”][/vc_column_inner][vc_column_inner width=”1/3″][vc_column_text]

Responsive

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

ซึ่งสถิติคนเข้าเว็บด้วยมือถือทั้งโลกนี้สูงขึ้นเรื่อยๆ และจากสถิติเว็บ MacThai เองก็มียอดคนเข้าผ่านคอมพิวเตอร์ 47%, มือถือ 41%, แท็บเล็ต 12% ซึ่งถ้าดูเฉพาะอุปกรณ์พกพา รวมแล้วมากถึง 53% มากกว่ายอดคนเข้าผ่านคอมพิวเตอร์ซะอีก[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_separator][vc_column_text css_animation=”bottom-to-top”]

banner-728x90-border
Banner แรกของเว็บแมคไทย ปรากฏในเว็บ Blognone เฉพาะสัปดาห์แรกที่เปิดตัว

[/vc_column_text][vc_row_inner][vc_column_inner width=”1/3″][vc_single_image image=”15276″ css_animation=”left-to-right” img_link_target=”_self” img_size=”large”][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

เบื้องหลังด้านเทคนิค และปลั๊กอินต่างๆ

  • การจะแชร์ผ่าน Social Network ให้ง่ายและสะดวก ต้องใส่ค่าต่างๆ ตามมาตรฐานที่เรียกว่า Open Graph ด้วยซึ่งจะเขียนเองใน header.php ของธีม หรือใช้ปลั๊กอิน NextGEN Facebook Open Graph+ ก็ได้
  • การสร้างระบบ Review  (เช่น รีวิว Marvericks ) นั้นต้องสร้าง Custom Field เพื่อเก็บทั้งคะแนนแต่ละประเภท และเก็บเนื้อหาส่วนต่างๆ นอกจากนั้นยังต้องมีระบบที่จัดหน้า/จัดคอลัมน์ได้อิสระอีกด้วย หลังจากค้นหาทางออกหลายแบบ พบว่า ใช้ Advanced Custom Fields จัดการ Custom Field จะสะดวกมาก และใช้ WPBakery Visual Composer จัดหน้า ก็ทำอะไรได้หลายอย่างทีเดียว)
  • ระบบจัดการโฆษณา ใช้ Adrotate ครับ คิดว่าประสิทธิภาพสูง สั่งให้แสดงตามเวลา หรือตามจำนวนครั้งได้ มีหลังบ้านให้ลูกค้ามาดูสถิติได้ด้วย
  • ระบบแคช ใช้ WP Super Cache (บางเว็บผมก็มีใช้ W3 Total Cache) ซึ่งทำให้สามารถรองรับผู้เยี่ยมชมระดับหลายล้านคนต่อเดือนได้อย่างไม่มีปัญหา
  • ปัจจุบันแมคไทยเปลี่ยนมาใช้ ฟอนต์สุขุมวิท ตาม iOS7 ซึ่งผมซื้อไว้ 3 น้ำหนัก รวมลิขสิทธิ์เว็บฟอนต์ ราคา 8 หมื่นกว่าบาทครับ

สิ่งเหล่านี้คือสิ่งที่เกิดขึ้นในปีที่แล้ว ส่วนปีนี้แนวโน้มของเว็บก็มีการเปลี่ยนแปลงไปหลายอย่าง ซึ่งถ้าหากเราปรับปรุงหรือเพิ่มเติมอะไรเรียบร้อยดั่งใจแล้ว รับรองว่าจะมาเล่าสู่กันฟังแน่นอนครับ :)[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][vc_separator][vc_single_image image=”15269″ css_animation=”appear” img_link_target=”_self” img_size=”full”][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]

เบื้องหลังการโปรโมทเว็บ

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

การโปรโมทเว็บ MacThai ไม่ได้มีสูตรสำเร็จที่วางแผนไว้ระยะยาว แต่เป็นการปรับเปลี่ยนแผนไปตลอดเวลา ตามเนื้อหาและสภาวะแวดล้อมในช่วงนั้นๆ แต่มีประเด็นสรุปสิ่งที่สำคัญและน่าสนใจในการโปรโมทแบ่งเป็นหัวข้อได้ดังนี้[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”15271″ css_animation=”right-to-left” img_link_target=”_self” img_size=”large”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_single_image image=”15905″ img_link_target=”_self” img_size=”large” css_animation=”left-to-right”][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]

แบรนด์ MacThai

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

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

ช่วงหลังเราเริ่มสนับสนุนโครงการต่างๆ มากขึ้นไม่ว่าจะเป็น BarCamp Bangkhen โดยใช้แบรนด์ MacThai จะไม่มีการใส่คำว่า .com เข้าไปด้วย เพราะเชื่อว่าแบรนด์เริ่มติดตลาดแล้ว พูดแค่ชื่อก็รู้จัก[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]

สินค้าแบรนด์แมคไทย

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

นั่นจึงเป็นที่มาของเว็บ MacThaiStore.com ที่สร้างขึ้นเพื่อจำหน่ายสินค้าของเว็บแมคไทยโดยเฉพาะ ซึ่งที่ผ่านมาเราได้มีการทำเสื้อแมคไทยรุ่น 1 ขึ้นมา 3 ลาย รวมถึงโปสการ์ดนางแบบแมคไทย โดยรายได้ทั้งหมดไม่หักค่าใช้จ่ายใดๆ ทั้งสิ้นเรานำไปมอบให้กับสภากาชาดไทยเพื่อการกุศล หมายความว่าไม่ใช่แค่ไม่ได้กำไร แต่เรายังเอาเงินทุนทั้งหมดไปบริจาคอีกด้วย

ในแง่แบรนด์ การที่เรามีสินค้าโลโก้ของเราเอง ถือเป็นโปรโมทแบรนด์ที่จับต้องได้สัมผัสได้ แต่ก็ต้องลงทุนด้วยเงินจำนวนหนึ่ง ซึ่งที่ผ่านมาเราได้ใช้ทุนกับสินค้าแบรนด์แมคไทยไปกว่า 50,000 บาท[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”15906″ css_animation=”right-to-left” img_link_target=”_self” img_size=”large”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_single_image image=”15909″ img_link_target=”_self” img_size=”large” css_animation=”left-to-right”][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]

นโยบายความไม่เป็นกลาง

เว็บแมคไทยประกาศตัวเองตั้งแต่ต้นว่าเรา “ไม่เป็นกลาง” ทั้งในข่าวเปิดตัวและหน้า About Us โดยเป็นความตั้งใจตั้งแต่ต้นของทีมงาน ซึ่งถึงแม้เราจะเข้าข้างแอปเปิลเป็นหลัก แต่ก็ไม่ถึงกับสุดโต่งจนหลุดขอบ ถ้าเต็ม 10 เราน่าจะประมาณ 8 เท่านั้น โดยข่าวด้านลบของแอปเปิลเราก็นำเสนออยู่บ่อยครั้ง

แต่ด้วยนโยบายนี้ ก็ทำให้เป็นที่ถกเถียงหรือพูดถึงใน Social Media จำนวนมาก เรามักจะได้ยินประโยคเช่น “โหย MacThai เขียนก็ต้องอวยแอปเปิลอยู่แล้ว” หรือ “วันนี้เว็บ MacThai เขียนข่าว Android ด้วยเว้ยเฮ้ย” ซึ่งเราถือว่าประโยคเหล่านี้เป็น “คำชม” เพราะอย่างน้อยคนก็เข้าใจนโยบายเว็บเราแม้จะไม่อ่านก็ตาม (ฮา)

ล่าสุดด้วยนโยบายความไม่เป็นกลาง ก็ได้เกิดไวรัลเมื่อเว็บเพื่อนบ้านสุดที่รักของเราอย่าง DroidSans ทวีตแซะ iPhone 5c เราจึงใช้ทวิตเตอร์ของ MacThai ทวีตแซะกลับ จนเกิดการพูดถึงจำนวนมาก ซึ่งในแง่แบรนด์แล้วถ้าเราทำให้ภาพลักษณ์ “แอปเปิล” คือ “แมคไทย” ได้ ก็ถือว่าเป็นความสำเร็จแล้ว (จริงๆ เบื้องหลัง 2 เว็บนี้เรารักกันนะจ๊ะ <3)[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_single_image image=”15907″ img_link_target=”_self” img_size=”large” title=”เปิดขายเสื้อในงาน Barcamp Bangkhen” css_animation=”left-to-right”][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”15910″ img_link_target=”_self” img_size=”large” title=”สินค้าแบรนด์แมคไทย รายได้เพื่อการกุศล” css_animation=”right-to-left”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]

เปิดเวอร์ชันทดสอบและหาพันธมิตร

ในสังคมเราไม่สามารถที่จะอยู่ตัวคนเดียวได้ บนเว็บก็เช่นกัน เมื่อเราทำเว็บไอทีก็ต้องผูกมิตรกับเว็บไอทีด้วยกัน โดยพันธมิตรของแมคไทยที่เคยร่วมงานกันและรู้จักกันเป็นการส่วนตัวก็มี Blognone ซึ่งทั้ง @lewcpe และ @markpeak ก็ใจดีให้ลง Banner โปรโมทบนเว็บ 1 สัปดาห์ รวมถึง Faceblog ของ @buumoon ที่เราไปขอลง Banner ด้วย

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

นอกจากเว็บพันธมิตร เราก็ได้บล็อกเกอร์ที่ช่วยแชร์และ Seeding ข่าวการเปิดตัวเว็บหรือกิจกรรมต่างๆ ช่วยให้ช่วงแรกเรามีกลุ่มผู้เข้ามาเยี่ยมชมพอสมควร และมีการเชิญนักเขียนบางท่านมาร่วมเขียนด้วย เช่น @Ripmilla@iMenn[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”15911″ css_animation=”right-to-left” img_link_target=”_self” img_size=”large”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_single_image image=”15912″ img_link_target=”_self” img_size=”large” css_animation=”left-to-right”][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]

สร้างความสัมพันธ์กับสื่อและเอเจนซี่

ด้วยความที่เว็บแมคไทยมีกลุ่มนักเขียนที่เป็นที่รู้จักใน Social Network อย่าง @Khajochi รวมถึงมีสุดยอดแฟนพันธุ์แท้สตีฟ จ็อบส์อย่าง @TheMacci เราจึงมักใช้จุดแข็งนี้สร้าง Connection กับสื่อหลักทั้งวิทยุ, ทีวี, หนังสือพิมพ์ โดยเป็นการเข้าไปหาด้วยตัวเอง หรือติดต่อผ่านคนรู้จัก

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

อีกด้านคือการทำความรู้จักกับ Agency โฆษณาหลายแห่ง ไม่ว่าจะเคยร่วมงานกันหรือไม่ เพราะเอเจนซี่เป็นผู้ที่มี Connection เยอะมากรวมถึงช่วยแนะนำลูกค้ามาลงโฆษณากับเว็บได้ ช่วงสิ้นปีเราจึงมีการทำ MacThai Gift Set ไปขอบคุณสื่อและเอเจนซี่หลายแห่ง โดยข้างในมีโปสการ์ดแมคไทย, เสื้อทำมือ และลูกแอปเปิล 2 ลูก ^__^[/vc_column_text][vc_column_text]

 

“เนื้อหาต้องมาก่อนทุกอย่าง เมื่อผู้ใช้เข้ามาเว็บต้องได้อ่านบทความเลย เนื้อหาต้องมาก่อน Link, ก่อนเสิร์ช หรือแม้กระทั่งก่อน Banner โฆษณา”

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]

แชร์ แชร์ แชร์

ในยุคที่คนเข้าเว็บผ่านการพิมพ์โดเมนเนมลดน้อยลงมาก คนมักจะเข้าผ่านการเห็นข่าวใน Twitter, Facebook, Google+ ซึ่งการโปรโมทผ่าน Social Media เลยสำคัญมาก โดยสิ่งที่แมคไทยเน้นเป็นพิเศษมีอยู่ 2 อย่าง

1. พาดหัวข่าว : เราใช้เวลาคิดหัวข่าวนานมาก บางครั้งนานกว่าการเขียนเนื้อหาด้วยซ้ำ พาดหัวข่าวที่ดีต้องแชร์ได้ในทุก Social Network อ่านแป๊บเดียวเข้าใจ และต้องสามารถสร้างเหตุผลที่ควรจะต้องกดเข้าไปอ่านต่อในเว็บได้

2. รูปหัวข่าว : การแชร์ใน Social Media สมัยนี้มักจะมีพาดหัวข่าวและรูป 1 ใบเพื่อประกอบการแชร์ ซึ่งเนื้อหา “ทุกโพสต์” ในเว็บแมคไทยจะต้องมีรูป และเป็นรูปประกอบที่สื่อถึงเนื้อหาชัดเจน บางครั้งเราใช้ตัวอักษรประกอบ บางครั้งเราใช้รูปตลกๆ หรือบางครั้งก็เป็นรูปที่มี Impact แรงๆ เพื่อให้น่าสนใจ

จากที่ผ่านมาเนื้อหาในเว็บจะมียอดการแชร์ผ่านทาง Social Media ในจำนวนที่น่าพอใจมาก ซึ่งส่งผลโดยตรงต่อยอดคนเข้าชมและ Page Rank ใน Google[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”15913″ css_animation=”right-to-left” img_link_target=”_self” img_size=”large”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_single_image image=”15274″ img_link_target=”_self” img_size=”large” css_animation=”left-to-right”][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]

สร้าง SEO ในทางที่ถูก

ในศาสตร์ของการโปรโมทเว็บ มีวิธีการมากมายให้เลือกใช้ แต่ก็มีหลายวิธีที่เราไม่ขอเลือก เช่นการเปิดหน้าต่างให้คนกด Like Fanpage ก่อนถึงจะอ่านเนื้อหาได้, การซื้อ Like ซื้อ Follower, การฝากเว็บตาม Web Board ต่างๆ ทั้งที่ไม่เกี่ยวกับเนื้อหา

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

นอกจากนี้ด้วยนโยบาย “เนื้อหา” มาก่อนทุกอย่าง จนสะท้อนไปถึงดีไซน์เว็บ ที่ไม่มี Banner อยู่เหนือเนื้อหาเลย (ซึ่งเป็นตำแหน่งที่ปกติขายดีมาก) ก็มีส่วนช่วยให้เว็บได้ Page Rank ที่ดีจากกูเกิล มีการแชร์มากขึ้นอย่างรวดเร็ว[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_single_image image=”15915″ img_link_target=”_self” img_size=”large” title=”พันธมิตรที่น่ารัก” css_animation=”left-to-right”][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”15916″ img_link_target=”_self” img_size=”large” title=”โปรโมทผ่านสื่อ” css_animation=”right-to-left”][/vc_column_inner][/vc_row_inner][vc_separator][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”5830″ css_animation=”appear” img_link_target=”_self” img_size=”900×250″][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

โมเดลการหารายได้

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

  • Banner ในเว็บทั้งด้านขวาและใต้บทความ มีราคาตั้งแต่ 5,000 – 15,000 บาท
  • ความยากคือด้วยดีไซน์ที่ให้เนื้อหามาก่อนทุกสิ่ง ทำให้ขาย Banner ยากมากๆๆๆ โดยทุกรายมักจะถามว่าทำไมถึงไม่มีมุมขวาบนสุด ซึ่งเป็นมุมทองของทุกเว็บ รวมทั้งเราไม่รับ Banner แบบเต็มจอก่อนเข้าเว็บ ไม่รับ Banner เด้งๆ ทั้งหลายก็ไม่เอา (เรื่องมากจริงๆ)
  • แต่ก็ยังมีสปอนเซอร์ใจดีที่เคยสนับสนุนเรา ทั้ง TrueMove-HEnglish ParksiOS CaseBB iPhoneDeal Extreme #กราบบบ
  • ในเมื่อเว็บเน้นเนื้อหา รายได้ส่วนใหญ่จึงไปตกอยู่ที่ Advertorial หรือโพสต์โฆษณา ซึ่งขายดีมากเพราะมี SEO ที่ดี เสิร์ชทีไรก็เจอ ปัจจุบันค่า Advertorial เริ่มต้นอยู่ที่ 8,500 บาท
  • นอกจากนี้เรายังมีการขาย Tie-in สินค้ากับถ่ายภาพนางแบบ MacThai Model อีกด้วย
  • สนใจลงโฆษณา อ่านรายละเอียดกันได้ที่นี่จ้า -> อัตราค่าโฆษณาเว็บ MacThai [พื้นที่โฆษณา]
  • สำหรับโมเดลการแบ่งรายได้ให้ทีมงาน เราใช้วิธีแบ่งตามสัดส่วนความเหมาะสม และจะมีส่วนแบ่งก็ต่อเมื่อมีรายได้เข้ามาเท่านั้น ถ้าเว็บไม่มีรายได้ นักเขียนก็จะไม่ได้ผลตอบแทนใดๆ แม้ทุกคนจะทำด้วยใจแต่เว็บก็มีค่าขนมเล็กๆ น้อยๆ ให้บ้างตามเหมาะสม
  • การขายสินค้าใน MacThaiStore ไม่นับเป็นรายได้ แต่ถือว่าเป็นรายจ่าย เพราะทั้งหมดเรานำไปบริจาคเพื่อการกุศล
  • รายได้อื่นๆ ก็มีค่าออกงานอีเวนต์, ให้สัมภาษณ์สื่อ, การลงบทความในนิตยสารต่างๆ ของทีมงาน

[/vc_column_text][vc_separator][vc_column_text]

เมื่อสรุปรายรับรายจ่ายทั้งหมดในรอบ 1 ปี เราก็มีความยินดีที่จะบอกว่าตอนนี้
เราพ้นสภาวะขาดทุนจนเริ่มมีกำไรแล้วจ้า !! #เอ้าเฮ \(^__^)/[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][vc_separator][vc_single_image image=”16073″ img_link_target=”_self” img_size=”full” title=”MacThai Team” css_animation=”appear”][vc_row_inner][vc_column_inner width=”1/4″][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]โดยสรุปแล้วถ้ามองโดยรวม เว็บ MacThai ที่มีอายุเพียง 1 ปี ถือว่าประสบความสำเร็จในแง่จำนวนผู้เข้าชม, แบรนด์เป็นที่รู้จัก และมีเนื้อหาคุณภาพสำหรับสาวกแอปเปิลที่ทำได้ตามเป้าหมายที่ตั้งไว้แต่ต้น แต่ก็ไม่ถือว่าประสบความสำเร็จในแง่รายได้ และมีรายจ่ายต่อเดือนที่สูง

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

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

เรียบเรียงโดย
ทีมงาน MacThai[/vc_column_text][vc_separator][vc_column_text]บทความชุดครบรอบ 1 ปีเว็บแมคไทย

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/4″][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]