Cách làm menu QR cho quán: thiết kế menu, tạo mã, in để bàn

Cách làm menu QR cho quán cà phê, nhà hàng: đưa menu lên một đường link dễ đọc trên điện thoại, tạo mã QR có màu và logo quán, để lề trắng đủ rộng, thiết kế thẻ để bàn A5 rồi kiểm tra file in và quét thử. Mình làm thật trên công cụ ColorME với một quán mẫu và giải mã lại từng file tải về.

Làm menu QR cho quán gồm ba việc nối nhau: đưa menu lên mạng thành một đường link, tạo mã QR trỏ tới link đó, rồi in mã lên thẻ để bàn sao cho khách ngồi xuống là quét được. Phần dễ hỏng nhất không phải thiết kế mà là khâu in: mã quá nhỏ, màu quá nhạt, lề trắng bị cắt mất. Bảng dưới là bản tóm tắt, phần sau đi từng bước với một quán mẫu.

Ba phần của một menu QR: trang menu online, mã QR tải thật từ công cụ Tạo mã QR (giải mã lại ra đúng link), và thẻ để bàn A5. Quán Nắng Sớm, logo và menu do ColorME tự dựng.

Quán mẫu trong bài tên Nắng Sớm, logo và menu do ColorME tự dựng. Đường link menu là https://example.com/nang-som/menu: tên miền example.com được dành riêng cho ví dụ, nên mã QR trong bài không dẫn tới trang của ai. Phần tạo mã mình làm thật trên công cụ của ColorME, chưa đăng nhập, rồi giải mã lại các file tải về bằng một trình đọc QR chạy trên máy (thư viện ZXing) để chắc mã đọc ra đúng link.

Menu QR là gì, khác gì menu giấy?

Menu QR là menu đặt trên mạng, khách mở bằng cách quét một mã QR in trên bàn. Mã QR chỉ chứa đường link; nội dung menu nằm ở trang mà link trỏ tới. Vì vậy:

• Đổi món, đổi ảnh: sửa trang menu, không cần in lại mã, miễn là đường link giữ nguyên.
• Đổi đường link: phải tạo mã mới và in lại, trừ khi bạn dùng một link trung gian (xem phần cuối bài).
• Menu giấy vẫn cần cho khách không dùng điện thoại hoặc điện thoại hết pin. Nhiều quán giữ một hai cuốn ở quầy.

Nếu bạn đang thiết kế lại cả cuốn menu giấy, hai bài này đi sâu phần đó: kích thước menu nhà hàng, quán cà phê và font chữ menu đẹp. Bài này chỉ nói phần menu QR.

Bước 1. Đưa menu lên mạng thành một đường link

Có hai cách phổ biến, chọn theo việc bạn sửa menu thường xuyên đến đâu:

Cách lấy link chia sẻ của file PDF, Google Drive và Google Form để làm mã QR mình đã viết từng bước ở bài tạo mã QR cho tài liệu, nên không nhắc lại ở đây. Điều riêng của menu là khách đọc trên điện thoại, một tay, trong ánh sáng quán. Trang menu mẫu của Nắng Sớm vì thế đi theo vài nguyên tắc: một cột, chữ món to, mô tả một dòng, các mục (cà phê, trà, bánh) là nút bấm ở đầu trang, và số bàn hiện ngay trên cùng.

Trang menu mẫu dàn cho điện thoại: số bàn trên cùng, các mục là nút bấm, một cột, mô tả một dòng. Thiết kế mẫu của ColorME.

Trước khi làm mã, hãy mở link menu trên chính điện thoại của bạn, ở chế độ ẩn danh hoặc khi chưa đăng nhập. Nếu bạn phải đăng nhập mới xem được, khách cũng vậy, và mã QR đẹp đến đâu cũng vô ích.

Bước 2. Tạo mã QR cho link menu

Mình dùng công cụ Tạo mã QR của ColorME. Trang ghi ở phần câu hỏi thường gặp: "Có. Tạo mã QR miễn phí, không cần đăng nhập, không giới hạn số mã và không có watermark." Mình làm toàn bộ khi chưa đăng nhập. Về dữ liệu, câu được duyệt cho công cụ này là: "Nội dung bạn nhập và mã QR được tạo ngay trên trình duyệt, không gửi lên máy chủ."

Dán link menu vào ô Link

