為什麼我決定自己做平和的網站
Published
為什麼我決定自己做平和的網站
2019 年我剛回公司，第一件想做的事就是把網站補上。
搜尋已經是所有人找資料的方式，而平和在網路上幾乎是空白的。2010 年左右其實做過一個，但網路變化太快，公司裡沒有人能維護，網站舊荒廢在那裡了。
七年之後，我們把整個網站重做了一次。
這一次沒有找任何人。
一、2019 年，我為什麼選擇委外
當時的選項有兩條：用 WordPress、Wix 這類平台自己架，或是找網站公司。
我排除了自架。門檻對當時的我來說太高，時間也不夠，而且最現實的是——卡住的時候不知道可以問誰。那時 AI 還不普及，遇到問題只能自己在社群或是論壇裡找答案。
所以我直接找了網站公司，請他們用模板做了一個簡單但符合需求網站。
以當時的條件，我認為那是最好的解決方案。
二、模板網站的限制，是簽約時看不到的
後台的操作成本比想像中高。
有一次我把一篇文章從某個欄位搬到另一個欄位，標題明明填好了，位置欄卻反紅跳出「請選擇分類」。分類就在那裡，也選了。從錯誤訊息看不出問題出在哪，也不知道這個 bug 要怎麼解決。
這種事不是偶爾。我們建站的目的是公司形象為主，跟一般網購或是有頻繁更新需求的業主不一樣。後台介面本身不直觀，久久沒有使用很容易忘記怎麼操作。加上報錯時完全找不到原因，最後只能寄信給網站公司，附上截圖、用文字描述我的問題或是我想要調整的樣子，但常常收到回覆「改好了」，但改完卻跟我想像的不一樣。
版面在購買的那一刻就決定了。
2019 年選定模板之後，後續想重做首頁要另外收費。能夠動的很侷限，真正想改動的詢問之後都是一筆新的費用。
SEO 只能做到基本。
我曾經想把網址改成自訂的路徑——例如產品頁改成 /products 這樣的結構。得到的回覆是，這屬於加值功能，需要加費開通，而且必須同步搬到獨立主機環境，會再產生一筆主機的費用。
一個影響搜尋結果的基本設定，我無法自己改。
架構跟不上產業的變化。
數位化這幾年變得很快，網頁的佈局和內容都該跟著調整。但操作不易，架構更動更困難，基本上就是被限制在當初買下的那個框框裡。
但它確實有優點。
只要內容準備好架構想清楚，可以很快拿到一個有 RWD 響應式的網站。這在當時確實幫了大忙。
三、真正讓我決定重做的，不是版面
舊網站看起來漂亮，但醫師看完得不到答案。
問題出在架構的邏輯。以前我們是把每一種材質單獨做成一頁——甚至細到品牌，例如 3M Lava 就有自己的一頁。醫師點進去，讀完那一頁，然後就沒了。
但醫師手上的問題從來不是「請告訴我 3M Lava 是什麼」。而是他有一個案例，有一些條件的限制，他要知道的是在這些前提下，這個選擇好不好，有沒有別的做法。
如果一頁只單純講了一種材質，回答不了這種問題。
2019 年舊網站的產品介紹頁面，採用目錄式排列
我想要在贋復類中增加材質比較表，因為我認為這是醫師會想要得到的答案。但是舊網站下很難做到這件事。
此外，每一個贋復品項和 case study 之間更是沒有連結。醫師看完一個品項，沒辦法接著看到實際的案例；看完案例，也回不到材質的判斷。資訊都有，但是四散各處。
所以網站的問題從「好不好看」變成了「醫師找不到他要的答案和資訊」。
四、我先去問了網站公司
其實我也不是一開始就決定自己做。
我先問過專門做網站的公司，也問過行銷公司結合網站製作的方案。價格偏高，溝通確認過程繁瑣，但真正讓我停下來思考的——是我發現做完之後，內容的編排還是會有限制。當要做比較大的變動時，依然得麻煩廠商，也可能會再產生費用。幾年之後，我會回到跟 2019 年一樣的位置。
五、為什麼是 Framer
先試過的那些。
去年開始陸續試了 Vercel 的 v0、Figma 的 AI Agent、Google Stitch。
這些工具的共通點是以程式碼為基礎在編輯。一開始很快，大概可以做出七成完成度的網站。但當要開始修細節的時候，非常繁瑣。
而且我的情況跟一般人不太一樣：平和已經有一個網站前身，架構很清晰，複雜程度比 one page 的網站高許多。那些工具在單頁的情境下效果好，可以很大提升效率。但頁面一多、結構一深，維護成本就變高了。
最後選 Framer 的理由。
Marketplace 上有很多模板可以選，官方的 tutorial 資源豐富，YouTube 上的教學也講得清楚。我本身有使用 Figma 的經驗，面對 Framer 的一些功能不算太陌生；Figma 也有 Figma to Framer 的小工具，降低了初期上手的難度。
以我當時的條件來說，Framer 是能夠快速上手的唯一選擇。
六、一個沒有設計背景的人，實際卡在哪裡
第一個方法失敗了。
一開始我想先在 Figma 上把版面排好，再用 Figma to Framer 的工具轉過去。但轉完之後才發現，component 和交互動畫還是得在 Framer 上重新設定——等於沒有省到太多時間。
後來換了做法。
直接瀏覽大量 Framer 的案例，找到我認為合適的模板，再進行調整和修改。交互和 component 全部直接在 Framer 上設定。
遇到不懂的地方就問。
碰到不熟悉的設計名詞或功能，我直接問 Gemini 或 Claude。Gemini 的好處是可以直接叫出 YouTube 上的教學影片，可以一邊看影片一邊照著操作；Claude 則是當你使用某個功能但卡住時，可以給出相對準確、一步一步的操作流程。
花費的時間。
從開始摸索、尋找合適的模板，到真的把目前這個網站的雛形做出來，陸陸續續大約花了半年。
七、新網站的架構，是照什麼順序排的
先確定贋復類型，再決定材質。
一個臨床案例，評估完患者條件之後，醫師要先決定的是做 crown、貼片、還是 inlay / onlay。贋復類型定下來了，才輪到材質——在這個前提下，哪一種能同時達到美學標準又符合臨床條件。
所以網站的架構就照這個順序重建：先選贋復類型，再往下看材質比較表。
這樣做還有一個好處。以前一種材質一頁，看完就沒有了；現在同樣的內容放進比較表裡，就會看到在類似的條件下，還有哪些做法可以選。
國外幾間大型 lab 的網站也多半是這個結構，先贋復類型，再往下走到材質。
2019 年舊網站的案例分享頁面，照片排列缺乏系統性整理
Framer Marketplace 頁面，展示可供選擇的網站模板列表
Framer 編輯器操作畫面，顯示圖層結構與元件參數設定
新網站的材質比較表，依贋復類型分類呈現
贋復品項和案例分享之間，加了一個連結按鈕。
每一個贋復類型的頁面上，我們直接放了一個按鈕，可以連到對應的案例。醫師在看某一個贋復類型的時候，如果想知道實際做出來是什麼樣子，不需要退回首頁再找一次。而這是舊網站沒有的。
Go Digital 是為數位流程另外開的一頁。
剛開始踏入數位化的醫師，最想知道的是「我要怎麼跟牙技所配合」——你們收不收得到某個品牌口掃機的檔案、哪些材質可以用數位方式製作、哪些案子可以不用印 3D 模型。
這些問題我們在電話和訊息裡回答過很多次。既然這些問題被反覆問到，就該有一個地方能把這些答案寫清楚。
新網站贋復品項頁面，設有連結至臨床案例的按鈕
新網站的 Go Digital 頁面，說明數位化合作流程
這個網站不是最完善的版本，之後也還會繼續修改優化。
但這一次，每一頁要放什麼、順序怎麼排，都是我們自己決定的。
PING HO DENTAL LAB — WHERE ACCURACY MEETS AESTHETICS
