QR Code 完整生成教學：規格、容錯率、隱藏陷阱 + 線上產生器

寫給：要做活動傳單、餐廳菜單、名片的設計師，行銷想做 campaign tracking 的 PM，以及好奇 LINE Pay / 街口收款條碼背後原理的工程師。

QR Code（Quick Response Code）由日本 DENSO WAVE 於 1994 年發明，原本用於汽車工廠零件追蹤，2010 年代被智慧型手機鏡頭普及帶動成全民工具。2020 年疫情後台灣實聯制讓 QR Code 滲透到每個角落。但 80% 的人不知道：QR Code 有 40 個版本、4 種容錯率、可以嵌 Logo、能存 WiFi 密碼直接連線。本文 13 分鐘把 QR Code 的規格、設計陷阱、實務技巧一次講透。

1. QR Code 是什麼

QR Code 是一種二維矩陣條碼，用黑白方塊編碼資料。相對於一維條碼（Barcode）：

特性	一維 Barcode	QR Code
容量	約 20 字元	最大 7089 數字 / 4296 字母 / 1817 漢字
容錯	無	4 級（最高 30% 損毀仍可讀）
讀取速度	慢	快（< 0.2 秒）
360° 讀取	否（要對齊）	是

QR Code 是公開規範（ISO/IEC 18004），任何人都可以實作不需授權費。

1.1 基本結構

+-------+      +-------+
| Find  |      | Find  |    Finder Pattern（三個角的方塊）
| er    |  ……  | er    |
+-------+      +-------+
   ……  資料區  ……
+-------+
| Find  |  ……
| er    |
+-------+

主要元件：

Finder Pattern：左上、右上、左下三個 7x7 方塊（定位用）
Alignment Pattern：右下小方塊（旋轉校正）
Timing Pattern：定位線
Format Info：容錯等級與 mask pattern
Data Area：實際資料 + Reed-Solomon 糾錯碼

1.2 版本與容量

QR Code 有 40 個版本，每升一級邊長增加 4 方塊：

版本	邊長（方塊數）	最大數字容量	最大漢字容量
1	21x21	41	10
5	37x37	255	65
10	57x57	652	174
20	97x97	1852	511
40	177x177	7089	1817

實務上版本 1-10 最常用。版本越高方塊越密，手機鏡頭需更近才能讀取。

2. 5 個核心觀念

2.1 容錯等級（Error Correction Level）

等級	縮寫	可損毀比例	適用場景
Low	L	7%	乾淨環境（網頁、PDF）
Medium	M	15%	一般印刷品
Quartile	Q	25%	戶外、可能磨損
High	H	30%	嵌 Logo、戶外廣告

重點：容錯越高 → 同樣資料需要更大方塊 → QR Code 變密。一般情況選 M 即可；嵌 Logo 必選 H（要遮蓋 30% 中央區）。

2.2 編碼模式（Mode）

QR Code 內部有 4 種編碼模式，自動選最省空間的：

模式	字元集	每字 bit 數
數字	0-9	3.33
字母數字	0-9 A-Z + space + `$%*+-./:`	5.5
Byte	UTF-8 任意 byte	8
漢字	Shift-JIS	13

意義：純數字編碼最省空間。如果你的 URL 全大寫，可省空間。

2.3 內容類型（Content Type）

QR Code 可編多種結構化內容，掃描 app 會自動辨認：

# 純 URL
https://supertools.tw

# WiFi（手機掃即連）
WIFI:T:WPA;S:MyNetwork;P:mypassword;;

# Email
mailto:hello@example.com?subject=Hi

# 電話
tel:+886912345678

# 簡訊
SMSTO:+886912345678:預設訊息

# vCard 名片
BEGIN:VCARD
VERSION:3.0
FN:王小明
TEL:+886912345678
EMAIL:wang@example.com
ORG:SuperTools
END:VCARD

# 地理座標
geo:25.0330,121.5654

