我有架站的需求，但網站設計要從哪裡開始下手？相信許多想要建立網站的朋友們，既期待有屬於自己的網站成品，卻同時又擔心技術卡關，不知道網站該怎麼進行才好？
本篇文章將介紹如何從零開始打造網站，掌握架站八步驟的精髓與概念，自己一個人也能輕鬆完成網站設計。
網站設計第一步：定義目的與規劃
在架站前，首要工作就是為自己的網站設立主題與目標，確保在開發階段不會受想法過多影響，導致後續偏題或發散失焦，因為網站的內容決定了受眾是誰！
譬如想藉由網站販賣商品獲取營收，就必須具備以下這些網頁功能，才有機會吸引正在搜尋商品的目標消費者：
- 支援購物車功能
- 結帳具備安全性
- 可上架與編輯商品資訊
- 商品分類好懂好找
- 網站架構清晰有條理
- 交易條款與政策說明
不同類型的網站內容，適合的佈局與建置方法也將有所差異。
網站設計第二步：選擇平台
決定好網站目的之後，接著開始考慮如何將它實現。依照網頁特性及功能，再進一步決定如何架站，常見的方法分為下列三種形式：
- 租用內容管理系統（選用 CMS 平台）
- 自己開發架站
- 交由專業網站設計公司承攬
下列為三種架站方式的差異比較，可以依照本身情境，選擇適合自己的架站方法：
| 使用網站管理平台(CMS) | 自行開發架站 | 找網站設計公司 | |
|---|---|---|---|
| 適用情境 | ● 網站規模較小 ● 變動需求不高 ● 內容及結構單純 ● 預算有限 ● 無架站相關技術者 |
● 網站客製化 ● 預算充足 ● 擁有相關技術能力 ● 大型組織或企業 |
● 網站客製化 ● 想要有專業團隊協助 ● 希望借助大量經驗 ● 運用最新技術和趨勢 |
| 優點 | ● 簡單好操作、易上手 ● 架站及維護成本低 ● 專注在內容管理 |
● 完全符合需求打造 ● 不受平台限制與影響 |
● 省時省力一條龍服務 ● 不需要專業知識技能 ● 可獲得專業建議 ● 符合需求量身打造 ● 具備整合行銷能力 |
| 缺點 | ● 功能受平台規範限制 ● 平台維修或終止服務將影響網站運行 |
● 人力、時間與成本較高 ● 需聘用專業人員 ● 規劃及上線秏時長 |
● 需要與廠商密切溝通 ● 費用比CMS高 ● 廠商終止服務與契約後，影響網站維護作業 |
| 使用成本 | 【低】 ● 初期架站成本低 ● 長期維護成本低 |
【高】 ● 初期架站成本高 ● 長期維護成本中 |
【中】 ● 初期架站成本高 ● 長期維護成本中 |
這三種架站方式以第 2 項「自己開發架站」的門檻最高，需要秏費大量時間及人力，除非本身具備專業資訊背景與技術，否則很難一個人獨立完成，相較於其他兩種方法，整體開發成本最高。
若不考慮委外交給專業團隊，想靠自己一手完成網站設計，推薦使用 CMS，選擇費用及服務內容皆符合需求的平台，也能達到事半功倍的效果。
什麼是 CMS？
CMS 是一種可以提供直觀、方便、好操作的網站內容管理平台，有現成的網頁模板，讓使用者可以依需求套用版型及編輯。
運用 CMS 進行網站設計，沒有相關技術專長也可以完成網站建置及維護。
根據 Themeisle 在 2024 年 對 CMS 進行的統計報告分析，高達 68.7% 的網站皆使用 CMS，其中最受歡迎的前三名 CMS 為 WordPress、Wix 和 Shopify。
延伸閱讀：熱門網站設計模板推薦!免費輕鬆套用!用CMS架站也能有看頭
網站設計第三步：選擇佈局
網站佈局對突顯網站目標而言具備意義，良好的排版策略可以幫助使用者快速找到重要的資訊。
如果是餐廳網站，重點就是菜單價格和預約訂位等資訊；如果是診所網站，則是醫師經歷及提供的診療項目；如果是購物網站，則是商品類型、產品資訊和吸引人的價格策略。
購物主題佈局，引用自WordPress商業版佈景主題
使用 CMS 平台進行網站設計，可用網頁編輯器進行排版，或直接套用平台提供的佈景主題。
並且要符合響應式網頁設計（Responsive Web Design, RWD），無論是使用手機、平板或電腦瀏覽網頁，確保內容不會跑版或無法看清楚，讓使用者獲得良好的瀏覽體驗。
延伸閱讀：網站設計在做什麼?架站前，必須了解的大小事
網站設計第四步：創建和收集內容
決定好網站佈局之後，可以透過圖片、影片、文字等，將每一個區塊要顯示的內容具體實現，並且盡可能達到「高品質」；假如穿插太多無意義的內容資訊，內容價值會被稀釋，當使用者感覺要花費更多時間才能找到想要的資料時，往往會選擇半途中離。
無論是文字或是影音圖片，內容原創且引人注目是網站成功的關鍵因素之一，不僅要考量是否簡潔易讀，吸睛之餘還得保持一致風格，才能展現專業性及特色。
網站設計第五步：設計網站元素
有特色的網站風格以及網頁元素對視覺體驗有加分效果，各種網站元素需要考量的層面皆不同，以下是常見的網站元素及注意事項：
延伸閱讀：網站設計在做什麼?架站前，必須了解的大小事
| 網站元素 | 注意事項 |
|---|---|
| 選單設計 | 擺放位置必須顯目好找，才能達到互動效果。 良好的選單結構可以讓爬蟲和使用者找到並讀取站內其他頁面。 |
| 色系風格 | 網站或品牌可以透過營造的整體視覺感，向使用者傳達專業感。 使用的色調有可能影響購買意願。 整個網站使用的顏色建議不超過三種，避免形象或主題混亂。 |
| 字型 | 選用字體的時候，必須優先考慮是否清晰易讀。 字型風格以符合網站形象為主。 |
| 頁首及頁尾 | 頁首擺放網站標題及圖標可幫助使用者識別及留下印象。 頁尾通常應具備資訊導航功能，包含聯絡資料及其他連結管道。 |
| 動態元素 | 動畫或會移動的特色元素，可增加互動性和吸睛度。 小心使用過量，會影響網頁載入時間過長，使用者耐心有限。 |
- 選單結構
- 利用 Menu 子選單將網頁分門別類，達到為使用者進行網站導航的作用，透過選單快速跳轉到想探索的網頁。通常也可以在網頁上方看到導航列，也稱作麵包屑 (Breadcrumb)，透過將網頁結構化，可以讓讀者和爬蟲知道目前處在網站的哪個層級或類別裡。
- 以本頁面舉例：瑪卡鎷首頁＞行銷指引＞網站設計怎麼做？掌握架站8步驟，自己一人也能做!
網站設計第六步：新增頁面
確定了網站視覺風格、版型佈局和網頁元素，緊接著就是將所有內容整合起來，建置頁面並分門別類的組織擺放，使用者在結構清晰的網站內，可以輕鬆的跳轉於每個頁面之間，快速找到想要的資訊。
以下介紹一般網站都會需要的基本頁面：
主頁（首頁）
是網站內最重要的門面，也是使用者瀏覽網站會先看到的頁面，所以主頁必須要展現自我價值或重要訊息，如果是購物網站，首頁建議加上吸睛的品牌標語或促銷新訊，提升用戶的購買慾。
關於我／我們
這一頁可以分享本身或公司組織的使命、背景及主張，讓使用者有機會了解更多與你有關的資訊。對你感興趣的陌生客，在這個頁面可以滿足他所有的好奇。
在內容安排上，可以從目標受眾最關心什麼去著手切入。
聯絡資訊
提供本身的聯繫資訊給使用者，包括電子郵件、LINE帳號、電話號碼、地址、多元交通抵達方法建議等。甚至可以崁入表單，方便使用者直接在頁面上留下訊息，達到聯絡及互動的效果。
產品頁面
網站如果有提供服務或銷售產品，商品頁面必須提供足夠詳細的資訊，包括功能、規格、優點、價格、保固或售後說明等，公開透明且豐富的資訊，可以提高潛在客戶的購買意願。
部落格
可以定期在網站上發布最新消息，或是撰寫符合網站主題的文章，這是一種低成本的內容行銷方式，使用者可以透過搜尋關鍵字，從文章連結進到網站當中，增加網站曝光度。
此外，大部分的自然流量（從SEO來的客人），也都是以文章頁面居多！假如想快速提升轉換量，可以在此多下功夫。
網站設計第七步：優化體驗
確保網站正常運作是最基本的需求，進一步還必須優化使用者體驗，因為如果觀眾不賞識，繼續苦心經營網站也等同白費功夫。
使用者體驗會影響網站在搜尋引擎中的排名，因為搜尋引擎也必需為自己的推薦結果掛保證；會觀察使用者在瀏覽時，願意花多少時間停留及訪站行為，也會檢測網頁所有元件的表現。
所以體驗感太差的網站，基本上很難獲得良好的排名結果，容易淹沒在其他競品網站身後。
網路上有許多工具可檢測使用者體驗，建議網站分數（Page speed insight）最好不要低於 80 分！
優化網站體驗的重要指標可以從下列4項著手：
- 網頁的載入速度愈快愈好，點擊元件不跑位，瀏覽不延遲！
- 符合響應式網頁設計，除了電腦以外的裝置也能正常瀏覽，行動裝置友善很重要。
- 網站符合安全傳輸協定。
- 若放置與網站不相關的廣告，以不妨礙閱讀網頁內容為原則，廣告愈少愈好。
為網站做健檢，結果來自woorank(以hubspot官方網站為例)
網站設計第八步：測試您的網站
成功發布後，記得要對整個網站進行全面性的測試，確保每個頁面和元件都能正常運行。
並且養成定期測試網頁的習慣，目的是從網站中找出缺點，並針對問題加以改善，網站測試的重點項目包含：
- 良好的使用者體驗
- 網站通過安全性驗證
- 確認網頁已成功被搜尋引擎索引
網站設計要一次到位和符合完美是不太可能的事，它是一個不斷迭代的過程，需要不停的進行優化及更新，讓網站成效滿足各時期需求。
依循並掌握上述八項網站設計的知識點，同時多加參考經營成功的網站作為範本，利用現成方便的軟體或工具，將靈感與創意好好發揮實現，更別忘記專注各種細節與效能，相信就可以打造出令人印象深刻的「好網站」。
如果想要客製化網站，但覺得學習網頁技能太麻煩怎麼辦？可以找專業的網站設計公司協助，網路行銷公司幫忙，詳細溝通網站的需求，就能輕鬆擁有屬於自己的網站。
網站設計步驟的常見問答
網頁圖片建議用什麼軟體製作?
專業的視覺設計軟體，通常需要具備操作基礎及購買使用版權，例如：
- Adobe Photoshop 影像處理、設計
- Adobe Lightroom 影像處理、後製
- Adobe Illustrator 向量繪圖
如果沒有電腦美工基礎，只想簡單套用內建效果或素材製作圖片，可以嘗試目前熱門的線上工具：
如果自己做網站設計，需要哪些技術?
若不考慮 CNS 套版建置網站，完成網站架構到填補網頁內容，需要的技術包含三個層面：
- 網站前端技術：網頁切版、網站RWD、CSS特效撰寫、JS編碼、解決相容性問題。
- 網站後端技術：建置及連結資料庫、撰寫網頁程式碼及API、熟悉HTML。
- 視覺設計技術：數位繪圖、影像處理、影音編輯。
網站設計要花多少時間?
要視架站方法和複雜度而定：
- 運用既有現成的套版大約 7 天。
- 客製化的網站大約 2 個月左右，實際要視網站需求難易度而定。
不會網站設計，要怎麼架站?
建議找專業的網頁設計公司，雖然比自己套版架站的成本高一些，但好處很多：
- 專業技術在線
- 能夠達到量身訂作網站的目的
- 能長期協助維護網站
- 持續提供優化操作及行銷策略
- 網站有臨時突發狀況能即時協助處理
有哪些管道能免費自學網站設計?
- Youtube：豐富的網站設計教學影片。
- 實體課程：報名政府補助網頁設計的職訓班。
- 網頁資源：freeCodeCamp、Codecademy、網站迷谷等。