一、客戶輪廓：認識這個不一樣的委託人

接過形形色色的設計案，遇到真正讓你停下來重新思考的客戶，其實並不多。這一次，是個例外。

委託人是慶芳地政士聯合事務所（www.leelao.com），位於桃園市的不動產稅務、登記與法律諮詢事務所。所長李志殷博士，政治大學地政系地政碩士、法學院法學碩士、地政博士三個學位，同時在國立臺北大學不動產與城鄉環境學系、國立政治大學地政學系、文化大學都市計劃與開發管理學系擔任助理教授，身兼「不動產登記」期刊主編及臺北市政府地政局地政士懲戒委員會委員。三十年以上的實務經驗，加上持續不斷的學術產出，這是一位在地政領域既有學術高度、又有實戰深度的專業人士。

這樣的客戶背景，直接決定了這個專業形象網站的設計基調：不能隨便，不能平庸，更不能流於市面上地政事務所常見的那種「電話號碼放很大、服務項目列一排、封面圖放一棟房子」的廉價版型。委託人的專業重量，需要一個等量的數位形象來承接。這是這個案子最根本的起點，也是貫穿所有設計決策的核心命題。

二、需求挖掘：第一次訪談中發現的關鍵洞察

很多網頁設計案子失敗，不是因為設計師技術不好，而是因為在正式動工之前沒有把真正的問題搞清楚。需求訪談是整個設計流程中最值錢的一個環節，但也是最容易被跳過的一個環節。這個案子，我們花了不少時間在訪談上，結果非常值得。

訪談中，我們問了幾個關鍵問題：「您的客戶通常在找到您之前，會做什麼？」、「哪類案件是您最希望吸引的？」、「同業網站看起來有什麼讓您不滿意的地方？」從這幾個問題的回答裡，我們挖出了三個對後續設計影響深遠的洞察：

洞察一：大多數潛在客戶在第一次聯絡之前，會先上網搜尋並「審查」地政士的資歷。他們在意的不只是服務項目，更在意「這個人有沒有資格處理我的案子」。這意味著網站的資歷呈現，不能只是簡單列出執照字號，必須完整且有說服力。

洞察二：事務所有一個同業幾乎沒有的競爭優勢——所長精通日治時期地政法制與歷史繼承案件。這是一個高難度、高需求、但極度供給不足的利基市場。這個特色如果沒有在網站上清楚傳達，就等於白白浪費了最有力的差異化武器。

洞察三：委託人非常重視「知識輸出」。他本身是期刊主編，有定期發表評論的習慣，希望網站能成為他分享不動產法制觀點的平台，而不只是一個靜態的形象頁面。這個需求直接影響了後來的內容架構規劃方向。

三、設計挑戰：這個案子真正的難題在哪裡

當你把所有需求攤開來看，會發現這個案子有一個核心矛盾需要解決——而且這個矛盾在許多專業服務類型的網站設計案中，其實相當普遍：

如何同時讓「學術受眾」與「一般民眾」都感到被照顧？

學術受眾——例如同業、學生、媒體記者——在意的是著作清單、研究專長、期刊連結。他們能讀懂「土地登記連續性原則」、「區分所有建物標示登記」這類術語，而且希望看到完整的學術履歷。但一般民眾——例如要辦繼承登記的子女、不知道農地農用要申報什麼的地主——他們需要的是簡單易懂的服務說明，以及最低的聯絡門檻。

如果網站全部往學術風格靠，一般民眾會覺得看不懂、不敢打電話；如果往親民路線走，學術圈會覺得這個地政士事務所不夠嚴謹。這個張力必須在設計層面上找到解法，而不是交給客戶自己取捨。

除此之外，還有一個技術層面的挑戰：網站使用 XOOPS CMS 作為底層，這個系統具備穩定且高度客製化的模組化架構，可以針對地政事務所的業務邏輯量身打造各個功能頁面。如何在維持 CMS 架構彈性的同時，讓前端呈現完全跳脫 XOOPS 的「系統感」，做到讓訪客完全感受不到後台是什麼系統，是設計與技術協同的重要課題。

四、資訊架構：讓訪客五秒內找到方向

資訊架構（Information Architecture）是網頁設計中最被低估、但影響最深遠的一個環節。版面可以改，顏色可以換，字型可以調整——但如果架構從一開始就錯了，後面再怎麼修都是治標不治本。這個案子的架構規劃，我們做了多輪討論，最終敲定的五大主要頁面，各有清晰的角色定位：

