網頁設計的費用

文內估價表金額及比例僅供參考，實際價格仍依廠商報價為主

網頁設計－設計師

網頁設計師的專業程度

網頁設計師在整個網站專案中負責視覺設計的部分，不包含程式的設計與撰寫。其專業程度與年資會直接反映在其報價金額上，年資與能力越高的網頁設計師不僅熟悉現代網站的設計趨勢外，也具備較良好的溝通能力，與工程師協作時也能有效溝通，最後縮短專案時程。

每位網頁設計師的報價方式皆不同，如：以頁數計費、以件計酬、以小時計費、以工作天計費等。您可以參考下方聘請網頁設計師的一個工作天粗估費用：

網頁設計師行情

1. 網頁樣式數量與複雜程度

會直接影響網頁設計費用的因素繁多，諸如設計師製作素材的成本、希望製作的頁面樣式數量、網站整體的視覺設計費用、網站的動線設計、客製化程度高低等，諸多因素加總後的複雜程度，決定了最後網站設計中高占比的報價。

頁面樣式數量

依照網站專案的大小，通常也會直接影響網站頁面的多寡。但這裡所指的頁面，並不是網站中總共的頁面數量，而是頁面樣式的數量。當網站製作完成後，您就可以至網站後台，依據一開始設計好的網頁樣式自由增加或刪減頁面。所以當您需要的頁面樣式越多，網頁設計師就必須依照網站的主視覺，設計不同樣式的頁面，報價就會越高。

假設我委託設計的電商網站中只有「商品」和「結帳」兩種頁面，其中又有 10 頁商品頁面及 1 頁結帳頁面。則網頁設計師在報價時，就會以兩種頁面樣式做為報價依據，而不是總頁面數量。

動線設計

當想要製作的網站頁面越多時，就必須考慮網站動線的設計。所謂的動線，是指當您進入一個網站後，至特定頁面前所需點擊的連結數量或經過的步驟。如果沒做好動線設計，當網頁數量增多後，網站的瀏覽體驗就會下降，輕則影響網頁的轉換率，嚴重恐影響品牌給人的第一印象。當頁面數量越多，動線就越複雜，動線設計的費用就越高。

套版設計 vs 客製化設計

在委託製作網站前，可以先依照自身需求與預算，決定要設計製作套版網站還是全客製化網站。套版網站的優點是價格較低廉、製作網頁方便快速、有許多現成排版供選擇等；缺點則是客製化程度低、容易與其他網站使用同一版型而無差異化、排版固定等。客製化網站的優點是視覺全依業者喜好製作、差異化程度高等；缺點則是價格高、設計時間較長。

2. RWD 響應式設計費用

響應式設計（Responsive Web Design, RWD），是指當同一個網站在不同解析度的螢幕載具中顯示時，皆能提供對該解析度而言最佳的內容呈現。也就是當您使用不同大小的電腦、平板、手機瀏覽同一網站時，都無需縮放就能舒適瀏覽網頁內容。而在行動裝置普及的現代，響應式設計也成為網站的標配，Google 也在 2020 年 9 月開始提高支援響應式設計的網站的搜尋排名，這說明了響應式設計重要性。

在設計階段，響應式設計必須針對頁面的排版和內容呈現，對不同解析度大小的情況進行重新設計，來達成在不同大小的螢幕瀏覽網頁時，都能瀏覽原先設計好的排版樣式，所以響應式設計的網頁費用會比無響應式設計的網站來的高，且設計更費時。

3. 網頁行銷費用（額外費用）

網頁的視覺和 SEO（搜尋引擎優化），在網站設計中屬於網頁行銷的範疇，通常組織完善的網站接案公司都有此服務，但有些網站設計師並沒有提供此服務，建議在找尋網頁設計師前，先釐清是否需要額外的行銷服務。

視覺設計

視覺設計又包括平面設計、網站風格設計、品牌主視覺、logo 設計等，除網站風格設計外都屬於額外的行銷費用。另外如果委託網頁設計師為網頁找尋適合的圖片，不僅需要花費額外的圖庫授權費用，且 網頁設計師尋找圖片的時間也會算進工作時數中。建議在找尋網頁設計師前，就先備齊以上視覺素材，才能有效降低網頁設計的成本與時間。

SEO

SEO（Search Engine Optimization，搜尋引擎優化）也是一個設計製作一個網站時需要考慮的元素。SEO 的存在是為了使搜尋引擎（如：Google, Bing 等）更容易爬取網站內容，進而將網站連結放置搜尋頁面前段，讓搜尋相關關鍵字的人可以更容易找到您的網站，進而提升網站曝光度。

通常組織完善的網站接案公司都有做一定程度的 SEO。而年資與能力較高的網頁設計師，通常都具備 SEO 的觀念，並能將之與設計結合，所以價格較高。

4. 如何節省網頁設計的費用？

