網頁設計是什麼？費用、流程與挑選公司完整指南

老闆的話

Hi，大家好，我是山川久也的老闆莫內。做網頁這行，一晃眼就 20 年了，從學生時代的毛頭小子，到現在的中年大叔；從當年還在跟 IE6 奮鬥，一路走到今天的 AI 時代。這些年見證了一輪又一輪的技術演化，說是「見證奇蹟」也不誇張。

一家網站設計公司能走這麼久，靠的當然是不斷更新製作與設計的能力；但我更相信，真正讓客戶願意選擇我們、也願意留下來的，是製作的品質與維護的責任感。因為在所有技術與服務的背後，說到底，還是人與人之間的溝通與理解。

在今天，要做出一個網站其實非常容易。但也正因為網站被這樣大量、快速地產出，要找到一個讓您打從心裡喜歡、用起來也順手的網站設計，反而愈來愈難。設計的魅力，還有那種帶著「人味、不那麼整形」的質感，在 AI 時代反而更顯珍貴，畢竟現在一個個網站打開來，長相都愈來愈像。

我們當然也用 AI 來加速技術與設計，但設計的獨特性，永遠是由我們的設計腦袋去引領 AI，而不是反過來被它牽著走。對山川久也來說，AI 是讓我們技術與設計都更強的工具，而不是拿來取代靈魂的東西。

所以這篇，我想用聊天的方式，把這些年最常被客戶問到的問題提出來：網站設計到底要花多少錢？該自己架，還是找專業的網頁設計公司？製作流程、還有挑選公司的眉角又有哪些？沒有行話、不繞圈子，希望能幫您少走一點冤枉路。

網頁設計是什麼？和網站設計差在哪？

「網頁設計」這四個字，在不同人的口中，指的往往不是同一件事。有人說的是一張版面的美感，有人說的是一個網站從無到有的建置工程，也有人指的只是打開手機的那一秒鐘、畫面給人的第一印象。這種語意的模糊，是許多企業在評估網站專案時，第一個踩到的坑——雙方明明都在談網頁設計，腦中想的卻是完全不同的範圍、不同的產出、不同的預算級距。

我們是一家以設計為本業的公司，長年替企業、學校、公部門與品牌處理官網與購物網站。這篇文章不打算用行銷語言把網頁設計包裝成什麼神秘的專業，而是把我們在實際專案裡真正在做的判斷攤開來講：一個版面為什麼這樣排、一組顏色為什麼這樣選、一條動線為什麼這樣走、一筆預算為什麼落在那個級距。看完之後，你應該能自己判斷一份網頁設計提案是紮實還是空洞。

網頁設計，是把資訊、視覺與操作三件事，安排在一個螢幕畫面上的專業。它處理的核心問題只有一個：當一個陌生人打開這個畫面，他在三秒內看到什麼、理解什麼、接著會想做什麼。

這個定義聽起來簡單，但它決定了網頁設計的工作內容遠不只是「把畫面弄好看」。一張首頁上，標題要多大、主視覺要佔多高、按鈕放在第幾個位置、次要資訊要不要在第一屏出現——這些都不是美感的自由發揮，而是根據內容的優先順序所做的決策。好的網頁設計，是讓使用者在完全沒有說明書的情況下，自然而然地走到你希望他走到的地方。

因此我們會說，網頁設計同時是視覺工作，也是資訊工作。它一手處理美感：留白、比例、色彩、字體、節奏；另一手處理秩序：什麼先講、什麼後講、什麼可以收起來。兩者缺一，網頁設計就會失衡——只有美感的網頁漂亮但難用，只有秩序的網頁清楚但沒有記憶點，而一個企業的官網，通常兩者都輸不起。

網頁設計不是美術，也不是單純的程式

網頁設計和平面美術最大的差別，在於它的載體會動。一張海報印出來就固定了，但一個網頁要面對不同尺寸的螢幕、不同長度的內容、不同速度的網路、不同習慣的使用者。所以網頁設計必須設計的不是一張圖，而是一套規則：標題在寬螢幕怎麼排、在手機上怎麼折行、圖片比例被壓縮時怎麼裁切、文字變多時版面會不會塌掉。

而網頁設計和前端程式的差別，則在於決策的性質。程式解決的是「怎麼實現」，網頁設計解決的是「為什麼是這樣」。兩者必須緊密配合，但它們是不同的專業判斷。這也是為什麼我們堅持設計與程式都在公司內部完成，因為網頁設計的細節一旦交給不理解設計意圖的人實作，成品就會在一百個小地方偏離原本的判斷。

網頁設計和網站設計差在哪？

