DropOut Tech 琢奧科技聊聊你的需求 DROPOUT / 品牌簡報

DROPOUT / 怎麼合作、花多少

找到適合你的合作方式。

網站、客製系統或按月顧問。這裡列出費用、工作內容與合作方式。

選一種合作，看看怎麼做。

以上皆為未稅起價，實際範圍另行確認。

客製系統 / 需求盤點 → 開發交付

把每天的工作接起來

怎麼一起做合作示意
工作現場資料與規則管理後台
  1. 01走進現場
  2. 02做一段能用的
  3. 03驗收與交接

客服、CRM、ERP、業務開發。照你的工作方式設計。

保有自己的資料與原始碼。前端改版時，可沿用相容的後台與資料介面。

聊聊客製系統看教室系統的開發紀錄
包含的工作與合作條件

包含的工作

  • 全客製化前端架構開發 (React)
  • 專屬後台管理系統
  • 客製化商務邏輯與金流串接
  • 企業級容器佈署 (Docker)
  • Core Web Vitals 效能調整

合作前先確認

初期開發成本較高，需預留 2-3 個月開發期

交付與交接

原始碼交付、API 文件、資安弱點掃描

實際費用、交付範圍與時程，在需求確認後另行報價。第三方平台與主機等費用依使用方案計算。

合作的節奏

做完一個專案，或持續一起做。

品牌網站

按確認的範圍，完成一次交付

  1. 整理內容
  2. 設計與建置
  3. 確認與交付
✓ 交付與交接

客製系統

按確認的範圍，完成一次交付

  1. 走進現場
  2. 做一段能用的
  3. 驗收與交接
✓ 交付與交接

月費陪跑

按月協作，持續安排下一輪

  1. 一起排需求
  2. 開發與維護
  3. 回饋到下一輪
↻ 持續協作

企業系統與 AI 實作

怎麼做，留下紀錄給你看。

營運系統 / 專案筆記

桌球教室的排課與算薪

家長 / 預約課程教練 / 點名扣堂後勤 / 核對拆帳
功能流程示意，依公開專案筆記整理
  1. 預約排課
  2. 現場點名
  3. 薪資拆帳

從櫃檯和教練的實際作業，整理預約、點名與薪資流程。

查看家長、教練、後勤的功能對照AI 商務媒合 / 專案筆記

年會現場的 AI 商務媒合

商務連結 APP 使用場域：BNI 台灣年會現場橫幅
年會現場照片｜會員自發專案，非官方委託
  1. 商務資料
  2. 需求配對
  3. 引薦理由

BNI 會員自發開發的商務連結 APP，於年會現場使用。文章保留操作流程、使用紀錄與回饋。

查看 APP 操作流程與使用紀錄企業知識 / 專案筆記

BNI 長輝分會的知識後台

BNI 長輝分會第二大腦後台的知識節點與管理入口
實際後台截圖｜完整文章可查看節點內容
  1. 整理經驗
  2. 建立知識
  3. 支援問答

BNI 長輝分會的實際後台：查詢知識節點、保留資料來源，新增資訊先交由管理者審核。

查看知識後台與審核方式

交付範圍，有跡可查

細節，開始前一起寫清楚。

121可查詢的工作項目

下列是可討論的工作項目。使用方案與關鍵字篩選，查看你關心的範圍；最終以確認的專案範疇為準。

找到 121 個項目

商業策略與專案啟動12 項

商業獲利模式訪談

深度挖掘您的獲利核心

例如：確認要做訂閱制還是單次買斷？

競品數位資產分析

拆解對手的流量來源與技術弱點

例如：對手網站為何跑比較快？

使用者體驗路徑 (User Journey)

規劃從「進站」到「成交」的最短路徑

例如：減少結帳步驟以提升轉換率

網站架構圖 (Sitemap)

視覺化全站頁面層級

例如：避免頁面邏輯混亂

