ウェブサイトのURLや連絡先、テキストをスマートフォンで読み取れるQRコード画像に変換します。名刺やチラシの印刷物に最適です。
いいえ。作成した静的QRコードは無期限でご利用いただけます。
名刺やチラシの場合、300x300ピクセル以上をおすすめします。
はい。iPhoneやAndroidの標準カメラアプリでそのまま読み取れます。
QRコードはチラシ、名刺、メニュー、パッケージのいたるところにありますが、スマートフォンで読み取りにくい印刷物も意外と多いものです。一度で読み取れるコードの作り方を紹介します。
QRコードは1994年に日本のデンソーウェーブが自動車部品の管理のために開発したもので、ISO/IEC 18004として標準化されています。四隅のうち3か所にある大きな四角形(ファインダーパターン)のおかげで、どの角度からでもすばやく読み取れます。
QRコードの構造、誤り訂正レベル(L・M・Q・H)の選び方、最小印刷サイズとクワイエットゾーン、読み取れない原因、商品バーコードとの違いを解説します。ガイドを読む →
自分用のバージョンが必要なら、作業指示プロンプトをAIチャットに貼り付けるか、スキルファイルをAIコーディングエージェントに保存してください。私たちが開発時に整理した機能、例外、テストケースが含まれています。
プロンプトとスキルは英語で提供しています。AIツールはどの言語でもよく理解できます。
Claude、ChatGPT、GeminiなどのAIチャットにそのまま貼り付けてください。
You are an experienced full-stack web developer. Build a web tool called "QRコードジェネレーター" that meets the requirements below.
## Goal
Build a tool that creates print-ready QR codes from text, URLs, Wi-Fi details and more.
## Core features
- Types: URL, text, Wi-Fi, contact (vCard)
- Error correction level L/M/Q/H
- Size, quiet zone and colour settings
- Download PNG and SVG
- Optional centre logo (level H recommended)
## Inputs
- Content and type
- Error level, size, colours, logo
## Outputs
- QR preview
- PNG/SVG files
## Edge cases and handling rules
- Warn about low contrast between modules and background
- Explain capacity errors and how to shorten content
- Escape special characters (; ,) in Wi-Fi strings
- Warn when the quiet zone is under four modules
## Implementation requirements
- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.
- Make the UI responsive and easy to use on mobile; label every input and keep everything keyboard accessible.
- Add a Copy button for results and show clear, friendly error messages for invalid input.
- Keep the core logic in functions separate from the UI so it can be unit-tested.
## Definition of done (test cases)
- 'https://example.com' decodes back to the same text with a scanner library
- Level H uses at least as many modules as level L
- SVG stays sharp when scaled
First outline your implementation plan in at most five lines, then write the complete code, and finally explain how to check the test cases above.Claude CodeなどのAIコーディングエージェントで .claude/skills/build-qr-code-generator/SKILL.md に保存すると、このツールを作る・直すたびに再利用できます。
---
name: build-qr-code-generator
description: Use when building or changing a QRコードジェネレーター tool. Build a tool that creates print-ready QR codes from text, URLs, Wi-Fi details and more.
---
# Build: QRコードジェネレーター
## Goal
Build a tool that creates print-ready QR codes from text, URLs, Wi-Fi details and more.
## Workflow
1. Review the required features, inputs and outputs below and ask about anything missing first.
2. Implement the core logic as pure functions separate from the UI.
3. Check the logic against the test cases in the verification list.
4. Build a responsive UI with an input form, a result area and a Copy button.
5. Reproduce each edge case listed under Rules and refine the error messages.
## Core features
- Types: URL, text, Wi-Fi, contact (vCard)
- Error correction level L/M/Q/H
- Size, quiet zone and colour settings
- Download PNG and SVG
- Optional centre logo (level H recommended)
## Inputs
- Content and type
- Error level, size, colours, logo
## Outputs
- QR preview
- PNG/SVG files
## Rules
- Warn about low contrast between modules and background
- Explain capacity errors and how to shorten content
- Escape special characters (; ,) in Wi-Fi strings
- Warn when the quiet zone is under four modules
- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.
## Verification
- [ ] 'https://example.com' decodes back to the same text with a scanner library
- [ ] Level H uses at least as many modules as level L
- [ ] SVG stays sharp when scaled