文章最後更新於

前言

  • 我創業時是請網站工程師幫我架設官網;擔任開店顧問時幫客戶公司用Wordpress架設官網,因此這兩種方法我都走過。
  • 不論你是要自己架站、請人架站或是正在評估,都該了解架設官網的流程,看完之後你就會有更明確的想法!
  • 本篇文章會一步一步地從購買網域到官網內容設計,教大家照著我的步驟,一步一步建立官網!

架設官網的四個方法:

1. 自己寫網頁

  • 使用程式語言設計一個自己的網站
  • 基本上只有專業的網頁工程師有辦法做到。

2. 付費請網頁設計公司架站

  • 這部分比較單純,可以上網搜尋「官網設計公司」或找「獨立的網站工程師」
  • 把你的需求告訴公司,他會給你報價,你再去評估是否可以接受。

3. 自行透過架站平台架站

  • 需要先比較各平台的優缺點、費用、實用性、是否符合你的需求,但好處是前期的投入費用比較便宜,可以省一筆設計費。
  • 像是WixWeebly都是市佔率很高的架站平台

4. CMS(內容管理系統)架站

  • 這是我比較推薦的架站方法,例如:Wordpress就是最知名的CMS軟體,也是我架部落格使用的平台。

開始前注意事項

網站地基三大要素是:「網域」、「虛擬主機」、「SSL憑證」

以下會開始介紹架設官網的幾個步驟,設計官網不一定要自己來,如果真的沒時間,或是想要設計得非常專業,可以找網頁設計公司。

但是,我建議「網域」以及「虛擬主機」都要自己直接購買,不要透過網站設計公司或工程師。

  • 第一個原因是:價格。
  • 直接跟主機商買可以省不少錢(因為我自己公司的官網就是跟當初設計的工程師買,我的部落格就是自己購買,價格有差,但這也很合理,畢竟人家幫忙服務)
  • 第二個原因是:主控權。
  • 「網域」以及「虛擬主機」是網站最重要的東西,假設網域沒有處理好,你的整個網站就沒了(我聽過不少合約到期想要跟網頁設計公司終止合約,結果網頁設計公司不幫忙搬家,搬家還會要求要一筆費用。)
  • 就像是你自己買房子,但請人來幫忙設計的意思,不會把房子的地契也交給別人保管

因此,我接下來會介紹如何直接跟網域或主機商購買,照著操作就ok了!

架設官網第一步:網站地基三大要素

1. 網域

– 網域是什麼?

  • 網域又稱為網址,英文:「Domain Name」
  • 就是網站在網路世界中的「名字」,方便大家記憶與搜尋。
  • 舉例:Goolge的網域就是:https://www.google.com/
  • 可以選擇一個跟公司商品、品牌名相關的網域名,但一個網域只能一個網站使用,因此被註冊走了就不能註冊,要另外選擇。
  • 不論是自行架站或請人架站,都建議網域要自己購買,因為所有的紀錄都是在網域上,如果網域到期、被別人註冊,那麼之前累積的東西就都不見了。

– 要買哪種網域類型?

  • 網域類型是用結尾來分別,大致上有以下幾種類別:
  1. tw結尾:代表台灣(公司與個人都可申請網域。)
  2. com.tw 結尾:代表「台灣」、並且要「公司行號」才可申請網域
  3. org 結尾:代表「組織」,雖現已取消申請限制,但大部分仍大部分是「非營利組織」申請。
  4. net 結尾:最初是給給「網路事業機構」註冊,但並沒有硬性規定,如果.com被註冊,也可以試試.net是否被註冊。
  5. edu 結尾:一般是給「教育機構」,像是:大學、中學等機構,但並非一般補習班等機構。
  6. gov 結尾: 政府機構,一般人無法申請。
  7. cn/ jp…結尾 : 代表不同國家,如中國/日本等。

– 開始購買網域

我推薦透過Namecheap購買網域,有幾個原因:

  1. 超過20年的全球知名網域與主機商(創立於2000年)
  2. 相較其他網域商,Namecheap是非常便宜的網域註冊商
  3. 註冊速度快,從註冊到購買10分鐘內可以完成

接下來,請點選下方按鈕並觀看我特別錄製的教學影片,開始購買網域吧!

立即購買網域

– Namecheap購買教學影片

  • 我錄製的教學影片,手把手教學,10分鐘內購買完成!

2.虛擬主機

– 虛擬主機是什麼?

  • 虛擬主機(Web Hosting)是用來放置的網頁的空間,儲存網站中的所有資料。
  • 網域是你加的門牌號碼,虛擬主機就是你家。
  • 虛擬主機顧名思義就是一台真實的主機,會分成數個空間,給不同的網站租借使用。