這是最常被問、也最容易造成報價落差的一題。簡單說：網頁設計偏向「單一畫面的視覺與操作設計」，網站設計偏向「整個網站的整體規劃與建置」。網頁設計是網站設計裡的一環，但它是使用者唯一看得到的那一環。

用一個比喻會更清楚。如果把網站當成一棟建築，網站設計包含了土地評估、結構、格局分配、水電管線、動線規劃與後續維護；而網頁設計則是每一個房間的採光、比例、材質、傢俱擺放與視覺氛圍。你不會只蓋結構不做室內，也不可能跳過結構直接做室內。兩者是同一個專案的不同層次。

網頁設計與網站設計對照表

比較項目	網頁設計	網站設計
關注範圍	單一頁面的版面、視覺與操作	整站架構、頁面關係與系統建置
核心產出	版型、視覺稿、元件樣式、互動規範	網站地圖、資訊架構、前後台系統、上線環境
主要判準	美感、可讀性、視覺層級、轉換動線	擴充性、維護性、效能、安全性
常見誤解	以為只是「畫得好看」	以為只是「把頁面串起來」
失敗時的症狀	畫面雜亂、看不出重點、手機版跑掉	改一頁要動全站、加功能就崩、後台沒人會用
彼此關係	網頁設計是網站設計的一部分；沒有好的網站設計，好的網頁設計撐不久

在報價與合約上，這個差別非常實際。當一份報價單寫的是「網頁設計」而金額很低時，很可能它只包含幾張版型的視覺稿，不含資訊架構、不含後台、不含資料串接、不含上線。若你要的是一個能長期經營的官網，需要的是完整的網站設計，而網頁設計是其中決定成敗印象的關鍵段落。關於整站規劃的完整內容，可以延伸閱讀我們的網站設計服務。

網頁設計包含哪些工作？

一個完整的網頁設計工作，通常包含以下幾個層次。它們不是可有可無的加值項目，而是每一頁都必須被決定的事。

版面配置

版面是網頁設計的骨架。我們會先決定內容的欄寬與網格，再決定每一個區塊的高度與間距。多數失敗的版面不是因為元素醜，而是因為間距沒有系統——區塊之間有的貼太近有的空太多，眼睛就找不到節奏。專業的網頁設計會建立一套間距級距，整站共用，讓每一頁看起來像出自同一隻手。

色彩計畫

網頁設計的配色不是挑喜歡的顏色，而是分配比例。主色、輔色、強調色、中性色各佔多少面積，決定了整個畫面的氣質。企業官網的配色尤其需要克制，因為它要承載長期的品牌印象，而不是一次性的活動視覺。

文字系統

字級、字重、行高、字距、段落寬度，這五項決定了一個網頁好不好讀。中文網頁設計在這裡的難度高於英文，因為中文沒有字母的高低差，整段文字的灰度較均勻，若行高不足就會顯得擁擠。我們在處理長文型頁面時，行高通常會拉得比一般設計軟體的預設值更寬。

動線與互動

動線是使用者從進入到完成目標的路徑。網頁設計要決定的是：主要行動按鈕出現幾次、出現在哪裡、次要選項怎麼收納、表單分成幾段。互動則包含滑鼠停留、展開收合、載入回饋、頁面轉場——它們的作用是讓操作有回應，而不是為了炫技。

元件與規範

成熟的網頁設計不會一頁一頁畫，而是先定義元件：按鈕、卡片、表格、標籤、表單欄位、彈出視窗。元件定義好，整站的一致性就有了保證，未來新增頁面時也不需要重新設計，維護成本會明顯下降。

好看的網頁設計是怎麼決定的？

「好看」聽起來很主觀，但在專業的網頁設計裡，它其實有可以討論的判準。我們在內部審稿時，最常用的是以下四項。

留白是不是被當成材料，而不是剩下的空間

初階的版面會把留白當成「還沒填滿的地方」，於是不斷塞東西進去。成熟的網頁設計把留白當成一種材料——它負責製造呼吸、分隔群組、凸顯主體。當一個畫面上只有一句標題與大量留白時，那句話的份量會被放大好幾倍。企業形象官網的第一屏之所以敢空，就是因為它在用留白換取信任感。

節奏有沒有變化

一整頁如果每個區塊都一樣高、一樣寬、一樣的圖文左右交錯，看到第三段就會疲乏。好的網頁設計會安排節奏：一個大的、兩個小的、一段全幅的、一段收窄的。這種疏密交替，是讓人願意往下滑的原因。

對比夠不夠明確