網域 (Domain) 策略建議

挑選好記且利於 SEO 的網域

例如：.com 還是 .tw 比較好？

DNS 託管全設定

A / CNAME / MX / TXT 記錄配置

例如：確保信箱與網域串接正確

雲端主機成本試算

提供最透明的 AWS/Zeabur/Cloudways 成本分析

例如：預估第一年的主機費

專案甘特圖 (Gantt Chart)

設定明確的交付查核點

例如：掌握上線日期

敏捷溝通群組

建立 Line/Slack 專案群

例如：即時回報進度

素材雲端歸檔系統

建立結構化的圖文資料夾

例如：避免圖檔遺失

第三方服務帳號清單

統整金流、物流、地圖等必備帳號

例如：一次申請完畢

年度數位轉型藍圖

規劃未來 12 個月的技術擴充路徑

例如：明年要不要做 APP？
UI/UX 視覺與互動設計19 項

精選商用佈景主題

篩選 3 款高擴充性 WP Theme

例如：快速建立專業形象

品牌 CIS 導入

Logo、標準色、輔助色設定

例如：讓網站跟品牌色調一致

段落與行距調整

優化 CSS 行高與段落間距

例如：讓文章更好閱讀

Figma 高保真設計稿

Pixel-perfect 的介面設計

例如：開發前先確認所有細節

互動原型 (Prototype)

模擬真實操作流暢度

例如：感受點擊後的回饋

設計系統 (Design System)

定義全站按鈕、表單、卡片規範

例如：維持全站視覺統一

深色模式 (Dark Mode)

(選配) 支援系統自動切換深色主題

例如：符合現代 APP 體驗

骨架屏載入 (Skeleton)

優化資料讀取時的視覺感受

例如：減少等待的不耐煩感

品牌專屬 Loader

客製化過場動畫

例如：強化品牌印象

微互動回饋

按鈕 Hover、Focus 狀態動效

例如：提升操作手感

RWD 桌面版適配

支援 1920px+ 大螢幕

例如：在大螢幕也不會跑版

RWD 筆電版適配

優化 13 吋筆電顯示

例如：Macbook Air 完美顯示

RWD 平板版適配

修正直橫式破版問題

例如：iPad 也能順暢瀏覽

手機版優先設計 (Mobile First)

調整按鈕位置與尺寸，方便手機操作

例如：80% 流量都來自手機

繁體中文排版優化

選用適合中文閱讀的 Web Fonts

例如：避免字體破碎難讀

統一 Icon 視覺系統

使用 SVG 向量圖示，縮放不失真

例如：高解析螢幕依然清晰

404 錯誤頁面設計

降低跳出率的友善引導

例如：網址打錯也能被引導回來

瀏覽器 Favicon 設定

強化品牌識別

例如：分頁籤上的小圖示

社交分享圖 (OG Image) 設計

確保連結分享時好看

例如：Line 分享連結時的縮圖
系統核心與資料架構16 項

WordPress 核心安裝

最新穩定版 CMS

例如：全球市佔率第一的系統

輕量化外掛配置

避免安裝過多外掛拖慢速度

例如：保持網站輕快

垃圾留言過濾

Akismet 設定

例如：防止機器人洗版

Supabase 專案建置

企業級後端環境

例如：無伺服器架構，依用量計費

PostgreSQL 資料庫

採用世界級關聯式資料庫

例如：穩定儲存百萬筆交易

RLS 資安權限政策

資料庫層級的嚴格權限控管

例如：防止資料外洩

Database Schema 設計

高效能資料表關聯規劃

例如：加快查詢速度

雲端儲存桶 (Storage) 配置

圖片/檔案權限管理

例如：安全儲存會員上傳的檔案

邊緣運算 (Edge Functions)

處理複雜後端邏輯

例如：全球節點快速運算

即時資料庫 (Realtime)

支援資料即時更新監聽

例如：聊天室或通知功能

