從概念到實踐！網站建置的事前須知
網站設計
網站有分哪些類型？
依照需求會有各式的網站類型，我們以下分為主要幾大類：
- 是指網站只有單一頁面，使用者可以透過滾動頁面或點擊內部連結滾動至不同區塊。 通常會使用一頁式網站的特點是有特定的目的性。
一頁式網站
例如：推廣特定的活動、產品推廣網站、或是活動報名網站。
實績案例 >> - 形象網站是一種旨在呈現和加強品牌形象的網站。與傳統的商業網站不同，形象網站的主要目標不僅僅是銷售產品或服務，更著眼於向受眾傳達品牌的核心價值觀、風格以及品牌故事。而企業或組織的形象網站則通常還會有ESG專區，能夠展示其在可持續性和負責任經營方面的承諾，並向投資者、客戶、員工和其他利害相關方傳達透明度和責任感。這有助於構建積極的品牌形象，並提高公司在可持續性領域的領導地位。
形象網站
實績案例 >>延伸閱讀：ESG 是什麼？企業真的需要做ESG嗎？
- 打破過往的實體店面購物模式，是以不受地點及時空限制為特點的主流經營模式之一。除了現今廣為人知的大型電商平台例如MOMO、PC home，也可以結合個人品牌理念客製化打造屬於自己的購物網站，從優惠折扣模式、給哪些商品版面，到客人購買商品的流程，都可以依照符合自身的經營模式客製化，並有完整的線上銷售系統（線上金流、運送、銷售報表等）。
購物型網站
實績案例 >>
初步了解各種網站類型後，現在我們可以開始思考我們即將製作的網站應該扮演的角色，並以此為中心開始規劃。在設計一個網站時，要謹慎思考功能的設計，因為過多的功能有時會讓使用者感到困惑，降低使用者體驗。
重要的是，我們應該思考如何最有效地利用網站，使其在網路世界中展現最大的價值。例如，我們可以著重於簡潔而直觀的設計，讓使用者輕鬆找到他們需要的資訊或服務。這也包括清晰的導航結構、易於理解的內容布局，以及一致的使用者界面。同時，可以確保網站功能的精簡，專注於提供最重要、最有價值的功能，以滿足使用者的實際需求。
事前準備功課
對於自己即將製作的網站知道類型後，就可以開始先準備資料啦！
首先，我們可以找很多喜歡的網站，整理出喜歡的動畫效果、區塊，也可以提出喜歡的網站風格，再來就是先初步想像網站會是什麼樣子。
以形象網站舉例，可以先開始構想我們整個網站期望應該會有哪些頁面及功能呢？
品牌、企業簡介頁面：
就如同一開始所說，網站就像是是企業的電子名片，這裡詳細呈現品牌的核心價值、使命和故事。老牌企業還可以獨立製作一頁企業大事紀，以年度列舉出公司所有的里程碑。
商品或服務頁面：
列舉所有提供的商品或服務，並提供詳細的描述，包括高品質的商品圖片，以吸引使用者的注意。
消費模式和購物車頁面：
確定網站的消費模式，是提供線上購物、預約服務還是其他形式。先預想清晰直觀的購物車和結帳流程，在未來與設計公司溝通時會更有概念，明確清楚整個網站的運作，才不會被牽著鼻子走！
聯絡我們頁面：
提供有效的聯絡方式，包括電子郵件地址、電話號碼和實體地址（如果適用）。加入聯絡表單讓使用者能夠方便與品牌互動。
客戶評價或實際案例頁面：
如有適用的多則回饋，建立客戶評價或成功案例的專頁，有助於增加品牌的可信度和信任感。
最新消息或部落格頁面：
若有最新消息或部落格，可以規劃相對應的頁面，提供有價值的內容，有助於提高網站在搜索引擎上的SEO排名。
常見問題（FAQ）頁面：
預先回答可能的客戶問題，提供清晰的解釋和指引，有助於簡化客戶服務流程，減少需回覆重複問題的時間成本。
社交媒體整合：
預先回答可能的客戶問題，提供清晰的解釋和指引，有助於簡化客戶服務流程，減少需回覆重複問題的時間成本。
隱私政策和條款頁面：
現今資安嚴謹的時代，越來越多的用戶對於網站有更多個資相關的疑慮，提供明確的隱私政策，解釋如何處理用戶數據，包括服務條款和使用條款，除了一些國家地區會有相關法規，對於網站搜尋引擎的信任度也會提高，其實也間接對SEO有正面的影響。
ESG相關頁面：
展示網站在環境、社會、公司治理方面的承諾和實踐，是通過投資、政策和監管等方式來鼓勵企業改進其ESG實踐。許多投資者和機構都會參考這部分內容，因為些因素可以影響企業的長期價值和風險管理，也有助於提高外界對於企業的社會和環境責任感。
延伸閱讀：ESG網站到底在夯什麼？原來有必要！
可以用心智圖或架構圖的方式結合找到的喜歡的網站做規劃，才能從爆炸的資訊中整理真正適合自己的架構。
網站建置需要哪些人員？
對網站有初步的了解，並且大概知道自己想要做什麼樣的網站後，再來就是了解網站製作時會有哪些角色參與製作囉！
- 從初步的開發訪談、規劃網站架構、執行並且控制整個專案進度的角色，將會是會是最熟悉你的網站的人
專案經理
UI/UX設計師
把你與專案經理溝通討論的結果實現成精美的畫面，並且用專業設計出友善使用者體驗的介面。就好比餐廳的主廚，不僅負責網站的整體視覺呈現，還需要結合創意和技術，將各種元素巧妙搭配，呈現出一道令人印象深刻的「菜餚」（即網站的外觀和用戶體驗）。
- 將UI/UX設計師做出的設計稿用HTML編寫，透過CSS添加樣式和佈局，並使用JavaScript和相應框架實現互動元素和動態效果，確保網站在不同瀏覽器和設備上都能呈現一致的視覺效果，也就是我們稱之為的切版。簡言之就是讓設計稿可以實際動起來，讓使用者可以滑動畫面點擊按鈕、看到網站動畫的重要角色。
前端工程師
延伸閱讀：網頁基礎篇：從零開始認識RWD與AWD！
後端工程師
將前端工程師刻出來的畫面賦予意義，讓每個可以點擊連結至該去的頁面、該有的功能，畫面背後龐大的運算邏輯處理以及資料庫串接，皆是後端工程師手筆，可謂網站建置的核心呀！
網站建置及架設流程
- 在規劃開始前，會先做網站的需求訪談，了解網站客戶對於網站的實際需求，並且給予專業的建議。
需求分析
- 針對需求釐清功能可行性以及將操作流程最佳化後，規劃出符合邏輯的操作流程以及符合需求的網站架構。
網站架構、流程規劃
- 網站架構及流程確認後，UI/UX設計師就會依照規劃的流程結合客戶的CI進行版面設計。
版面設計
程式開發
網站流程以及版面設計定案後，接下來就會進行前台切版以及後端程式的撰寫！
-
前台版面切版
前端工程師使用HTML、CSS、JavaScript進行切版，將UI/UX設計師設計出來的頁面轉譯成程式碼，讓網站動起來。 後端程式撰寫
後端工程師根據網站的資料流建立資料庫，並且撰寫程式運算邏輯，賦予整個網站生命，最後架設網站後台。
-
- 網站製作完成後，會開測試主機測試網站功能的完好度，檢查是否有BUG以及畫面是否有破版。
網站測試
- 確認網站正常後，就可以開始上架事先準備好的文案資料了！
資料上架
- 確認資料上架完畢後，事前需要先準備主機、網域、SSL憑證，經過工程師的的設定串接後，將所有上架好的資料及程式資放入主機中，設定好DNS後，網站就架設好囉！
網站上線
文章編輯
文章編輯：Alice Zhang
圖文編輯：Amy S chou
推薦文章
-
SEO初學者必懂！如何用 HTML 提升網站排名
掌握 SEO 基礎，透過 HTML 優化提升網站排名！從了解HTML語法開始掌握 SEO，結構式解析HTML標籤如何優化。開始學習關鍵詞研究、最佳實踐和網站結構的優化吧！
網站設計
-
SEO 優化的關鍵：運用免費關鍵字分析工具
善用免費關鍵字分析工具，成為 SEO 優化的利器！本篇介紹5個免費SEO關鍵字研究優化平台，善用它提高搜索引擎排名，吸引更多潛在客戶吧！
SEO
如果您喜歡我們的文章，歡迎分享! 有相關問題也歡迎與我們聯繫