對比包含大小對比、粗細對比、顏色對比與疏密對比。網頁設計最常見的問題是「什麼都想強調」，結果標題、副標、按鈕、說明文的權重都差不多，畫面就變成一片平坦。我們的做法是強迫排序：這一頁最重要的東西只能有一個，其餘全部往下降一階。

層級是不是三秒內就能讀懂

把畫面縮到很小、或瞇著眼睛看，如果還能看出「哪裡是標題、哪裡是重點、哪裡可以點」，這個網頁設計的層級就是成立的。這是我們驗收版面時最直接的檢查方式，比任何理論都有效。

網頁設計的配色，是怎麼決定的？

配色是網頁設計裡最容易被誤解的一環。多數人以為設計師在挑「好看的顏色」，但實務上我們在做的是三件事：定調性、定比例、定規則。

先定調性，再談顏色

接到一個案子時，我們不會先開色票，而是先確認這個品牌希望被怎麼看待：是沉穩可靠、是精密專業、是溫暖親切，還是前衛銳利。調性確定之後，顏色的範圍其實就縮得很小了。一家精密機械廠的網頁設計，很難用高彩度的粉色系成立；一個親子品牌的網頁設計，也不會用深黑加冷灰。這不是保守，而是尊重品牌本身的語言。

比例比色相更重要

同樣三個顏色，比例不同就是完全不同的網頁設計。我們習慣讓大面積由中性色承擔——白、極淺灰、深灰或黑，主色控制在整體的一到兩成，強調色則壓在一成以內，只用在真正需要被點擊的地方。當強調色到處都是，它就失去了強調的功能，使用者反而不知道該按哪裡。

顏色要有規則，才能被維護

網頁設計的配色最後必須變成一套可被套用的規則：文字色有幾階、背景色有幾階、邊框色是哪一階、按鈕的一般狀態與滑過狀態各是什麼。沒有這套規則，網站上線半年後由不同人新增頁面，顏色就會開始漂移，整站的一致性也隨之瓦解。我們在交付時會把這套色彩規範一併說明，讓後續維護的人有依據。

不要忽略對比與可讀性

淺灰底配淺灰字，在設計軟體裡看起來很雅致，但在戶外陽光下的手機螢幕幾乎讀不到。專業的網頁設計會確保文字與背景之間有足夠的明度差，特別是在資訊型頁面與表單上。美感如果犧牲了可讀性，那就不是好的網頁設計，只是好看的圖。

中文網頁設計為什麼特別難排版？

中文網頁設計的排版難度，客觀上高於英文。原因在於中文是方塊字，每個字的視覺重量接近，整段文字排出來像一片均勻的灰色塊，缺少英文那種因字母高低與詞距自然形成的節奏。這代表中文的排版必須靠設計師主動製造層次。

行高與段落寬度

中文內文的行高若設得太緊，段落會糊成一塊，讀者的眼睛容易跳行。我們處理長篇內容時，行高通常會設在字級的一點七到二倍之間，並且限制每行的字數，不讓文字在寬螢幕上拉成極長的一行。這兩個設定，往往比換一套華麗的字體更能改善閱讀體驗。

字級的階層

一個網頁設計裡的字級不該無限制地增加。我們通常會建立一組固定的字級階層：主標、次標、小標、內文、註解，最多五到六階。階層一旦超過，畫面就會失去秩序，因為讀者無法分辨兩個相近字級之間的差異代表什麼意思。

標點與行首行尾

中文的標點符號佔一個全形寬度，若不處理，段落的左右邊界會出現參差不齊的視覺缺口。標題折行時，也要避免把一個詞拆開、或讓標點孤懸在行首。這些細節在網頁設計裡不會有人稱讚，但只要出錯，整個版面就會顯得粗糙。

字體的選擇要考慮載入

中文字型的檔案體積遠大於英文，一套完整的中文字型動輒數 MB。網頁設計如果隨意載入多套中文字型，載入速度會明顯變慢。我們的做法是控制字型套數、必要時做字型子集化，讓視覺表現與載入效能取得平衡。

網頁設計流程有哪些階段？

網頁設計不是一開始就打開軟體畫圖。一個規模合理的專案，通常會經過以下階段。理解流程，也能幫助你判斷一份提案是不是有真正想清楚。

第一階段：需求訪談與目標確認

我們會先確認這個網站要解決什麼問題：是要提升企業形象、是要帶來詢問、是要讓產品資訊被找到、還是要直接銷售。目標不同，網頁設計的方向就完全不同。同時也會確認目標對象、競爭同業、現有素材、內部維護的人力與時程限制。

第二階段：資訊架構與網站地圖

把所有內容盤點出來，決定分類、層級與命名。這一階段不談美感，只談秩序。網站地圖確認之後，才知道要設計幾種版型、哪些頁面需要客製、哪些可以共用。

