---
# System prepended metadata

title: 10/01 網站企劃概論 - 網站地圖
tags: [網站企劃概論, 進度筆記, 前端心得, 2021/10/01]

---

# 10/01 網站企劃概論 - 網站地圖   
###### tags: `網站企劃概論` `2021/10/01` `進度筆記` `前端心得`  
---

講師: 佘昌霖   

# 今日講課 -- 上午的部分 - 心智圖改 & 網站地圖   

# 改進後的心智圖 discussion   

# 如果是餐廳/賣吃的範例:   
- 同學的範例  
![](https://i.imgur.com/JtKkGPC.png) > 心智圖是在作主題的方向  
> 介紹抽象的東西, 老闆小故事, 或是品牌前世今生, 同品系加盟店家, 道路周圍環境等等    
> 可能列了一、兩百項 關鍵字   
> 風格文化   

---

# 如果是賣吃的範例:   
- 同學的範例   
![](https://i.imgur.com/QZ333wa.png)   
> 訂購資訊, 賣吃的有時間限定, 面交選項很合理   

- 同學的範例:   
![](https://i.imgur.com/sTvhU86.png)   
> 產品推銷, 有廣告業面 或是講述故事 / 產品的好, 跟廣告不太一樣   
> 產品推銷跟販售的商品另外分開, 賣點不一樣   

- 同學的範例   
![](https://i.imgur.com/NSBxWPK.png)   
> 本周主打 → 網站製作可能放在導覽列, 心智圖的部分可能可以另外拉開   
> mind map, 整體很棒 → 比較偏向營業   
> 可以多一些品牌、故事內容   

---
---
---

# 網站地圖 - Site map  

![](https://i.imgur.com/UCbVv48.png)  

> 我們現在在網站地圖   
> 下禮拜會先 wireframe   
> 有些會直接根據網站地圖 → 設計 & 設計的描述 → 直接前端開發網頁   

# 參考資料:  

[\-網站企劃\- 製作網站企劃書 @ 索尼的紅燈人生 :: 痞客邦 :: (pixnet.net)](https://sony1708.pixnet.net/blog/post/24115622)   

[淺談網站企劃的工作 \- INSIDE](https://www.inside.com.tw/article/2003-about-website-planning)   


---

# 網站地圖常用工具   

- 也是使用 draw.io   
> 可以用工作流程圖   
![](https://i.imgur.com/mOrzHQ8.png)   

---



- 看了網站地圖後可以知道東西怎麼連   
-  ![](https://i.imgur.com/VwZSGaI.png)   

---
---

- 網站地圖沒有既定格式   
> 讓人一看就了解怎麼連結   
> 從心智圖中找發想的內容文字去連結/做   
![](https://i.imgur.com/8RAyDDj.png)   

---

- 幾個範例↓   
- Google site map:  
![](https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Sitemap_google.jpg/640px-Sitemap_google.jpg?1633059395416)   


- Wiki site map:  
![](https://upload.wikimedia.org/wikipedia/commons/8/83/Main_Page_Usability.png)

---
---

- 也有ㄧ頁式的網站地圖   
![](https://i.imgur.com/861D2l7.png)   

![](https://i.imgur.com/YynVmeU.png)   

一頁式地圖可以用在個人專題上   
> 作網站地圖把每個區塊寫出來  
> 每個區塊有甚麼結構  
> 企劃階段(網站地圖), 也會依照業主需求去更動  

----

==這是已上線大型網站比較複雜, 不會每個都講==
- 範例:  
![](https://i.imgur.com/0AQtBji.jpg)   

---

![](https://i.imgur.com/woexVNl.png)   

---

![](https://i.imgur.com/KVdQD01.jpg)   

> 如果按了購物車, 或是加盟這種按鈕要怎麼連過去   
> 可以從心智圖去找找關鍵字, 來做網站地圖   
> 不會寫重複的區塊   
> 呈現你想呈現的東西   
> 怎麼作讓工程師去比   
> 
---

- 通常會先從父層開始發想   
![](https://i.imgur.com/tkI6GQF.png)   

---
---

- 已經上線的一頁式範例:  
> 想像每個區塊要做些甚麼   
> 首頁的商品內容丟在導覽列   
> 可能讓人一進來先看到品牌故事
> 也有可能一進來就點到最新消息(名店), 讓顧客一看就能知道每天/最新品項/營業資訊   
![](https://i.imgur.com/SmrxRH0.png)   

---
----

- 老師示範範例   

![](https://i.imgur.com/2RXPMza.png)   

> 先放最新消息/商品/故事品牌 ==哪個比較好沒有固定== → ==根據網站風格==   
> 依照業主/風格需求去呈現第一眼印象   
> 心智圖的東西不會全放進去   
> mind map 跟網站地圖不一定會完全一樣(強調)   
> 故事/特點下的內容 → 開始想區塊名稱, 類別名稱  
> 頁首 - NAV (字體, style)   
> 頁首 - 如以下方式 / 網站 / 連結   
![](https://i.imgur.com/tZLkGkv.png)   
- 通常網站的文案都是業主提供嗎?  
> 業主提供資金或有贊助形式(sponsor) / 文案  
> 自己公司的內容 / 介紹應該很少讓別人寫(自己的東西應該自己要最懂)   
> 跟業主很熟的話也常常會請業主提供   

![](https://i.imgur.com/fvHlhuw.png)   


---

# 品牌需要長期經營   

- 課外知識 UGC   

[User-generated content - Wikipedia](https://en.wikipedia.org/wiki/User-generated_content)   

[11個UGC實例，讓你了解品牌如何用UGC行銷 (transbiz.com.tw)](https://transbiz.com.tw/ugc-examples/)  

[UGC是什麼？使用者原創內容新起分享 - FLIPWEB 數位資產部落格](https://blog.flipweb.tw/ugc%e6%98%af%e4%bb%80%e9%ba%bc_%e4%bd%bf%e7%94%a8%e8%80%85%e5%8e%9f%e5%89%b5%e5%85%a7%e5%ae%b9%e6%96%b0%e8%b5%b7%e5%88%86%e4%ba%ab/)   

[為何一部鱷魚漫畫的完結，會讓日本網友全炸鍋？全因背後操縱的企業出過這件事-風傳媒 (storm.mg)](https://www.storm.mg/lifestyle/2446811?page=1)   


---
---

# 下午的部分  - Site Map discussion   

- 同學範例
![](https://i.imgur.com/Bi6lPbI.png)  
> 品牌故事通常有經營理念  

![](https://i.imgur.com/RCxwzSk.png)   
> 會員登入以信箱居多(減緩人頭帳戶  
> Line 登入會涉及後端 fetch  

![](https://i.imgur.com/OOUaqHj.png)   
> 這種 結帳頁面 → 應該是購物車跟下單系統合在一起  
> 比較好閱讀  
> 如果購物車寫到部門的標題含意, 那使用者可能一進來可能不知道這是甚麼  
> 一頁式購物車, 結帳畫面 XD

- 同學範例  
![](https://i.imgur.com/HkeinT6.png)  
> 有點像 one page application  

---

# 網站地圖跟心智圖相反  

![](https://i.imgur.com/0JlYEvV.png)  
> site paper 會要把所有東西弄出來~  
> 越細節越不錯~  

---

# 餐廳範例檢討  
- 區塊避免直接用 nav  
![](https://i.imgur.com/fwkR5bJ.png)  
> 備註 / 說明, 不只程式設計師會看, 業主, 設計師也會看   
> 所有背景的人都看得懂  
> 文字簡單細講(簡述)   
> 可以寫在最下面的表格外   

---

- 同學範例:   
![](https://i.imgur.com/14v2Rzf.png)   
> 可以使用大家共同的語言, 例如設計師和 FE 懂的漢堡包   
> 日曆和菜單的介紹通常可能是介紹、圖片、購買   

----

- 同學範例:  
![](https://i.imgur.com/YYPhXWr.png)   
> 細節, 可能英文有 details  

![](https://i.imgur.com/eGeaOLU.png)   

> 可能可以這樣做法  
![](https://i.imgur.com/86OijPb.png)   

---

- 同學範例:  
![](https://i.imgur.com/kX21Ace.png)   
> 外帶資訊要怎麼點, 自取有哪些欄位要怎麼放, 打電話還是怎樣的運作方式   

---

- 同學範例:   
![](https://i.imgur.com/7rg7HAn.png)  
> 品項如拉麵 / 叉燒面的擺法   

---



---

# 商圈範例檢討   

- 同學範例  
![](https://i.imgur.com/CDTHNRr.png)   
> 6 個連結擺法可能需要一點圖片解說  
> 連結作成圓的擺法怎麼擺, 可以介紹一下   
> 想好的做法, 可以用畫圖, 圖片的來呈現一下作法  
> 可能是卡片式的方式:  
![](https://i.imgur.com/3g6OH8u.png)   
> BANNER 一個區塊的結尾, 有人覺得很重要可能會寫在表格內, 或是裝飾性的東西比較不會寫在網站區塊內, 可能寫在備註  
![](https://i.imgur.com/aMTypz6.png)  

- Banner: 裝飾, 可能有 / 無連結, 像廣告, 長條的圖片, 也有影片去放的案例:  
![](https://i.imgur.com/PT4YaD0.png)   

---

# nav 和 banner 怎麼擺好  

>     Banner 和 NAV 會讓你看網頁的形象和操作資訊, 很常見   
> Header 有時被定義會跟 banner 和 nav 重疊, 不一定是最好看要遵守的, 但根據標準來寫比比較好  
> 通常是這樣, 既定的規格↓:  
![](https://i.imgur.com/5EnEzdw.png)  

- 或這樣, banner 這個襯托把它放上去 header 旁 ↓  
![](https://i.imgur.com/LGP79Fl.png)   
- 如果是 banner 可能會這樣放  
![](https://i.imgur.com/3dSso7C.png)   
----

# 賣東西的範例檢討  

- nav 形式, 最新消息的限時公告放法    
![](https://i.imgur.com/0MaMVKd.png)   
> 每個溝通都是成本, 要怎麼讓圖片出來  
![](https://i.imgur.com/7n9g5i9.png)   
- 要想解釋方法, 屏除困難讓企劃文件容易閱讀和溝通   
![](https://i.imgur.com/HzN54Z1.png)  
> 例如 ↑  

- 有圖片有文字超棒  
![](https://i.imgur.com/3SsWfYo.png)  
> 最底下有補充圖片效果  

- 很厲害的描述  
![](https://i.imgur.com/jCIDek6.png)  

---

# Google 爬 Sitemap   
# 參考資料   

[Sitemap是什麼？網站地圖DIY教學與SEO應用-奇寶網路部落格 (seoseo.com.tw)](https://www.seoseo.com.tw/article_detail_637.html)   

[從 Sitemap的應用，談SEO的學習 | Harris先生 (yesharris.com)](https://www.yesharris.com/sitemap-seo/)   
[【Sitemap SEO教學篇】Sitemap是什麼？一次掌握Sitemap網站地圖製作與提交流程！ | Ranking SEO](https://ranking.works/%E6%8A%80%E8%A1%93SEO/sitemap)   


- Sitemap也不是排名因素   
- 孤兒頁面不太有 SEO 權重   
- 站內連結沒法被 sitemap 取代

# GitHub 補充 - 靜態頁面   

- 程式碼管理也是時程管理的一環  
- 靜態網頁 → 網頁本身沒有變動, 一樣可以有 js 
    靜態頁面可以做動態的, 不過資料儲存在前端, 只是所有東西會被看光, 但可以做變動的東西  
- 動態網頁 → 有跟資料庫串接的方式, 同步/非同步  

==要作靜態頁面的話檔案一定要是 index.html==  

![](https://i.imgur.com/qADXN5B.png)   

在 setting 的地方找 GitHub Pages  
![](https://i.imgur.com/O8uYRpy.png)  

---

# 參考資料   
[GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.](https://pages.github.com/)   

----

# 記得作品集最後要附註  

XXX XXX-XX屆 for 教育用途 (避免違反著作權  
如果你的照片含文字被上線後的網站引用就沒甚麼問題   

不過只引用照片就比較危險   

----

