比較設計師做線上作品集常用的服務優缺：WordPress、Webflow以及Framer

設計師們，你是否也在考慮製作自己的線上作品集，卻因為滿滿的專有名詞而望之卻步、遲遲無法開始？別擔心！這篇文章將從設計師的實際需求出發，深入比較目前最常見的三種網站製作平台：WordPress、Webflow、Framer，幫助你釐清它們的優缺點，找出最適合自己的解決方案。另外，文章的最後，附有這些方案的總結比較表格喔！

構成一個網站的要素

在網路上建立一個屬於自己的作品集網站，你需要打點好四件事情，分別是：網域、主機空間、內容管理系統、網頁內容。它們的作用如下：

我們接下來要介紹的WordPress、Webflow、Framer，他們無一例外，賣點就是賣「它們幫你省下安裝/處理/設定/維護主機空間、內容管理系統」的功夫，並提供一個簡單的編輯器，讓你可專注在內容製作上。而關於「網域」的部分，則需要你單獨購買並填進這些服務的設定頁面裡。

如何挑選/購買一個網域

網域是由「網域名稱」和「後綴」兩個部分組成。其中，名稱部分可以自由發揮創意，想寫什麼都可以；後綴則需從幾個既定選項中選擇。一般來說，最常見的網域後綴是「.com」。這個網域後綴源自 Commercial（商業）一詞，並被廣泛地應用於各種用途的網站。

隨著時代演進，也出現了越來越多富有個性的網域後綴，例如「.app」、「.design」、「.store」等，讓網站名稱更具辨識度與主題性。不過需要注意的是，使用過於冷門或特殊的後綴，有可能引起使用者的疑慮，例如擔心網站是否安全、是否為釣魚網站等資安風險。因此，使用「.com」仍是目前最穩妥、可信度最高的選項。

以個人作品集網站來說，使用自己的英文拼音作為網域名稱就是個蠻不錯的做法。例如，我就是使用「hsiehchengyi.com」作為本站的網址。訂定一個好的網域名稱，目的是要讓瀏覽者好記、以及從字面上大致認識這個網站。選定網域名稱也和選定後綴一樣，如果使用太過有個性的名稱，例如「something-interesting.com」，很容易會引起不信任感，要多加注意！

你可以使用Godaddy、Squarespace這類網域販賣商的工具來確認自己心儀的網域是否還能購買。不過提醒一下，可別一時心急就直接下單呦！你需要透過接下來的步驟選定的架站服務商購買，它們才會幫你保管買回來的網域。否則，可能要額外支付一筆「轉移網域」的費用。

如果你想要的網域不幸已經被買走了，雖然也可以嘗試出更高的價格讓擁有者改變心意、將網域賣出，但最省時、省錢的做法，還是換一個網域購買。一般來說，越簡潔、好記的網域價值就越高。無論目前有沒有人擁有，它的價格都會很貴。但如果你是像我一樣，使用自己的英文拼音當作網域，那就會非常冷門、價格也會很便宜。以我的「hsiehchengyi.com」為例，即便後綴是熱門的「.com」，但一年的費用卻只需要$400塊新台幣。

設計師線上作品集的網頁需求

了解構成網站的各個要素以後，接下來，就讓我們分析設計師的線上作品集網站，有哪些必要需求吧！詳細項目與對應術語的關係羅列如下：

架站平台的優缺比較

Framer

Framer是一款操作起來像是使用設計軟體般的no-code架站解決方案。所以對於設計師來說，這款軟體應該很容易能上手（但要達到精通仍需要額外補足一些網頁專業知識）。

Framer在個人用途方面提供了Mini、Basic、Pro三種方案。其中，Mini只給予了兩個頁面（首頁+404頁面）的額度，這對於製作作品集來說，顯然不夠用，因此不予討論。

方案內容分析

Basic方案提供了1000頁的頁面額度、每月50GB的頻寬，這對於作品集網站的預期頁面數量、預期流量來說，有十分充裕的空間。比較需要注意的是儲存空間（Storage）和檔案上傳限制（File uploads）。以目前我的個人網站舉例，扣除備份檔案以後，內容管理系統+實際內容佔據的空間約為1GB左右。因此若你未來有經營部落格的打算，這個方案可能很快就會不夠用，因為部落格中用到的圖片會快速地佔據儲存空間。

