網站設計與前端工程，接案實作四例

我在多年網站接案工作中，從各式管道獲取案源，每位業主都有不同需求與特殊狀況。例如有人會要求特殊動態效果、複雜圖表呈現，或是常見的多國語言切換、明暗度切換，我也曾接手國外公司購買的網域，需要用印尼語溝通。從這些各式業主中，我自己也新學不少新技術，擴展自己接案技能的邊界。

這篇文中，將舉出四個實際網站接案例子，他們分別來自不同管道，有一件是陌生聯繫，兩件是不同時期的朋友介紹，最後一件是曾經合作過的公司再次合作。分別是 Sunmoon、PT ALPHA、小王子、慾望劇團。

接著就來一一介紹：

Sunmoon 信用預測分析官方網站－接案實例

我從 2020 年開始，經營個人品牌「西打藍」，擁有自己的部落格、粉專，最近也新開 IG。除了常常收到自由工作者、接案有關詢問來信，也有不少人找我合作接案。Sunmoon 就是其中一例。以下稱 Sunmoon 創辦人為阿明。

阿明從部落格文章中找到我後，從「這裡」聯繫我，他需要一位網站工程師製作圖表類型的客製化網站。他已經請一位 UI/UX 設計師規劃網站視覺與設計，只需要我來負責寫程式，完成網站前端工程任務。

在網站功能上，除了有基本 RWD，還有多樣圖表顯示，以及明暗度切換。其中較複雜的功能，是切換明暗度後，圖表顏色也要相對應改變。並當取得數據的大小不同，圖表線條配色也不一樣，總計約有 4 組顏色變化，共 8 種顏色。

我和阿明的溝通方式，全程都是透過 Email 和 Google Meet，阿明是相當要求設計細節的業主，我經常需要修改設計細節。我們總計花費 2-3 個月時間完成網站，阿明也相當迅速地付款。

完成委託後，阿明接著請我找後端工程師開發 API，要串接至網站上。我找了前同事協助，前期讓他們倆自己溝通，等 API 完成換我串接時，我再加入溝通。想不到他們倆的溝通過程，對工作內容有誤會，一度將要解除合作。我趕緊和他們開會，釐清誤會後，才又重新開始進行。最後也順利完成 API 串接任務。

整體而言，我很喜歡這次的委託案，原因之一是網站設計好看、業主好溝通、付款乾脆。有趣的是，我們重頭到尾沒碰過面，全靠線上溝通完成客製化網站以及 API 串接。有接 API 的網站不便公開，歡迎點擊「此處」觀看網站 DEMO。

PT ALPHA 國際貿易官方網站－接案實例

自由接案後，多數案子來源，都是朋友合作與轉介紹。PT ALPHA 官方網站即是一例。創辦人 Mike，是我前同事父親的其中一間貿易公司負責人，公司需要製作英、印尼文雙語網站，產品是銅線、光纖、WIFI 線材。

由於他們沒有網站專責人員，所以從網站設計、工程開發、佈署，皆由我包辦。Mike 是主要與我對接的人，溝通過程中，我沒有讓 UI/UX 設計師參與討論，而是由我負責溝通，再將需求傳遞給設計師。我們的工作順序如下：

確認網站需求、架構、設計風格 > 報價付訂金 > 設計師製作第一版 > 業主確認設計 > 來回修改設計 > 進入網站工程 > 業主最後確認網站 > 佈署上線

過程中，Mike 額外提出兩個設計需求：一個是調整、美化線材照片，另一個是型錄設計委託。我將前者交由合作設計師處理，後者的時程太趕，我建議 Mike 以當前版本製作就好，重新設計耗時費力，有可能趕不上時程。

我們最終約花費三個月時間完成網站，只差最後的佈署工作。Mike 的公司位於印尼，他在聯繫我之前，已經透過印尼網域商購買網址。為了綁定印尼網域商的網址，我花了不少時間和印尼網域商的客服員溝通，最後順利準時上線。

我和 Mike 同樣從頭到尾沒碰過面，都是用 Line 和語音對話溝通。Mike 付款也非常迅速。在網站製作上，除了選圖上多花費一些時間，其他方面都很順利，甚至 Mike 還委託我，明年幫他找設計師製作新型錄。歡迎點擊「此處」觀看網站 DEMO。