相比網頁工程師的費用，網頁設計雖然較為低廉，但要從零設計一個網站，加總的費用還是頗為高昂，若想節省網頁設計的費用，建議可以考慮以下幾點：

自行提供素材與內容

在設計開始前，可以自行先蒐集喜歡的網站樣式或參考範本，如此再請設計師設計時就能節省設計師與您來回溝通的時間，設計師也不用從零發想架構和視覺，繼而縮短專案時程，節省設計費用。其他可提供給設計師的素材還有網站內文、顏色、有版權的圖片相片等。

選擇網站製作平台

目前知名的網站製作平台都以拖拉的方式，讓您可以速地製作網站，好處是方便且價格低廉，缺點是樣式和排版都固定。例如：Wix、Weebly、Wordpress、Cyberbiz、Shopline、91APP等。若您對設計網頁沒有任何概念又希望能夠節省成本，選擇網站製作平台讓設計師設計，也是一種可以大幅降低成本的方法。

提供設計師充裕專案時間

若您已確定要設計網站了，不妨直接詢問設計師並索取報價，才不會導致最後設計的時間不足，壓縮最後設計師可以設計的時間，讓專案變成急件就會酌收急件的費用。

詢問是否有可刪減的設計

若您索取到報價後還是認為費用太高，先不要急著砍價，不如詢問設計師網頁有哪些地方是多餘並可以做刪減的，一位優秀的網頁設計師了解目前最新的網頁趨勢，一定可以為您做到最佳的取捨。

網站架設與開發－工程師

5. 網頁工程師的專業程度

網頁工程師，主要工作為根據網頁設計師的設計圖，負責開發與建立網站所需的各種功能與使用者介面，讓所有訪問網站的使用者可以順利瀏覽及使用網站上的各種功能。

年資與能力越強的網頁工程師，不僅熟悉並能使用目前最新的網頁技術解決大小需求，於同一個專案所需的開發時間也比年資少的網頁工程師少上許多。並且也具備與許多網頁設計師合作的經驗，擁有高效的溝通能力，可以節省許多網站開發的時間。每位網頁工程師的報價方式皆不同，如：以頁數計費、以件計酬、以功能計費、以小時計費、以工作天計費等。您可以參考下方聘請網頁工程師的一個工作天粗估費用：

6. 網域與主機費用

網域名稱和主機費用可以說是在設計一個網頁前的基礎建置。每個網站都有其固定網域（如：www.pro360.com），擁有固定網域後，網站才正式擁有網址供人尋找。註冊一個網域的費用，平均約在一年 $300 ~ $ 800 元，根據網域名稱的搶手程度不同，價格可能會高至千元以上，您可以參考知名網域註冊商：GoDaddy 的報價。

而主機是用來儲存所有您網頁所有的原始碼，藉此讓大家瀏覽您的網站。主機又分為須自行負擔架設、維護、人力技術等費用的實體主機，和從網路上租用的虛擬主機。實體主機費用動輒數十萬，較適合網站流量高的大企業；虛擬主機的各種維護和建置費用皆為主機商負責，您只需要每月負擔租金即可以享有空間服務，適合個人及一般企業，租賃費用一年約 $5,000 ~ $8,000 元。

SSL（傳輸層安全協定，Secure Sockets Layer）憑證可以說是網站的數位證書，是為了提升網路信賴度，可以驗證網站的身分並將資料加密，然後傳送到伺服器保護瀏覽者的資訊安全，可以說是現今網站的標準配備。SSL 的憑證費用一年約$3,000 元。

網域與主機費用

7. 網頁開發難度

在開發網頁時有許多因素影響著開發的難度高低，例如最直接的頁面數量、網頁類型、功能、是否包含資料庫、是否支援響應式等。

頁面樣式數量

當網站製作完成後，您就可以至網站後台，依據網頁工程師開發好的網頁樣式自由增加或刪減同一樣式的頁面。若設計的頁面樣式數量多，網頁工程師在製作網頁時就必須使用程式針對每個網頁進行刻板。故頁面樣式越多，網頁工程師的報價就越高。

網頁類型－靜態網頁、動態網頁

網頁依照可以與資料庫和伺服器的協同運作程度，又分為靜態網頁和動態網頁。動態網頁即人在做滑動、點擊等互動時，網頁會以互動作為依據，執行產生內容、播放動畫、觸發功能、向網站傳送資料等不同動作，故需要撰寫的程式較多且複雜；靜態網頁則是除了看得的頁面以外，無綁定資料庫和其他程式的網頁，其互動性較低，建置相對簡單省時，故開發價格較低。

RWD 響應式設計

響應式設計（Responsive Web Design, RWD），是指當同一個網站在不同解析度的螢幕載具中顯示時，皆能提供對該解析度而言最佳的內容呈現。也就是當您使用不同大小的電腦、平板、手機瀏覽同一網站時，都無需縮放就能舒適瀏覽網頁內容。而在行動裝置普及的現代，響應式設計也成為網站的標配，Google 也在 2020 年 9 月開始提高支援響應式設計的網站的搜尋排名，這說明了響應式設計重要性。

