一、客戶背景：周嘉源建築師事務所是誰

在正式進入網頁設計的討論之前，我得先帶大家認識客戶，因為「了解客戶在做什麼」是所有網頁設計專案最被低估、卻最關鍵的第一步。

周嘉源建築師事務所是一家深耕台灣建築業界三十年的老牌事務所，主持建築師周嘉源畢業自台北科技大學建築系，曾在台北市政府都市發展局建管處任職，後續在多家知名建築師事務所擔任專案建築師，實戰資歷扎實。事務所目前在台北、新北、桃園、新竹、台中、彰化、台南、高雄、屏東等九處設有服務據點，接案範圍幾乎涵蓋全台。

他們的業務面非常廣，包含集合住宅、科技廠房、無塵室、長照機構、宗教事業、納骨塔殯儀館、都更危老重建、特定工廠合法化、農地變更、室內裝修許可、立案申請……光是服務項目我整理出來就洋洋灑灑超過五十條。這對網頁設計來說，是一個甜蜜的負擔：服務多，代表潛在關鍵字多，但同時也意味著資訊架構必須做得非常乾淨，不然訪客一進站就會「資訊過載」轉身離開。

二、設計挑戰：把三十年功力翻譯成網頁

第一次跟周建築師開會討論網頁設計方向的時候，他問了我一個很直接的問題：「你怎麼樣才能讓一個第一次看到網站的業主，相信我們真的做過這麼多案子？」

這個問題其實切中了所有專業服務業網頁設計的核心痛點——信任感的傳遞。建築業跟一般電商不一樣，業主不會買錯一件衣服頂多退貨，他們可能要把幾千萬甚至幾億的工程交給你，所以「可信度」是這類網站的第一指標，比好不好看還重要。

於是我把這次網頁設計的目標訂得很清楚：

• 視覺要沉穩，不能花俏，要有「建築人」的氣味
• 實績作品要做得像作品集，不是流水帳清單
• 服務項目要分類清楚，讓不同需求的訪客都能快速對號入座
• 所有頁面在手機上都要順，因為現在沒人會等慢網站
• 後台要好操作，事務所行政同仁要能自己更新內容

這五個目標，就是接下來整個網頁設計專案的指南針。

三、視覺定調與色彩策略

視覺風格上，我選擇的方向是「極簡、留白、低彩度」。整體用淺灰白做背景基底，主要字體用黑色，標題搭配適度的粗體字重，按鈕全部統一成簡潔的圓角樣式。這樣的處理方式，會讓整個網站看起來像一份排版精美的建築作品集，而不是塞滿廣告的商業傳單。

首頁的主視覺區（Hero Section）採用全幅建築渲染圖輪播，搭配標題飛入動效。這一塊我花了不少力氣調整：圖片要等載入完成之後文字才會出現，避免那種「字飛出來但圖還是灰的」尷尬畫面。對網頁設計來說，這種細節做不到位，會直接打折專業度。

服務項目區我用了卡片式排版，每一張卡片配上不同主題色（紫、深藍、橄欖綠、橙棕），讓視覺上有節奏感、又能清楚區隔不同業務線。實績作品則用圓形縮圖搭配彩色圓角卡片，把案例展示做得既有資訊密度又有美感。

四、響應式網頁設計：手機才是主戰場

講到響應式網頁設計，很多人還停留在「電腦版做好之後縮小一點放手機」的舊觀念。但現在的事實是，超過六成以上的搜尋流量來自行動裝置，所以這一塊不是加分項，是基本門檻。

這次建築師事務所網站架設，我採用了三段式斷點策略，桌機、平板、手機各自做了獨立的版面規劃：

響應式斷點與版面規劃對照表

導覽列在手機版直接切換成漢堡選單，最新消息的「大圖加文字並排」自動改成上下堆疊，圖文比例在任何螢幕尺寸下都能保持和諧。這就是響應式網頁設計該有的細節考量。

五、雲端主機與技術底層的選擇

很多人以為網頁設計只是「畫面好看就好」，但其實再漂亮的設計，主機一慢全部白搭。我做這個案子，從一開始就把主機架構列為最高優先項目。

