網頁設計全攻略：如何選擇主機、網域和網站設計公司？

 網頁設計需要準備哪些？是否需要懂技術才能溝通？在準備架站前要注意些什麼？請公司做網站需要花多少錢？有沒有推薦網站架設公司？當你開始準備為你的事業打造一個網站，你需要做一點功課，對網站架設有一些基本理解，來幫助你更快理解如何打造一個理想的網站。

什麼是網頁設計?

網頁設計（Web design）是一個涉及創建和維護在網際網路上顯示的網站的過程。這主要專注於網站的使用者體驗設計，而不是軟體開發。儘管網頁設計最初主要為桌面瀏覽器而設計，但自2010年代中期以來，對行動裝置和平板電腦的設計也變得越來越重要。網頁設計師負責網站的外觀和佈局，並在某些情況下也負責內容。外觀主要涉及使用的顏色、字體和圖像，而佈局則是對資訊結構和分類的規劃。一個出色的網頁設計不僅應兼具使用者友好和美觀，更能滿足網站的目標使用者群(TA)的需求。

網站已經成為企業不可或缺的必要工具。一個高品質的網站不僅是公司的「門面」，更是一個能快速整合和呈現公司資訊給客戶或瀏覽者的理想平台。更有趣的是，有統計數據顯示，一個優質的網頁設計能夠提高求職者投遞履歷的意願。

企業架設網站的重要性!

1.可累積企業長期SEO資產

長遠來看，擁有自家網站是一種長期投資，更是您進行網站優化（SEO）的關鍵平台。不像使用第三方平台，您會受到多項規則和限制，自家網站讓您完全掌握內容管理和搜尋引擎演算法調整的主導權。
公司內部若能培養具有SEO知識基礎的人員，網站將不再是一個須要不斷打掉重練項目。反而，它是一個持續進化、累積經驗和強化效能的平台。每次的內容更新、關鍵字優化或後台調整都會逐漸提升您在搜尋引擎中的可見性。

這個持續的優化過程也使您能夠收集和解析大量後台數據，更精確地理解您的目標受眾和市場需求。這些數據對於做出緊貼市場脈動的商業決策，以及提供更符合客戶需求的產品或服務來說，是非常有價值的。

2.網站數據-企業不可或缺的數位資產與行銷利器

架設自有網站的優勢之一就是能利用後台數據來深入瞭解消費者行為。這不僅讓您收集到有價值的數據，也助於精確調整您的經營策略。除了全球知名的 Google Analytics，還有專為特定需求而設計的數據分析工具，如 Hotjar。這類工具也提供了多種先進功能，包括熱點分析、用戶路徑追蹤和轉換率優化等，這些都有助於您更專業地了解消費者行為。

後台數據能助您掌握以下資訊：

• 在特定的日期範圍內，有多少新客戶訪問？回訪率是多少？
• 依據流量數據，哪一個促銷活動最能刺激消費者行為？
• 產品若是 SaaS 服務，觀察這個時間點和市場趨勢、使用者行為有何關聯？
• 誰是那些不受促銷影響而持續支持您品牌的忠實顧客？

擁有自家網站就等於擁有一筆獨家的數據資產。與在第三方平台上經營相比，自家網站能提供更詳盡和專屬的消費者資料。反之，在第三方平台上，企業常需支付額外費用才能接觸到這些數據，或者甚至無法得知。

3.搭配完整 CRM 鞏固品牌忠誠度、提升消費者終生價值

獨立官網可與CRM系統深度整合，完善CRM有助收集分析客戶數據，制定精準行銷策略，增進消費者滿意度與忠誠度，相較架站平台更具彈性。

