網頁設計｜課程講義

Web design

OnePage｜網站企劃

Author

JinJin Wang

April 1, 2026

網頁企劃概述

網頁企劃概述

製作網站之前，需要制定網站企劃書，以作為網站後續製作的依據。

網站企劃書並沒有一定的製作格式或樣本，會根據不同的網站屬性、規模、製作形式等，有不同的企劃規格與方向，但是基本架構是一樣的，網站企劃可以製作屬於自己風格的專業企劃書，主要需要讓客戶了解這份企劃書想表達什麼，我們能夠給他們什麼。

寫一份網站企劃不僅僅要考慮網站的立意與定位，還涉及相對應的分析調查、執行流程、人員分配等具體事項，也依照每個網站不同屬性產業的結構而有各種模式的企劃書綜合型式，主要以突出優勢的方向為重即可。

撰寫網頁企劃

撰寫OnePage網頁企劃

    本單元根據本課程OnePage網頁設計，制定企劃內容，請依項目修改為個人設定的內容，並依據網站風格及配色做企劃書之修改，更為詳盡的企劃方式，將於進階網頁設計中繼續進行。

    企劃範本以Figma製作，以下為企劃大綱，內容請依據個人設定撰寫：

    Figma企劃範本

    1. 企劃書封面：可依網站風格修改，並寫上網站主題及相關資訊。
      2. Skeuomorphic Design Example
    2. 設計動機與目標：請描述網站設計的動機與目標。
      3. Skeuomorphic Design Example
    3. 用戶分析：主要使用網站的目標族群（職業、性別、年齡），並分析其背景、偏好及上網習慣等。
      4. Skeuomorphic Design Example
    4. 設計理念與風格設定：

      5. 網站是在網路上的「門面」，設計風格主要應符合品牌的形象，建議使用相對應的色系、LOGO等，還有整個網站的版型呈現，包括產品如何整齊排列、顯示，都是一門艱深的功課，以上的眉角都可以提出與專業的設計師討論。

      Skeuomorphic Design Example
    5. 標誌與網頁圖示：請放置網頁LOGO與網頁圖示 Favicon。
      6. Skeuomorphic Design Example
    6. 字體設定與色彩計畫
      7. Skeuomorphic Design Example
    7. 網站架構與功能分析：

      8. 單元規劃／網站地圖（site map）「網站地圖」是網站的骨架，由各個單元組合而成，每單元都是獨立的功能或獨立資訊頁面呈現（ OnePage以區塊方是區隔 ），例如：簡介、最新消息、作品（產品）介紹…等。依照提出的單元選擇最佳製作方式，可適當的調整順序及設定的內容。

      Skeuomorphic Design Example
    8. 製作項目與時程：請依照實際製作設定製作進度。
      9. Skeuomorphic Design Example
    9. 網頁呈現與網址：將成果上傳，並將最後成果截圖（FireShot）。
      10. Skeuomorphic Design Example

編輯網頁企劃範本

編輯網頁企劃範本

    企劃範本以Figma製作，可複製修改為個人可使用的網頁企劃。

    1. Figma企劃範本

    2. 將檔案複製（Duplicate）

      3. Skeuomorphic Design Example

    3. 製作完成，可將播放檔連結分享

      4. Skeuomorphic Design Example

    4. 完成後，可將整份檔案輸出成pdf檔或圖檔。

      5. Skeuomorphic Design Example

    5. 網頁企劃完成後，pdf檔於期末繳交至Moodl。

HomeWork｜課後作業

【期中報告】｜OnePage| 網頁企劃

期中報告｜OnePage| 網頁企劃

第9週報告