– 小湯推薦的虛擬主機商

Cloudways

– 推薦原因
  • Cloudways是VPS主機(非共享),因此在速度、性能都優於共享主機。
    (這也是為什麼我推薦公司的官網用VPS主機,畢竟一點點時間延遲,都會造成客戶體驗不佳,影響銷售。至於個人部落格,我覺得就沒有影響那麼大,等到流量真的很大再來換也ok!)
  • 免費的 SSL 憑證 (一年省下至少1000多塊)
  • 免費搬家功能
  • 自動備份功能(手動備份就要定時上去處理,忘記就很麻煩了)
  • 24小時線上客戶服務(這個真的滿重要的,不過客服是英文,大家自行斟酌,不過根據反饋,用翻譯溝通也沒什麼問題)

– Cloudways虛擬主機價目表

  • 上面的價格是「美金/月」,下面那一整條內容都是一樣的,因此每個方案的差別就是最上面的內容。
  • 任何方案都有「免費SSL憑證」、「免費24小時客服」、「免費搬家」、「自動備份」等服務。
  • 我建議部落格或小型官網先用第一個方案就可以了,等網站流量大了再升級就好!因此每個月大約10-15塊美金(根據是否有選擇其他服務來計算)的費用。
  • 只要想要走網路行銷,這一塊就是必要的花費,想清楚之後就可以點擊下方按鈕,開始架設主機吧!

開始架設網站主機

3. SSL 憑證

  • SSL 憑證(SSL Certificates)是一個數位的加密,可為瀏覽器或電腦和伺服器或網路之間建立加密連結。可機密資料不會遭到其他人攔截。
  • 網域顯示「https」就是已經加了憑證的網站,若顯示「http」以及上圖的「不安全」,則代表沒有SSL憑證。
  • SSL憑證會與使用者體驗有關,Google會顯示是否有憑證,並且警告、阻擋使用者進入沒有憑證的網站。
  • 同時,SSL憑證與 SEO 有極高的關聯性,Google 早已將 https 納入 SEO 的因素之一,對於提升網站排名有很重要的影響。
  • 因此,SSL憑證已經是必備的東西。

大部分網域購買的商家都會提供SSL憑證的服務,大家直接在網域商購買就好。

(若在Cloudways購買主機,不管任何方案都會直接贈送SSL,不需另外購買!)

架設官網第二步:找尋參考網站

  • 建議大家在實際開始設計自己的官網以前,先找尋「你喜歡的」、「同產業類別」的官網,並把他們儲存在一個書籤或資料夾。
  • 就算你找設計公司,他們也一定會跟你要參考網站,他們才知道你想要的網站大概是什麼樣子。

可以參考的有幾個內容:

  1. 整體視覺設計
  2. 色調、字體大小、配色
  3. 各網頁的排列、分類、階級等
  4. 特殊功能

*注意:參考網站並不是「抄襲」、「照搬」他們的官網,而是把你喜歡的設計、功能記錄下來,自行優化成自己的官網!

架設官網第三步:網站內容

  • 官網的地基建立完成後,我們就要來實際開始設計官網了。
  • 以下這些內容,就算找網頁設計公司,還是要自己設計再跟設計公司討論,因為設計公司就是按照你的想法把網站做出來,頂多給你建議。
  • 如果自己什麼都沒做,最後做出的官網一定會一直改,浪費時間,甚至會產生額外的費用!

– 建立目標

  • 首先要定義的是:「目標」,也就是我們希望消費者做到什麼事情
  • 例如:「購買商品」、「報名體驗課程」、「報名講座」、「訂閱網站」。

– 設計行為流程

  • 消費者進入官網後,我們希望他進行什麼樣的流程,能到達到最後的結果。
  • 設計行為流程時要越精簡單越好,在購買前需要越多步驟,客戶流失的比例就越高!

舉例:

  • 進入官網>商品介紹>觀看官網影片介紹>購買產品(購買產品即為最終目標)
  • 進入官網>課程介紹>報名體驗課程(報名體驗課程即為最終目標。)

其中經過的每一頁就是我們要建立的頁面,再把這些頁面能容完成即可!

– 官網內容

  • 以下我把常見官網內會有的內容列出,至於要怎麼編排、要編排在同一頁還是分開兩頁,就交由大家自行決定。

1. 首頁

  • 首頁基本上就是放最大的品牌橫幅圖以及主打商品,內容不要太複雜,否則消費者有太多選擇,最後反而什麼都不選。
  • 明確的下一步指示,例如:「了解我們的服務」,引導客戶進入主要行為流程
  • 基本資訊要有:地址、電話、紛絲團連結、IG連結等等。