「相關資訊」的三層子分類設計（專題文章、最新訊息、活動花絮）是架構規劃中的一個小亮點。專題文章承擔學術知識輸出的角色，讓所長的研究觀點可以有系統地在網路上流通；最新訊息處理的是業界動態與事務所公告；活動花絮則負責製造溫度，讓訪客看到團隊的真實面貌。三者各司其職，又能在同一個「相關資訊」的大傘下整合呈現，解決了前面提到的學術受眾與一般民眾雙軌並行的問題——各取所需，互不干擾。

導覽列的設計同樣經過反覆討論。最終保留五個主要入口，相關資訊以下拉選單呈現三個子分類，既保持了主導覽的簡潔，又讓內容分類清晰可及。在手機版上，導覽收合為漢堡選單，確保RWD 響應式設計的操作體驗流暢。

五、視覺語言：每一個設計決策背後的理由

5.1 封面視覺：沉穩不代表沉悶

很多人以為法律或地政類網站的視覺，就只能是深藍色加深灰色、再配上一棟建築物的照片。這是一個懶惰的刻板印象。專業感的建立，來自比例、層次和細節的精確控制，而不是靠特定顏色或特定圖片類型堆出來的。

這個案子的封面主視覺，以全版寬鋪陳，在視覺張力上建立強烈的第一印象，同時在構圖上保留足夠的呼吸空間，讓品牌標語能清楚浮出。色調的選擇，讓整個視覺場域傳達的是穩定、可信賴、有分量——這三個感受，恰好對應了一般民眾在尋找不動產法律諮詢專業人士時，內心最核心的訴求。

5.2 「の」：一個字母承擔的品牌工作

服務標語「不動産稅務．登記．法律の専門家」中的日文助詞「の」，是整個視覺設計裡我個人最喜歡的一個細節。對不了解地政業務的訪客，這個字只是一個帶有日本風格的設計元素，增加了版面的視覺節奏；但對懂行的人——例如需要處理日治時期土地登記歷史案件的客戶、或是同業——這個字是一個精準的專業信號，傳達「這個事務所對日治地政法制有深度理解」。一個字做到兩層溝通，這才是好的設計語言。

5.3 三欄卡片：首頁的核心轉換設計

首頁中段的三欄式服務卡片（專業團隊、服務項目、聯絡我們），是整個網站設計中轉換導向最明確的區塊。這三個入口，對應的是訪客最常見的三種心理狀態：「我想先了解這個所長是誰」、「我有個具體問題想確認能不能處理」、「我已經決定要詢問了」。

不選擇輪播圖（Carousel）的原因很直接：輪播的自動切換機制讓訪客容易錯失資訊，而且在手機版上的點擊命中率普遍偏低。三欄靜態卡片在任何裝置上都能確保三個入口同時可見，不需要等待、不需要滑動，降低了所有可能的操作摩擦。

5.4 頁尾的政府機關連結牆

九個政府及公益機關的 Logo Banner（桃園地政資訊服務網、財政部稅務入口網、內政部不動產交易實價查詢服務網、全國地政電子謄本系統、全國法規資料庫等），在頁尾形成一道視覺上的「官方連結牆」。這個設計的邏輯是：與可信賴來源的視覺靠近，本身就是可信賴的隱性訊號。訪客看到這個區塊，潛意識中對事務所的專業形象評分會進一步提升——即便他們不一定會點進去任何一個連結。

5.5 聯絡頁的設計細節

聯絡頁面整合了嵌入式 Google 地圖，讓訪客在頁面內就能確認地址方位，不需要跳離網站另開地圖應用程式。電話號碼以 `tel:` 協定標記，讓手機使用者可以直接點擊撥打。這些設計細節看起來微不足道，但加在一起，決定了一個訪客在「決定聯絡」的那個當下，能不能順暢地完成這個動作——而就是這個當下，決定了整個網站的轉換效果。

六、技術選型：讓設計跑得動的底層支撐

好的設計需要好的技術來承載。這個案子在技術規格上的選擇，完全以「設計的穩定呈現」與「使用者體驗的極致流暢」為優先考量，而不是以成本最低或配置最簡單為標準。以下是主要技術決策的說明：

在所有的技術決策中，HTTP/2 的全面啟用對使用者體驗的直接影響最為顯著。首頁有多張視覺圖片、多個 CSS 樣式表及 JavaScript 檔案需要同時載入，在舊版 HTTP/1.1 的限制下，這些資源會被迫排隊等候；HTTP/2 的多工串流（Multiplexing）允許所有資源平行傳輸，讓訪客感受到的頁面「彈出速度」有明顯的質感差異。對於用手機在搜尋結果頁點進來的第一次訪客而言，這個差距往往就是「願意繼續看」還是「直接關掉」的分水嶺。

