參考別人的網站，學什麼、不學什麼？

委託做網站時，很多老闆會說：「我想要像這個網站那樣。」帶參考網站來是好事，設計師可以很快抓到你要的感覺，比用嘴巴形容「要有質感」「要活潑一點」清楚得多。

問題在於「像」到什麼程度。太像，可能侵權，熟悉那個網站的客人也會覺得你在模仿別人；完全不像，又白找了參考。這篇整理哪些可以學、哪些不能照搬，以及把參考變成自己樣子的方法。

法律保護的是「表達」，不是「點子」

著作權法第 10 條之 1 規定，著作權只保護著作的「表達」，不保護它背後的思想、概念、原理這些東西。套到網站上，大致可以這樣分：

• 做法和概念：「首頁放一張大圖」「服務分三欄介紹」「頁面最後放常見問題」，這些是很多網站都在用的做法，參考沒有問題。
• 具體的作品：照片、插圖、影片、文案、程式碼、圖示，都是別人的創作，不能直接拿來用。
• 品牌：LOGO 和品牌名稱另外受商標法保護。網站如果模仿到讓客人以為是同一家公司，還可能碰到公平交易法第 22 條「不能使用別人有名的商標、外觀，讓人混淆」的規定。

網站的整體版面設計受不受保護，要看個案，沒有一條清楚的線。最安全的做法，是讓自己的網站從頭到尾都是自己的樣子。遇到實際的爭議，請找律師判斷。

可以學的 4 件事

1. 氣氛：明亮或沉穩、活潑或專業、溫暖或冷靜。這是你最想要的部分，也是最不會侵權的部分。
2. 元素的種類：對方有大圖、數字重點、客戶見證、常見問題、明顯的預約按鈕，你的網站也可以有這些「種類」的區塊。
3. 排列背後的道理：例如先講客人遇到的問題、再講解決方法、最後放聯絡方式。學的是「為什麼這樣排」，再依自己的內容決定順序。
4. 好用的功能：搜尋、分類篩選、線上預約、價格試算。功能本身是點子，可以自己做一套。

不能照搬的 5 件事

1. 圖片、插圖、影片：包括佈景主題示範站上的照片。
2. 文字：標語、公司介紹、常見問題的回答。從外國網站翻譯過來也不行，翻譯在著作權法裡屬於「改作」，一樣要經過同意。
3. 程式碼：網頁的 CSS、JavaScript，除非對方寫明是可以自由使用的開放原始碼。
4. LOGO、圖示、招牌圖形：對方最有辨識度的圖形，就是最不能碰的東西。
5. 整組照搬：區塊順序、配色、按鈕樣式、字型、裝飾一起照著做，就算每一張圖、每一句話都換掉，整體看起來還是同一個網站。

我們自己也走過冤枉路

我們改版電商購物車網站這一頁時，參考了一個色塊大膽、標題很重、裝飾很活潑的網站，前兩次都做錯了：

• 第一次太像：區塊順序、最有特色的圖形都太接近對方，自己看都覺得像翻譯版。
• 第二次退太多：怕侵權，又改回原本網站的樣子，參考的氣氛全部不見了。

後來才抓到方法：保留氣氛和元素的種類，每一個元件的具體樣子都重新設計。例如：

• 斜體英文大標，改成傾斜的貼紙標籤加螢光筆底線。
• 想法泡泡，改成 LINE 對話泡泡，更貼近台灣客人的習慣。
• 斜角分隔線，改成波浪。
• 圓點背景，改成方格紙。
• 數字編號的圓圈，改成票券造型的卡片。
• 點開來看的常見問題，改成一張張便利貼。

文字全部自己寫，區塊順序也依自己要講的內容重新排。完成之後，一樣是色塊大膽、活潑的感覺，但放在一起看，是兩個不同的網站。

上線前的自我檢查

• 把兩個網站並排，遮住 LOGO，別人分得出來是兩家公司嗎？
• 有沒有任何一張圖、一段字、一段程式是從參考網站來的？
• 區塊的順序，是因為自己的內容需要才這樣排，還是照著對方排？
• 按鈕、圖示、分隔線、背景花紋，是不是都重新設計過？

四題都沒問題，就是「參考」，不是「抄襲」。

套用佈景主題也一樣

買現成的佈景主題（版型）做網站，示範站上的照片和文字是讓你看效果用的。能不能放到自己的網站上，要看主題的授權說明；沒有寫清楚，就當作不能用，換成自己的照片和文字。圖片授權的細節，可以看〈網站圖片和字型要有授權〉。

正威可以幫什麼

正威網路行銷是 25 年經驗的基隆網頁設計工作室，也提供台北網頁設計與全台灣的網站服務。做網站時，你可以帶幾個喜歡的網站來，我們一起整理你喜歡的是哪些地方，再設計成你自己的樣子；網站上的圖片使用有授權的商業圖庫，或確認過可以商用的 AI 生成圖片，不會從網路上隨便抓圖。

有喜歡的網站，想做出類似的感覺又不想抄襲？歡迎免費諮詢。