2. 關於我們

  • 公司理念
  • 團隊介紹
  • 獲得獎章、獲得認證等增加公信力的內容
  • 服務據點

如果有多家門市,就要放入服務據點,包含地址、電話,最好是加個Google Map的連結。

3. 產品介紹

  • 不同產品介紹頁面
  • 服務流程

4. 最新活動(資訊)

  • 最新舉辦的活動
  • 專業知識文章

5. 合作廠商

  • 如果有跟大型廠商或很多廠商合作,可以把合作廠商列進去官網
  • 甚至未來能用這個頁面跟其他廠商交換官網曝光合作!

6. 客戶分享

  • 客戶分享是最有效的宣傳,可以獨立一個頁面,但在產品頁面也要放入客戶分享!
  • 如果創業初期沒有客戶,就想辦法用送的、邀請網紅體驗,就是要獲得一些客戶的真實評論!

7. 聯絡我們

  • 放一個留言的表單,提供客戶回饋意見的管道。
  • 最好是要求留下Email,這樣才有一個回覆的管道,但要求留下手機有點太私密,除非是要預約活動。

8. 網頁底部

  • 通常網頁的最下面,會有不同顏色的區塊,這部分通常會包含以下內容:
  1. 公司基本資料(公司名稱、電話、地址、Email)
  2. 服務據點列表
  • 當然也可以加入其他內容,甚至可以把官網的所有內容再重複一次也沒問題!

– 其他功能

  • 購物車功能
  • 即時客服
  • 滑動式區塊

官網內容設計五大注意事項

1. 第一眼要能吸引注意

現代人的專注力不超過10秒,因此官網第一眼要能抓住眼球

  • 可以用一個直擊痛點的問題。Ex. UBER EAT:「肚子餓了嗎?」
  • 可以用簡單的動畫呈現企業整體服務
  • 可以用吸引眼球的圖片

2. 客戶流程越簡單越好

  • 客戶點擊越多次,流失比例就越高
  • 最好是能在同一個頁面把大部分客戶需要知道的資訊都列入!
  • 並且要提供明顯的「下一步」指示

3.圖片要多,最好是真實的照片

  • 文字穿插圖片會讓閱讀體驗更好,不會造成閱讀疲乏
  • 很多公司網站會放很多形象照(從圖庫下載的),但過多的形象照會讓客戶質疑:「到底有沒有你們的東西?」
  • 因此也會建議,公司在舉辦、參與任何活動,都要留下紀錄,能夠豐富網路資源。

如果需要無版權圖片,這邊推薦兩個網站,註冊就可以下載免費圖片:

4. 字體大小

  • 網頁最小的字體是12px,但不建議用12px,我認為內文差不多20px,標題視重要程度往上加
  • 另外,同一頁面不要太多大小字體混合,否則閱讀者會無法分辨資訊的級別與重要性,看起來也會很混亂,同一種類就要用同一個大小的字體。

5. 官網配色

  • 有些人會選擇自己喜歡的顏色,這確實是第一步,但我建議也要考量到商品的特性,讓客戶一進到你的官網,比較不會有異樣的感覺。

例如:

  • 科技商品:藍色或銀色
  • 環保、健康食品:綠色
  • 兒童商品:橙色、黃色等溫暖色系
  • 當然配色不是一定,如果能配出讓人耳目一新的官網,也是一個吸引眼球的好方法!

4. 明確的CTA(Call To Action)

  • 在每一個頁面告訴客戶,下一步要做什麼。
  • 例如:商品介紹頁面的最下面可以有「立即購買」、「還有疑問?歡迎加入線上客服」等等字眼,讓客戶明確的知道,接下來要做什麼。

5. SEO優化

  • SEO(Search Engine Optimization):搜尋引擎最佳化。
  • 意思就是根據搜尋引擎的規則,把自己的網站優化,以達到「提高網站排名」、「提升網站自然流量」的作法。
  • 簡單的說,SEO要做的就是把自己的網站優化,讓排名越前面,自然就有更多的客戶能看到你的官網,而且還不用付任何一毛錢。
  • 我從開始創業到現在,SEO有請人操作過、自己設計官網時也會特別留意SEO的概念,推薦大家看以下這兩篇文章,整理的非常詳細!

SEO優化推薦文章:

相關文章

  1. 如何創業?我的創業歷程大公開!最詳細的創業步驟教學!
  2. 小湯的創業推薦書單-從職場到人生的必修能力
  3. 職場能力提升-必修的14堂Hahow線上課程推薦!
  4. 如何透過部落格賺取被動收入?跟我的老師學聯盟行銷