CRM (Customer Relationship Management）全名為客戶關係管理，為你的官網串接一個強大的 CRM 系統，能夠掌握客戶的消費決策流程，協助業務團隊在不同階段推送客製化訊息、妥善回覆來自不同渠道的客戶問題，統整管理所有客戶資料、掌握用戶交易階段，讓消費者願意和品牌有長期的互動、創造顧客價值。

有粉專、 IG、蝦皮、電商平台…還需要官網嗎？
有人認為若只是「將產品上架」，那麼粉專、電商平台都可以辦到，不需為此專門架設一個網站、花錢又花時間，尤其目前有許多平台商前期成本相當低，輕鬆就能上手、上架商品。

然而就像 Facebook 的策略一樣，最終你會受到演算法所苦。想要爭取更多曝光量，只能大砸廣告費，而廣告的紅利時代也已過去，廣告成本只會越來越高昂。

平台商由於其營運特質，往往提供制式化的套版，功能有限、幾乎無法客製化，也無法明確表現品牌和商品的獨特性，消費者往往買過一次後就不會再訪。

獨立官網的品牌形象、視覺呈現能由你打造，透過 SEO 和廣告觸及客戶，客戶對你整體的品牌形象產生印象烙印，才有高度機會再次回頭消費。

網頁設計前的必備基礎觀念

網站設計趨勢

 

目前架設網站的主流是用WordPress 架站，並使用 RWD 響應式網站架設的技術。使用 RWD 的好處在於你的網站介面，可以隨著不同裝置尺寸呈現最適合瀏覽的排版和大小，你不需要管理多個版本的網站。

另外，2020 年後的趨勢上，手機版的網頁已經超越電腦版，而 B2B 企業的商業活動還是以電腦版網頁為主。

RWD 響應式網頁設計是什麼?

RWD 全名為（Responsive Web Desige），是一種開發網站架設的方法，運用 CSS 的技術，能夠在不改變網站架構的情況下瀏覽各種版本內容的設計方式。繼高效率、又能大幅減少維運成本。

WordPress 是什麼?

WordPress 是一個架設網站的開源式軟體。意味著它開放全世界的工程師為其開發不同的工具和軟體，來符合自己網站想要的需求。
據 W3Techs  對 ＷordPress 2023 年的分析報告：全世界已經超過 1/3（43.1%) 的網站使用它架站，小至個人部落格到複雜的大型企業網站，都有其用戶和愛好者。

WordPress 也是目前少數幾個結合網站與部落格的內容管理系統(CMS)，具備豐富成熟的資源，對於想經營網站品牌的企業來說是理想而有效率的選擇。

網站有哪些種類？

1.品牌官方網站

不限提供產品、服務，以傳遞、營造企業的形象與專業度為主的網站。例如設計師的個人網站、顧問服務、美術館網站。

2.電商網站

電子商務網站，須擁有金流、會員、多樣化折扣系統與資安防護的網站。

3.B2B 網站

服務客戶以上下游廠商、企業為主體，無論是資訊顧問服務或製造業，擁有完整的產品介紹、能深度整合 CRM、隨時彈性打造新的 landing Page 的網站。

4.內容媒體網站/部落格

提供內容為主軸，擁有部落格或是串流系統的內容媒體網站。

主機、網址 URL、IP、Https 是什麼？

1.主機 Server

主機是存放你網站內容的地方。架網站用到的為「虛擬主機」，意味將一個實體的主機伺服器，透過程式語言切成許多空間，供有需要的人使用。網站流量越大，主機的效能要求越高。

由於要負擔和管理一個實體主機的金錢、技術成本相當高昂，大部分人都是是向主機代管系統商購買虛擬主機存放自己的網站。你可以選擇國外知名的主機代管商，通常外商的服務市場涵蓋範圍大，較有保障。

2.網址 URL、網域

網址是你網站的「地址」，架設網站前，你需要先為自己的網站註冊和購買一個「網域」，告訴全世界這個網站的地址名稱。一但註冊過後，其他人就不能再使用同樣的地址。

3.IP

網路（Internet）就像蜘蛛網一樣連結全世界的電腦，為彼此傳遞資料，需要將正確的資料傳遞到正確的電腦就需要正確的位置，IP 有點像是你這個網站的地理位置、門牌號碼一樣的概念。通常長的形式為一連串數字，如：119.153.77.168。有些印表機可以用網路連結電腦，那麼這台印表機也會有屬於自己的 IP。 網址和 IP 的概念區分，前者是你網站的「地址」，後者為你網站的「座標位置」，或說是「身分證帳號」也很貼切。