網站採用 ARM 多核心雲端主機，相較傳統 x86 架構，ARM 在處理高並發 I/O 時功耗更低、吞吐量更穩定，特別適合像建築師事務所這種會放大量建築渲染圖、又得同時服務多位瀏覽者的商業網站。線路上選用直連國際交換中心的骨幹網路，不論訪客來自台灣本島還是海外，延遲都壓得很低。

協定層面全面啟用 HTTP/2，支援多工傳輸，能在單一連線中同時送出多個資源，初次載入速度比 HTTP/1.1 快上一截。Web 伺服器選 Nginx，事件驅動非阻塞架構處理靜態檔案快得有感。後端語言則用 PHP 8.4 最新版本，JIT 即時編譯讓動態頁面執行效率再上一層樓。

本次網頁設計專案技術棧一覽

六、SEO 操作：讓對的客戶找到對的建築師

網頁設計做得再漂亮，沒有人看到就等於白做。這次專案我在 SEO 這一塊投注的時間，幾乎跟做視覺一樣多。

地區型長尾關鍵字佈局

周嘉源建築師事務所的接案範圍涵蓋六都，所以我替網站規劃了一整套地區型長尾關鍵字策略。例如「新北建築師事務所推薦」、「桃園廠房設計建築師」、「台南半導體廠房規劃」、「高雄楠梓產業園區廠房」這類組合，能精準接住有明確需求、正在比較當地服務商的潛在客戶。

原本網站內容是針對「新北建築師」為主軸撰寫，後來經過 Search Console 的數據分析，發現「建築師事務所推薦」這個關鍵字的搜尋量更高、轉換意圖也更明確，於是把主力關鍵字調整了過來。這種根據數據持續優化的過程，正是把網頁設計當成長期資產經營的關鍵。

Title 與導覽結構的一致性

業界很多人會忽略一個細節：<title> 標籤的文字應該跟頁面的導覽選單項目對應一致。這麼做的好處有兩個——一個是讓 Google 爬蟲更容易理解資訊架構，另一個是讓搜尋結果的標題跟使用者點進來看到的選單一致，降低跳出率。本站每個子頁面都嚴格做到這件事。

GEO：為 AI 搜尋時代提前佈局

近兩年 ChatGPT、Gemini、Perplexity 這些 AI 搜尋工具改變了流量分布。所謂的 GEO（Generative Engine Optimization，生成式引擎優化），核心就是讓你的內容成為 AI 引用的優質來源。這意味著文章必須有清楚的架構、具體的數據、可信的引用、符合 E-E-A-T 標準。所以這次我替事務所規劃了一系列長篇專題文章，從都更危老、特定工廠合法化、長照立案、廠房設計，一路寫到地區性的建築實務分析，建立完整的內容護城河。

七、後台 CMS：把網站還給客戶自己經營

很多網頁設計公司交完案就結束了，客戶想改一個字都得回頭找設計師，這種模式對雙方都不健康。所以這次建築師事務所網站架設，我刻意挑了 XOOPS 這套成熟的開源 CMS 作為底層。

整個網站採用模組化設計，服務項目、最新消息、實績作品、專題文章各自為獨立模組，透過共用核心同時運作。後台介面我做了大量客製化調整，讓事務所的行政人員可以直接登入新增最新消息、上傳實績圖片、修改服務內容，完全不需要懂任何網頁設計技術。

這對客戶的好處非常實際——他們不用每次想更新一篇文章都來問我，可以即時根據業務需求調整關鍵字、測試 SEO 效果。這也是為什麼這個網站上線之後流量能持續成長，因為內容是活的、會長大的。

八、動效與互動細節

現代的網頁設計已經不是平面作品，動效流不流暢、自然不自然，直接影響訪客的停留意願跟品牌印象。本站在動效上投入了不少心思，幾個重點細節聊一下。

進場動畫的階梯式延遲

頁面捲動的時候，各區塊的標題、卡片、圖片會依序以淡入上升的方式出現（用的是 fadeInUp 配合 data-wow-delay 階梯式延遲）。整個版面像有生命一樣慢慢展開，而不是「砰」一聲全部砸出來。這種漸進式呈現能引導訪客的視線流動，讓資訊更容易被閱讀。

