05個人網站・企劃・設計・實作
KENLIN.CC
我把技術、攝影和思考放進同一個網站，再用 AI 幫忙檢查架構和視覺。
2026
設計發表
01
網站本身，也是我的一件作品。
把攝影裡養成的美感，帶進自己的網站。
我想讓攝影作品、技術專案和個人介紹，在同一個地方被完整看見。這個網站不只是放作品的容器，它本身也是我想做好的一件作品。
我不想只是換掉模板裡的文字和圖片。所以從企劃、資訊架構、視覺到實作與發佈，都由自己決定，再和 AI 一起把它做出來。
把攝影裡養成的美感，帶進自己的網站。
攝影
技術
個人介紹
網站本身，也是我的一件作品。
02
先整理內容，再決定網站怎麼做。
JP、中文、EN，共用同一套導覽。
我先整理作品、日誌、攝影、關於和聯絡，再替每一類內容安排清楚的入口。日文放在根目錄，中文是 /zh，英文是 /en；切換語言時，也能繼續閱讀同一頁。
架構確認到一半時，AI 曾建議用 Spring Boot 加 Vue 做前後端分離。我先理解 Next.js 和 Vercel 的關係，再判斷以內容為主的網站用 Next.js 更合適；先確認理由，再決定採不採用。
ROUTE SYSTEM
JP / · 中文 /zh · EN /enHome
Work
Journal
Photography
About
Contact
三種語言JP / · 中文 /zh · EN /en
JP /、中文 /zh、EN /en：三種語言，六個網站入口。
03
用照片、字體和細線，做出自己的樣子。
想要日系雜誌的閱讀感，也要讓內容容易看。
封面最初是 AI 提出的工業風，我不喜歡。後來把自己的想法和照片帶進去，先渲染出預覽，再反覆調整；方向逐漸變成照片、紙感和留白，而不是堆滿特效。
標題用明朝體，正文保持清楚，橘紅色標示重點，綠色線條串接流程。桌面可以並排閱讀，手機則依照同樣的內容順序往下看。
VISUAL LEDGER
所求 / 決定01
照片與紙感
讓攝影和技術放在一起，也保留輕鬆的閱讀感。
02
字體與重點
明朝標題、清楚正文，用顏色標出重要的地方。
03
手機閱讀
圖片和段落依序排列，導覽也能用鍵盤操作。
04
改到第四版，才比較接近想要的樣子。
太普通、太像攝影集、太像模板，都試過。
第一版太普通，第二版太像攝影集，第三版又太像模板。一直到第四版，才慢慢把攝影、技術專案和個人介紹放到比較平衡的位置。
VERSION LINE
V1 / V2 / V3 / V4- 01
V1
太普通
最初的網站太普通。
- 02
V2
太像攝影集
太像攝影集，技術內容被壓過。
- 03
V3
太像模板
太像模板，還沒有自己的樣子。
- 04
V4
目前方向
把攝影、技術和個人介紹放到一起。
這是我對各版方向的回顧；下方圖片是留存的設計預覽。
05
和 AI 一起做，但方向由我決定。
先討論、看預覽，再到實際畫面確認。
前端實作多半和 AI 協作完成。我會先說清楚想做什麼，把不同工作交給適合的工具，再看實際畫面是否接近自己的想法。
渲染預覽很有幫助，但實際網站還是要自己看。需求判斷、技術選型和設計決策都由我負責，詳細的協作方式另外整理在 AI 工作流程。
SITE LOG
DISCUSS / PREVIEW / CHECK- 01DISCUSS
先說清楚
把需求與喜歡的參考方向說清楚。
- 02PREVIEW
看預覽
先看渲染，再調整設計與實作。
- 03CHECK
自己確認
回到實際頁面，確認閱讀與操作。
預覽用來討論方向，實際網站用來確認結果。
06
把想做的網站，一步步做成能用的網站。
現在
01
攝影、技術和個人介紹，終於有了同一個入口。
網站還會持續調整。我希望每次修改都讓作品更容易看、文章更容易讀，而不是只是增加新的版面。
現在
KENLIN / 06攝影、技術和個人介紹，終於有了同一個入口。