網頁設計的靈感並非無中生有，而是透過大量的觀察、累積，最終整合自己的想法呈現出來。以畫畫當作比喻，今天如果想要畫一隻長頸鹿，第一步驟會是找一些長頸鹿的圖片，從真實照片、插畫風格去搜尋，先了解牠的特徵、構造後，才會有明確的方向去繪製。網頁設計就如同上述的流程，在確認客戶的需求後，需要提供實際的參考資料跟客戶確認，盡量避免只有口頭上的描述，造成彼此錯誤的理解。推薦給各位以下 5 個網頁設計必加書籤的參考網站，在發想、提案、開發階段都很有幫助。

如果你正在準備網站改版、找網頁設計公司，或想先整理喜歡的網站風格，這篇可以先幫你建立參考方向。參考網站主要是用來釐清你的網站需要什麼版型、內容結構、功能與使用者動線。我在協助客戶規劃網站時，也會請對方提供 2 到 3 個喜歡或不喜歡的網站，讓客戶從參考中拆出真正適合專案的設計。

Hend Design 協助品牌、顧問與中小企業規劃 WordPress 網站架構、頁面內容與後續維護，適合需要把網站做成可長期使用的內容系統，而不只是做幾個漂亮頁面。

先聊聊網站需求與架站規劃

找網頁設計參考網站前，先看這 4 件事

參考網站很多，但如果沒有整理的方法，很容易看了一堆漂亮網站，最後還是不知道自己的網站該怎麼做。我會建議先從這 4 個方向判斷：

  • 網站目的：品牌形象、服務介紹、預約諮詢、作品展示，目標不同，版型也會不同
  • 內容結構：首頁是否清楚說明服務、案例、流程、FAQ 與聯繫方式。
  • 互動與功能：動畫、表單、篩選、會員或購物功能是否真的需要
  • 維護成本：漂亮的設計如果後續很難更新，對公司網站來說不一定划算

以下整理 5 個網頁設計參考網站，適合用在發想、提案、開發與網站改版前期討論。你可以先收藏起來，之後在整理網站需求時會很有幫助。

Awwwards

網站連結：https://www.awwwards.com/

Awwwards 是一個專業的網站設計和開發競賽機構，若客戶想要新穎的網頁設計呈現方式，從這裡找參考網站絕對會是首選，此外，可以透過上方搜尋去篩選網站，如網站分類、開發技術、配色等找尋對應的參考網站。例如透過篩選找尋使用 WordPress 製作的網站，進而研究他們是如何呈現網站、使用了什麼外掛達成功能，藉由實際已上線的網站去規劃自己的網站設計，與臨摹學習繪畫有異曲同工之妙。

Webデザインギャラリー | S5-Style

網站連結：https://bm.s5-style.com/

S5-Style 主要收集來自日本的網站設計，若需要比較偏向日式的設計風格，可以從這個網站去找尋，此外，透過上方的 Filter 可以篩選網站的類別，若看不懂日文字可以使用 Google 翻譯，透過簡單的詞彙就可以了解它是屬於什麼類型，例如想找尋與餐飲有關的網站，參考他們對於網頁菜單的編排設計，可以在 Service 選擇 「商業施設･飲食店･カフェ･レストラン」，這樣就會出現跟餐飲有關的網站。

正在整理網站參考資料嗎？
如果你已經有幾個喜歡的網站，但不確定怎麼轉成自己的網站架構，我可以協助你一起判斷適合的版型、內容順序與 WordPress 製作方式。

聊聊你的網站規劃

I/O 3000

網站連結：https://io3000.com/

I/O 3000 收集了許多日本、國外的網頁設計作品，介面簡單、直覺，在網站右上側的選單可以針對網站進行篩選，如：分類、標籤、顏色等。在選單選擇「Archives」還可以針對年份進行篩選，如果想觀察不同年代網頁設計的演進可以試試看。在找尋參考網站時，除了產業類別外也可以從顏色去找尋，例如科技業可以從黑色、白色、藍色的方向去搜尋，從中研究他們是如何配色，將色彩規劃到網站上。

想了解更多網頁色彩規劃，可以閱讀：網站色彩計畫 (2022 最新) 🙂

Responsive Web Design JP

網站連結：https://responsive-jp.com/

Responsive Web Design JP 整理了各種響應式網頁設計，透過右側選單可以篩選網站類型，如：分類、顏色、技術等。在找尋參考網站時，一定要多方參考，可以給自己訂一個目標，例如找到三個適合專案呈現的參考網站，避免花費過多的時間在瀏覽參考網站而迷失方向，在進行設計時，理解這三個參考網站的架構，在透過拆解、轉化，最終將自己的想法呈現出來，設計出只屬於自己風格特色的網站。

One Page Love

網站連結：https://onepagelove.com/

One Page Love 是一個專門收集一頁式網站的平台，在製作銷售頁或登陸頁時可以在這裡找到對應的參考資料，透過上方選單可以篩選想要網頁類型，例如想要找尋運動相關的頁面，可以選擇 「Inspiration / Sport」，即會顯示與運動相關的頁面，此外在 「Templates」可以下載自己喜歡的版型，若有看到喜歡的版型可以試試看。

以上，分享了 5 個網頁設計必加書籤的參考網站，在發想、提案、開發時，與其埋頭苦想，不如從上述網站找靈感吧！不只可以增加專案的執行效率，還可以從中學習，應用在往後的設計上，擴展自己的設計知識庫 💪

有參考網站後，下一步不是直接開始設計

參考網站只能幫助你看見方向，真正要進入網站製作前，還需要把喜歡的感覺轉成可執行的網站規劃。例如首頁要放哪些內容、服務頁要不要拆開、案例是否需要獨立版型、未來是否會擴充文章或作品分類，這些都會影響網站架構與製作方式，以及後續維護成本。

如果你正在評估公司網站、品牌網站或網站改版，我會建議先整理 2 到 3 個參考網站，再一起討論哪些地方值得借鏡、哪些地方不適合照搬。

你也可以先延伸閱讀：

找網站設計常見問題

網頁設計參考網站要怎麼挑？

挑選網頁設計參考網站時，不只看視覺風格，也要看網站目的、內容結構、互動功能與後續維護成本。建議至少整理 2 到 3 個喜歡的網站，以及 1 到 2 個不喜歡的網站，方便和設計師討論方向。

可以直接照著參考網站製作自己的網站嗎？

不建議直接照抄參考網站。比較好的做法是拆解參考網站中值得借鏡的版型、內容順序、互動方式與視覺方向，再轉化成適合自己品牌、服務與使用者需求的網站規劃。

找網站設計師前需要先準備參考網站嗎？

建議準備。參考網站可以降低溝通成本，幫助設計師理解你喜歡的風格、內容呈現與功能需求。不過參考網站只是討論起點，實際製作仍需要依照網站目標、內容架構與維護方式重新規劃。

一頁式網站適合所有網站嗎？

不一定。一頁式網站適合焦點明確的活動頁、銷售頁或產品介紹頁。如果服務分類多、內容需要長期擴充，或希望經營 SEO 文章，通常會需要多頁式網站架構。

需要協助把參考網站整理成可執行的網站規劃嗎？

如果你正在找人製作 WordPress 網站，或想先請網站顧問協助判斷方向，我可以協助你整理網站架構、頁面內容、功能需求與製作方式，讓網站不是只有好看，而是能支援後續使用與維護。

你可以先準備 2 到 3 個喜歡的參考網站，以及 1 到 2 個不喜歡的網站。這些資料會比我想要有質感一點更容易討論，也比較能降低設計溝通成本。

預約網站規劃討論