React 現代化前端架構

依需求選用 CSR (Vite) 或 SSR (Next.js/Remix)

例如：跟 Facebook/IG 同等級的技術

Headless 前後端分離

確保資料資產獨立，未來可擴充 App

例如：換網站皮不用動到骨架

圖片自動優化模組

自動轉 WebP 與 Lazy Load

例如：讓圖片載入飛快

模組化組件庫

方便未來擴充維護

例如：修改按鈕一次全站生效

錯誤日誌監控 (Logging)

串接 Sentry 或 Supabase Logs

例如：比客戶先發現 Bug

API Rate Limiting

防止惡意流量攻擊

例如：保護主機不被癱瘓
會員、電商與金流整合19 項

多層級商品分類

樹狀分類結構規劃

例如：大衣 > 冬季 > 女裝

購物車體驗優化

側滑購物車或彈窗提示

例如：不打斷逛街體驗

結帳流程簡化 (Checkout)

移除不必要欄位

例如：一頁式結帳

訪客結帳功能

降低結帳門檻

例如：不用註冊也能買

第三方金流串接

綠界/藍新/紅陽 API

例如：接收刷卡功能

多元支付設定

信用卡/ATM/超商代碼/LinePay

例如：滿足各種付款習慣

物流地圖整合

7-11/全家/萊爾富 C2C/B2C 地圖

例如：選擇取貨門市

運費規則引擎

滿額免運、外島加給

例如：自動計算運費

電子發票串接

自動開立與作廢 (需外掛/API)

例如：合法合規

訂單通知信系統

交易狀態自動信件

例如：讓客戶安心

訂單匯出功能

支援 Excel/CSV 格式

例如：方便會計對帳

Supabase Auth 認證

安全的 JWT 身份驗證

例如：保護帳號安全

Magic Link 登入

免密碼信箱連結登入 (提升體驗)

例如：忘記密碼也不怕

社交一鍵登入

Google/Line/FB OAuth

例如：三秒註冊會員

忘記密碼自動化

安全的重設流程

例如：自助找回密碼

會員中心 (Dashboard)

訂單查詢、資料修改

例如：查詢歷史購買紀錄

優惠券/折扣碼系統

客製化折扣邏輯

例如：發送網紅專屬代碼

購物車持久化

換裝置後購物車商品還在

例如：手機加購物車，電腦結帳

歷史訂單查詢

完整的訂單歷程紀錄

例如：查看過去買了什麼
內容管理與 SEO 優化14 項

無限量圖文上架協助

您提供，我們幫您搬

例如：省去上架時間

圖片無損壓縮

TinyPNG 批次處理

例如：節省主機空間

語意化 HTML 標籤

H1-H6 結構優化

例如：讓 Google 看懂文章結構

Meta Title/Desc 撰寫

針對重點頁面優化

例如：提升搜尋點擊率

圖片 Alt 屬性檢查

提升圖片搜尋排名

例如：讓圖片也能被搜尋到

Open Graph 社群設定

FB/Line 分享預覽圖

例如：分享連結更吸睛

JSON-LD 結構化資料

標記商品/文章/商家資訊

例如：搜尋結果顯示價格與庫存

Sitemap.xml 生成

提交給搜尋引擎

例如：加快索引速度

Robots.txt 設定

引導爬蟲路徑

例如：告訴 Google 哪裡該爬

Canonical 網址宣告

避免重複內容扣分

例如：集中頁面權重

麵包屑導航 (Breadcrumbs)

強化網站結構連結

例如：讓爬蟲知道頁面層級

影音嵌入優化

延遲載入 (Lazy Load) 第三方影片

例如：避免影片拖慢速度

404 斷鏈檢測

掃描並修復失效連結

例如：避免死網址影響排名

法律聲明頁面

隱私權/服務條款範本提供

例如：Google 廣告必備
數據追蹤與自動化12 項

GA4 流量分析埋設