這一套技術組合，也直接回應了 Google Core Web Vitals 的評分要求。形象網站設計不再只是視覺美觀的問題，技術效能已經成為搜尋排名競爭的一部分——而 ARM 主機、骨幹網路、HTTP/2 這三項加在一起，處理的正是 Core Web Vitals 中最關鍵的 LCP 與 FID 兩個指標。

七、成果驗收：設計如何轉化為業務價值

設計案的成果，不能只停在「好看」這個層次。對委託人而言，網站的最終目的是業務的發展；對設計師而言，成果必須能夠被清楚地說明和對應回最初的需求。以下是這個網頁設計案在幾個關鍵面向上的成果對照：

7.1 品牌識別差異化——達成

透過「の」標語、雙語所名並陳、完整學術履歷頁、以及政府機關連結牆的整合設計，慶芳地政士聯合事務所的網站在同業中建立了清晰可辨的視覺語言與品牌定位。任何曾經瀏覽過這個網站的訪客，再看到同類型的競業網站，都能立刻感受到差異。

7.2 資歷透明化——達成

三位地政士的完整學歷、兼任教職、內政部執照字號、實務專長，全數公開於專業團隊頁面，讓訪客在網站內就能完成「審查」動作，不需要另外查詢。這個設計決策直接縮短了訪客從「不確定」到「決定聯絡」的心理路徑。

7.3 知識行銷平台建置——達成

「相關資訊」的三層分類架構為所長的學術觀點提供了系統性的輸出平台。每一篇發表於此的專題文章，都同時服務兩個目標：一是向訪客展示事務所的深度專業，二是為網站帶入有機搜尋流量。這正是當代AI SEO策略的核心精神——讓真實的專業內容成為最有效的搜尋引擎排名資本，而不是靠廣告費或關鍵字填塞來換取流量。

7.4 聯絡門檻最小化——達成

嵌入式 Google 地圖、可直接撥打的 `tel:` 連結、線上聯絡表單、Email 連結，多種聯絡管道並陳，並在首頁三欄卡片及頁尾均有明確的聯絡資訊入口，確保訪客在頁面的任何位置決定行動時，都能立即找到出口，不需要費力尋找。

7.5 SEO 技術基礎建設——達成

Meta description、keywords、og:title、og:description、og:image 完整設定，canonical URL 正確配置，robots: index, follow 明確宣告，確保搜尋引擎爬蟲能充分且正確地索引每一個子頁面的內容，為長期的自然搜尋排名累積奠定穩固基礎。

八、給設計師的反思：這個案子教會了我什麼

每一個做完的案子，都會留下一些值得帶走的東西。這個案子給我留下最深印象的，不是哪一個視覺細節，而是一個關於「聆聽的重要性」的再次提醒。

設計師很容易在拿到案子的第一時間就開始「套版」——腦袋裡已經有一個預設的「專業事務所網站」長什麼樣子，然後就往那個方向走。但這個案子告訴我，如果我在第一次訪談中跳過了「日治時期案件專長」這個細節，如果我沒有認真問「您最希望哪類客戶找到您」，整個形象網站的方向可能就會差之毫釐、謬之千里——一個外觀看起來正常、但根本沒有對準真實需求的設計，對委託人而言是一種安靜的浪費。

這個案子也再次確認了一件事：RWD 響應式設計不只是「讓網站在手機上不會跑版」，而是對每一種使用情境的主動設計。一個剛繼承了遺產的子女，很可能是在家裡的沙發上用手機搜尋「桃園代書繼承登記怎麼辦」，然後點進了這個網站。在那個當下，他需要的是：立刻看到「有，我們處理繼承登記」，立刻看到一個可以點的電話號碼，立刻感受到這個事務所是可以信任的。這三件事必須在手機螢幕的範圍內、在三十秒內全部發生。響應式網頁設計的天花板，就在這裡。

最後，技術選型的重要性在這個案子裡也再次被放大。ARM 多核架構的雲端主機、骨幹網路直連、HTTP/2 協定、Nginx、PHP 8.4——這些是架在設計背後的地基。設計師不一定每次都需要親自決定技術規格，但必須理解技術選型對設計呈現的直接影響，才能在跨專業協作中說出有分量的話，也才能讓精心雕琢的網站設計真正發揮它應有的效果。

在 AI 工具滲透設計流程的今天，訪談、觀察、深度理解客戶處境的能力，反而是設計師最不容易被取代的核心競爭力。網頁設計這件事的本質，從來就不只是讓頁面「看起來好看」，而是讓一個品牌在數位世界裡，找到屬於自己的聲音，然後用對的方式說出來。這個案子，我們做到了。