如果你有製作中英雙語作品集的需求，Framer一樣有對應的功能可讓你翻譯網站介面、作品，不過每種額外語言需要追加月費新台幣$200塊。

在code架構簡潔性方面，Framer產出的網站Code架構簡潔性算普通。這表示最終成品不太會遇到無法被搜尋引擎索引、解析、呈現於搜尋結果的情況。只要照著官方的範例做，就不會有太大問題。RWD方面自然也是不用擔心。比較遺憾的是，Framer只有使用基礎的h1/h2/h3這一系列的文字階級tag，剩下來的全部都是用div包裹起來，在code表達清楚程度方面差了些。

缺點

像Framer這類主打「簡單」的網頁設計工具先天就會在code方面吃虧。舉例來說，它預設就會給予每個單獨的網頁元素一個像亂碼一樣的class，方便Framer系統調整其外觀。這對於後續用額外css來調整元素外觀來說，非常不方便。要調整樣式，唯一的方法只有透過Framer系統進行。

接下來，或許也是Framer的最大缺點——在於該平台的html/css/js code沒有辦法匯出，內容（部落格文章/作品集文案）也沒有辦法匯出。這代表，在framer製作的網站就只能透過framer上線，沒有辦法日後另行尋找其他的主機空間使用。假設日後framer如果有價格、服務內容上的變動，使用者只能被動地接受。

即使網路上有宣稱可完整匯出framer網頁的工具，但實測的結果顯示，光是單一頁面匯出的code就有2500多行，是個遠超出正常code長度範圍的數字。根本不會有網頁製作公司、開發者願意接手這團毫無架構可言的混亂。

總結

使用framer前需要確認好這個服務100%契合你當下、未來可能會有的需求，下好離手、完全不後悔。

Webflow

Webflow同樣是主打no-code的架站服務，只不過和Framer比起來，它更加往「開發」面向靠攏，因此介面也比Framer還要複雜許多。不過，相信對於設計師的話，應該還是能很快地上手基礎操作。

Webflow的起始方案是從Basic開始，免費方案因為只有2個頁面的額度所以不討論。

方案內容分析

Webflow的Basic方案提供了150個頁面的額度。雖然比起Framer來說相對較少，但對於一般的作品集網站來說仍是夠用的。需要注意的是，Basic方案沒有提供CMS items（製作部落格、作品的必要部件），所以所有的作品頁面都必須要以單獨的靜態頁面發佈。這表示，這些獨立的頁面會難以控制整體的版型、以及無法動態獲取資料來顯示。如果要獲得CMS items的額度，就需要選擇「CMS」或以上的方案。但這樣一來，月費就來到了新台幣$680塊，乘以12個月的話，會是一筆不小的開銷。

Webflow同樣也有支援多語言功能，不過限制只有付費方案的用戶才可加購。計費方式與Framer相同，是在現有的方案月費上疊加，每種語言要加收新台幣$270塊。

在code架構簡潔性方面，受惠於軟體本身就比Framer更加複雜的關係，因此最終的code架構簡潔性也比Framer來得更佳。使用Webflow製作的網頁，同樣不會有無法被搜尋引擎索引的擔憂，RWD更不在話下。仔細檢查Webflow成品的Code，會發現它使用section將每個區塊切開，每個元素裡頭也沒有複雜的隨機亂碼，即便後續要進行額外的樣式調整也很簡單。

缺點

Webflow雖然有匯出網頁Code的功能，但僅限於企業方案使用，個人方案是無法匯出的。此外，即便匯出了網頁的html/css/js code，但關鍵的CMS內容（部落格文章、作品文案）同樣無法匯出。

使用了坊間的工具匯出Webflow網頁後，結果與Framer一樣慘不忍睹。光是一個首頁就匯出了將近9000行的代碼。雖然code相對有架構許多，但一樣不會有人願意接手處理這個混亂。

總結