4.HTTP 與 HTTPS

HTTP 全名為「超文本傳輸協定」（英語：HyperText Transfer Protocol，縮寫：HTTP），最初目的是為了提供發布和接收 HTML 頁面的方法。是一種通訊協定，通過它才能連結「瀏覽器」端與「主機」端。

HTTP 協議沒有安全性的功能，不論是對網頁端和主機端都不會進行身份驗證，也無法驗證內文的完整性，所以內容很有可能被竊聽或是竄改而當事人不自知。

HTTPS 全名「超文本傳輸安全協定」，透過 SSL/TSL 去做了一道安全鎖，能夠在傳輸訊息的過程中加密，包含 andshake(交握)、公私鑰加密、第三方身分認證機構等等，解決前面 HTTP 無法解決的問題。
網站前台、後台是什麼？
簡單區分，網站前台是「客戶看到的內容」，後台是「網站營運者看到的內容」。

舉凡網站在網路世界看得的每一個網路頁面，都屬於前台，後台則是你上傳文章、替換 Banner 視覺、觀看數據、調整網站分類、架構所操作的地方。

網站前台、後台是什麼？

網站前台和後台是網站運營的兩個重要部分，它們有不同的功能和目的。

網站前台，簡單來說，就是網站的「臉」，是瀏覽者在網路上看到的部分。前台包括了各種網頁、圖片、文字和互動功能等，這些元素共同構成了網站的外觀和風格。網站前台的主要目的是為了讓客戶能夠方便地獲取信息、瀏覽產品或服務、進行交流和購買等操作。

而網站後台，則是網站營運者負責管理和維護網站的核心區域。通常，後台可以讓網站管理員進行文章的上傳、Banner 視覺的替換、數據的查看、網站分類的調整以及網站架構的操作等。網站後台的主要目的是為了讓網站營運者能夠更有效地管理網站內容和功能，從而為用戶提供更好的體驗。

總之，網站前台和後台分別為「客戶看到的內容」和「網站營運者看到的內容」，它們各自扮演著不同的角色，共同支持著網站的運作。

網站設計流程

1.租用網站虛擬主機

要架設網站，首先你要有個地方存放你的網站空間，舉凡你上傳到網站中的資料、圖片影片等都需要空間存放，你可以選擇租用知名的主機商確保你的網站資料安全性與穩定性。
例如 GoDaddy、BlueHost。

2. 申請與購買網域(網址)

你的網站需要有個專屬網址，讓其他人能夠過網址找到你，地址的概念。架設網站前就可以先上網域商（如：GoDaddy）註冊一個網址，註冊網址需要費用，可以依據你的需求購買多長的使用時間。如果過期而不繼續付費，視同你不要這個網域，也代表未來他人可以註冊這個網址。

3.規劃網站地圖

在架設網站前你應該為你的網站規劃一個清楚的架構，通常是採用樹狀組織圖來規劃出網站應該要有的物件和功能，下面會提到如何規劃網站地圖。

4. 選擇網頁主題佈景、網站素材

先行挑選你喜歡的網站佈景主題，佈景主題能夠為你的網站視覺做基本定調，包含 Framework、版型等，如果有需要再特別客製化的地方或頁面則再由工程師撰寫程式語言。
佈景主題可以從 ThemeForest 瀏覽與購買，網站有上萬種不同產業與功能定位的佈景主題讓你選擇。
Theme Forest：https://themeforest.net/

5. 製作 WordPress 網站

上述作業差不多之後，便可以由工程師為你製作網站。包含串接資料庫、串接金流或物流系統、第三方套件、前後台建立、網站架設、切版等， UI/UX 設計師也會參與這個階段設計頁面的視覺形象。如果企劃人員事前有提出想安裝的 WordPress 掛件名單，在這時候就可以安裝。

6.安裝 WordPress 外掛套件

這個階段網站的完成度大部分八九成了，你可以在這時挑選幾個必要的 WordPress 套件，幫助你完善你想要的客製化功能。