# 行事曆
BEGIN:VEVENT
SUMMARY:會議
DTSTART:20260605T100000Z
DTEND:20260605T110000Z
END:VEVENT

2.4 安全距離（Quiet Zone）

QR Code 周圍必須留至少 4 方塊寬的空白，否則掃描器找不到 finder pattern：

■■■■■■■■■■■■■■■■■■
■                ■
■   QR Code      ■
■   實體區域      ■
■                ■
■■■■■■■■■■■■■■■■■■

實務上設計師最常犯的錯：把 QR Code 緊貼背景圖案 / 文字，導致掃不到。

2.5 顏色對比

QR Code 原本是黑白，現代可做彩色，但對比度必須 >= 40%。

✓ 深藍底 + 白色方塊
✓ 深綠底 + 米白方塊
✗ 淺灰底 + 中灰方塊（對比不夠）
✗ 紅底 + 黑方塊（紅光手電筒下變黑底，看不到）

反相（白方塊黑底）大部分掃描器支援，但部分舊 app 不支援，謹慎使用。

3. 實戰範例

範例 1：Python 生成基本 QR Code

import qrcode

img = qrcode.make("https://supertools.tw")
img.save("qr.png")

預設版本自動選、容錯 M、邊長 1（單方塊像素）。

範例 2：自訂版本與容錯

import qrcode
from qrcode.constants import ERROR_CORRECT_H

qr = qrcode.QRCode(
    version=5,
    error_correction=ERROR_CORRECT_H,
    box_size=10,    # 每方塊 10x10 像素
    border=4,       # 邊距 4 方塊
)
qr.add_data("https://supertools.tw/dev")
qr.make(fit=True)

img = qr.make_image(fill_color="black", back_color="white")
img.save("qr_v5_H.png")

範例 3：嵌入 Logo

from PIL import Image
import qrcode
from qrcode.constants import ERROR_CORRECT_H

qr = qrcode.QRCode(error_correction=ERROR_CORRECT_H, box_size=10, border=4)
qr.add_data("https://supertools.tw")
qr.make(fit=True)
qr_img = qr.make_image(fill_color="black", back_color="white").convert("RGB")

logo = Image.open("logo.png")
qr_w, qr_h = qr_img.size
logo_size = qr_w // 5  # Logo 不超過 QR Code 五分之一
logo = logo.resize((logo_size, logo_size))