第三階段：版面草圖與版型規劃

用低精度的線框，先把每一頁的區塊順序與比重排出來。這是網頁設計最關鍵、卻最容易被跳過的一步。在還沒有顏色與圖片的狀態下討論版面，雙方比較容易聚焦在「這一頁要先講什麼」，而不是在「這張圖我不喜歡」。

第四階段：視覺設計

套上色彩、字體、圖像與細節，把線框變成真正的畫面。通常會先完成首頁與一到兩個代表性內頁，確認風格方向之後再展開其餘頁面。這個階段的網頁設計會同時產出電腦版與手機版的視覺，避免只做完電腦版才發現手機上排不下。

第五階段：前端切版與互動實作

把視覺稿實作成真正可以在瀏覽器運作的頁面，包含響應式、互動效果、表單行為與各種狀態。這一階段我們會同步做跨瀏覽器與跨裝置的檢查。

第六階段：後台與資料串接

依照網站需要，建置對應的後台管理功能，讓客戶能自行更新內容。後台的網頁設計同樣重要——如果後台難用，網站上線後就不會有人願意更新，內容一旦停止更新，網站的價值也會快速衰減。

第七階段：測試、驗收與上線

包含內容校對、連結檢查、表單測試、效能檢查、行動裝置實機測試，以及搜尋引擎相關設定。全部確認後才安排上線與網域切換。

RWD 響應式為什麼不能省？

RWD 響應式網頁設計，指的是同一份網頁能依據螢幕寬度自動調整版面，讓電腦、平板與手機都得到合適的閱讀體驗。它不是為手機另外做一個網站，而是同一份內容、同一個網址、依裝置變換排列方式。

在台灣，多數企業網站的行動裝置流量早已超過桌機。這代表你的潛在客戶第一次看到你的網頁設計，多半是在一支手機上。如果手機版的版面破碎、文字過小、按鈕擠在一起，那麼桌機版做得再精緻也沒有意義，因為大部分人根本沒看到。

RWD 不是把版面縮小

常見的誤解是把電腦版等比縮小塞進手機。真正的響應式網頁設計會重新安排優先順序：桌機上並排的三欄，在手機上要決定誰在上面；桌機上的橫向選單，在手機上要換成合適的收合方式；桌機上的大型表格，在手機上可能需要改成卡片式呈現。這些都是設計決策，不是自動生成的結果。

斷點應該由內容決定

斷點不是照著某支熱門手機的尺寸來設，而是看版面在哪個寬度開始變得不好看。我們的做法是把瀏覽器慢慢拉窄，觀察每一個區塊在什麼寬度開始擠壓、折行、失衡，在那裡設下斷點。這樣做出來的響應式網頁設計，在各種尺寸下都能維持該有的比例。

觸控的尺度不同於滑鼠

手指的接觸面積遠大於滑鼠游標，因此手機版的網頁設計必須放大可點擊區域、拉開相鄰按鈕的距離、避免依賴滑鼠停留才會出現的效果。這是很多套版網站在手機上難用的主因。關於響應式的更完整說明，可以參考我們另一篇文章：RWD 響應式網頁設計。

需要特別說明的是，我們承接的專案，RWD 響應式網頁設計是內含的，不另外加價。因為在現在的網路環境下，它不是選配，而是一個網站能不能正常運作的基本條件。

網頁設計要注意哪些細節？

以下這些項目，在提案階段很少被討論，卻是網站上線後最常被抱怨的地方。它們也是專業與非專業的網頁設計之間，差距最明顯的部分。

第一屏要說清楚你是誰

使用者打開網站的前幾秒，只想知道三件事：這是什麼公司、能提供什麼、我下一步該做什麼。很多網頁設計把第一屏做成一張漂亮但語意不明的大圖，結果訪客滑了兩下就離開。第一屏的美感必須服務於訊息，而不是取代訊息。

所有狀態都要被設計

一個欄位不只有「填好」的樣子，還有空白、輸入中、格式錯誤、送出中、送出成功的樣子。一個列表不只有「有資料」的樣子，還有沒有資料、載入中、載入失敗的樣子。完整的網頁設計會把這些狀態都畫出來，否則實作時就會出現「隨便給一個訊息」的情況，體驗立刻掉一階。

圖片要有規範

客戶提供的圖片來源與比例往往不一致。若網頁設計沒有事先定義圖片的比例、裁切方式與最低解析度，上線後的列表頁就會出現高矮胖瘦不一的畫面。我們會在設計階段就把圖片規格寫清楚，並在後台做對應的處理。

文案長度要留餘裕