外掛套件的功能有上百種，小至防止機器人留言、大至購物車系統都有，我們這邊主要討論每個網站都應該必備的基本套件，包含 Yoast SEO、Google Analytics、Smush（縮圖外掛）等等能夠提升你的網站效能、優化 SEO、追蹤與改善數據追蹤的外掛。

7.公開網站、將網站提交 Google

當你的網站完成就緒後，是時候讓網路世界知道你精心打造的網站了。WordPress 後台有個可見設定，這個設定在告訴 WordPress 可以將這個網站公開於網路世界。
設定方法：WordPress 後台 > 設定 > 一般 > 隱私權設定 >公開。

做好萬全的準備，建議也為你的網站安裝 Google Search Console ，將你的 Sitemap 提交給 Google，讓 Google 收錄，你的網站才有可能被搜尋引擎檢索，進而爭取排名。

如何建立與提交 Sitemap：
你可以請工程師為你產生 Sitemap ，他通常是一份副檔名為 .XML、RSS、mRSS 的文件。前往 Google Search Console，驗證你的網域通過後，你就可以提交這份 Sitemap 給Google。
詳細方法可以見 Google 官方文件說明。

網頁設計的費用

網站架設貴在哪？

想了解網站架設的報價範圍，可以初步以網站本身的架構來看，花錢主要花在以下三大部分：
1.伺服器（主機）租用費
2. 後台管理系統架設費用
3. 前端網站架設費用
網頁設計費用是整個專案費用中佔最大比重的。依據每一個公司網站功能的需求、負荷流量、設計素材複雜度等，有不同複雜程度的硬體設備和投入工時，費用範圍自然會有差距很大的情形。因此，單只看費用金額多寡不是公平的判斷方式。

網站架設成本包含哪些？

1.人力薪資成本

理論上，一項網站架設專案會有四個角色：

• 網頁工程師：架設網站、設計網頁、優化 SEO 架構，配置1-2人左右。
• UI/UX 設計師：使用者介面設計、使用者體驗流程規劃、設計頁面，配置1人。
• 行銷人員：品牌定位到行銷策略、使用者行為研究與經營多元的行銷渠道、SEO操略與內容規劃、數位廣告投放等。配置1-2人左右。
• 專案經理（PM）：專案時程及進度的主要管理者，以利網頁如期架站完成。配置1人。
  若由企業內部另立專案、每個角色配置一人人力，一個網站的專案工期以 3 個月來算的話，則架設一個網站的成本保守估計約需 48-72 萬元左右。

2.時間成本

若企業自行架站，還有以下 2 項時間成本需考量：

• 招募新員工：若公司沒有足夠的在職人員，需另花時間招募。從決議開缺到上班，需至少 2 個月的時間，此將延後完成架站。
• 多工處理效率：4 位員工需同時處理既有工作，並額外分配時間執行此專案。各專案的處理時間互相壓縮，即便員工能夠加班，仍有效率不彰的隱憂。

相對地，網站架設公司具備完整的專案人力，專案時程控管、內外溝通能力、網站架設經驗等等等深厚的實戰經驗和架站專業。能快速釐清你的網站需求、提出企劃。若發案企業的需求及訊息溝通明確，成本便能大幅減少。

網頁設計費用項目一覽表

項目	說明	報價範圍
風格形象設計(CIS)	包含全站。品牌的整體形象設計，包含企業色、 品牌logo、品牌視覺調性	60,000-150,000
CMS內容管理系統	網站後台系統，不管在哪一個頁面都方便讓非技術 人員可以上手操作。	80,000-200,000
網站規劃與分析	整體網站的架構、功能規劃與分析	50,000~70,000
電商策略規劃與分析	針對電商網站的架構、功能規劃與分析	50,000~70,000
金物流串接設定	串接付費金流（信用卡、支付系統、發票系統串接等）	8,000-15,000
購物車系統	購物車的設計與購物流程、包含我的收藏與加入購物車	30,000-80,000
會員系統	存取會員名單與會員管理	15,000-30,000
常見問答(FAQ)	常見問答	5,000-8,000
文章系統	編輯器頁面、文章管理系統等。包含部落格、最新消息	10,000-20,000
商品櫥窗	商品頁面與瀏覽功能、分類商品	30,000-60,000
SEO結構優化	設計出對SEO友善的網站架構，幫助搜尋引擎認識你的 網站、有健康體質爭取排名。	60,000-200,000
資訊安全維護	資訊安全	依企業需求報價
其他客製功能	其他客製化功能（例如預約系統）	依企業需求報價

