作品集網站怎麼排？設計師、彩妝師、工作室的版面做法

插畫家、設計師、攝影師、彩妝師、室內設計工作室，這些靠作品接案的人，網站就是你的作品集。客人不會先讀你的自我介紹，他們會先看作品，喜歡了才往下看價格和聯絡方式。

我們看了兩個作品集版型的示範站和一家遊戲工作室的官網，整理出作品集網站的幾個關鍵區塊。每個例子都附上連結，網站上的作品和文字屬於各自的作者，這篇只描述版面的做法。

如果你想知道每一件作品的「案例說明」怎麼寫，可以搭配〈作品集、案例頁怎麼寫〉一起看；這篇講的是整個作品集網站的版面。

1. 第一屏：你是誰，加上一件代表作

Eldritch 版型的概念美術示範站，一打開就是一整面暗色調的奇幻畫作，左邊一行很大的襯線字打招呼，介紹自己的名字，下面一行小字寫職業，再一個白色的「聘請我」按鈕。

Kallyas 版型的彩妝師示範站，第一屏是一張大大的妝容特寫照，彩妝師的名字拆成兩行粗體大字疊在照片上，下面一行寫「彩妝師」。

兩個都只做了三件事：一件最好的作品、你的名字、你做什麼。

你的網站可以這樣做：第一屏的作品，挑你最想接的那一類案子。想多接婚禮彩妝，就放新娘妝；想接商業插畫，就放商業插畫。客人會以為第一張就是你最擅長的。

2. 作品怎麼排：三種做法

拼貼牆：Eldritch 示範站往下捲，畫面是往左橫向移動，接著出現一整面大小不一的作品拼貼，滑鼠移到作品上才出現作品名稱。像走進一間畫廊，很有氣勢。

整齊格子：Kallyas 彩妝師示範站的作品區，是三欄兩排、一樣大小的人像照，每張照片的角度和光線都很接近，整齊又好比較。

一件一列，附說明：遊戲工作室 Heart Machine 的官網，每款遊戲一列：左邊一張大圖，右邊是名稱、兩三行簡介和一個「了解更多」按鈕。作品不多、每件都需要說明的時候，這種排法最清楚。

怎麼選：

• 作品多、風格一致（插畫、攝影）：拼貼牆或格子。
• 作品要比較前後差異（彩妝、髮型、裝修）：整齊格子，照片的拍法統一。
• 作品少、每件都是大案子（室內設計、建築、品牌設計）：一件一列，點進去看完整的案例。

作品多的話，加上分類按鈕（例如婚禮、商業、平面），讓客人只看他要的那一類。

3. 服務和價目：像餐廳菜單一樣清楚

Kallyas 彩妝師示範站的服務區，是三個深色的圓形圖示，分別代表時尚造型、新娘妝、日常妝，每個下面一小段說明。往下有一塊黑底的價目表，每一行左邊是項目、右邊是價格，像一張餐廳菜單，最下面一個預約的連結。

你的網站可以這樣做：接案的人很常不寫價格，怕嚇跑客人。其實寫出「起價」或「常見的價格範圍」，反而能讓預算對的客人更敢聯絡，也少掉很多只是來問價格的訊息。

4. 預約和聯絡：放在最後，但要好找

Kallyas 示範站的最後一段，左邊是地圖，右邊是預約表單（選擇項目、姓名、電子郵件、電話、日期、留言），下面寫營業時間和地址，最底下是社群圖示。

你的網站可以這樣做：

• 預約表單的欄位越少越好，日期和服務項目可以用選的。
• 營業時間、地址、可以服務的地區寫清楚，例如「基隆、台北可到府」。
• 除了表單，再放 LINE 或電話，有些客人就是想直接問。

表單要怎麼設計，可以看〈網站聯絡表單怎麼設計〉。

5. 客戶的話

Kallyas 示範站在價目表後面，放了三欄客戶評價，每則幾行字加上客戶名字。

作品讓人覺得「做得好看」，客戶的話讓人覺得「找他很放心」。準時嗎？好溝通嗎？改稿麻煩嗎？這些作品看不出來，要靠客戶說。評價請用真實的，經過客戶同意再放。

要注意的 3 件事

1. 大圖會拖慢網站：作品集的照片又大又多，原圖直接放上去，手機打開要等很久。照片要先壓縮、轉成 WebP 這類比較小的格式，捲到才載入。網站慢的其他原因，可以看〈網站打開很慢〉。
2. 只有滑鼠才看得到的設計：「滑鼠移上去才出現作品名稱」在手機上沒有滑鼠可以移，作品名稱就看不到了。Eldritch 示範站的手機版改成作品一張張往下排；自己做的時候，手機版也要確認名稱和說明看得到。
3. 橫向捲動要小心：往下捲、畫面卻往旁邊跑，很新奇，但也有人會愣一下。用在作品集首頁可以，用在需要找資訊的頁面就不適合。

另外，作品集放的一定是自己的作品。團隊合作的案子，寫清楚你負責哪一部分；客戶的案子要放上網站，先問過客戶。

想參考喜歡的作品集網站又怕太像，可以看〈參考別人的網站，學什麼、不學什麼？〉。

正威可以幫什麼

正威網路行銷是 25 年經驗的基隆網頁設計工作室，也提供台北網頁設計與全台灣的網站服務。形象／企業網站方案可以依你的作品類型規劃作品集的排法和分類，讓每一件作品都看得清楚、手機上也打得快。

想做一個讓客人看完就想預約的作品集網站？歡迎免費諮詢。