設計稿裡的標題常常剛好排成漂亮的兩行，但真實內容可能是四行。好的網頁設計會預想文字變長、變短、甚至沒有內容的情況，讓版面在各種長度下都不會塌。

無障礙與基本可用性

足夠的色彩對比、可用鍵盤操作、圖片有替代文字、表單欄位有明確標示——這些不只是規範要求，也直接影響一般使用者的體驗。特別是學校與政府單位的網站，無障礙是必須在網頁設計階段就納入的條件，事後補救的成本會高出許多。

網頁設計常見的錯誤有哪些？

以下是我們檢視既有網站時，最常發現的問題。你可以拿它們檢查自己現在的網站。

什麼都想強調：滿版都是重點色與粗體，結果沒有重點。
小標只是加粗文字：視覺上有層級，原始碼裡沒有層級，搜尋引擎讀不到結構。
只做電腦版：手機上文字過小、按鈕重疊、表格需要橫向捲動。
間距沒有系統：每個區塊的上下距離都憑感覺，整頁節奏散亂。
圖片規格不一：列表頁高矮不齊，版面被素材綁架。
聯絡方式藏太深：使用者想聯絡你的時候找不到入口。
特效過度：每個區塊都要淡入位移，滑動時反而干擾閱讀、拖慢速度。
後台難用：客戶不敢更新，網站內容停在上線那一天。
沒有考慮內容成長：加到第二十筆資料，版面就開始破。

這些問題的共通點是：它們都不是技術做不到，而是在網頁設計階段沒有被想過。把這些先想清楚，成本遠低於上線後補救。

套版和客製化網頁設計差在哪？

這兩種做法都有其存在的理由，關鍵在於你的網站要承擔什麼任務。把它們的差別講清楚，比直接說「套版不好」誠實得多。

套版：用既有版型填入內容

套版是選一套現成的版型，換上你的文字與圖片。它的優點很明確：便宜、快、風險低。若你只是需要一個能被找到的基本據點，內容不多、也沒有特殊功能需求，套版可以解決問題。

它的限制同樣明確。第一，版型是為通用情境設計的，你的內容結構如果與它不合，就必須遷就它——這通常意味著刪掉真正想講的東西。第二，視覺無法承載品牌差異，同一套版型全世界都在用。第三，功能延伸受限，當你日後想加一個特殊的查詢、報名或串接，往往會發現版型的結構撐不住。

客製化網頁設計：從內容長出版面

客製化的順序是反過來的：先理解內容與目標，再設計版面。因此版面是為你的內容量身決定的——你的產品有五個規格參數，版面就設計成能清楚呈現五個參數；你的服務流程有三段，就設計一個三段式的敘事節奏。

客製化網頁設計的另一個價值在於長期。因為架構是為你設計的，後續增加內容、擴充功能、調整導覽，都能在既有結構上延伸，而不需要打掉重做。對一個要經營五年以上的企業官網來說，這個差別會反映在總持有成本上。

怎麼選？

我們的建議很簡單：如果網站只是名片，套版足夠；如果網站是業務工具、是品牌的門面、是客戶決定要不要聯絡你的依據，那就值得投資客製化的網頁設計。我們公司承接的專案，設計與程式全案由內部執行、不外包，後台也依需求全客製，正是因為我們處理的多半是後者。

網頁設計費用與保固怎麼算？

網頁設計的報價之所以差距很大，是因為報價單上「網頁設計」四個字底下，可能包含也可能不包含以下項目：資訊架構規劃、視覺設計、前端切版、響應式、後台系統、資料串接、內容建置、測試、上線、教學。項目不同，金額當然不同。

費用的組成

設計工時：版型數量、客製程度、修改輪次。
前端實作：頁面數量、互動複雜度、響應式的處理難度。
後端與後台：需要哪些管理功能、有沒有權限分層、要不要串接外部系統。
內容建置：由誰負責把資料上到網站，數量多寡。
其他：網域、憑證、主機、金流、簡訊、第三方服務等。

我們的實際價格區間

以我們承接的專案而言，常見的預算級距如下，實際金額仍需依需求規格確認：

網站類型	常見預算區間	影響金額的主要因素
企業形象官網	新台幣 10 萬至 50 萬元	版型數量、客製深度、多語系、後台複雜度
購物網站	新台幣 30 萬至 100 萬元	商品規格結構、金流物流、會員與行銷機制
學校／政府網站	新台幣 10 萬至 100 萬元	單位數量、公告系統、無障礙規範、資料介接

需要提醒的是，同一個級距內的差距，通常不是來自頁面數量，而是來自客製的深度。一個只有八頁但每頁版面都不同、且需要串接內部系統的網站，會比一個三十頁但版型高度重複的網站更耗工。判斷報價是否合理，看的是規格書而不是頁數。