卡片 Hover 微互動

滑鼠移到卡片上的時候，卡片會微微上移 5 像素，圖片同步放大 5%，右下角的圓形 CTA 箭頭會旋轉並放大 1.4 倍。這些微小到訪客可能說不出來的互動細節，累積起來就會讓整個網頁設計散發出一股「有人很認真做過」的質感。

固定浮動聯絡入口

右側固定浮動的 Email 與 LINE 按鈕，不管訪客捲到哪裡都能一鍵聯繫。這是以轉換率為導向的思維——把所有可能的摩擦力降到最低。

九、G2R 曲率連續角的執著

如果你仔細看本站的卡片、按鈕、圖片容器，會發現它們的圓角不是一般 border-radius 做出來的普通圓角，而是一種更流暢、更自然的曲線過渡感。這是因為我採用了 G2 曲率連續（G2 Continuity）技術，俗稱 G2R 角。

傳統圓角在直線與圓弧交界處，曲率會突然跳變，視覺上會感覺「轉折太硬」。G2 曲率連續讓曲率在整個邊角過渡中保持平滑漸變，就像 iPhone App 圖示、Apple Watch 錶殼那種「柔和但有力量」的感覺。

把這種細節放進網頁設計，老實說大部分訪客根本說不出來哪裡不一樣，但他們就是會覺得「這個網站比較高級」。這種說不出來的高級感，正是品牌溢價的來源，也是我認為專業網頁設計跟模板網站最大的差別。

十、四道安全防護機制

很多人做完網頁設計就覺得結束了，但事實上網站一上線就成了被攻擊的目標。尤其是採用知名 CMS 的網站，更容易被自動化掃描工具盯上。本站在系統防火牆層面建置了四道防護：

系統安全防護機制對照表

對客戶來說，能委託到一家同時照顧設計美感跟系統安全的網頁設計團隊，才是真正的全方位服務。建築師花了三十年累積的品牌，不能因為一次資安事件就毀於一旦。

十一、這個案子讓我重新思考的事

回顧整個周嘉源建築師事務所的網頁設計專案，從第一次開會到網站上線，前後花了將近三個月。期間改了七版視覺稿、四版資訊架構、無數次小調整，但回頭看一切都值得。我把這個案子整理出幾個對所有網頁設計從業者都有參考價值的觀念：

1. 效能是設計的一部分。ARM 主機、Nginx、HTTP/2、PHP 8.4 這套組合，讓網站底層就贏在起跑點。網頁設計的速度體驗，從你選主機那一刻就開始計分了。
2. 安全不是選項，是責任。四層防火牆的建置，是對客戶數位資產的承諾，也是專業底線。
3. SEO 是長期投資。Title 與導覽一致、六都關鍵字佈局、Search Console 監控、GEO 內容策略，這些事情的回報不會立竿見影，但會像複利一樣慢慢長出來。
4. 動效跟細節是品牌的溫度計。G2R 圓角、Hover 微動、輪播飛入——每一個訪客感覺得到卻說不出來的細節，都在無聲地告訴他們：「這家事務所做事很認真。」
5. 網站是數位資產，不是數位名片。一個經過完整規劃、持續維運的商業網站，是 24 小時不眠不休的業務員。投資一次好的網頁設計，換來的是好幾年的品牌曝光跟客戶信任。

如果你正在籌備自己的專業形象網站，不管你是建築師、律師、會計師、醫師，或是任何專業服務業，希望這篇拆解能給你一些方向。建築師事務所網站架設看起來只是一個案例，但它背後體現的思維，其實適用於所有把「專業形象」當作核心資產的行業。

美觀的視覺只是入場券，扎實的技術底層、長期的內容經營、細節的執著打磨，才是真正讓網站走得遠的關鍵。下一次如果你看到一個讓你覺得「就是不一樣」的網頁設計作品，可以從這些角度去拆解，你會發現專業跟業餘之間的距離，常常就藏在那些別人看不見的地方。