碼上造門
QR 工具生成器 介紹與操作說明

不用寫程式,依六個步驟做出具有自己品牌的 QR 碼工具。製作過程與成品都在瀏覽器內完成,不串接 AI、API、帳號或資料庫。

🧩 六個步驟📦 三種輸出🔒 本機處理
📘 介紹與操作說明(簡報版)|🐻 Winnie EdTech Lab
產出工具畫面
CONTENTS

目錄

點選章節可直接跳頁
01 工具介紹

這是什麼工具?

「碼上造門」是 QR 碼工具的生成器。使用者依序設定名稱、品牌圖片、頁尾、風格與功能,最後下載一套屬於自己的 QR 碼產生器,可離線使用,也能分享或上網發布。

🛠️
設定品牌六個步驟填寫內容
即時預覽成品
➜
✅
檢查輸出自動檢查文字、圖片、
網址與配色
➜
🎒
帶走成品ZIP、單一 HTML 或
Google Apps Script
🧑‍🏫

適用對象

教師、研習學員、教務與資訊人員,也適合學校或團隊的共用工具。

💻

使用裝置

電腦與手機瀏覽器都能操作;成品也能在電腦與手機上開啟使用。

💰

建置成本

不需要帳號、伺服器或資料庫。下載後的成品可直接離線使用。

01 工具介紹

兩者的關係

🔗

碼上開門

原始的 QR 碼產生工具,把網址轉換成 QR 碼。

「把你的連結,變成一碼好事。」

🏗️

碼上造門

生成器之生成器:讓每個人做出自己的「碼上開門」,可客製、可下載、可分享。

💡
一句話說明:「碼上開門」負責產生 QR 碼;「碼上造門」負責產生每個人自己的 QR 碼工具。
02 核心特色

六個核心特色

🧩

不用寫程式

依畫面步驟填寫、選色與上傳圖片,不必了解 HTML、CSS 或 JavaScript。

👀

即時預覽

右側同步呈現成品樣貌,可切換電腦版與手機版檢查版面。

🎨

完整品牌客製

工具名稱、標題、Logo、Favicon(網站圖示)、頁尾與 QR 中央 Logo 都能設定。

🌈

六套主題

深藍數位、矩陣科技、清新校園、活力童趣、專業行政與自訂品牌,可再微調配色與字型。

🧰

功能自由組合

SVG 下載、QR 配色、中央 Logo、教學卡片、批次產生等,依情境開啟。

🔌

離線使用

成品已內建 QR 編碼程式,不必連網,也不會把網址送到外部服務。

02 核心特色

更多特色

📤

可分享

整包 ZIP 或單一 HTML,傳給同事即可使用。

🌍

可上網

可部署到 Cloudflare、GitHub Pages 或學校網站空間。

🛡️

網址檢查

只接受 HTTP/HTTPS,阻擋帳號密碼與格式錯誤的網址。

🖼️

圖片安全

每張 2 MB 以內;SVG 會檢查腳本與外部資源後轉為 PNG。

🎟️

教學 QR 卡片

含標題與用途(研習簽到、課程教材、課後回饋、加入會議)的分享圖。

📋

批次產生

每行「名稱|網址」,一次最多 30 筆,打包成 ZIP 下載。

📖

內建使用說明

產出工具內附操作、離線原理與掃描提醒,方便接手的人閱讀。

🎯

配色分離

網站配色與 QR 配色分開處理,QR 預設深碼白底,維持掃描率。

03 六個步驟

六個步驟總覽

01
基本資料工具名稱、主標題、副標題與網址欄提示
02
品牌圖像網站 Logo、Favicon、QR 中央 Logo,可一鍵同步
03
頁尾品牌品牌名稱、署名、標語、連結與互動效果
04
視覺風格選主題,再調整主色、強調色、背景與字型
05
功能選擇依使用情境勾選 SVG、配色、Logo、卡片與批次
06
檢查與輸出修正紅色項目後,下載 ZIP、HTML 或 GAS 專案
03 六個步驟

步驟 1|基本資料