便宜的網頁設計，成本會出現在哪裡？

低價的網頁設計未必是陷阱，但你要知道它省在哪裡：可能省掉了資訊架構的規劃、省掉了手機版的細修、省掉了各種狀態的設計、省掉了效能與相容性測試，或是省掉了後台的客製而改用通用介面。這些省略在上線當天看不出來，但會在往後的每一次更新中，用你的時間慢慢還。

網頁設計的付款方式與保固，通常怎麼約定？

付款方式是合作關係的基礎，講清楚對雙方都好。我們的做法是分兩期：簽約時支付 50%，驗收完成、正式上線前支付尾款 50%。這樣的安排讓設計端在製作期間有合理的資源投入，也讓客戶保有驗收的主導權。

保固的部分，我們會依專案的規模與內容，於合約中明確約定保固範圍與期間。保固通常涵蓋程式與功能上的瑕疵修復，不包含上線後新增的需求、內容更新，或第三方服務政策變動所導致的調整。這些界線在合約中寫清楚，可以避免日後認知落差。

另外兩件事同樣寫在合約裡：網站的原始碼與資料所有權歸屬客戶；主機方面，本公司於中華電信機房承租機櫃並自行管理，設備為公司自有，這讓我們對網站的運作環境有直接的掌握，而不是把問題轉包給看不到的第三方。

網頁設計完成後，網站放在哪裡？後續怎麼維護？

網站上線只是開始。這一段常被略過，但它決定了網站三年後還能不能用。

主機環境

本公司於中華電信機房承租機櫃並自行管理，設備為公司自有。這代表網站的執行環境、備份策略與異常處理都在我們自己的掌握之中，遇到狀況時能直接處理，而不需要透過層層轉包等待回覆。對於重視穩定性的企業與公部門網站，這一點的價值會在真正出事的那一天顯現。

原始碼與資料的歸屬

網站的原始碼與資料所有權歸屬客戶，這一點明確載明於合約。我們認為這是應該的：你付費完成的網頁設計與程式，本來就該屬於你，日後即使更換合作對象，也不會被綁住。

上線後的更新節奏

網站不是一次性的成品。建議至少維持基本的更新節奏：最新消息、案例、產品資訊的定期補充。這既是給訪客看的，也是讓搜尋引擎知道這個網站仍在營運。後台之所以要做得好用，就是為了讓這件事不需要依賴外部支援。

網頁設計和前端工程怎麼分工？

在專業分工上，網頁設計負責決定「畫面應該長什麼樣、怎麼運作」，前端工程負責把這個決定精準地實現在瀏覽器上。兩者不是上下游的交接關係，而是必須來回對話的協作關係。

設計端要交付的不只是圖

成熟的網頁設計交付物，除了視覺稿，還包含：間距與字級的規範、色彩的層級定義、元件在各種狀態下的樣式、響應式在各斷點的排列方式、互動的觸發條件與時間感。缺少這些，前端就只能自行猜測，成品與設計稿的落差便由此產生。

前端要回饋可行性

某些視覺效果在特定裝置上會造成卡頓，某些排版方式在內容變動時會破版，某些動畫會影響載入的感受速度。前端在實作前就把這些回饋給設計端，比做完再改省下大量成本。

為什麼我們選擇不外包

網頁設計的品質，有很大一部分決定在這條交接線上。當設計與程式在同一個團隊裡，設計師可以直接說明某個間距為什麼不能改、某個互動的節奏為什麼是這個秒數；前端也可以即時提出替代方案。我們的專案設計與程式全案內部執行、不外包，理由就在這裡——這條線一旦拉長，品質的損耗是必然的。

網頁設計如何影響 SEO？

很多人把網頁設計與 SEO 當成兩件事，實際上網頁設計的決策，直接影響搜尋引擎如何理解與評價你的頁面。

結構標籤決定內容是否被理解

搜尋引擎讀的是原始碼的結構。如果一份網頁設計把所有小標都做成加粗的文字，而沒有使用正確的標題階層，那麼在搜尋引擎眼中，這整頁就是一大團沒有層次的文字。正確的標題階層不只是技術規範，它其實就是版面的層級在原始碼裡的對應——設計上的層級與程式上的層級應該一致。

版面的重量決定載入速度

大尺寸主視覺、未壓縮的圖片、過多的字型、滿版的影片背景、複雜的滾動特效，這些都是網頁設計階段做的決定，也都會反映在載入速度上。載入速度不只影響搜尋排名，更直接影響跳出率——使用者不會等一個三秒還沒出現內容的頁面。