Webflow的方案缺點主要集中在CMS item的機制上頭。如果想要使用CMS來作為作品的基礎架構，就需要購買特定等級以上的方案，但價格也因此跟著往上漲。整體來說，Webflow亮點在於code架構比起Framer更加有序。總之，使用webflow同樣需確認好網站現在、未來可能會有的需求，下好離手不後悔。

WordPress.com

WordPress是世界上鼎鼎大名的開源內容管理系統，全球約有40%左右的網站是使用WordPress建立。為了方便大家使用WordPress，官方也推出了no-code架站服務「WordPress.com」。

WordPress的操作體驗，與其說是操作一個設計/開發軟體，更像是操作一個部落格的網頁後台。不難想像，它的上手難易度是本文介紹的所有選項中最低的。

方案內容分析

WordPress.com 的個人版方案提供了 6GB 的儲存空間，對於建立個人線上作品集來說，可說是綽綽有餘。此外，憑藉 WordPress 作為內容管理系統（CMS）的優勢，所有的方案都不限制頁面數量或內容類型數量，你可以完全依照自己的需求自由規劃網站架構，彈性極高。

不過在選擇方案時，有兩個部分需要特別留意：「佈景主題（模板）」與「外掛程式」。

首先是佈景主題。所有付費方案都支援自行安裝佈景主題，因此除了使用官方商城提供的佈景主題，也能從第三方平台下載/購買後手動上傳。正因為如此，方案中所區分的「免費佈景主題」與「進階佈景主題」，除非你有真的很喜歡其中的某個主題，不然差異不大。

至於外掛程式，則是 WordPress 生態系的另一個重要核心。透過外掛，你可以為網站加裝像是「多語言支援」、「購物車」、「SEO 優化」等進階功能。然而，目前官方似乎將「安裝外掛程式」作為特定方案的促銷手段——若在非優惠期間購買個人版或進階版，將沒有安裝外掛的權限。這點非常關鍵，因為少了外掛的加持，WordPress 的功力將大幅縮水。

若你打算長期經營個人網站，建議在購買方案前務必確認是否包含「可安裝佈景主題」和「可安裝外掛」的權限，以免影響未來的使用彈性。

在設計的自定義方面，WordPress的操作介面就不如Framer、Webflow那樣直接，需要透過編輯器拖拉放進行。由於平常我都是直接用Code來設計WordPress各種頁面的外觀，因此這個編輯器究竟好不好用、能客製化到什麼程度，我沒有辦法做評價。但可以確定的是，它的介面和Figma這類設計軟體有蠻大的差異。

缺點

總的來說，WordPress.com 的方案內容算是較為全面、大方的。如果硬要挑缺點的話，就是個人方案沒有沒有離線測試用網站、以及缺乏備份功能這兩點比較可惜。不過在「備份」方面，如果真的需要，還是可以透過購買相關的外掛程式來補足。

另外有一點你必須了解的是，一旦選擇使用 WordPress 作為架站工具，後續所採用的解決方案（尤其是外掛程式），基本上都必須綁定在 WordPress 的生態系之中。舉例來說，如果你希望網站具備購物車等電商功能，就必須使用那些「明確標示與 WordPress 相容」的解決方案。雖然由於 WordPress 市佔率高，市面上有大量支援的外掛與工具，但在某些特定需求下，你可能會發現所有相容方案的 CP 值都不太理想，這時就只能在有限的選項中做出妥協。

最後，在 WordPress 生態系中，品質穩定、功能完善的外掛幾乎都需要額外付費購買，收費模式可能採一次性買斷，也可能是訂閱制。由於 WordPress 系統會定期更新，外掛程式也必須同步進行維護與升級，才能確保在新版環境中正常運作。因此，只有收費的外掛程式廠商才比較有動力付出人力去維護，而免費版外掛程式，則完全端看作者的心情。使用免費外掛程式，運氣差的話，就會遇到「作者中途放棄維護」的情況。一旦缺乏更新，這些外掛不僅可能導致網站錯誤、功能異常，嚴重點甚至還可能產生資安風險。

WordPress.org

WordPress 作為一套開源的內容管理系統（CMS），除了可以透過 WordPress.com 快速建站，你當然也可以選擇自行基於 WordPress 架設網站。