完整數據追蹤

例如：看誰來過網站

GTM 標籤管理容器

方便未來行銷擴充

例如：行銷人員可自行埋 code

Pixel 廣告像素

Meta/Line Tag 埋設

例如：投放再行銷廣告

GSC 站長工具驗證

監控搜尋表現

例如：查看關鍵字排名

Line 官方帳號導流

懸浮按鈕或視窗

例如：引導私訊諮詢

Cookie 同意橫幅

符合基礎法規提示

例如：符合歐盟 GDPR

電商事件轉換追蹤

AddToCart/Purchase 事件

例如：計算廣告投報率

熱點圖 (Heatmap)

Hotjar/Clarity 使用者行為錄影

例如：看使用者都點哪裡

行政自動化腳本 (n8n)

串接 API 自動化流程

例如：填表單自動 Line 通知

業績報表自動寄送

定期 Email 摘要

例如：每天早上收到業績日報

庫存低水位通知

Line 自動通報補貨

例如：避免缺貨少賺

客製化數據儀表板

整合多方數據源 (選配)

例如：戰情室儀表板
測試、資安與部署15 項

SSL 數位憑證

全站 HTTPS 加密

例如：Chrome 網址列顯示鎖頭

跨瀏覽器相容測試

Chrome/Safari/Edge/Firefox

例如：確保所有客人都看得到

實機操作測試

iOS/Android 主流機型

例如：用真手機測試手感

表單收信測試

確保聯絡管道暢通

例如：避免漏接商機

金流沙盒全流程

下單/付款/退款測試

例如：確認錢能進來

網站備份機制

自動化備份排程

例如：網站掛掉能復原

網站防火牆 (WAF)

Wordfence 資安外掛

例如：阻擋駭客攻擊

SQL Injection 防護

Supabase ORM 層級防護

例如：資料庫安全

XSS 跨站腳本防護

輸入內容過濾

例如：防止惡意程式碼

CSRF 防護

跨站請求偽造保護

例如：防止偽造請求

容器化隔離部署

Docker/Zeabur 環境

例如：系統互不影響

CDN 全球加速

Cloudflare 快取配置

例如：國外開網站也快

壓力測試 (選配)

模擬高併發流量

例如：雙11也不怕網站掛掉

Core Web Vitals 效能調整

針對 Core Web Vitals 優化

例如：提升使用者體驗與排名

無障礙輔助 (A11y) 檢測

基礎無障礙規範檢查

例如：讓身障人士也能使用
交付、培訓與維護14 項

原始碼/檔案完整交付

GitHub 權限轉移

例如：您真正擁有網站資產

Supabase 專案移交

確保資料所有權歸客戶

例如：資料不被綁架

管理員最高權限移交

帳號密碼清單

例如：完全掌握後台

服務帳號資產清單

網域/主機/金流帳密

例如：所有資產一目瞭然

API 文件說明 (若有)

供未來廠商串接

例如：方便未來擴充 APP

系統操作線上教學

Google Meet 錄影留存

例如：隨時複習操作

操作教學錄影檔

重點功能錄影 (可重複觀看)

例如：新員工也能自己學

上線後保固 (30天)

非人為 Bug 免費修復

例如：上線初期安心保障

維護合約說明

後續維護報價 (實報實銷或月費)

例如：清楚後續維護成本

長年顧問陪跑內容

雙週策略會議與技術顧問

例如：隨時調整技術航向

無上限技術微調

既有功能優化吃到飽

例如：想到什麼改什麼

技術供應商評估

協助審核外部報價

例如：避免被廠商當肥羊

緊急救援優先權

SLA 優先處理

例如：網站出事隨叫隨到

創業者經驗共享

商業模式深度交流

例如：少走創業冤枉路

依需求搭配

把周邊工作，一起接好。

查看可加購的支援項目
行政

企業信箱設定

Google Workspace/Zoho 自定義網域信箱