如果想要瞭解更多關於網站架設費用的相關知識和評估報價的指南，請點擊【網站架設費用】以獲得更多資訊。

請注意，這些價格和資訊只是一般性的參考，具體的報價範圍和價格將根據您的特定需求和要求進行評估和商議。建議與專業的網頁設計公司進一步討論，以獲得個性化的報價和解決方案。

網站地圖如何規劃？

1.定位網站種類定位

1. 1. 網站種類定位：在架設網站之前，首先要明確自己的目的和網站的任務。是非商業性的個人網站、企業官網還是電商平台？網站需要提供哪些功能，如金流購物系統、問卷收集系統或部落格等？回答了這些問題之後，你的網站基本定位便會呈現出來。

1. 1. 網站結構規劃：依據網站的定位，設計出合理的網站結構。確保網站的導航清晰易懂，並且符合使用者的操作習慣。主要項目和次要項目的層次劃分要明確，以便讓瀏覽者迅速找到所需信息。

1. 1. 內容規劃：網站的內容是吸引訪客的關鍵。根據網站定位，規劃各類主題、文章和素材，並確保內容具有一定的質量和原創性。同時，也要考慮搜尋引擎優化（SEO），以提高網站在搜索結果中的排名。

1. 1. 設計風格：網站的視覺呈現對於吸引訪客同樣至關重要。根據網站定位和目標受眾，設計出適合的風格和主題。設計時要注重美觀和易用性，並且保持統一的風格。

1. 1. 互動與社交功能：網站可以透過互動和社交功能來提高訪客的參與度和黏著度。例如，可以設立留言板、評論功能或者社群分享按鈕等，讓訪客能夠更容易地互動並分享網站內容。

2.規劃網站地圖、架構

網站地圖Sitemap是正式架設網站前畫出來的結構圖，網站地圖應該包含所有頁面的規劃和功能，最常見的呈現方式為樹狀圖，用這份網站地圖來與客戶溝通網站的內容與設施。

一個完整的網站地圖元素，應該包含以下元素：

• 首頁頁面
• 頁首
• 頁尾
• 選單
• 其他連結、按鈕
• 登入頁面
• 部落格頁面（視企業需要）
• 商品頁（電商網站）
• 其他頁面（e.g.聯絡我們、預約頁面）

透過製作網站地圖，網站架設公司能夠了解你的架站需求，對於後續架站和溝通流程會清晰很多。

3.網站架設、UIUX

在網站地圖確定之後，與網站架設公司進行合作，共同完成頁面設計和視覺風格的規劃，以提升UI（使用者介面）和UX（使用者體驗），創建出符合企業品牌調性的網站。

設計公司需要了解企業的文化和品牌形象，以便設計出符合企業風格的視覺元素。同時，在規劃頁面設計時，也要兼顧易用性和美觀性，確保網站內容能夠清晰地呈現給使用者。

針對UX的部分，設計師需要關注使用者的需求和期望，以便提供更好的使用者體驗。例如，優化網站導航、縮短頁面加載時間、以及增強互動性等。此外，設計師還需定期收集使用者反饋，並根據反饋持續改進網站的UI和UX。

4.優化網站 SEO

為你的網站生成一個 Sitemap 檔，常見格式為 XML 檔，這個 Sitemap 是給 Google 演算法看的，讓 Google 爬蟲知道你的網站架構長怎樣，提升未來他時時爬取與更新你的意願。