我們在設計階段就會評估視覺表現與效能之間的取捨：主視覺是否需要那麼大、動畫是否需要全頁套用、圖片是否可以用更合適的格式與尺寸輸出。把效能當成設計條件之一，比事後再回頭優化有效得多。

行動裝置體驗是排名的基礎條件

搜尋引擎以行動版內容為主要評估依據，因此手機版的網頁設計品質，會直接影響整體表現。手機上點不到的按鈕、讀不清的文字、需要橫向捲動的表格，都是實質的扣分。

內容的可讀性同樣是 SEO

合理的段落長度、清楚的小標、適當的行高、有意義的圖說，讓使用者願意停留、願意讀完。停留與互動的品質，最終也會回饋到搜尋表現上。這也是為什麼我們認為網頁設計與內容不能分開處理。

最後必須誠實說明一件事：沒有任何公司能保證 Google 的特定關鍵字排名。演算法由搜尋引擎掌握且持續調整，任何「保證第一頁」「保證第一名」的說法，都應該審慎看待。網頁設計能做的，是把該做好的結構、速度、體驗與內容基礎打穩，讓網站具備被搜尋引擎正面評價的條件。

首頁和內頁的網頁設計一樣嗎？

不一樣，而且差距比多數人想像的大。把資源全押在首頁，是企業網站最常見的配置錯誤。

首頁負責定位與分流

首頁要在極短時間內回答「你是誰、你做什麼、我該往哪走」。它的網頁設計偏向氣氛與導引：主視覺的份量、品牌訊息的層級、幾條主要入口的排列。首頁不需要把所有事情講完，它的任務是讓對的人找到對的入口。

內頁負責說服與轉換

真正決定訪客要不要聯絡你的，通常是服務頁、產品頁與案例頁。這些頁面的網頁設計重點不在氣氛，而在資訊的組織：規格怎麼排、比較怎麼呈現、案例怎麼敘事、行動按鈕出現在哪些位置。我們在處理企業形象官網時，投入在服務頁與產品頁的時間，經常不亞於首頁。

列表頁與內容頁的細節最容易被忽略

新聞、文章、作品的列表頁，是網站上線後更新最頻繁的地方，也是最容易走樣的地方。列表的圖片比例、標題折行、標籤位置、分頁方式，若在網頁設計階段沒有訂好規則，內容一多就會亂。內容頁則要處理圖文混排、引用、表格與長段落的閱讀節奏——這是網頁設計裡最需要耐心的部分。

怎麼挑選一家網頁設計公司？

這一段我們盡量寫得客觀，讓它即使不是選擇我們，也仍然有參考價值。

看作品，但要看對地方

不要只看首頁的截圖。請對方提供已上線的網址，實際用手機打開、點進內頁、捲到最下面、試著填一次表單。你會很快看出這家公司的網頁設計是只做到「首頁很漂亮」，還是每一層都被認真處理過。

看提案的順序

如果第一次會議對方就急著給你版面與價格，卻沒有問你的客戶是誰、目標是什麼、內容有多少，那麼這個網頁設計很可能是套版思維。真正的專業會先問問題。

確認分工與外包狀況

直接詢問設計與程式是否由內部完成。外包並非原罪，但你有權知道實際執行的是誰、溝通的路徑有多長、出問題時由誰負責。我們的專案是全案內部執行、不外包，也建議你在比較時把這一項納入。

把規格寫進合約

頁面數量、版型數量、修改輪次、響應式是否內含、後台功能範圍、上線後的保固範圍與期間、原始碼與資料歸屬、付款方式與時點——這些都應該白紙黑字。含糊的合約在順利時看不出問題，只有在有爭議時才會顯現代價。

對排名保證保持警覺

任何宣稱能保證 Google 特定關鍵字排名的說法，都應該審慎看待。搜尋排名由搜尋引擎的演算法決定，沒有外部單位能保證結果。負責任的網頁設計公司會告訴你它能做什麼——結構、速度、體驗、內容基礎——而不是承諾它無法控制的事。

網頁設計常見問題

這一段把客戶在評估網頁設計專案時最常提出的問題整理起來，直接給答案。

Q：網頁設計和網站設計是同一件事嗎？
不完全相同。網頁設計偏重單一畫面的版面、視覺與操作設計；網站設計則涵蓋整站的資訊架構、系統建置與上線維護。網頁設計是網站設計的一部分，也是使用者唯一直接看到的部分。實務上兩者會在同一個專案中一起進行。

