テキスト、商品番号、URL、識別子からバーコード画像を作成します。シンボル体系を選び、ダウンロード前に画像サイズを正確に指定できます。
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 "バーコード生成器" that meets the requirements below.
## Goal
Build a tool that renders linear barcodes such as Code 128 and EAN-13 at a chosen size.
## Core features
- Formats: Code 128, EAN-13, UPC-A, Code 39
- Width and height in pixels
- Optional human-readable text below
- Download SVG/PNG
- Automatic EAN-13 check digit
## Inputs
- Value to encode
- Format, width, height
## Outputs
- Barcode image
- Final value including check digit
## Edge cases and handling rules
- Validate allowed characters and lengths per format (EAN-13: 12–13 digits)
- Error when a supplied check digit is wrong
- Output exactly the requested dimensions
- Note that retail EAN numbers must be issued by GS1
## 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)
- Code 128 '123456789012' at 500×160 gives an SVG with width=500 and height=160
- Check digit is computed for EAN-13 '880123456789'
- Invalid characters raise an error
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-barcode-generator/SKILL.md に保存すると、このツールを作る・直すたびに再利用できます。
---
name: build-barcode-generator
description: Use when building or changing a バーコード生成器 tool. Build a tool that renders linear barcodes such as Code 128 and EAN-13 at a chosen size.
---
# Build: バーコード生成器
## Goal
Build a tool that renders linear barcodes such as Code 128 and EAN-13 at a chosen size.
## 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
- Formats: Code 128, EAN-13, UPC-A, Code 39
- Width and height in pixels
- Optional human-readable text below
- Download SVG/PNG
- Automatic EAN-13 check digit
## Inputs
- Value to encode
- Format, width, height
## Outputs
- Barcode image
- Final value including check digit
## Rules
- Validate allowed characters and lengths per format (EAN-13: 12–13 digits)
- Error when a supplied check digit is wrong
- Output exactly the requested dimensions
- Note that retail EAN numbers must be issued by GS1
- 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
- [ ] Code 128 '123456789012' at 500×160 gives an SVG with width=500 and height=160
- [ ] Check digit is computed for EAN-13 '880123456789'
- [ ] Invalid characters raise an error