在部落格系統，善用關鍵字策略與內容策略為你的產品和服務撰寫相關內容，讓你的內容有助於被潛在用戶搜尋到。你可以安裝 ＷordPress 外掛插件來協助你的文章內容和網站提升 SEO 表現。

網頁設公司不會跟你說的事情

1. 只為了快速結案而草率架設你的網站

大部分網站架設公司會藉由壓低成本來爭取客戶，然而相對的，不會以永續、長期的眼光來看待你的網站。

你的事業是長期發展的，你的網站也需要跟上你的事業成長腳步。你的網站不應該是免洗版的網站，兩三年後就因為草率的架站技術需要東補西補，笨重、跟不上技術的後台管理系統也需要整個打掉重練，要清除日以繼夜的技術債，遠比新建一個網站還困難、耗費大量成本。

2.大部分網站架設公司沒有實質 SEO 實戰經驗

網站架設的發展比 SEO 還久遠，在 Google 還沒成為主流搜尋引擎前就有人會架設網站。這 20 年來 Google 的演算法正持續飛速進步，目前的現況是，網站架設與 SEO 的關係已經密不可分，要架設網站，設計出友善於 SEO 的結構一開始就要考量進去。 目前市面上大部分網站架設公司專長在網站架設，SEO 公司專長搜尋引擎優化，客戶的架設網站流程變成先找網站架設公司架好一個網站，再找 SEO 公司優化 SEO，花上起碼 2 倍以上的時間和金錢成本做出一個適合現在生存的網站。 找尋一個擁有 SEO 執行能力的網站架設公司能確保你減少繞遠路，讓每一分錢都花在刀口上，並贏在網路事業的起跑點。

3.如何判斷好的網站架設公司？

先說結論，請務必選擇同時懂得 RWD網站架設，擁有 SEO 專業的網站架設公司。

如果你希望網站擁有強健的體質與良好的 SEO 基礎，讓你贏在 Google 的排名起跑點，在一開始選擇網站架設公司時就應該將這兩點納入考量。

Google 喜歡你的網站在電腦、平板、手機上擁有快速的載入速度以及良好的適應性，良好的使用體驗包含網站美感、字型字體、頁面載入速度、內容專業度、網站分類清楚、隨時更新資訊。

網站架設公司除了為你前後台漂亮與功能兼具的網站以外，還要擁有執行 SEO 的實戰能力。要能隨時跟上 Google 瞬息萬變的演算法調整策略，在技術與內容方面都跟上因應策略，包含簡潔的前端設計、好用而有效率的後台架構、對 SEO 友善的內容管理系統。

ＷordPress 網站架設成功範例

WordPress 是全球最受歡迎的網站建立平台，不僅適用於各種規模的企業，其高度靈活的架構也能滿足不同類型網站的需求。以下是一些用WordPress打造的成功網站範例。

企業官方網站成功範例： WordPress憑藉其豐富的功能、易用的套件和搜索引擎友好性，成為許多企業建立官方網站的首選工具。這些企業官網通常具有清晰的導航結構、精美的視覺設計以及易於使用的互動元素，讓訪客能夠迅速獲取所需信息，從而提升品牌形象和知名度。

以下是一些使用WordPress架站的企業官方網站成功範例：

1. 1. TechCrunch（https://techcrunch.com/） – 著名的科技新聞和資訊網站，以提供最新的科技新聞、產品評測和創業故事聞名。
   2. Sony Music（https://www.sonymusic.com/） – 環球音樂巨頭索尼音樂的官方網站，提供該公司旗下藝人和音樂作品的介紹、新聞和活動信息。
   3. The Walt Disney Company（https://www.thewaltdisneycompany.com/） – 著名的娛樂巨頭華特迪士尼公司的官方網站，提供公司的最新動態、投資者信息、企業社會責任報告等。
   4. Microsoft News Center（https://news.microsoft.com/） – 微軟的新聞中心網站，提供該公司的最新新聞、產品發布、活動通知等

1.  

1.  

1.  

這些成功案例證明了WordPress作為一個強大且靈活的網站建設平台，能夠幫助企業打造出令人印象深刻的官方網站，進一步鞏固品牌地位。