Công cụ có ba chế độ: Link, Văn bản và WiFi. Với menu, chọn Link rồi dán đường link. Mã hiện ngay ở khung xem trước bên trái, góc trên ô nội dung ghi "Link · 33 ký tự". Trình đọc mã có sẵn của Chrome đọc khung xem trước ra đúng link.

Chế độ Link, dán đường link menu: mã hiện ngay, góc trên ghi Link · 33 ký tự. Ảnh chụp công cụ thật, chưa đăng nhập.

Màu mã: đậm trên nền sáng, đừng chọn màu quá nhạt

Bấm Tuỳ chỉnh ở mục Màu để chọn màu mã và màu nền, hoặc dùng các cặp màu có sẵn. Mình thử chọn màu vàng nhạt cho mã trên nền trắng: công cụ hiện ngay dòng cảnh báo "Tương phản thấp, khó quét". Đổi sang nâu cà phê đậm (#3B2416) trên nền kem (#FFF4E3), màu của quán mẫu, thì cảnh báo biến mất. Mình cũng thử đảo màu, mã trắng trên nền nâu: công cụ cũng báo tương phản thấp.

Chọn mã vàng nhạt trên nền trắng: công cụ báo ngay Tương phản thấp, khó quét.

Thêm logo quán ở giữa

Mục Logo ở giữa nhận file ảnh logo. Trang công cụ giải thích: "Khi có logo, mã dùng mức sửa lỗi cao nhất nên vẫn quét tốt. Hãy dùng logo đơn giản và thử quét bằng vài điện thoại trước khi in." Mức sửa lỗi là phần dữ liệu dự phòng trong mã: QR có bốn mức L, M, Q, H, và theo trang của Denso Wave (công ty tạo ra mã QR), mức càng cao thì mã chịu được càng nhiều phần bị che hoặc bẩn, đổi lại mã có nhiều ô hơn.

Mình kiểm tra trên file tải về: không có logo, mã đọc ra mức M, 29 × 29 ô; thêm logo, mã tự chuyển sang mức H, 33 × 33 ô. Logo của Nắng Sớm là một ô vuông nền đặc, ít chi tiết, đúng kiểu trang công cụ khuyên.

Mã nâu cà phê trên nền kem, logo quán mẫu ở giữa. File tải về đọc ra mức sửa lỗi H, 33 × 33 ô, đúng link.

Khung có nhãn và lề trắng

Mục Khung & lề có ba kiểu khung: Không, Viền và Có nhãn. Kiểu Có nhãn thêm một dòng chữ dưới mã; mình gõ "Quét để xem menu". Thanh Lề trắng chỉnh khoảng trống quanh mã từ 0 đến 6, mặc định là 2. Với thẻ để bàn mình kéo lên 4 (lý do ở phần lề trắng bên dưới).

Khung Có nhãn với dòng Quét để xem menu, lề trắng kéo lên 4.

Tải PNG hay SVG?

Trang công cụ trả lời: "PNG cho màn hình và mạng xã hội. SVG cho in ấn như tờ rơi, standee, bao bì vì phóng to bao nhiêu cũng không vỡ." Nếu bạn gửi file cho nhà in hoặc đặt vào file thiết kế, lấy SVG. Nếu chỉ in vài tờ ở nhà hay dán vào Canva, PNG cũng được, miễn là không kéo phóng to một file nhỏ.

Lề trắng quanh mã: mình đo thử trên file tải về

Lề trắng (quiet zone) là vùng trống quanh mã giúp camera nhận ra đâu là mép mã. Denso Wave ghi: "QR Code requires a four-module wide margin at all sides of a symbol", tức lề rộng bằng 4 ô (module) ở mỗi cạnh.

Mình tải cùng một mã menu (link 33 ký tự, mã 29 × 29 ô) ở các mức lề 0, 2, 4, 6, rồi đo trên file PNG và giải mã lại bằng ZXing:

Hai điều rút ra. Một: số lề trong công cụ đúng bằng số ô trắng quanh mã. Hai: file luôn rộng 1024 px, nên lề càng lớn thì phần mã trong file càng nhỏ. Khi đặt mã lên thẻ, hãy tính bề rộng của chính mã chứ không phải bề rộng file.

Trên file sạch, cả mã không có lề vẫn đọc được vì trình đọc trên máy làm việc với ảnh hoàn hảo. Khi in, mã nằm sát mép giấy hay sát một mảng màu đậm thì camera dễ nhầm. Vì vậy với thẻ để bàn mình để lề 4 như Denso Wave khuyên, và đặt mã trên một ô nền sáng riêng chứ không đặt thẳng lên nền màu của thẻ.

File PNG tải thật ở lề 0, 2, 4, 6, và cùng menu với link 33 ký tự (29 × 29 ô) so với link 125 ký tự (49 × 49 ô). Đo và giải mã bằng ZXing; mức 4 ô theo Denso Wave.

Bước 3. Thiết kế thẻ để bàn (table tent) để mã quét được

Thẻ để bàn thường là tờ gập đứng hình chữ A, hoặc một tờ cắm vào kệ mica. Quán mẫu dùng khổ A5 (148 × 210 mm). Mặt trước của Nắng Sớm chỉ có bốn thứ: tên quán, một câu kêu gọi to "Quét mã, xem menu", mã QR và số bàn.

Thẻ để bàn A5 của quán mẫu với mã QR thật: đường cắt, vùng an toàn 5 mm và các số đo trên file in.

Vài nguyên tắc mình áp dụng:

• Mã to, đặt ở giữa. Trang công cụ khuyên in mã rộng ít nhất khoảng 2 cm cho danh thiếp và "lớn hơn với poster, standee. Người quét đứng càng xa thì mã cần càng lớn." Trên thẻ A5 của quán mẫu, phần mã rộng 60,7 mm, mỗi ô khoảng 1,84 mm; khách ngồi cách thẻ chừng một sải tay nên mình chọn rộng tay.
• Mã nằm trên ô nền sáng, kể cả khi thẻ có nền màu đậm. Ô này vừa là lề trắng, vừa tách mã khỏi các hình trang trí.
• Một dòng hướng dẫn ngay dưới mã: "Mở camera điện thoại, hướng vào mã." Khách lớn tuổi sẽ cần dòng này.
• Số bàn nếu quán phục vụ tại bàn, để khách gọi món khỏi phải đi hỏi.
• Không đặt mã sát mép hay sát nếp gập. Vùng an toàn theo trang Kiểm tra file in của ColorME: "Là vùng cách đường cắt 5 mm vào trong. Chữ và chi tiết quan trọng nên nằm trong vùng này để không bị xén mất." Phần nền thì kéo ra ngoài đường cắt (tràn lề) như trang đó ghi: "Là phần nền kéo dài ra ngoài đường cắt, thường 3 mm, để khi xén giấy không bị hở viền trắng."

File thẻ mẫu mình xuất ở khổ A5 cộng tràn lề 3 mm mỗi cạnh (154 × 216 mm), độ phân giải 300 ppi, rồi thả vào công cụ Kiểm tra file in để xem trước khi gửi nhà in:

Thả file thẻ vào Kiểm tra file in, chọn A5: đủ 300 ppi, vừa khổ kèm tràn lề, lưu ý hệ màu RGB. Ảnh chụp công cụ thật.

Ở khổ A5, công cụ báo "Độ phân giải 300 ppi", "Đủ nét khi in A5 (148 × 210 mm)", ảnh vừa khổ giấy kèm tràn lề, và vẽ vùng an toàn 5 mm lên thẻ: tên quán, mã, dòng hướng dẫn và số bàn đều nằm trong. Có hai lưu ý. File của mình là RGB, công cụ nhắc: "Nhà in sẽ đổi sang CMYK, màu tươi (xanh neon, hồng) có thể nhạt đi." Và lúc mới thả file, công cụ để mặc định khổ A4 nên báo "Độ phân giải thấp: 214 ppi"; phải bấm Tuỳ chỉnh, chọn A5 thì kết quả mới đúng với thẻ.

Mình cũng giải mã lại chính file thẻ để bàn này bằng ZXing: mã vẫn đọc ra đúng link sau khi đặt lên nền màu và ô nền kem.

Bước 4. Quét thử trước khi in hàng loạt

Trang công cụ nhắc "thử quét bằng vài điện thoại trước khi in", và đây là bước nhiều quán bỏ qua. Mình làm phần kiểm tra trên máy với các file tải về; phần quét bằng điện thoại thật trên bản in, bạn nên tự làm với máy in và giấy của mình:

Khi in thử, kiểm tra thêm:

• Quét ở khoảng cách khách ngồi, dưới đèn của quán (đèn vàng, đèn mờ buổi tối làm giảm tương phản).
• Thử cả iPhone và Android, cả máy cũ.
• Nếu thẻ được ép plastic bóng, thử ở góc có phản chiếu đèn trần.
• Mở link xong, xem trang menu có tải nhanh qua mạng di động không.

Bàn nhỏ hai ghế như thế này chỉ cần một thẻ đặt giữa bàn, mặt có mã quay về phía ghế; bàn dài thì nên đặt hai thẻ để khách ở hai đầu đều với tới. Ảnh: Linh Quach / Unsplash.

Đổi menu sau khi đã in mã thì sao?

Mã tạo ở công cụ là mã tĩnh. Trang ghi: "Không. Đây là mã QR tĩnh chứa trực tiếp nội dung nên dùng được mãi mãi, không phụ thuộc máy chủ nào." Và về đổi link: "Không, vì mã QR tĩnh chứa trực tiếp nội dung. Nếu cần đổi link sau này, hãy dùng một đường link trung gian mà bạn có thể thay đổi đích đến."

Cách làm thực tế cho quán:

• Giữ nguyên link, đổi nội dung: sửa trang menu hoặc thay file trong cùng một link chia sẻ. Mã in rồi vẫn dùng tiếp.
• Dùng link trung gian: một đường link ngắn trên tên miền của quán (ví dụ trang /menu) mà bạn có thể trỏ sang trang khác khi cần.
• Đừng đưa thông tin hay đổi vào chính mã: mùa, năm, mã giảm giá trong link sẽ buộc bạn in lại.

Lỗi hay gặp khi làm menu QR

Những gì mình chưa thử và công cụ không làm

• Mình không in và không quét bằng điện thoại thật. Các kết quả quét trong bài là giải mã file PNG tải về (và file SVG chuyển sang ảnh) bằng ZXing trên máy, cộng với trình đọc mã có sẵn của Chrome trên khung xem trước.
• Công cụ không lưu trữ menu và không tạo trang menu: bạn cần tự có link menu.
• Mã là mã tĩnh: không đếm lượt quét, không đổi đích đến sau khi in.
• Mình không thử nhập link rất dài; link càng dài mã càng nhiều ô, in nhỏ sẽ khó quét hơn.

Nếu bạn muốn tự dựng menu, thẻ để bàn và cả bộ nhận diện cho quán bằng Photoshop, khoá Photoshop của ColorME có phần thiết kế ấn phẩm in. Quán cần thêm mã cho khách vào mạng thì xem bài tạo mã QR WiFi; còn muốn đặt mã lên danh thiếp, xem danh thiếp điện tử có mã QR.

Câu hỏi thường gặp

Làm menu QR có mất phí không?

Phần tạo mã ở công cụ ColorME thì trang ghi: "Có. Tạo mã QR miễn phí, không cần đăng nhập, không giới hạn số mã và không có watermark." Chi phí còn lại là nơi đặt menu online và tiền in thẻ, tuỳ cách bạn chọn.

Mã QR menu có hết hạn không?

Mã tĩnh không hết hạn. Mã chỉ ngừng dùng được khi đường link bên trong không còn mở được, ví dụ file bị xoá hoặc tắt chia sẻ.

In mã QR menu cỡ bao nhiêu?

Trang công cụ khuyên "Tối thiểu khoảng 2 x 2cm cho danh thiếp, lớn hơn với poster, standee." Trên thẻ để bàn A5 của quán mẫu, phần mã rộng 60,7 mm, quanh mã có hơn 5 ô trắng. Dù chọn cỡ nào, hãy in thử và quét ở khoảng cách khách ngồi.

Có chèn logo quán vào giữa mã QR được không?

Được. Khi có logo, công cụ tự dùng mức sửa lỗi cao nhất. Mình đã giải mã lại file có logo tải về và đọc đúng link. Dùng logo đơn giản, nền đặc, và quét thử trước khi in.

Đổi món trong menu có phải in lại mã không?

Không, nếu đường link giữ nguyên: bạn chỉ sửa trang menu hoặc thay file trong cùng link. Đổi sang link khác thì phải tạo mã mới.