設定工具首頁會出現的文字,也會顯示在瀏覽器分頁。

  1. 工具名稱(必填):顯示在 Header 與分頁標題。
  2. 主標題(必填)與副標題。
  3. 標題上方小字:選填,留白即不顯示。
  4. 網址欄提示,例如「貼上網站、表單或會議連結」。
  5. 可選擇顯示「QR 在本機產生,網址不會上傳」。
基本資料 畫面

左:生成器的第一步畫面(實際操作頁面)

03 六個步驟

步驟 2|品牌圖像

三種圖片可以分開設定,也能用同一張圖片快速同步。

🏷️ 網站 Logo

顯示在工具的 Header。

🔖 Favicon(網站圖示)

顯示在瀏覽器分頁與書籤旁。

▦ QR 中央預設 Logo

放在 QR 碼中央;使用者可再更換,也可關閉。

📐 圖片規格

支援 PNG、JPG、WebP、SVG;每張最多 2 MB。

🛡️ SVG 安全處理

會先檢查腳本、事件屬性、外部資源與尺寸,通過後轉成 PNG 使用。

⚡ 小技巧

按「將網站 Logo 套用到三處」可一次完成三張圖片的設定。

03 六個步驟

步驟 3|頁尾品牌

學校、團隊或個人名稱都可以,頁尾會是使用者最後看到的品牌資訊。

  • 品牌名稱與開發/製作署名
  • 品牌標語與品牌連結(選填,僅接受 http/https)
  • 可關閉「Created with Winnie EdTech Lab」小字

🖱️ 品牌標籤互動效果

滑鼠移入、鍵盤聚焦或手機點按時,標籤會上浮、放大並出現光暈與星光提示,讓頁尾更有溫度。

💡
連結若填錯格式,第 6 步會以紅色標示,必須修正後才能輸出。
03 六個步驟

步驟 4|視覺風格

先選接近需求的主題,再微調色彩與字型。網站色彩不會改動 QR 碼的安全配色。

  • 六套主題:深藍數位、矩陣科技、清新校園、活力童趣、專業行政、自訂品牌。
  • 色彩:主色、強調色、背景色,系統會提醒對比不足的組合。
  • 文字:16–22 px 可調;字型提供圓潤清楚、現代簡潔、穩重易讀。
視覺風格 畫面

主題選擇與即時預覽(清新校園主題)

03 六個步驟

步驟 5|功能選擇

基本 QR 生成與 PNG 下載固定保留,其餘功能依使用情境選擇。

功能說明建議情境
SVG 向量下載可無限放大、不易模糊活動海報、大型輸出
QR 配色設定調整前景與背景,保留深碼淺底需要配合品牌色時
QR 中央 Logo在 QR 中央放品牌圖校內品牌工具
教學 QR 卡片輸出含標題與用途的分享圖研習簽到、課程教材
批次產生一次處理多筆名稱與網址多場活動、多份教材
使用說明工具內提供操作與掃描提醒要交給他人使用時
記住 QR 配色只儲存顏色,不儲存網址需固定配色的團隊
03 六個步驟

步驟 6|檢查與輸出

產出前會自動檢查文字、圖片、網址、配色與必要檔案,依結果決定能否下載。

× 紅色:必須修正

例如未填工具名稱或主標題、品牌連結格式錯誤。修正前下載按鈕會停用。

! 黃色:建議,仍可輸出

例如尚未加入 Logo 或 Favicon,成品會使用預設門形圖示。

檢查與輸出 畫面

第 6 步:檢查報告與三種輸出卡片

04 三種輸出

三種輸出方式

輸出方式內容適合注意
📦 完整資料夾 ZIP(推薦)index.html、style.css、app.js、vendor/assets、README、_headers離線使用、長期保存、上傳網站必須解壓縮並保留資料夾結構
📄 單一 HTML程式、樣式與圖片全部嵌入同一檔案雲端硬碟或 Email 快速分享不易長期維護
☁️ GAS Web App ZIPCode.gs(doGet)、Index.html、appsscript.json、部署說明部署成 Google 網頁應用程式GAS 網頁編輯器不能直接匯入 ZIP
⚠️
下載後請在另一台裝置開啟,並用手機實際掃描一次,確認網址與畫面正確。
04 三種輸出