不過，採用這種方式就意味著你必須親自處理 CMS 以外的所有相關環節，例如：購買與設定網域、租用主機、安裝WordPress、設計與開發網頁、網站部署、資料庫管理、網站備份、資安防護、效能優化等。因為要處理的步驟很多，導致這個方式是本文介紹的所有做法中，難易度最高的。

然而，高門檻背後換來的是兩項重要優勢：相對更高的性價比，以及幾乎無上限的客製化自由度。若你具備一定技術背景，或願意投入時間學習，自架 WordPress 網站將是非常值得的選擇。

方案內容分析

自行架站的最大好處，在於你將完全擁有CMS的控制權限，不再受到任何頁面數量、內容類型、功能模組方面的限制。唯一能束縛你的，就只有主機空間的資源限制，例如：儲存空間大小、頻寬。不過換個角度想，這也意味著只要在符合限制的前提下，網站想要怎麼規劃、怎麼設計、怎麼展示，全部都可自行決定！

以我目前使用的主機商——FastComet為例，其 Starter 方案提供了 10GB 的儲存空間。這個容量對於一般的個人作品集網站來說，已非常足夠。在價格方面，Starter方案原價約為每月新台幣 $268 左右。不過，官方也經常推出各種優惠活動來促銷。

以本文撰寫時的促銷內容來看，首年主機費用可省下80%，Starter方案的月費會降至約 $54 新台幣，CP 值相當高。不過需要注意的是，此優惠只適用於主機租用費用，其他如網域註冊、隱私保護（Whois Privacy）等額外項目，仍需另外加購。因此最終費用會再往上多一些。

缺點

自行架設 WordPress 網站最大的挑戰，在於你必須承擔高自由度所帶來的各種技術責任。像是：註冊與設定網域、設計網頁版型、撰寫程式碼、優化載入速度、強化 SEO 表現……這些工作都得一手包辦。如果沒有足夠的技術基礎，很容易出現網站載入緩慢、搜尋引擎排名不佳等問題，進而影響使用者體驗與曝光。

相較之下，使用 no-code 架站服務，這些平台就會在背後替你處理以上的技術細節，讓你能專注在內容與設計本身上。這也是為什麼 no-code 平台收費普遍較高的原因。然而，選擇 no-code 架站服務，雖然你省下了處理技術細節的時間成本，但無形中也將整個網站的控制權、未來的發展彈性給交了出去。這筆交換是否划算，就見仁見智。

總結

總的來說，no-code 架站服務的方案設計主要會透過對「儲存空間」、「CMS 功能」、「網頁內容匯出」、「外掛擴充能力」等項目的限制，來促使用戶往更高階的方案升級。由於多數平台並不支援將網站內容完整匯出或轉移到其他服務，這意味著一旦選擇某個平台，就很難完全脫離，未來只能被動接受它所提供的功能與價格。

儘管如此，no-code 架站服務確實幫助用戶節省了大量的維護與技術成本。使用者無需操心主機設定、效能優化或安全性管理等問題，只需專注在網頁設計與內容製作上。反觀自行架站，雖然自由度與性價比更高，但若缺乏相關技術能力，最終製作出來的網站品質可能反而更低。

至於這樣的取捨是否值得，最終就得視你的需求與背景技能而定。

參考資料

1. Framer. Pricing. Retrieved Aug 15th from https://www.framer.com/pricing
2. Framer. Can I export my website to HTML and self-host it? Retrieved Aug 15th from https://www.framer.com/help/articles/can-i-export-my-website-to-html-and-self-host-it/
3. Webflow. Plans & Pricing. Retrieved Aug 15th from https://webflow.com/pricing
4. Webflow. Code export. Retrieved Aug 15th from https://help.webflow.com/hc/en-us/articles/33961386739347-Code-export#01JDAH4E00301274QVVG7KAE97
5. WordPress. 方案與定價. Retrieved Aug 15th from https://wordpress.com/zh-tw/pricing/
6. FastComet. Plans & Pricing. Retrieved Aug 15th from https://www.fastcomet.com/pricing