網頁設計一點通：用「蓋房子」輕鬆搞懂網站二三事
Kelsey Wang
想做網站卻在入門時被一堆術語搞得頭暈腦脹嗎？網域、主機、SEO、SSL...這些聽起來像外星語的詞彙，其實只要想像成「蓋一間房子」，一切就變得很簡單了！以下讓我們用蓋房子的過程，帶你走進網頁設計的世界：
【新手入門】— 蓋房子前的基礎建設
1. 網頁設計：「房屋裝潢」
現在你有了一間房子準備做裝潢工程，包含房屋外觀與室內設計（UI設計）以及內部的動線規劃（UX使用者體驗），大家會開始考量要花多少錢裝修，而這個裝修在網頁設計裡就是設計方案的意思。
如果手上有比較多資金，可能就願意砸多一點錢在室內設計上（網站形象），住起來就是要美觀舒服；如果是小資族可能就會想說沒關係，這是我的第一間房子，我先求有再求好，這裡沒有對錯好壞，適自己需求選擇就好。
我們沒辦法提供室內設計的方案參考，但可以提供我們的網頁設計方案與費用，歡迎來看看！(❛◡❛✿)
延伸閱讀：形象網站是什麼？5大設計重點和範例介紹
2. CMS後台管理系統：「房屋主體」（鋼筋水泥）
簡單來說，就是一間房子的骨架與核心結構，決定了房子的耐用度與未來的擴充性，結構做得好，日後想加蓋或改隔間都很方便，也不會因為一點地震就龜裂。
回到網站來說，你可以隨時新增或更新網站內容，不用懂程式也可輕鬆完成。
延伸閱讀：CMS是什麼？透過網站後台管理系統，程式小白也能打造專屬網站！
3. LOGO：店門口的「招牌」
就像遠遠的你看到某一間房屋，外觀上有一抹綠色或整棟都是簡約木質風，你大概就會猜到那是誰（這邊在說星巴克跟無印良品），簡單來說，這是客人對這間房子的第一眼識別，是整間房子最濃縮的特色。
通常看到很明顯的logo後，它已經代表了這棟建築的「名字」與「身分」，就像網站左上角的圖像標誌，是品牌核心，也是使用者建立品牌印象的起點。
延伸閱讀：什麼是企業識別系統(CIS)？整合網站，讓品牌成為你的競爭力
4. 網域：「門牌地址」
現在你擁有了一間房屋，但你的房屋外面沒有門牌號碼，那這樣郵差或是你的朋友要怎麼找到你？
以凱士網頁來說，台中市中區綠川西街59巷2號是我們公司地址，而在網頁世界的概念裡就等同於 www.cadiis.com.tw ，這一串就是你的網域，使用者輸入這串網域就能直接到達你的數位公司。
延伸閱讀：網域是什麼？購買域名有哪些注意事項？
5. 主機空間：「房屋土地」
有了門牌地址，總要有一個空間讓你蓋房子吧？土地的概念就誕生了，而土地的大小、穩固程度，決定了你能蓋多大的房子。
比如說如果你的土地太小，房屋根本蓋不下去，或是房屋建好了但客人一多，就沒有空間招待；地基不穩，房子則隨時可能倒塌，在網頁上也一樣，主機效能越好，網站開啟速度就越快，能承載的訪客量也越多。
延伸閱讀：什麼是主機？網站空間？用白話文帶您了解網頁資料存放的基本概念
6. SSL憑證：「保全系統與電子門鎖」
房屋已經蓋好，土地跟門牌也都申請好了，但沒有門鎖小偷就能時常來犯，所以我們需要加裝門鎖系統，這決定了這間房子是否安全，客人在裡面留下的資料會不會被偷走。
在網頁上，網址開頭的 https 與那把「小鎖頭」就是保護資料傳輸的安全，已經是現在所有網站絕對必備的功能之一了！
延伸閱讀：SSL憑證是什麼？網站還沒裝SSL嗎？三分鐘帶你了解SSL對排名的重要性！
延伸閱讀：HTTPS是什麼？與HTTP的差異和對SEO的影響大解析
7. 網頁內容文案：你的「家具與軟裝（房屋導覽）」
如果房子只有空殼，就算裝潢再美，客人進來後也會感到空虛，不知道這間房子到底能提供什麼價值，這時候你可能會開始佈置一些軟裝，比如說：舒服的沙發、好用的餐桌、牆上的照片，更甚至是一束鮮花，這些東西讓房子有了「靈魂」，讓訪客知道可以在哪裡坐下、該看哪裡。
回到網站裡，這代表了網頁裡的文字敘述、圖片設計與標題，優秀的文案能引導訪客讀懂你的優勢，讓他們從單純的「路過」變成真正的「成交」。
8. SEO相關：「GPS導航」
房子蓋好了，土地地址也都有了，但如果它在深山裡沒人知道，那就白蓋了。（我們不討論要隱居的情況 (´･_･`)
你可以這樣做來引導大家找到你家：
- 在各個大路口設立招牌、讓 Google 地圖標註你的位置。
- 透過門口監視器，你就可以知道今天有多少人經過、他們是從哪條路來的、進屋後最喜歡看哪個房間。
而這在網頁世界中就會變成：
- 調整網站架構與關鍵字，讓 Google 覺得你的網站有價值，當別人在搜尋相關服務時，你的網站就會出現在第一頁。
- 透過數據分析工具（GA、GSC），掌握訪客是從哪裡搜尋過來的，並根據他們的行為優化網站內容。
延伸閱讀：搞懂 SEO 有多難？新手也能快速理解的搜尋引擎優化全攻略！
延伸閱讀：Google Search Console(GSC)是什麼？SEO新手工具應用第一章
【進階知識】— 擴建住宅的關鍵
1. 前端設計：「房屋內裝與互動開關」
像是你在客廳看到的沙發配色、精緻的吊燈，以及牆面上摸得到的燈光開關、冷氣面板，都算是前端作業的一部分，因為他直接展示在客人的眼前，在網頁上我們稱這些東西為「前端設計」，就是使用者看到的視覺介面、文字排版與互動按鈕（主要由 HTML、CSS、JavaScript 組成），它的重點在於呈現美感，並確保使用者操作起來順手。
延伸閱讀：JavaScript是什麼？有什麼用途？白話文教學三分鐘解析！
2. 使用者介面UI與使用者體驗UX：房屋的顏值與動線
簡單舉個例子：
- UI：入口的門把是玫瑰金的，造型非常優雅。
- UX：雖然門把很漂亮，但位置裝太高了，不符合人體工學，這樣就會造成使用者體驗不佳。
簡單來說，UI 負責「美不美」，UX 負責「好不好用」，而一個成功的網站，必須兩者兼具。
延伸閱讀：UI、UX是什麼？5分鐘快速看懂UI、UX設計差在哪！
3. 資料庫：「超級收納空間」
房子裡可能會有幾百件衣服或書本，如果要未來可以快速取得，那必須有系統地收好，資料庫就像一個標示清楚的儲藏室，若想找「2023 年夏季的帳單」，走進去馬上能從正確的抽屜拿出來，回到網頁上，資料庫通常用於儲存會員資料、產品規格、訂單紀錄等，好的資料庫規劃，可以讓網站搜尋東西變得極快。
延伸閱讀：MySQL是什麼？資料庫優點、MariaDB差異比較與架設案例
4. 網站維護：「定期屋檢與打掃」
就像一棟房子，剛做好的時候肯定都不用擔心老舊、漏水等，但長期下來都沒有維護，可能就會開始要補漏洞，不論這個後台一開始多好用、設計多新穎都一樣，科技汰換非常快，網站不可能永遠都是完美的，而網站的維護年約則可以定期更新核心程式、修正程式漏洞、備份資料，確保網站不會被駭客入侵或跑不動。
5. API：「外接公用管線」
住在家裡總會需要用水用電，但API的概念就是不需要你在自家後院挖水井或蓋發電廠，透過 API 可以讓網站串接 Google 地圖、串接刷卡金流、或是串接 LINE 通知，也就是說利用別人的專業服務，讓你的房子功能更強。
6. 防火牆：「社區警衛哨所」
當你的房屋逐漸成為一筆不可忽視的資產時，就不能讓每個人都可以直接走進你家大門，必須先經過第一線的過濾，而防火牆的概念就像是社區大門口的警衛室，他會盤查可疑人物，如果發現有人帶著破壞工具、或是黑名單上的慣竊（惡意 IP 或攻擊行為），會直接在門口攔下，不讓他靠近你的房子，防止駭客嘗試入侵你的後台或資料庫。
7. 資訊安全：「定期防蟲與結構檢查」
再好的建築，時間久了也會有裂縫，如果不修補，小蟲（病毒）就會鑽進去，定期檢查房屋結構就變成重要事項了，如果發現門鎖的設計過時容易被破解，就要趕快更換最新的鎖頭。
在網站安全上來說：定期更新 CMS 系統核心或外掛程式，定期更新就像是「補強結構」，讓惡意程式無縫可鑽。
有時候小偷偽裝好已經溜進家裡，但可能都沒人發現，這時候就需要主動巡邏，可以透過定期巡檢網站原始碼，一旦發現被植入木馬或異常連結，就立刻通知管理者處理。
延伸閱讀：網站安全性如何提高？5個免費工具分享，即時查詢可疑詐騙網址！
【上市櫃公司專用】— 特定產業合集
如果你今天很不幸的很幸運的是一間上市櫃公司要做網站，那我會強烈建議要把下面幾篇文章讀完，因為這裡面都是上市櫃公司製作網站時要注意的事項！
上市櫃公司官網建置重點：一次看懂 IR、ESG、資安與資訊揭露規範
上市櫃掛牌指南：投資人專區(IR)設計全攻略、IPO網站架構與資安要點
ESG 是什麼？企業永續經營指標，一篇帶你快速了解何謂 SDGs、CSR、ESG
蓋一間好房子需要專業的建築團隊，建置一個能幫公司獲利的「數位形象官網」同樣需要專業的規劃，懂了這些名詞，下次跟設計公司溝通時，你就不再是門外漢囉！
若想了解更多網頁設計專有名詞，或是你已經準備好要做網站的話，立即聯絡凱士網頁，讓您的企業贏在起跑點！
延伸閱讀：網頁設計費用多少錢？2026最新價格清單告訴你：3萬跟30萬的網站差在哪？