行銷

Google 商家檔案優化

申請與設定地圖商家，優化在地搜尋

設計

社群媒體封面設計

製作 FB/Line 官方帳號品牌封面圖

客服

真人客服浮動視窗

串接 FB Messenger/Line 到網站右下角

行銷

首購優惠彈窗設計

製作「訂閱享折扣」的行銷 Pop-up

行銷

EDM 行銷郵件版型

製作 HTML 電子報模板 (Mailchimp/Brevo)

整合

Linktree 風格多連結頁

製作 IG 專用 Bio Link 頁面

線下

專屬 QR Code 生成

設計帶有品牌 Logo 的高解析度 QR Code

資安

右鍵防盜鎖定

禁止複製圖片或文字

資安

圖片浮水印系統

自動為上傳圖片加上品牌浮水印

效能

Cloudflare CDN

設定快取規則與隱藏真實 IP

數據

熱點圖 (Heatmap)

安裝 Clarity/Hotjar 錄製操作行為

SEO

關鍵字策略報告

提供 20 組高流量產業關鍵字建議

競品

競品深度解構報告

分析一位主要對手的技術與流量

法規

隱私權條款客製範本

提供較完整的法律條款範本

教學

專屬操作錄影 (3支)

針對常用後台功能錄製教學

設計

網站 Favicon 動態化

瀏覽器分頁小圖示微動畫

行銷

活動倒數計時器

開發可重複使用的限時特賣模組

自動化

訂單同步試算表

新訂單自動寫入 Google Sheet (簡易版)

體驗

404 頁面彩蛋設計

設計互動式錯誤頁面，提升品牌感

整合

Line 官方帳號串接

網站表單直接推送到 LINE 官方帳號

SEO

結構化資料標記

加入 Schema.org 提升搜尋曝光

效能

圖片壓縮與 WebP 轉換

自動優化所有圖片載入速度

數據

GA4 事件追蹤設定

設定 5 個關鍵轉換事件

策略

消費者旅程圖繪製

視覺化客群從進站到成交的關鍵接觸點

合作前的常見問題

先把疑問說清楚。

我們會擁有網站的原始碼嗎？

是的。與許多「租用型」平台不同，我們在結案後會將 GitHub 原始碼權限與主機帳號完全移交給您。您擁有 100% 的數位資產所有權，未來可自由挑選工程師進行維護，不受廠商綁架。

上線後的維護費用如何計算？

我們提供靈活的維護方案：您可以選擇「實報實銷」（有修改才付費），或選擇「長年顧問約」（NT$72,000/月起跳，含策略對接、監控與迭代節奏）。專案建置完成後，也可依需求轉為顧問約持續維運。

這套系統可以跟我們現有的 ERP 或 LINE 串接嗎？

這正是「全客製系統」的優勢。我們採用的 Headless 架構具備高度擴充性，能透過 API 串接您現有的商業工具。無論是串接 Google Sheets 自動化、LINE 官方帳號 通知，或是與大型 ERP 串接資料，都在我們的執行細項中。

入門方案 (WP) 與客製方案 (React) 的最大差別在哪？

入門方案使用既有平台與版型，建置較快，功能依平台支援範圍調整。客製方案則依需求設計畫面、資料結構與操作流程，需要較多開發時間。效能與資安要求會在報價及驗收項目中確認。

專案大約需要多久才能上線？

入門方案（WP）通常在 4-6 週內可交付；全客製系統與陪跑方案因涉及深入的訪談與客製開發，通常需要 8-12 週。我們會提供明確的甘特圖，分階段交付產出，讓您隨時掌握進度。

我不懂技術，該如何參與專案決策？

我們用你聽得懂的話講進度跟取捨。長年顧問約裡，我們會一起拍板該不該做、先做哪件。你顧生意，技術我們扛。

不需要先準備一份規格書

從目前最卡的事，開始聊。

預約三十分鐘