pos = ((qr_w - logo_size) // 2, (qr_h - logo_size) // 2)
qr_img.paste(logo, pos)
qr_img.save("qr_with_logo.png")

重點：Logo 大小不超過 20%、容錯設 H。

範例 4：WiFi QR Code

import qrcode

ssid = "MyHomeWiFi"
password = "secret123"
encryption = "WPA"  # WPA / WEP / nopass

wifi_string = f"WIFI:T:{encryption};S:{ssid};P:{password};;"
img = qrcode.make(wifi_string)
img.save("wifi_qr.png")

iPhone 與 Android 內建相機掃描後直接跳出「加入 WiFi」按鈕。

範例 5：JavaScript 在前端生成

<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
<canvas id="canvas"></canvas>
<script>
QRCode.toCanvas(
  document.getElementById("canvas"),
  "https://supertools.tw",
  { errorCorrectionLevel: "H", margin: 4, width: 256 },
  (err) => err && console.error(err)
);
</script>

也可用 QRCode.toString(text, {type: "svg"}) 生 SVG 字串。

4. 進階技巧

4.1 動態 QR Code（短網址轉址）

直接放長 URL 會讓 QR Code 變密、難掃。改放短網址再 redirect：

原 URL：https://supertools.tw/products/electronics/phones?utm_source=...
短 URL：https://stl.tw/p1

短網址好處：

QR Code 簡潔
可換目標網址（QR Code 印好後仍可改）
可追蹤點擊（GA）

4.2 UTM 追蹤參數

行銷 QR Code 必加 UTM：

https://supertools.tw/?utm_source=poster&utm_medium=qr&utm_campaign=launch2026&utm_content=v1

Google Analytics 可分辨流量來自哪張海報、哪個版本。

4.3 自訂方塊形狀（Rounded / Circle）

qrcode Python 套件支援 styler：

from qrcode import QRCode
from qrcode.image.styledpil import StyledPilImage
from qrcode.image.styles.moduledrawers import RoundedModuleDrawer
from qrcode.image.styles.colormasks import RadialGradiantColorMask

qr = QRCode(error_correction=qrcode.constants.ERROR_CORRECT_H)
qr.add_data("https://supertools.tw")
img = qr.make_image(
    image_factory=StyledPilImage,
    module_drawer=RoundedModuleDrawer(),
    color_mask=RadialGradiantColorMask(
        center_color=(50, 50, 200),
        edge_color=(0, 0, 0),
    ),
)
img.save("fancy_qr.png")

但要謹慎：部分舊掃描器不支援非標準方塊。先用主流手機相機 app 測試。

4.4 SVG 向量輸出

印刷品需要無損放大：

import qrcode
import qrcode.image.svg

factory = qrcode.image.svg.SvgImage
img = qrcode.make("https://supertools.tw", image_factory=factory)
img.save("qr.svg")

SVG 在 Illustrator / Inkscape 中可任意縮放、改色。

4.5 批次生成（活動入場券）

每張票一個唯一 QR Code：

import qrcode, uuid, csv

with open("tickets.csv", "w") as f:
    writer = csv.writer(f)
    writer.writerow(["ticket_id", "qr_path"])
    for i in range(1000):
        ticket_id = uuid.uuid4().hex[:12]
        url = f"https://event.example.com/check/{ticket_id}"
        img = qrcode.make(url)
        path = f"tickets/{ticket_id}.png"
        img.save(path)
        writer.writerow([ticket_id, path])

入口用手機掃 QR Code → 後端驗證 → 標記入場。

5. 常見錯誤與解法

錯誤 1：掃不到（沒留 quiet zone）

症狀：QR Code 印在傳單上手機掃不到。根因：邊距小於 4 方塊。解法：border=4 以上，或設計留白區。

錯誤 2：印出來太小

症狀：名片上的 QR Code 太小掃不出。根因：方塊尺寸 < 0.4mm（手機相機解析度極限）。解法：實體最小邊長 = (版本 4 + 17) × 0.4mm，例如版本 5 至少 14.8mm。安全選 25mm。

錯誤 3：嵌 Logo 後讀不到

症狀：Logo 太大、容錯設低。根因：超過容錯能力。解法：Logo 不超過 20% × 容錯 H，且置中。

錯誤 4：URL 太長變超密

症狀：版本 10+ 方塊密到要近距離才能掃。根因：URL 含 long query string。解法：用短網址服務轉址。

錯誤 5：色彩反相被擋

症狀：白色方塊深色底，部分 app 掃不到。根因：舊版掃描器只認黑底白方塊。解法：除非設計強烈需求，否則用標準黑白；如要反相先大範圍實測。

6. 用 SuperTools 線上版完成相同任務

不想 pip install qrcode？打開 SuperTools QR Code 工具：

多種內容類型：URL / WiFi / vCard / Email / SMS / Calendar event
即時預覽：邊輸入邊看 QR Code 變化
容錯切換：L / M / Q / H 一鍵測試
Logo 上傳：拖檔嵌入，自動配置容錯 H
顏色客製：前景 / 背景顏色 picker
下載格式：PNG / SVG / PDF
批次模式：上傳 CSV 一次產 1000 張

工具完全 client-side，輸入內容不會上傳（包含 WiFi 密碼）。

實際使用流程：

開 supertools.tw/design/qrcode
選內容類型「WiFi」
填 SSID + 密碼
容錯選 H、Logo 上傳店家標誌
下載 SVG 印在桌牌上

立即使用 SuperTools QR Code 工具：https://supertools.tw/design/qrcode

7. 其他語言實作

Python

import qrcode
qrcode.make("https://supertools.tw").save("qr.png")

Node.js

const QRCode = require("qrcode");
QRCode.toFile("qr.png", "https://supertools.tw");

Go

import "github.com/skip2/go-qrcode"
qrcode.WriteFile("https://supertools.tw", qrcode.Medium, 256, "qr.png")

Rust

use qrcode::QrCode;
use qrcode::render::svg;
let code = QrCode::new(b"https://supertools.tw").unwrap();
let svg = code.render::<svg::Color>().build();

Bash

qrencode -o qr.png "https://supertools.tw"
qrencode -o qr.svg -t SVG "https://supertools.tw"

8. FAQ

Q1：QR Code 有版權嗎？ 規範是 ISO 標準（免費使用）。商標權屬 DENSO WAVE 但不收取使用授權費。

Q2：可以追蹤掃描次數嗎？ 直接放長 URL 不行；用短網址服務（bit.ly、自架）可記錄點擊。

Q3：手機相機支援所有 QR Code 嗎？ iOS 13+ 與 Android 9+ 原生相機支援。舊機需下載 app。

Q4：能讀加密 QR Code 嗎？ QR Code 本身只是編碼，內容可加密（傳 base64 編碼的密文），但讀取後需要應用程式解密。

Q5：最大可以塞多少資料？ 版本 40 + 容錯 L 可塞 4296 字母（約一頁文章）。但建議不超過 200 字元否則太密。

9. 實戰案例研究

案例 1：餐廳菜單 QR Code 在強光下掃不到

某連鎖咖啡桌牌印 QR Code 連結電子菜單。室外座位午後陽光直射時 60% 掃不到。

debug：

桌牌反光（亮面護貝）→ 手機鏡頭 over-exposure
印刷顏色用淺灰底（咖啡店風格），對比度只 2.8:1（標準需 ≥ 5:1）
QR Code 印太小（30mm 邊長），相機要靠很近才能對焦

修法：

改霧面護貝
改純白底
邊長改 45mm
容錯改 H + 嵌品牌 Logo

問題率從 60% 降到 5%（剩下都是手機鏡頭髒）。

案例 2：實聯制 QR Code 印太密無法掃

2021 疫情期間台灣實聯制，部分小店把多個店家 QR Code 集中印一張海報。每個 QR Code 縮到 20mm × 20mm。

問題：URL 含完整店家 ID + 時間戳，QR Code 變成版本 15+（85x85 方塊），20mm 印刷 = 每方塊 0.23mm，遠低於手機相機 0.4mm 解析下限。

修法：每店 QR Code 至少 40mm × 40mm，或 URL 改短網址降版本。

案例 3：WiFi QR Code 密碼含特殊字元失敗

某 Airbnb 房東印 WiFi QR Code，密碼是 MyHom3@2026!。掃描後手機說「無法連線」。

debug：QR Code 內容是 WIFI:T:WPA;S:MyNet;P:MyHom3@2026!;; —— ; 是 QR Code WiFi 格式的分隔符，密碼中含 ; 會切錯。

修法：標準允許跳脫 \;：

WIFI:T:WPA;S:MyNet;P:MyHom3@2026!\;extra;;

但實際 iOS/Android 對跳脫支援不一致。最佳做法：密碼避開 ; : , \。

教訓：QR Code 內結構化資料各家解析略異，產生前測試主流手機。

10. 結論 + 延伸閱讀

QR Code 是被嚴重低估的設計工具。理解版本、容錯、quiet zone 三件事後，你可以做出兼具美感與可讀性的高品質碼。下次要做傳單或菜單時，先到 SuperTools 線上產生器試不同設定，再下載 SVG 印刷，避免低解析 PNG 放大模糊。三條黃金法則：戶外印霧面、邊長至少 35mm、結構化資料避開特殊分隔符。