於開發階段，網頁工程師必須依據網頁設計師的設計圖，對所有可能用於瀏覽網站的裝置進行視覺最佳化。也就是說，網頁工程師必須在程式內設定網頁在每個解析度瀏覽時的大小和排版，實現每位瀏覽網站的使用者皆能得到最佳的瀏覽體驗。故響應式設計的網頁開發費用會比無響應式設計的網站來的高，且開發更費時。

瀏覽器支援程度

現今的瀏覽器種類繁多，且每人的裝置中瀏覽器的版本多少會不同。由此，網站對各種主流瀏覽器和版本的支援，也成了一項在網頁設計時必須考量的重點。台灣較多人使用的瀏覽器，由市佔率高至低排序為：Chrome、Safari、Edge、Firefox 等。所以當網站欲支援的瀏覽器和版本數量變多時，網頁工程師需要的開發時間就會增加，報價也會提高。

8. 資料庫與網站功能的多寡

設計網頁和網站時，有無資料庫的串連、網站功能多寡和複雜度、有無完整後台功能等，是決定開發大部分時間的決定因素。

網站功能

對個人與企業形象網頁而言，最常見的功能就是讓瀏覽者填寫聯絡資訊並傳送成表單的功能，屬於相對簡單不費時的功能，故開發費用較低。如果是電商網站或平台型的網站，則需要建置較大型的資料庫管理內容、商品、會員、圖片、影片等資料。除了這些資料外，還可能需要開發購物車的功能，並串接金流物流，使其正常發揮網路購物的功用。所以開發這類的網站或平台的費用，會比個人與企業形象網站還高出許多。

有無資料庫串接

若網站整體包含了大量的資料（包含文字、圖片、影片等），並時常發生資料的交換和變化時（購物行為、會員系統、金錢交易、與其他外部系統交換資料等），就會需要建置專屬的資料庫去儲存、新增、刪除這些資料，才不會導致瀏覽者需要一次載入大量資料而造成網頁載入的速度變慢或其他隱私問題等。若網站的規模越大，需要的部署的資料庫就越大，價格越高。

後台建置

一般來說，在網頁工程師開發網站時，都會留下一個後台讓您業主可以更改網站中的頁面內容、更新資訊、上架商品等，而該後台系統的建制預算，也大大影響了對使用者的友善程度。若想要一個便利、功能多、又有對使用者友善的後台介面，則開發的費用就會提升許多。

9. 後續維護與協助

大部分網站工程師在開發完網站順利上線後，都會協助後續的維護，只要當您遇到不會使用、網站當機、Bug 除錯、網站因為瀏覽器版本更新需要修改時，都可以定時及適時提供除錯援助。維護費用通常會依照網站的架構而定，電商購物網站的維護費用會比公司與個人形象網站還高。網站的維護費用約為建置費用的 10% ~ 25% 不等。

10. 如何節省網站架設與開發的費用？

製作一個網站的價格不斐，其中最花時間和金錢的就是開發的部分，如果希望節省開發的費用，您或許可以參考以下幾點：

減少動態頁面數量

在進行程式撰寫時動態網頁需要花費比靜態網頁更多的時間和開發成本。建議可以刪減不必要的動態網頁，並將它們換成靜態網頁，只保留如主頁等流量最多的動態網頁即可。

選擇已有相關功能的網站製作平台

目前知名的網站製作平台除了可以速地製作和設計網站外，還有許多已經開發好的功能或外掛可以使用，如金流、物流、後台、聊天機器人等。例如：Wix、Weebly、Wordpress、Cyberbiz、Shopline、91APP等。若您判斷自己不需要擁有網頁的原始碼，或許可以考慮使用這些網站製作平台，並找尋網頁工程師的協助，調整其中可以客製化的部分，以省下龐大的開發費用。

年繳後續維護費用

通常工程師會提供月繳及年繳的維護費用，通常年繳會提供較優惠的價格。

提供網頁工程師完整開發時間

若您已有網站設計圖準備要製作網站了，不妨直接詢問工程師並索取報價，才不會導致最後開發的時間不足，壓縮最後工程師可以開發建置的時間，讓專案變成急件就會酌收急件的費用。

11. PRO360 達人網會如何保障消費者與專家的權益？

第三方收付款－安心支付

PRO360 達人網現在也提供第三方支付收款方式，讓使用者可以安心付款有保障。安心支付提供多元的付款方式，包括信用卡、WebATM、ATM 轉帳、超商繳費，提供消費者更簡單便利、有彈性的支付方式，並避免消費糾紛。欲了解詳細付款流程與權益，請參考「安心支付」如何保障消費權益？。