🤚 嗨，大家好～我是小不點（Smallpoint），十歲就誤入網頁設計的魔法世界，轉眼已經是個練了 26 年技能的老工程獅…。今天這篇文章，不是要教你寫程式，也不是講什麼專家理論，而是希望能用一種你聽得懂、也玩得下去的方式，陪你把「網站設計」這場遊戲玩懂。
老實說，「什麼是網頁設計」這種題目，真的很常見，甚至被講到爛了。
一開始我也懷疑自己有什麼資格重講一次。
但我後來想想，也許你剛好卡關、也許你正準備進副本、也許你只是剛好想找人陪你讀懂這一切~那我在這裡，也許真的能幫上點忙。
所以這次，我決定用「線上遊戲攻略」的方式來講網頁設計。
我們會從角色建立開始，講到裝備選擇、技能點法、團隊合作，甚至到副本流程與升級策略，希望讓你就算是新手小白，也能一路升等、不被坑錢、不再迷路。
如果你在文章裡看到一些邏輯、語氣跟我老師們教過的東西有點像，那真的不是巧合。這是我人生第一次試著把自己學到的東西整理成知識文，在這裡也想真心感謝帶領我進入這場 RPG 遊戲的米肯設計以及帶領我飛翔的 EZ2 老師們，給的啟發與信任，讓我有勇氣把這篇寫下來。
準備好了嗎？那我們就出發吧！
《從零開始的網站設計冒險》正式開始！
(偷偷跟你說如果不要看遊戲開場請直接跳過第1關….從第2關開始❤️)
【第1關：世界觀動畫開場-網站是怎麼來的？你現在站在哪個時代？】
我知道你現在的心情，就像被老闆突然指派「幫公司做網站」的菜鳥玩家…沒武器、沒裝備、也沒時間研究說明書，腦中只浮現四個大字：
「蛤？我嗎？」
別怕！今天我們就來打第一關主線任務：搞懂網站的世界觀與演化史。你會發現，其實網站這東西，就像遊戲一樣，是一步步升級、慢慢解鎖的。
🕹️ 我 10 歲的時候，網站還長得像 Word！
讓我先用一個老玩家的身份，說點回憶殺。
我出生的時候….那時網頁還沒誕生(啊！一直透漏我的年齡….)。一直到我 10 歲，網站才剛開始有一點點設計感。那時我記得用的軟體叫… N 開頭的….現在連查到都查不太到，Logo 是一棟小紅房子，當時的老師請我幫忙架班網。
國中時期，當時 YAHOO 家族盛行，那時候的留言板…是可以玩 Javascript 的喔！很難想像吧！當時我們的留言可是會跑來跑去的跑馬燈….哈哈哈！！這就是多麼迷人的地方。當時我還嗆我的理化老師說我以後…想當遊戲工程獅…，但就是各位看到的我最後還是有點歪…笑 🙂
接著…高中時期，老師叫我們一定要學網頁！！因為好賺啊！！一頁 5000 元…好啦！ 看看現在的價錢…..唉~別說了！
我的網頁設計成長故事…就先講到這邊~想知道更多網頁遊戲打怪故事，我會慢慢的跟你說！你現在站在哪個時代？請容許我留個伏筆…這樣你才願意繼續在我的網站世界裡繼續冒險~ 請…等待我開啟下張章節門….(努力..用力中)。
【第2關：創角選職-公司網站要玩哪一型？】即將解鎖！
在網站這款 MMORPG 裡，你第一件事不是寫程式，也不是挑顏色，而是，你要打造哪一種職業型網站？
來吧！交給我帶著你從你的角度理解你要做什麼公司網站?
| 角色屬性 | 說明 | 適合對象 | 技能點重點 | 缺點 |
|---|---|---|---|---|
| 形象官網（外觀型角色） | 就像一個穿得超帥但主打氣場的法師角色。 它的任務是讓別人第一眼就「哇～你很專業」，通常用來展示品牌形象、公司介紹、作品集等等。 | 剛成立的新創品牌、事務所 想建立信任感、提升專業形象的公司 設計師、攝影師、講師個人官網 | 視覺設計（UI/UX） 品牌文案撰寫 RWD 響應式排版 | 沒有互動功能，像是站著很帥但不太能打 |
| 動態網站（功能型角色） | 這就像一個能補能打的多功能坦補混合職業，功能強、能互動、系統支援力高。可以做會員登入、表單收件、自動更新內容等等。 | 適合對象： 想收集名單、處理報名、申請流程的機構 需要管理資料、自動化流程的企業 想要部落格、最新消息、自助後台更新功能的使用者 | 技能點重點： 後台管理系統 表單串接 / 信件通知 自動分類、文章發布系統 | 缺點： 建置成本高一點，學習曲線稍微上升 |
| 購物網站（商業型角色） | 這是商城型角色，自帶商店功能，可以接單、出貨、庫存管理、金流串接。 | 適合對象： 有實體產品要賣的品牌 創業初期的電商品牌 想要整合 LINE／Facebook 商店的業者 | 金流串接（綠界、藍新） 購物車、會員系統 後台商品管理、訂單追蹤 | |
| 一頁式網站（速刷型角色） | 這種就像打速通副本的角色，一頁到底，沒啥支線。適合推一個活動、開一檔專案，打完收工。 | 活動報名頁 一頁式品牌簡介 限時促銷頁 | 精準引導 CTA（按鈕） 行銷文案 / 品牌視覺一致性 |
選錯角色沒關係，但中途才發現整套走錯路，要改又要補，不只燒腦還燒錢，我想你也不樂見你的錢錢、公司的摳摳把它變不見！
因此先搞清楚你的目標，再決定你要的是什麼樣的網站類型，這樣才不會走一半卡等級、功能打不出來，還得重做一遍….。
🏷️ 工商時間~如果你懶得自己創角，這裡有幾間我親測過的神隊友推薦！
選好網站職業但不想自己單練？這邊是我打過副本、幫忙補過血、也合作過的幾間好隊友，推薦給你參考：
🛒 電子商務型網站推薦：一極圖自動電子商務有限公司
打通從上架、結帳、金流、天眼管理的整套360度天眼漏斗讓你的追隨粉絲們(在裡面繞也繞不出來，直接就愛上黏著度X200)，你人物一創立就直接獲得「紅裝級」電商網站裝備包，不管你是剛進場的新手，還是骨灰級玩家，這一包都直接幫你越級升等。
🎨 文創品牌／手繪風網站推薦：米肯數位有限公司
畫面美到像開寶箱，主打視覺風格強烈＋品牌故事建構。
這不是設計公司，這是一間會「傾聽品牌心跳」的小畫室。
米肯設計擅長以細膩筆觸，將創作者的靈魂、理念與風格轉譯成一頁頁動人的視覺敘事，不只是設計網站，而是替品牌創造舞台。
適合氣場爆棚自帶光環的品牌角色，文創品牌、插畫家、中小企業品牌與任何想要「做出自己的樣子」的創業者。
🌱 如果你希望網站不只是好看，而是能感動人心，那你會喜歡米肯設計。
🏭 傳產／科技類公司網站推薦：智聯網科技股份有限公司
專門協助傳產與科技業打造實用、穩定、好維護的企業官網，從前期規劃到後續擴充與維運支援，提供企業級需求最安心的後勤支援。你只要專心在市場第一線拚戰，網站的後端補給，就交給我們。
嘿！我相信身為聰明遊戲玩家的你！看出來了吧！只要你不踩到下方我將要介紹的地雷~你只要選擇適合你，能接住你的心的就是一間能與你一起並肩作戰的超棒網頁公司。
【第3關：誤入假 NPC 的任務線！選錯設計公司，小心整場副本全滅！】
網站建置就像一場大型任務副本，找對 NPC（廠商）帶路，你升級會快又順；
但如果找錯對象，不只打不贏王，還可能白白花錢、浪費時間、整隊崩盤。
以下這些，是我們業界看過最多的地雷任務線，請小白勇者們千萬迴避：
| 地雷 | 狀況 | 後果 | 解決與預防 |
|---|---|---|---|
| 窗口角色每天換，今天說 A、明天變 B？ | 設計公司窗口像走馬燈，一下是設計師、一下是工程師、過幾天又變業務接。 | 溝通紀錄沒人接、回覆時間拖超久，小案子拖成大工程。 | 建議在合作前就問清楚：建置期間是否會有固定窗口？有沒有專人負責跟進？ |
| 報價單模糊不清，只有總金額？ | 報價單只有一句「網站建置 10 萬元整」，沒細項、沒功能說明，這種報價單要不得。 | 到後期常出現：「這不包含喔，要再加價！」的追加陷阱。 | 要求詳細項目明列，包括：頁數、語系、功能、RWD、後台、SEO 是否有做。 |
| 網域綁架，網站換不了人！ | 網站建好後想要轉換廠商，卻發現網域是設計公司代為申請且拒絕釋出。 | 網站整個重建、SEO 權重重來，還可能失去原有網址。 | 合作初期就該確認：「網站、網域、主機、後台，是否都登記在你名下？」 |
【第4關：挑戰世界王！從網站規劃到上線的完整流程攻略】
恭喜你一路過關斬將，終於來到網站副本的最終 Boss！
別擔心，這關不考反應、不拼裝備，只要你照攻略走，建網站一樣能輕鬆升等不翻車。
以下是整個網站建置流程的任務地圖，讓你心中有底：
📌 階段 1：需求整理（也就是接主線任務）
📌 階段 2：網站企劃＆功能規劃（像點技能樹）
📌 階段 3：設計與前端製作（進入副本地圖）
📌 階段 4：後端系統開發＆功能串接（打世界王的核心）
📌 階段 5：測試、上線、SEO 基礎建設（結算獎勵＆升等）
📌 PS. 網頁的技術還很多的派系….這個下次下回你有打到這個關卡我將再慢慢說給大家聽~
📬 網站的事，不用一開始就懂，我可以陪你一起慢慢搞懂。
🧩 不管你是工程師、設計師，還是完全沒碰過網站的小白，只要你有問題，都歡迎來跟我聊聊天。
🫣 我是 I 人＋社恐＋內外向並存的組合型人格，如果哪裡寫得不夠清楚，或有說錯的地方，也請溫柔的…小力一點的鞭我，我跟各位一樣都在這人生長河裡學習成長。
✅ Smallpoint 網站教室｜沒有距離感，只想好好陪你一起打副本的好隊友。
