神杉策劃 Sansan S&P Studio
把提案簡報網頁化

做一個提案網頁不難,
難的是怎麼問。

先用文字把方向講清楚,讓 AI 幫你把內容大綱補齊;確認過大綱再動手做成網頁——這份簡報本身,就是照著這套流程做出來的。

講者Sandy · 神杉策劃
長度約 22–25 分鐘
案例數7 份實戰文件
01

開場・先問對問題,再動手做

4 分鐘

做出一個提案網頁不難,難的是怎麼問——順序錯了,就是在用網頁包裝一團沒想清楚的內容。

1

先提出你想提案的方向

不是丟一句「幫我做提案」,是講清楚:對象是誰、你想讓對方做出什麼決定、目前手上有哪些素材。

2

讓 AI 反過來問你

好的提問會讓 AI 告訴你「這份提案還缺什麼」——現況資料夠不夠、報價邏輯有沒有交代、要不要放同業案例佐證。

「要完成這份提案,你還需要提供:① 目前的報價區間 ② 客戶最在意的三個問題 ③ 有沒有想比較的方案數量」
3

先用文字確認大綱

大綱和重點順序都用文字來回改過,確認「這就是我想講的」,再進到下一步——改文字比改網頁便宜太多。

4

最後才動手做成 HTML

大綱底定了,網頁化只是把已經確認過的內容套進版型——這一步反而是整個流程裡最快的。

02

三種你可以請 AI 協助的提案

14 分鐘

不管哪一種,做完都要回頭檢查同一組細節:重點有沒有被改掉、RWD 顯示正不正常、外連對不對。

01

行銷方向提案

現況診斷、方案比較、報價時程——說服客戶做決定用的文件。

重點有沒有被沖淡

AI 常把你的判斷邏輯簡化成通用建議,逐段核對「我原本想強調的那句話還在嗎」。

RWD 是否正常顯示

比較表格在手機上最容易出包,務必用手機實際滑一次,確認欄位沒有被壓爛。

外連是否正確

同業案例連結、跨提案互連的連結,逐一點過一次,避免上台才發現連錯頁。

視覺 demo 型

機車品牌|首頁 Demo(深色版)

不是文件,是完整可互動的網站版型提案——首頁、導覽、產品卡片全部做成真的可以點的頁面,是網頁化的極端示範。

查看案例 →
主案例

餐飲集團官網架構建置提案

四品牌×三方案並列比較,含產業參考案例、獨立網域 vs 子網域決策表、逐方案報價與時程——同一套資料結構重複使用三次,示範「模組化」而非「重寫三份」。

查看案例 →
跨提案互連

瑜珈教室行銷提案

現況缺口分析 → 文章清單 → 報價,單頁錨點導覽,並連結到同網域的個人品牌講師提案。

查看案例 →
跨提案互連

個人品牌講師網站與 SEO 提案

年度文章「三感溝通」主題化架構,與瑜珈教室提案共用網域、互相導覽。

查看案例 →
SEO 內容切角提案

僵直性脊椎炎|SEO 內容策略研究

三篇文章各自攔截不同搜尋階段的讀者(飲食禁忌→怎麼改善→是什麼/會好嗎),開頭用內容聚落流程圖交代分工與內部連結方向,再用三個分頁逐篇拆解搜尋意圖、關鍵字流量表與撰寫優先順序——同樣的「先給全貌、再拆細節」邏輯,用在內容規劃提案上一樣成立。

查看案例 →
02

內容規劃細節

簽約後的進度工作表——不是要說服誰,是讓「執行中」這件事變得看得見。

進度數字跟畫面對不對得上

進度條、統計數字要跟著實際完成篇數動,最容易漏改的就是這種散落各處的小數字。

大量清單在手機上讀不讀得動

幾十篇項目列在一頁,欄位太多記得加捲軸提示,別讓客戶滑到迷路。

外連的雲端資料夾還有效嗎

連到雲端大綱、共用資料夾的連結最容易過期或權限跑掉,上台前重新點一次。

協作工作表

法律內容網站|內容規劃工作表

主題總覽、批次進度條、逐篇關鍵字與大綱一次呈現——客戶隨時能點進來看,不用每次都問「文章寫到哪了」。

查看案例 →
03

執行/結案報告

全場資訊密度最高的一種——把「發生了什麼」跟「接下來要做什麼」放在同一頁。

數據解讀的角度有沒有被改成中性敘述

成長/風險的判斷是你的專業角度,AI 容易寫成沒有立場的流水帳,記得把「所以要怎麼做」寫回去。

圖表在手機上還讀得懂嗎

Chart.js 這類圖表窄螢幕最容易被壓扁,長標籤記得測試是否會重疊。

資料來源與外連標示是否正確

數據出處、原始連結標註清楚,客戶才敢把這份報告直接轉給老闆看。

成效報告

復健科診所|SEO 季度報告

核心數據總覽、關鍵字成長排行、逐篇文章完整數據表+泡泡圖——把成長故事跟原始數據放在同一頁,各取所需。

查看案例 →
03

做好之後,怎麼變成一個真的網址

4 分鐘

用 Cloudflare Pages 靜態部署——免費、不用寫程式、五分鐘內拿到網址。

01

整理檔案,打包成壓縮檔

確認主頁檔名是 index.html;圖片、字型盡量用外部連結/CDN,避免本機路徑失效。Page 部署時檔案要先壓縮成 .zip 再上傳,直接丟資料夾會失敗。

02

登入 Cloudflare,進到 Workers & Pages

沒有帳號的話免費註冊即可,不需要綁信用卡。

03

建立新專案 → 選「Direct Upload」

不用接 GitHub,把壓縮好的 .zip 檔拖進上傳區塊即可,這是最快的路徑。

04

等部署完成,拿到網址

系統會自動打包部署,完成後給你一個 專案名.pages.dev 的網址,可以直接分享給客戶。

05

之後要更新,同專案重新上傳一次

網址不會變,蓋掉舊版本即可——這也是為什麼案例網址都能重複使用同一個域名結構。

💡 如果客戶想掛自己的網域(例如 proposal.客戶網域.com),Cloudflare Pages 專案設定裡的「Custom Domains」可以直接綁定,不需要換平台。
04

收尾大結論・可複製的系統

2–3 分鐘

不是每次重做,是同一套骨架換內容——連怎麼問 AI,都可以是一套可複製的流程。

提案網頁化,本質上不是換一個檔案格式,是把「客戶自己能理解、能操作」當成設計目標——而這一切,從你怎麼問 AI 的第一句話就開始了。