Q：網頁設計費用大概多少？
以我們承接的專案而言，企業形象官網約新台幣 10 萬至 50 萬元，購物網站約 30 萬至 100 萬元，學校與政府網站約 10 萬至 100 萬元。實際金額取決於版型數量、客製深度、後台功能與是否需要串接外部系統，需依需求規格確認。

Q：付款方式怎麼安排？
採兩期付款：簽約時支付 50%，驗收完成、正式上線前支付尾款 50%。相關時點與條件會在合約中載明。

Q：網頁設計完成後有保固嗎？
有，保固範圍與期間會依專案規模與內容於合約中明確約定。保固一般涵蓋程式與功能瑕疵的修復，不含上線後新增的需求、內容更新，或第三方服務政策變動所造成的調整。

Q：RWD 響應式網頁設計要另外加價嗎？
不用。我們的專案 RWD 響應式網頁設計為內含項目，不另外加價。在目前行動裝置流量普遍高於桌機的情況下，響應式是網站能否正常運作的基本條件，而非選配。

Q：網站的原始碼和資料屬於誰？
屬於客戶，並載明於合約。網站上線後，原始碼與資料的所有權歸屬客戶，日後如需轉移或另行維護，不會受到限制。

Q：網站主機放在哪裡？
本公司於中華電信機房承租機櫃並自行管理，設備為公司自有。因此執行環境、備份與異常處理都由我們直接掌握與處理。

Q：設計和程式會外包嗎？
不會。設計與程式全案由公司內部執行、不外包。後台也依客戶需求全客製，以確保設計意圖能被完整實作，並在後續維護時有一致的窗口。

Q：網頁設計可以保證 Google 排名嗎？
不能，也沒有任何公司能保證特定關鍵字的排名，因為排名由搜尋引擎的演算法決定。我們能做的是把網頁設計的結構、載入速度、行動裝置體驗與內容基礎做扎實，讓網站具備被正面評價的條件。對於「保證第一頁」之類的承諾，建議審慎看待。

Q：一個網站的網頁設計大概要多久？
時程取決於頁面規模、客製程度與後台功能的複雜度，同時很大程度受內容與素材到位的速度影響。實務上，內容延遲往往比設計本身更容易造成進度延後，因此我們會在專案初期就一起確認素材清單與交付時程。

Q：已經有網站了，需要重做還是改版？
先看三件事：現有架構能不能承載新的內容需求、手機版的體驗是否堪用、後台是否還能安全維護。如果只是視覺過時，局部改版即可；如果架構本身已限制了內容的成長，重新規劃網頁設計與整站結構通常更划算。

Q：我可以自己更新網站內容嗎？
可以。後台會依你的實際需求客製，讓內容維護不需要具備技術背景。我們也認為後台的網頁設計必須好用——後台難用，內容就不會被更新，網站的價值也會隨之衰減。

網頁設計要怎麼開始？

專案進度落後的原因，多數時候不在設計端，而是內容遲遲無法定案。事先知道要準備什麼，能大幅縮短時程。

公司基本資訊：正式名稱、地址、電話、營業時間、聯絡窗口、社群連結。
品牌識別：標誌的原始向量檔、既有的品牌色與字體規範（若有）。
文字內容：公司簡介、服務或產品說明、常見問題、聯絡說明。文字可以先粗擬，但需求方向必須明確。
影像素材：產品照、環境照、團隊照、案例照。解析度足夠、且授權清楚。
既有資料：需要匯入的產品清單、文章、會員或其他資料，以及它們目前的格式。
參考網站：喜歡的與不喜歡的各兩三個，並簡單說明理由。這對網頁設計方向的收斂非常有幫助。

關於影像素材，我們想特別說一件實話：再好的網頁設計，也救不了低品質的照片。版面可以設計得很有秩序，但只要放進一張模糊、色偏、構圖歪斜的照片，整頁的質感就會被拉下來。如果預算允許，攝影是投資報酬率很高的一筆支出。

接下來可以怎麼做？

如果你正在評估一個網站專案，我們的建議是先把三件事想清楚：這個網站要替你完成什麼任務、你的客戶會用什麼裝置在什麼情境下打開它、以及未來由誰負責維護。這三題有答案之後，網頁設計的方向、規格與預算就會自然收斂，你也能更準確地判斷各家提案的品質。

山川久也是一家以設計為核心的公司，長年為企業、品牌、學校與公部門處理官網、購物網站與各類客製系統。設計與程式全案由內部團隊執行、不外包，RWD 響應式網頁設計內含不加價，後台依需求全客製，原始碼與資料所有權歸屬客戶並載明於合約。若你需要的不只是幾張漂亮的版面，而是一個能長期經營的網站，歡迎進一步了解我們的網站設計服務，或直接與我們聯絡討論你的需求。

News 最新消息