什麼是好的個人網站：30 個優質網站精選與設計哲學

SOURCE | 資訊源評估

• 準確性：高。精選 30 個涵蓋美學展示、互動教學、商業變現與知識管理的真實個人網站案例，分析維度貼合產品架構與資訊架構實務。
• 易理解性：極佳。以訪客動線與資訊揭露拆解各案例亮點。
• 閱讀策略建議：先掌握核心評估契約，再依自身定位挑選三個範例拆解。

NAPKIN | 餐巾紙

• 一句話：優秀的個人網站不在於炫技的視覺特效，而在於低摩擦地向目標受眾交付「我是誰、做過什麼、如何合作」的領域契約。
• 核心公式： $$V_{\text{site}} = \frac{\text{Clarity}(\text{Identity} + \text{Proof} + \text{CTA})}{\text{Friction}{\text{cognitive}}} \times \text{Retention}{\text{update}}$$

公式白話解析：個人網站的架構價值（$V_{\text{site}}$），取決於身分定位、作品證據與合作引導的清晰度總和，除以訪客尋找資訊的認知摩擦（$\text{Friction}{\text{cognitive}}$），再乘以持續更新帶來的回訪留存率（$\text{Retention}{\text{update}}$）。

• 行動觸發：捨棄向 AI 下達「設計得更高級」的模糊指令，改為擷取三個標竿網站並明確指定「採用 A 的資訊順序、B 的留白佈局、排除 C 的過度動效」。
• 精簡 ASCII 草圖：

[訪客進入] ──> 1. 身分識別 (1秒定錨：我是誰/核心標籤)
                 │
                 ├──> 2. 意圖分流 (客戶看方案 / 觀眾看作品 / 讀者看專欄)
                 │
                 ├──> 3. 證據交付 (背景脈絡 + 個人職責 + 互動原型/過程稿)
                 │
                 └──> 4. 契約轉換 (透明報價 + 交付標準 + Now頁面長效留存)

ROUND 1: SKELETON | 骨架掃描

• 核心問題：在 AI 能輕易生成前端程式碼的時代，開發者與創作者如何定義「好網站」的架構標準，並精準提取設計需求交由 AI 實作？
• 核心答案：好網站必須清晰回答「關注領域、服務對象、過往實績、合作方式」四大問題，並透過精準的資訊分流與狀態管理降低訪客認知負荷。
• 論證結構：先確立五項評估準則（身分識別、動線分流、作品溯源、合作透明、回訪機制），再將 30 個案例劃分為五大架構模式逐一剖析優劣，最後收斂為 AI 輔助開發的提示詞提取法。
• 章節骨架：
  1. 介面與視覺驅動型（案例 1-10）：以網站載體本身或高密度視覺牆作為核心能力證明。
  2. 互動內容與商業服務型（案例 11-20）：將複雜知識封裝為可操作組件，並以透明契約消除商業合作摩擦。
  3. 知識花園與長效留存型（案例 21-30）：以極簡排版搭配狀態標記、雙欄筆記與定期周刊，建立長期信任資產。

ROUND 2: DISSECTION | 血肉解剖

• 精簡 ASCII 論證鏈：

[痛點：對AI提不出具體需求] ──> [建立五維度評估座標]
                                 ├── 形式即證明 (PDF/3D/作品牆)
                                 ├── 降低認知成本 (滑桿互動/內聯展開)
                                 ├── 消除交易不確定性 (公開報價/源碼歸屬承諾)
                                 └── 輕量化持續營運 (Now頁面/常青筆記狀態)

• 關鍵證據：
  1. 零摩擦商業契約：Drice Roland 以 7 頁 PDF 形式在首頁直接標明品牌設計 15,000 美元起；谷放明確承諾「程式碼進客戶儲存庫、過程可見、可隨時接手」，直接化解外包信任危機。
  2. 動態認知卸載：Bartosz Ciechanowski 在月球科普文中嵌入時間與光照互動滑桿；Nicky Case 的 Nutshell 支援點擊專有名詞原處展開多層解釋，避免跳頁中斷閱讀心流。
  3. 低成本狀態維護：Derek Sivers 透過單一 Now 頁面動態更新近況，免去頻繁改寫自我介紹的成本；Maggie Appleton 以「幼苗、發芽、常青」標記文章成熟度，解除未完稿不敢發布的心理阻力。
• 隱形假設與邊界：
  • 假設：訪客具備明確瀏覽意圖，且願意透過文字與結構化資訊評估創作者價值。
  • 邊界：重度 3D 渲染（如 Bruno Simon）僅適合創意開發本行，若一般求職或接案者盲目照搬，反而因載入延遲與操作門檻勸退高價值客戶。

ROUND 3: SOUL | 靈魂提取

