# 10/01 網站企劃概論 - 網站地圖
###### tags: `網站企劃概論` `2021/10/01` `進度筆記` `前端心得`
---
講師: 佘昌霖
# 今日講課 -- 上午的部分 - 心智圖改 & 網站地圖
# 改進後的心智圖 discussion
# 如果是餐廳/賣吃的範例:
- 同學的範例
 > 心智圖是在作主題的方向
> 介紹抽象的東西, 老闆小故事, 或是品牌前世今生, 同品系加盟店家, 道路周圍環境等等
> 可能列了一、兩百項 關鍵字
> 風格文化
---
# 如果是賣吃的範例:
- 同學的範例
> 訂購資訊, 賣吃的有時間限定, 面交選項很合理
- 同學的範例:
> 產品推銷, 有廣告業面 或是講述故事 / 產品的好, 跟廣告不太一樣
> 產品推銷跟販售的商品另外分開, 賣點不一樣
- 同學的範例
> 本周主打 → 網站製作可能放在導覽列, 心智圖的部分可能可以另外拉開
> mind map, 整體很棒 → 比較偏向營業
> 可以多一些品牌、故事內容
---
---
---
# 網站地圖 - Site map
> 我們現在在網站地圖
> 下禮拜會先 wireframe
> 有些會直接根據網站地圖 → 設計 & 設計的描述 → 直接前端開發網頁
# 參考資料:
[\-網站企劃\- 製作網站企劃書 @ 索尼的紅燈人生 :: 痞客邦 :: (pixnet.net)](https://sony1708.pixnet.net/blog/post/24115622)
[淺談網站企劃的工作 \- INSIDE](https://www.inside.com.tw/article/2003-about-website-planning)
---
# 網站地圖常用工具
- 也是使用 draw.io
> 可以用工作流程圖
---
- 看了網站地圖後可以知道東西怎麼連
- 
---
---
- 網站地圖沒有既定格式
> 讓人一看就了解怎麼連結
> 從心智圖中找發想的內容文字去連結/做
---
- 幾個範例↓
- Google site map:
- Wiki site map:
---
---
- 也有ㄧ頁式的網站地圖
一頁式地圖可以用在個人專題上
> 作網站地圖把每個區塊寫出來
> 每個區塊有甚麼結構
> 企劃階段(網站地圖), 也會依照業主需求去更動
----
==這是已上線大型網站比較複雜, 不會每個都講==
- 範例:
---
---
> 如果按了購物車, 或是加盟這種按鈕要怎麼連過去
> 可以從心智圖去找找關鍵字, 來做網站地圖
> 不會寫重複的區塊
> 呈現你想呈現的東西
> 怎麼作讓工程師去比
>
---
- 通常會先從父層開始發想
---
---
- 已經上線的一頁式範例:
> 想像每個區塊要做些甚麼
> 首頁的商品內容丟在導覽列
> 可能讓人一進來先看到品牌故事
> 也有可能一進來就點到最新消息(名店), 讓顧客一看就能知道每天/最新品項/營業資訊
---
----
- 老師示範範例
> 先放最新消息/商品/故事品牌 ==哪個比較好沒有固定== → ==根據網站風格==
> 依照業主/風格需求去呈現第一眼印象
> 心智圖的東西不會全放進去
> mind map 跟網站地圖不一定會完全一樣(強調)
> 故事/特點下的內容 → 開始想區塊名稱, 類別名稱
> 頁首 - NAV (字體, style)
> 頁首 - 如以下方式 / 網站 / 連結
- 通常網站的文案都是業主提供嗎?
> 業主提供資金或有贊助形式(sponsor) / 文案
> 自己公司的內容 / 介紹應該很少讓別人寫(自己的東西應該自己要最懂)
> 跟業主很熟的話也常常會請業主提供
---
# 品牌需要長期經營
- 課外知識 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
- 同學範例
> 品牌故事通常有經營理念
> 會員登入以信箱居多(減緩人頭帳戶
> Line 登入會涉及後端 fetch
> 這種 結帳頁面 → 應該是購物車跟下單系統合在一起
> 比較好閱讀
> 如果購物車寫到部門的標題含意, 那使用者可能一進來可能不知道這是甚麼
> 一頁式購物車, 結帳畫面 XD
- 同學範例
> 有點像 one page application
---
# 網站地圖跟心智圖相反
> site paper 會要把所有東西弄出來~
> 越細節越不錯~
---
# 餐廳範例檢討
- 區塊避免直接用 nav
> 備註 / 說明, 不只程式設計師會看, 業主, 設計師也會看
> 所有背景的人都看得懂
> 文字簡單細講(簡述)
> 可以寫在最下面的表格外
---
- 同學範例:
> 可以使用大家共同的語言, 例如設計師和 FE 懂的漢堡包
> 日曆和菜單的介紹通常可能是介紹、圖片、購買
----
- 同學範例:
> 細節, 可能英文有 details
> 可能可以這樣做法
---
- 同學範例:
> 外帶資訊要怎麼點, 自取有哪些欄位要怎麼放, 打電話還是怎樣的運作方式
---
- 同學範例:
> 品項如拉麵 / 叉燒面的擺法
---
---
# 商圈範例檢討
- 同學範例
> 6 個連結擺法可能需要一點圖片解說
> 連結作成圓的擺法怎麼擺, 可以介紹一下
> 想好的做法, 可以用畫圖, 圖片的來呈現一下作法
> 可能是卡片式的方式:
> BANNER 一個區塊的結尾, 有人覺得很重要可能會寫在表格內, 或是裝飾性的東西比較不會寫在網站區塊內, 可能寫在備註
- Banner: 裝飾, 可能有 / 無連結, 像廣告, 長條的圖片, 也有影片去放的案例:
---
# nav 和 banner 怎麼擺好
> Banner 和 NAV 會讓你看網頁的形象和操作資訊, 很常見
> Header 有時被定義會跟 banner 和 nav 重疊, 不一定是最好看要遵守的, 但根據標準來寫比比較好
> 通常是這樣, 既定的規格↓:
- 或這樣, banner 這個襯托把它放上去 header 旁 ↓
- 如果是 banner 可能會這樣放
----
# 賣東西的範例檢討
- nav 形式, 最新消息的限時公告放法
> 每個溝通都是成本, 要怎麼讓圖片出來
- 要想解釋方法, 屏除困難讓企劃文件容易閱讀和溝通
> 例如 ↑
- 有圖片有文字超棒
> 最底下有補充圖片效果
- 很厲害的描述
---
# 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==
在 setting 的地方找 GitHub Pages
---
# 參考資料
[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 教育用途 (避免違反著作權
如果你的照片含文字被上線後的網站引用就沒甚麼問題
不過只引用照片就比較危險
----
Sign in with Wallet
Connect another wallet