GAS Web App 部署

Apps Script 網頁介面無法直接匯入 ZIP,需手動貼上兩個檔案,名稱要對應。

📌
檔案 Index.html 的檔名必須是 Index,才能和 doGet() 對應。
  1. 解壓縮 GAS ZIP,開啟 README.md。
  2. 到 script.google.com 建立新專案。
  3. 把 Code.gs 貼到預設程式檔;新增 HTML 檔並命名為 Index,貼入 Index.html。
  4. 「部署」→「新增部署作業」→「網頁應用程式」,設定存取對象後部署。
  5. 複製結尾為 /exec 的網址分享。修改後要建立新版本再更新部署。
05 產出工具

產出工具怎麼用

🔗 單一 QR 碼

貼上網址 → 確認沒有錯誤提示 → 下載 PNG 或 SVG → 用手機試掃。

🎟️ 教學 QR 卡片

輸入課程或活動名稱,選擇用途後輸出分享圖。

📋 批次產生

每行「名稱|網址」,最多 30 筆;輸出 SVG 與 PNG 的 ZIP。

產出的 QR 工具畫面

範例:產出工具輸入網址後即時產生 QR 碼

05 產出工具

QR 為什麼不連網也能產生?

QR 碼是公開的文字編碼規格,不需要 AI 理解內容,也不必把網址交給伺服器。成品內建 QR 編碼程式,瀏覽器在本機完成計算。

🔗
輸入網址只接受 http/https
➜
⌨️
JavaScript 編碼QRCode.js 產生矩陣
➜
▦
黑白方格依規格計算每個模組
➜
⬇️
SVG/PNGCanvas 與 SVG 輸出圖片
HTML

輸入欄位與按鈕

CSS

版面、品牌與互動

JavaScript

驗證、編碼與下載

QRCode.js

產生 QR 方格矩陣

SVG/Canvas

輸出清晰圖片

JSZip

批次功能打包下載

06 隱私與發布

資安與隱私

🔒
隱私優勢
網址原則上不離開使用者的裝置,工具也不要求登入、Email、會員或資料庫。
🧪
安全檢查
阻擋 javascript: 等不安全協定、含帳號密碼的網址,以及過長網址。
⚠️
必須理解
QR 碼是編碼,不是加密。任何人掃到就能讀出完整網址。

不要公開含有以下內容的 QR 碼

私人權杖、暫時授權碼、個人資料、密碼,或僅限特定人員存取的私人連結。

06 隱私與發布

掃描成功率與試掃

列印或發布前,請一定要用手機實際掃描。

✅ 配色原則

深色圖碼、淺色背景,前景與背景要有明顯對比。

  1. QR 碼保持正方形,不要拉長或壓扁。
  2. 四周保留足夠留白,不要讓文字或圖片遮住定位圖樣。
  3. 中央 Logo 不要過大;加入 Logo 後更要試掃。
  4. 海報或大型輸出優先使用 SVG。
  5. 發布後,用另一台裝置再掃一次,確認連到正確網址。
06 隱私與發布

發布到網路

☁️

Cloudflare 靜態網站

上傳完整資料夾或 ZIP;需包含 _headers、vendor/、assets/。

🐙

GitHub Pages

把資料夾內容放入儲存庫的發布來源即可。

🏫

學校網站空間

上傳整個資料夾,確認 index.html 位於根目錄。

📋
發布前檢查:index.html 位於根目錄、Favicon 與 Logo 正常顯示、頁尾連結可開啟、PNG/SVG 可下載、手機掃描結果正確。

讓每個好點子,都有簡單的入口

如果你想在自己的研習或學校做出一個 QR 工具,就從第一步開始吧。

© 2026 Developed by Winnie Lab|專業讓你稱職 熱情使你傑出 🚀