• 作者盲點：側重前端呈現，未深入探討內容建置管線（Content Pipeline）與 SEO 結構化資料的長期影響。
• 知識連接：呼應軟體工程的「契約式設計」與「漸進式揭露」——首頁提供最小可行介面，細節按需展開。
• 行動觸發：新增 /now 路由記錄當下專注，並在作品集中補齊「職責邊界、演進草稿、協作夥伴」元資料。
• 留白提問：
  1. 跨領域業務如何避免首頁導覽雜亂？
     • 架構師視角：採受眾意圖路由（Intent-Based Routing），依訪客目標（找合作/看產品/讀文章）分流。
  2. 高互動性內容如何平衡維護成本？
     • 架構師視角：固定文章歸檔為純靜態結構，僅在首頁或實驗路由（/craft）進行局部互動創新。
• 跨域映射：
  1. API 閘道：首頁如同 API Gateway 負責宣告 SLA（報價標準）並分流客戶。
  2. CQRS 架構：日常碎片筆記高頻寫入（Write Model），重構為 Guides 供讀者查詢（Read Model）。

DEEP READ | 精讀指引

• 原文金句 1：

  「好的個人網站不一定要多好看，要緊的是把這四件事說清楚：你關注什麼，為誰服務，做過什麼，怎樣合作。」

  • 推薦理由：將個人網站從視覺美工拉回商業與價值傳遞系統本質。
• 原文金句 2：

  「攢夠三個，交給 AI 的時候你就可以說，要第一個的內容順序、第二個的留白，不要第三個的動效。這比說『再高級一點』有用多了。」

  • 推薦理由：揭示需求工程精髓——將審美轉化為可組合的結構化約束。

STRUCTURE MAP | 全書結構圖

[個人網站架構設計哲學]
  ├── 核心契約 ──> 身分定錨 / 受眾分流 / 作品溯源 / 報價透明 / 持續回訪
  ├── 五大實踐模式
  │     ├── 1-5   網站即作品 (PDF模擬 / 3D世界 / 介面細節牆 / 歷年改版庫)
  │     ├── 6-10  作品即介紹 (雙軌導覽 / 縮圖切換 / 幕後故事 / 草稿與分工)
  │     ├── 11-15 內容即產品 (年度數據報 / 互動滑桿 / 圖文聯動 / 原地展開)
  │     ├── 16-20 商業與履歷 (意圖路由 / 資產歸屬承諾 / 階梯報價 / 焦點分組)
  │     └── 21-30 極簡知識庫 (成熟度標記 / Now頁面 / 雙欄筆記 / 專題指南)
  └── AI 協作閉環 ──> 拆解標竿特徵 (順序+留白+負面約束) ──> 精準驅動 AI 生成

什麼是好的個人網站：30 個優質網站精選與設計哲學 (Architectural Deep Dive)

前言/背景

在 AI 輔助編碼普及的當下，建置個人網站的工程門檻已趨近於零，真正的瓶頸轉移至「資訊架構設計」與「品味定義」。本文透過拆解海內外 30 個頂尖個人網站，建立一套從價值定位、互動體驗到商業轉換的完整設計模式語言，協助開發者將模糊的審美直覺轉化為精準的系統規格。

章節詳細總結

一、形式即證明：以載體與視覺叙事建立第一印象（案例 1–10）

當創作者的核心能力在於設計、前端工程或視覺藝術時，網站本身的互動機制與排版結構就是最具說服力的線上履歷：

• 網站本身就是作品：
  1. Drice Roland：首頁封裝為 7 頁互動 PDF，公開品牌設計 15,000 美元起報價與標準合作流程。
  2. Bruno Simon：以可駕駛小車探索的 3D 世界呈現專案，展牌清晰標註個人角色與協作者。
  3. Rauno Freiberg：/craft 頁面陳列微互動原型，並發布《Web Interface Guidelines》闡明設計品味。
  4. Lynn Fisher：首頁模仿書籍目錄，歷年改版歸檔展現「固定文章歸檔、局部折騰首頁」哲學。
  5. Jacob Collier：微縮音樂工作室呈現樂器，整合巡演購票入口，兼顧視覺記憶與商業轉化。
• 作品就是最好的自我介紹： 6. 張晶娜 Jingna Zhang：首頁鋪展雜誌封面牆，導覽列嚴格分流商業攝影與個人藝術作品。 7. 楊泳梁 Yang Yongliang：橫向作品帶配合作者自述，點擊放大即可檢視數位山水建築細節。 8. Dan Winters：經典系列目錄搭配底部縮圖開關，自由切換單張沉浸瀏覽與整組快篩。 9. Malika Favre：插畫作品旁配置封面故事按鈕，直連媒體訪談補齊創作背景。 10. Jessica Hische：案例頁採用左列客戶職責說明、右列實物大圖與早期草稿的對照佈局。