小王子策展網站－接案實例

我還在新創公司擔任正職時，有位朋友在集資公司上班，曾發案給我做一款一頁式募資網站。而這回是集資公司第二回發案給我，需要我和一位 UI/UX 設計師製作小王子策展網站。

當時，我常配合的設計師正在幫我做另一件案子，於是他推薦我另一位設計師協助。這是一個複雜網站案，在溝通群組中，除了有集資公司的窗口，也有小王子策展團隊的 PM、策展人。雖然是件急案，好在大家非常好溝通，我們前期進展相當順利。

策展網站的特殊，在於期限。我和設計師除了要在開展前完成網站，還需要維護網站 4 個月，直到展期結束網站關閉。在網站設計完成後，小王子需要經過送審，讓擁有版權的法國人審查，審查設計上是否符合小王子品牌形象。確認過審後，我才可以往下製作網站。

小王子網站中，有相當多動態效果，例如進場後，小王子會從左上角緩緩移入，配合星空背景與月球旋轉，營造氛圍，其他還有輪播、翻頁等效果。同時，這也是我第一次製作 Mobile first 網站，也就是手機版優先的網站。網站中，我們也埋了不少追蹤碼，密集觀察流量與行銷的狀況。

整體而言，這是我相當喜歡的案子，不但能當網站作品，動態方面也設計得有趣，並且有團隊共同完成大案子的參與感，溝通上也相當順暢。花費較多時間的部分，是審核過程中來回間的修改。網站上線後，策展人為了加強行銷效果，接著還會製作有趣的小網站，由於尚未公開，我就不在這裡破梗。歡迎點擊「此處」觀看網站 DEMO。

慾望劇團官方網站－接案實例

我本身是基隆人，正和基隆夥伴創辦 「雞籠怪奇」，產品是一款實境解謎遊戲。我們共有十個人，分別來自各個領域，其中幾位是來自「慾望劇團」，他們剛好要製作新的官方網站，就直接找我協助。

他們的經費有限，於是我們不聘請設計師規劃，而由我們自己設計網站，再交由我來製作。主要設計者，是劇團的專案執行－小哈，他以 PPT 作為設計稿來討論版型，我則找來網站參考範例，一同規劃。

這次的網站，我們花費超過半年時間製作，主因是劇團的圖文素材較多，需要時間收集，我在中間有好幾個月的空窗期。直到素材整理到位，網站製作就相當迅速。小哈設計的網站風格相當可愛，有別於一般常規網站的整齊元素，多了許多圓角與鮮豔用色。

整體而言，劇團網站製作相當單純輕鬆，小哈本身就是我朋友，溝通上不是問題。唯一較花時間的，是整理網站中的圖文素材。歡迎點擊「此處」觀看網站 DEMO。

網站接案總結

這四個案子，我都做得很開心：Sunmoon、小王子網站具有挑戰性、幫劇團朋友製作網站有成就感、PT ALPHA 網站要和印尼人溝通網域，也是一種新體驗。有趣的是，這四個案子配合的設計師都不一樣，可以看出四種不同設計風格的差異。

四個網站的業主，重視的地方也很不同：

Sunmoon 業主重視設計的細節，他會很仔細要求我修改某個網站小元素；

小王子業主則在意美感與質感，特別在意網站呈現效果；

PT ALPHA 則注重產品呈現，要求突出產品質感；

劇團網站同樣重視作品呈現，在圖文選用上花費較多心力。

接案者如我，需要清楚業主在意的重點，以此來規劃網站，這也是客製化網站的重要工作。因此多數時候，是由我親自溝通需求，再交由夥伴負責執行。近期，我也在慢慢練習，減少自己的溝通工作，在適當時間點讓夥伴參與討論。

從上述四個案例，相信讓你對網站有更多的了解。若你有規劃網站的需求，或想嘗試接案工作，都可以參考以上案例。若有任何進一步想討論，都歡迎「聯絡」我，也歡迎參考我的「網站作品」。