架構權衡 (Trade-offs)

• 優勢：極高辨識度，快速證明實作力與審美。
• 劣勢與成本：3D 與媒體資源增加載入延遲，客製介面可能提升行動端跳出率。
• 選型建議：僅在形式即技能時重度客製，一般創作者借鑑雙軌分流資訊架構即可。

二、互動賦能與商業契約：降低認知與交易摩擦（案例 11–20）

此組案例示範如何將靜態內容轉化為可探索的互動組件，並透過結構化的服務說明建立高轉換率的商業漏斗：

• 內容也能做成作品： 11. Nicholas Felton：將個人十年生活數據排版為精密年度報告圖版，公開記錄工具與完整性。 12. Bartosz Ciechanowski：長文內嵌物理模擬互動滑桿，將抽象光照原理轉化為直覺操作。 13. Nicholas Rougeux：數位化彩色版幾何原本，點擊內文符號即時高亮右側對應圖形。 14. Nicky Case：以 Nutshell 工具支援點擊專有名詞原處展開多層解釋，避免跳頁中斷。 15. 寶玉：文章開頭提供 3D 桃花源記二十幕語音導覽，體驗後再拆解提示詞與工程實踐。
• 把自己能做什麼講清楚： 16. 魚總：首頁依訪客意圖提供產品、內容、副業三條路由，並公開產品進度看板。 17. 谷放 goodfun：針對外包痛點提出資產歸屬、過程可見、可以接手承諾，提供庫存分析試跑。 18. Bear Liu：案例底部公開每月 4,000 美元起定價，提供三種合作模式比較表。 19. Brittany Chiang：精選專案置於首頁，完整清單收斂至歸檔，並實作無障礙跳轉。 20. Anthony Fu：頂部固定當前關注核心專案，下方按技術生態分組陳列。

架構權衡 (Trade-offs)

• 優勢：互動組件提升長文完讀率；公開報價過濾不匹配詢價，提升轉換。
• 劣勢與成本：互動長文開發成本高；公開定價削弱面對大客時的議價彈性。
• 選型建議：寫作者透過 AI 輔助生成互動組件；獨立顧問導入合作模式表與交付承諾。

三、極簡架構與知識複利：可持續演進的數位花園（案例 21–30）

不依賴繁複的視覺包裝，而是透過清晰的分類法、生命週期標記與穩定的更新節奏，讓網站成為隨時間增值的知識庫：

• 簡單的網站，一樣值得常去： 21. Maggie Appleton：以幼苗、發芽、常青三階段標記成熟度，讓筆記安心公開演進。 22. Zara Zhang：首頁直列文章標題與摘要，文末透過精準的 RELATED 推薦串聯相關主題，驅動連續閱讀。 23. Derek Sivers：首創 /now 頁面集中記錄近期專注事項，解耦靜態自介與動態近況。 24. Owen Young：以聚合頁嚴格區分原創與外部書籤，顯示各分類數量與最後更新時間。 25. 王登科 DK：硬核 AI 裝置專案與生活隨筆並列，塑造真實立體的創作者形象。 26. 阮一峰：極簡首頁聚焦科技周刊，憑藉期號索引與每周歸檔機制建立讀者黏著度。 27. Limboy：區分記錄每週動態的周記與沉澱底層價值觀的系統頁面。 28. Andy Matuschak：雙欄橫向展開常青筆記，點擊連結時新筆記並排開啟對照閱讀。 29. Steph Ango：Obsidian 極簡靜態發布站，底部雙向連結將理念延伸至實踐。 30. Simon Willison：高頻發布隨筆與筆記，並將零散內容重構為結構化 Guides 指南。

架構權衡 (Trade-offs)

• 優勢：零維護負擔，靜態架構具備極致速度與跨平台壽命。
• 劣勢與成本：首屏缺乏衝擊力，仰賴高密度思想輸出與長期更新紀律。
• 選型建議：優先實作 /now 頁面與雙層內容架構，避免過度工程化。

總結與結論

1. 資訊架構優於視覺渲染：個人網站的首要任務是降低訪客的認知成本。先確立「我是誰、做過什麼、如何合作」的資料綱要，再決定視覺包裝層級。
2. 解耦靜態基座與動態狀態：借鑑 /now 頁面、/archive 歸檔與「常青狀態標記」，將高頻變動的近況與低頻變動的履歷分離，讓網站具備低維護成本的持續演進能力。
3. 以正交特徵向量驅動 AI 開發：向 AI 提需求時，應放棄空泛的形容詞，改為提取標竿網站的正交特徵（如「採用 A 的資訊順序 + B 的留白比例 - C 的繁瑣動效」），方能精準生成高轉換率的個人網站。

Source URL: https://x.com/situking/status/2117833294473728365