URLやテキストから簡単に二次元バーコードを生成し、見た目を可愛くカスタマイズして、A4サイズの用紙にレイアウトして印刷用データ（JPG/PDF）としてダウンロードできます。手帳やノートにバーコドを貼ってアプリやサイトを管理したくて作りました。

HTML コードビューア

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2次元バーコード(※QRコード) シール作成ジェネレーター</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script type="text/javascript" src="https://unpkg.com/qr-code-styling@1.6.0/lib/qr-code-styling.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'M PLUS Rounded 1c', sans-serif;
        }
        #a4-paper {
            width: 210mm;
            height: 297mm;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
            background-color: white;
            margin: 0 auto;
            transform-origin: top center;
        }
        .sticker-container {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: move;
        }
        .sticker-wrapper {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            /* padding is now set dynamically in JS */
            background-color: white;
            box-sizing: border-box;
        }
        .sticker-wrapper .qr-code {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .sticker-wrapper .qr-code img, .sticker-wrapper .qr-code canvas {
            display: block;
            width: 100%;
            height: 100%;
        }
        .sticker-container .label {
            margin-top: 4px;
            font-size: 12px;
            text-align: center;
            width: 100%;
            word-break: break-all;
            white-space: normal;
            color: #333;
        }
        .border-custom {
            border-style: solid;
            border-image-repeat: space;
        }
        #emoji-picker {
            transition: opacity 0.2s, transform 0.2s;
        }
    </style>
</head>
<body class="bg-pink-50">

    <div class="container mx-auto p-4 lg:flex gap-8">
        <!-- コントロールパネル -->
        <div class="lg:w-1/3 w-full bg-white p-6 rounded-2xl shadow-lg mb-8 lg:mb-0 h-fit">
            <h1 class="text-2xl font-bold text-pink-500 mb-6 text-center">2次元バーコード シール作成ジェネレーター</h1>

            <!-- QRコード追加フォーム -->
            <div class="space-y-4 p-4 border border-pink-200 rounded-lg">
                <h2 class="text-lg font-semibold text-pink-500">新しい2次元バーコードを追加</h2>
                <div>
                    <label for="qr-text" class="block text-sm font-medium text-gray-700">URLまたはテキスト</label>
                    <input type="text" id="qr-text" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-pink-500 focus:border-pink-500" placeholder="https://www.google.com">
                    <p id="qr-text-error" class="text-red-500 text-xs mt-1 hidden"></p>
                </div>
                <div>
                    <label for="qr-label" class="block text-sm font-medium text-gray-700">ラベル (任意)</label>
                    <input type="text" id="qr-label" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-pink-500 focus:border-pink-500" placeholder="検索">
                </div>
                <button id="add-qr-btn" class="w-full bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded-lg transition-colors">
                    追加する
                </button>
            </div>
            
             <!-- 全体設定 -->
            <div class="mt-6 p-4 border border-pink-200 rounded-lg">
                <h2 class="text-lg font-semibold text-pink-500 mb-4">全体デザイン設定</h2>
                <div class="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
                    <div>
                        <label for="global-border-width" class="block text-xs font-medium text-gray-600">枠線の太さ (<span id="border-width-value">2</span>mm)</label>
                        <input type="range" min="0" max="5" step="0.1" value="2" id="global-border-width" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                    </div>
                    <div>
                        <label for="global-border-color" class="block text-xs font-medium text-gray-600">枠線の色</label>
                        <input type="color" value="#ec4899" id="global-border-color" class="w-full h-8 p-1 border border-gray-300 rounded-md cursor-pointer">
                    </div>
                     <div>
                        <label for="global-qr-color-dark" class="block text-xs font-medium text-gray-600">QRコードの色</label>
                        <input type="color" value="#000000" id="global-qr-color-dark" class="w-full h-8 p-1 border border-gray-300 rounded-md cursor-pointer">
                    </div>
                    <div>
                        <label for="global-qr-color-light" class="block text-xs font-medium text-gray-600">QR背景の色</label>
                        <input type="color" value="#ffffff" id="global-qr-color-light" class="w-full h-8 p-1 border border-gray-300 rounded-md cursor-pointer">
                    </div>
                    
                    <div class="col-span-2">
                        <label for="global-qr-margin" class="block text-xs font-medium text-gray-600">QRコードの余白 (<span id="qr-margin-value">1</span>mm)</label>
                        <input type="range" min="0" max="5" step="0.1" value="1" id="global-qr-margin" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                    </div>

                    <div class="col-span-2">
                        <label for="global-dot-style" class="block text-xs font-medium text-gray-600">ドットの形</label>
                        <select id="global-dot-style" class="mt-1 block w-full text-xs border-gray-300 rounded-md shadow-sm focus:ring-pink-500 focus:border-pink-500">
                            <option value="square">四角</option>
                            <option value="dots">丸</option>
                            <option value="rounded">角丸</option>
                            <option value="extra-rounded">強めの角丸</option>
                            <option value="classy">スタイリッシュ</option>
                            <option value="classy-rounded">スタイリッシュ (丸)</option>
                        </select>
                    </div>

                    <div class="col-span-2">
                        <label for="global-border-style" class="block text-xs font-medium text-gray-600">枠線の種類</label>
                        <select id="global-border-style" class="mt-1 block w-full text-xs border-gray-300 rounded-md shadow-sm focus:ring-pink-500 focus:border-pink-500">
                            <option value="solid">実線</option>
                            <option value="dotted">点線</option>
                            <option value="dashed">破線</option>
                            <option value="double">二重線</option>
                            <option value="custom">カスタム画像</option>
                        </select>
                    </div>
                     <div class="col-span-2">
                        <label class="block text-xs font-medium text-gray-600 mb-1">枠線の角</label>
                        <div class="grid grid-cols-2 gap-2">
                            <button id="corner-square-btn" class="w-full text-xs py-2 rounded-md bg-pink-500 text-white transition-colors">角</button>
                            <button id="corner-round-btn" class="w-full text-xs py-2 rounded-md bg-white text-gray-700 border border-gray-300 transition-colors">丸</button>
                        </div>
                    </div>
                    <div id="custom-border-uploader" class="col-span-2 hidden">
                         <label for="border-image-upload" class="block text-xs font-medium text-gray-600">枠線用画像をアップロード</label>
                         <input type="file" id="border-image-upload" accept="image/*" class="mt-1 text-xs w-full">
                         <div id="pattern-settings" class="mt-2 hidden">
                            <label for="global-pattern-size" class="block text-xs font-medium text-gray-600">柄の大きさ (<span id="pattern-size-value">15</span>)</label>
                            <input type="range" min="5" max="40" step="1" value="15" id="global-pattern-size" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                        </div>
                    </div>
                   
                </div>
                 <button id="reset-layout-btn" class="w-full bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-lg transition-colors">
                    レイアウトをリセット
                </button>
            </div>

            <div id="qr-list" class="mt-6 space-y-4"></div>
            
            <div class="mt-8 pt-6 border-t border-pink-200">
                 <h2 class="text-lg font-semibold text-pink-500 mb-2 text-center">ダウンロード</h2>
                 <div class="grid grid-cols-2 gap-3">
                    <button id="download-jpg-btn" class="w-full bg-rose-500 hover:bg-rose-600 text-white font-bold py-2 px-4 rounded-lg transition-colors">
                        JPG
                    </button>
                    <button id="download-pdf-btn" class="w-full bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-lg transition-colors">
                        PDF
                    </button>
                 </div>
                 <div id="loading" class="hidden text-sm text-gray-600 mt-2 text-center">ダウンロード準備中…</div>
            </div>

        </div>

        <!-- プレビューエリア -->
        <div class="lg:w-2/3 w-full flex-grow flex flex-col items-center justify-center">
            <p class="text-xs text-gray-500 mb-2 text-center">💡ヒント: プレビュー上のQRコードはドラッグ＆ドロップで自由に配置できます。</p>
            <div id="a4-paper-wrapper" class="w-full">
                <div id="a4-paper"></div>
            </div>
        </div>
    </div>
    
    <!-- Emoji Picker -->
    <div id="emoji-picker" class="hidden absolute z-10 bg-white shadow-lg rounded-lg p-2 grid grid-cols-6 gap-1 w-48">
    </div>


    <script>
        const { jsPDF } = window.jspdf;

        const qrTextInput = document.getElementById('qr-text');
        const qrTextError = document.getElementById('qr-text-error');
        const qrLabelInput = document.getElementById('qr-label');
        const addQrBtn = document.getElementById('add-qr-btn');
        const qrListContainer = document.getElementById('qr-list');
        const a4Paper = document.getElementById('a4-paper');
        const resetLayoutBtn = document.getElementById('reset-layout-btn');
        const downloadJpgBtn = document.getElementById('download-jpg-btn');
        const downloadPdfBtn = document.getElementById('download-pdf-btn');
        const loadingIndicator = document.getElementById('loading');
        const emojiPicker = document.getElementById('emoji-picker');
        
        const globalBorderWidthInput = document.getElementById('global-border-width');
        const borderWidthValueSpan = document.getElementById('border-width-value');
        const globalBorderColorInput = document.getElementById('global-border-color');
        const globalQrColorDarkInput = document.getElementById('global-qr-color-dark');
        const globalQrColorLightInput = document.getElementById('global-qr-color-light');
        const globalQrMarginInput = document.getElementById('global-qr-margin');
        const qrMarginValueSpan = document.getElementById('qr-margin-value');
        const globalBorderStyleInput = document.getElementById('global-border-style');
        const borderImageUpload = document.getElementById('border-image-upload');
        const customBorderUploader = document.getElementById('custom-border-uploader');
        const patternSettings = document.getElementById('pattern-settings');
        const globalPatternSizeInput = document.getElementById('global-pattern-size');
        const patternSizeValueSpan = document.getElementById('pattern-size-value');
        const cornerSquareBtn = document.getElementById('corner-square-btn');
        const cornerRoundBtn = document.getElementById('corner-round-btn');
        const globalDotStyleInput = document.getElementById('global-dot-style');
        
        let qrCodes = [];
        let nextId = 0;
        const MM_TO_PX = 3.7795275591;
        let globalSettings = {
            borderWidth: 2, // mm
            borderColor: '#ec4899',
            borderStyle: 'solid',
            customBorderImage: null,
            patternSize: 15,
            borderRadius: 0, // 0 for square
            qrColorDark: '#000000',
            qrColorLight: '#ffffff',
            qrMargin: 1, // mm
            dotStyle: 'square',
        };
        let activeQrIdForEmoji = null;

        const emojis = ['😊', '😂', '😍', '🤔', '🥳', '😎', '❤️', '✨', '⭐', '🎉', '💖', '💕', '🌸', '🍀', '☀️', '🌙', '🍓', '🐶', '🐱', '🐰', '🐻', '📱', '💻', '🏠', '☕', '🎁'];

        // --- 初期化処理 ---
        function initialize() {
            addQrBtn.addEventListener('click', addQrCode);
            resetLayoutBtn.addEventListener('click', resetLayout);
            downloadJpgBtn.addEventListener('click', () => download('jpg'));
            downloadPdfBtn.addEventListener('click', () => download('pdf'));

            globalBorderWidthInput.addEventListener('input', (e) => {
                globalSettings.borderWidth = parseFloat(e.target.value);
                borderWidthValueSpan.textContent = e.target.value;
                renderQrList();
                renderA4Preview();
            });
            globalBorderColorInput.addEventListener('input', (e) => {
                globalSettings.borderColor = e.target.value;
                renderA4Preview();
            });
            globalQrColorDarkInput.addEventListener('input', (e) => {
                globalSettings.qrColorDark = e.target.value;
                renderA4Preview();
            });
            globalQrColorLightInput.addEventListener('input', (e) => {
                globalSettings.qrColorLight = e.target.value;
                renderA4Preview();
            });
             globalQrMarginInput.addEventListener('input', (e) => {
                globalSettings.qrMargin = parseFloat(e.target.value);
                qrMarginValueSpan.textContent = e.target.value;
                renderQrList();
                renderA4Preview();
            });
            globalDotStyleInput.addEventListener('change', (e) => {
                globalSettings.dotStyle = e.target.value;
                renderA4Preview();
            });
            globalBorderStyleInput.addEventListener('change', (e) => {
                globalSettings.borderStyle = e.target.value;
                const isCustom = e.target.value === 'custom';
                customBorderUploader.classList.toggle('hidden', !isCustom);
                patternSettings.classList.toggle('hidden', !isCustom);
                renderA4Preview();
            });
            borderImageUpload.addEventListener('change', (e) => {
                const file = e.target.files[0];
                if (!file) return;
                const reader = new FileReader();
                reader.onload = (event) => {
                    globalSettings.customBorderImage = event.target.result;
                    renderA4Preview();
                };
                reader.readAsDataURL(file);
            });
            globalPatternSizeInput.addEventListener('input', (e) => {
                globalSettings.patternSize = parseInt(e.target.value);
                patternSizeValueSpan.textContent = e.target.value;
                renderA4Preview();
            });

            cornerSquareBtn.addEventListener('click', () => {
                globalSettings.borderRadius = 0;
                cornerSquareBtn.classList.add('bg-pink-500', 'text-white');
                cornerSquareBtn.classList.remove('bg-white', 'text-gray-700', 'border', 'border-gray-300');
                cornerRoundBtn.classList.add('bg-white', 'text-gray-700', 'border', 'border-gray-300');
                cornerRoundBtn.classList.remove('bg-pink-500', 'text-white');
                renderA4Preview();
            });
            cornerRoundBtn.addEventListener('click', () => {
                globalSettings.borderRadius = 8;
                cornerRoundBtn.classList.add('bg-pink-500', 'text-white');
                cornerRoundBtn.classList.remove('bg-white', 'text-gray-700', 'border', 'border-gray-300');
                cornerSquareBtn.classList.add('bg-white', 'text-gray-700', 'border', 'border-gray-300');
                cornerSquareBtn.classList.remove('bg-pink-500', 'text-white');
                renderA4Preview();
            });
            
            // Emoji Pickerの初期化
            emojis.forEach(emoji => {
                const button = document.createElement('button');
                button.className = 'text-2xl p-1 rounded-md hover:bg-gray-200 transition-colors';
                button.textContent = emoji;
                button.onclick = () => selectEmoji(emoji);
                emojiPicker.appendChild(button);
            });

            // Pickerの外側をクリックしたら閉じる
            document.addEventListener('click', (e) => {
                if (!emojiPicker.contains(e.target) && !e.target.closest('.select-emoji-btn')) {
                    hideEmojiPicker();
                }
            });

            renderA4Preview();
        }

        function addQrCode() {
            const text = qrTextInput.value.trim();
            qrTextInput.classList.remove('border-red-500');
            qrTextError.classList.add('hidden');

            if (!text) {
                qrTextError.textContent = 'URLまたはテキストを入力してください。';
                qrTextError.classList.remove('hidden');
                qrTextInput.focus();
                qrTextInput.classList.add('border-red-500');
                setTimeout(() => {
                    qrTextInput.classList.remove('border-red-500');
                    qrTextError.classList.add('hidden');
                }, 3000);
                return;
            }
            const label = qrLabelInput.value.trim();
            const newQrCode = { id: nextId++, text, label, size: 30, top: 10, left: 10, logo: null, emoji: '', logoName: '' };
            qrCodes.push(newQrCode);
            qrTextInput.value = '';
            qrLabelInput.value = '';
            renderQrList();
            resetLayout();
        }
        
        function resetLayout() {
            let currentTop = 10;
            let currentLeft = 10;
            const paperWidthMM = 210;
            const rightMarginMM = 10;
            let maxRowHeight = 0;

            qrCodes.forEach(qr => {
                const { stickerWidthMM, stickerHeightMM } = calculateStickerSize(qr);
                
                if (currentLeft + stickerWidthMM > paperWidthMM - rightMarginMM) {
                    currentLeft = 10;
                    currentTop += maxRowHeight + 5;
                    maxRowHeight = 0;
                }
                qr.left = currentLeft;
                qr.top = currentTop;
                currentLeft += stickerWidthMM + 5;
                if(stickerHeightMM > maxRowHeight) maxRowHeight = stickerHeightMM;
            });
            renderA4Preview();
        }

        function calculateStickerSize(qr) {
            const paddingMM = globalSettings.qrMargin * 2;
            const borderWidthMM = globalSettings.borderWidth * 2;
            let labelHeightMM = 0;
            const stickerWidthMM = qr.size + paddingMM + borderWidthMM;

            if (qr.label) {
                const tempLabel = document.createElement('div');
                tempLabel.style.width = `${stickerWidthMM * MM_TO_PX}px`;
                tempLabel.className = 'label';
                tempLabel.style.visibility = 'hidden';
                tempLabel.style.position = 'absolute';
                tempLabel.textContent = qr.label;
                document.body.appendChild(tempLabel);
                labelHeightMM = (tempLabel.offsetHeight + 4) / MM_TO_PX;
                document.body.removeChild(tempLabel);
            }

            const stickerHeightMM = qr.size + paddingMM + borderWidthMM + labelHeightMM;
            return { stickerWidthMM, stickerHeightMM };
        }

        function renderQrList() {
            qrListContainer.innerHTML = '';
            [...qrCodes].reverse().forEach(qr => {
                const card = document.createElement('div');
                card.className = 'p-4 border border-gray-200 rounded-lg bg-gray-50';
                const { stickerWidthMM, stickerHeightMM } = calculateStickerSize(qr);

                card.innerHTML = `
                    <div class="flex justify-between items-center mb-3">
                        <p class="text-sm font-semibold truncate text-gray-800" title="${qr.text}">${qr.label || qr.text}</p>
                        <button data-id="${qr.id}" class="remove-btn text-red-500 hover:text-red-700 font-bold text-lg leading-none">×</button>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600">QRコードのサイズ (<span id="size-value-${qr.id}">${qr.size}</span>mm)</label>
                        <input type="range" min="10" max="80" value="${qr.size}" data-id="${qr.id}" data-prop="size" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                        <p class="text-xs text-gray-500 mt-1">シールサイズ: <span id="sticker-size-${qr.id}">${stickerWidthMM.toFixed(1)} x ${stickerHeightMM.toFixed(1)} mm</span></p>
                    </div>
                    <div class="mt-3 pt-3 border-t">
                        <div class="grid grid-cols-2 gap-2">
                            <div>
                                <label class="block text-xs font-medium text-gray-600">ロゴ画像</label>
                                <div class="mt-1 flex items-center">
                                     <label for="logo-upload-btn-${qr.id}" class="cursor-pointer text-xs py-1 px-3 rounded-full border border-gray-300 bg-white hover:bg-gray-50 whitespace-nowrap">
                                        ファイルを選択
                                     </label>
                                     <input type="file" id="logo-upload-btn-${qr.id}" data-id="${qr.id}" accept="image/*" class="logo-upload-input hidden">
                                     <span id="logo-filename-${qr.id}" class="ml-2 text-xs text-gray-500 truncate" title="${qr.logoName || ''}">${qr.logoName || '選択されていません'}</span>
                                </div>
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600">絵文字</label>
                                <button data-id="${qr.id}" class="select-emoji-btn text-left text-sm w-full mt-1 p-2 border-gray-300 rounded-md shadow-sm">
                                    ${qr.emoji ? `<span class="text-lg">${qr.emoji}</span>` : '<span class="text-gray-500">選ぶ...</span>'}
                                </button>
                            </div>
                        </div>
                        <button data-id="${qr.id}" class="clear-logo-btn text-gray-500 hover:text-red-700 text-xs w-full text-right mt-1 ${qr.logo || qr.emoji ? '' : 'hidden'}">ロゴ/絵文字を消去</button>
                    </div>
                `;
                qrListContainer.appendChild(card);
            });
            qrListContainer.querySelectorAll('.remove-btn').forEach(btn => btn.addEventListener('click', handleRemove));
            qrListContainer.querySelectorAll('input[data-prop="size"]').forEach(input => input.addEventListener('input', handleUpdate));
            qrListContainer.querySelectorAll('.logo-upload-input').forEach(input => input.addEventListener('change', handleLogoUpload));
            qrListContainer.querySelectorAll('.select-emoji-btn').forEach(btn => btn.addEventListener('click', showEmojiPicker));
            qrListContainer.querySelectorAll('.clear-logo-btn').forEach(btn => btn.addEventListener('click', handleClearLogo));
        }

        function renderA4Preview(targetNode = a4Paper, scale = 1) {
            targetNode.innerHTML = '';
            qrCodes.forEach(qr => {
                const container = document.createElement('div');
                container.className = 'sticker-container';
                container.dataset.id = qr.id;

                const wrapper = document.createElement('div');
                wrapper.className = 'sticker-wrapper';

                const qrCodePartSizePx = qr.size * MM_TO_PX * scale;
                const borderWidthPx = globalSettings.borderWidth * MM_TO_PX * scale;
                const paddingPx = globalSettings.qrMargin * MM_TO_PX * scale;
                
                // Override hardcoded CSS padding
                wrapper.style.padding = `${paddingPx}px`;
                
                const wrapperInnerSize = qrCodePartSizePx;
                const wrapperWidth = wrapperInnerSize + (paddingPx * 2) + (borderWidthPx * 2);
                const wrapperHeight = wrapperInnerSize + (paddingPx * 2) + (borderWidthPx * 2);

                wrapper.style.width = `${wrapperWidth}px`;
                wrapper.style.height = `${wrapperHeight}px`;
                wrapper.style.borderWidth = `${borderWidthPx}px`;
                wrapper.style.borderRadius = `${globalSettings.borderRadius * scale}px`;

                const isCustomPattern = globalSettings.borderStyle === 'custom';
                if (isCustomPattern && globalSettings.customBorderImage) {
                    wrapper.classList.add('border-custom');
                    wrapper.style.borderImageSource = `url("${globalSettings.customBorderImage}")`;
                    wrapper.style.borderImageSlice = globalSettings.patternSize;
                    wrapper.style.borderImageRepeat = 'space';
                } else {
                    wrapper.style.borderImage = 'none';
                    wrapper.style.borderStyle = globalSettings.borderStyle;
                    wrapper.style.borderColor = globalSettings.borderColor;
                }

                const qrCodeEl = document.createElement('div');
                qrCodeEl.className = 'qr-code';
                qrCodeEl.style.width = `${wrapperInnerSize}px`;
                qrCodeEl.style.height = `${wrapperInnerSize}px`;
                qrCodeEl.style.borderRadius = `${Math.max(0, globalSettings.borderRadius - (globalSettings.borderWidth + globalSettings.qrMargin))}px`;
                qrCodeEl.style.overflow = 'hidden';

                wrapper.appendChild(qrCodeEl);
                
                qrCodeEl.innerHTML = '';
                
                const qrCodeOptions = {
                    width: wrapperInnerSize,
                    height: wrapperInnerSize,
                    data: qr.text,
                    margin: 0, // Padding is handled by the wrapper
                    qrOptions: {
                        errorCorrectionLevel: 'H'
                    },
                    dotsOptions: {
                        color: globalSettings.qrColorDark,
                        type: globalSettings.dotStyle
                    },
                    backgroundOptions: {
                        color: globalSettings.qrColorLight,
                    }
                };
                
                if (qr.logo) {
                    qrCodeOptions.image = qr.logo;
                    qrCodeOptions.imageOptions = {
                        hideBackgroundDots: true,
                        imageSize: 0.4,
                        margin: 4 * scale,
                    }
                }

                const qrCodeInstance = new QRCodeStyling(qrCodeOptions);
                qrCodeInstance.append(qrCodeEl);

                container.appendChild(wrapper);

                if (qr.label) {
                    const labelEl = document.createElement('div');
                    labelEl.className = 'label';
                    labelEl.textContent = qr.label;
                    labelEl.style.fontSize = `${12 * scale}px`;
                    labelEl.style.marginTop = `${4 * scale}px`;
                    container.appendChild(labelEl);
                }
                
                container.style.width = `${wrapperWidth}px`;
                container.style.top = `${qr.top * MM_TO_PX * scale}px`;
                container.style.left = `${qr.left * MM_TO_PX * scale}px`;
                targetNode.appendChild(container);
                
                if (targetNode === a4Paper) makeDraggable(container);
            });
        }
        
        function makeDraggable(element) {
            let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            element.onmousedown = dragMouseDown;
            function dragMouseDown(e) {
                e = e || window.event; e.preventDefault();
                pos3 = e.clientX; pos4 = e.clientY;
                document.onmouseup = closeDragElement; document.onmousemove = elementDrag;
            }
            function elementDrag(e) {
                e = e || window.event; e.preventDefault();
                pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY;
                pos3 = e.clientX; pos4 = e.clientY;
                element.style.top = `${element.offsetTop - pos2}px`;
                element.style.left = `${element.offsetLeft - pos1}px`;
            }
            function closeDragElement() {
                document.onmouseup = null; document.onmousemove = null;
                const id = parseInt(element.dataset.id);
                const qr = qrCodes.find(q => q.id === id);
                if(qr) {
                   qr.top = parseFloat(element.style.top) / MM_TO_PX;
                   qr.left = parseFloat(element.style.left) / MM_TO_PX;
                }
            }
        }
        
        function handleRemove(e) {
            const id = parseInt(e.target.dataset.id);
            qrCodes = qrCodes.filter(qr => qr.id !== id);
            renderQrList();
            renderA4Preview();
        }

        function handleUpdate(e) {
            const id = parseInt(e.target.dataset.id);
            const prop = e.target.dataset.prop;
            if (prop === 'size') {
                const value = parseFloat(e.target.value);
                const qr = qrCodes.find(q => q.id === id);
                if (qr) {
                    qr.size = value;
                }
                renderQrList();
                renderA4Preview();
            }
        }
        
        function handleLogoUpload(e) {
            const id = parseInt(e.target.dataset.id);
            const file = e.target.files[0];
            const qr = qrCodes.find(q => q.id === id);
            if (!file || !qr) return;

            const reader = new FileReader();
            reader.onload = (event) => {
                qr.logo = event.target.result;
                qr.emoji = '';
                qr.logoName = file.name;
                renderQrList();
                renderA4Preview();
            };
            reader.readAsDataURL(file);
        }

        function showEmojiPicker(e) {
            const button = e.currentTarget;
            activeQrIdForEmoji = parseInt(button.dataset.id);
            const rect = button.getBoundingClientRect();
            emojiPicker.style.top = `${rect.bottom + window.scrollY}px`;
            emojiPicker.style.left = `${rect.left + window.scrollX}px`;
            emojiPicker.classList.remove('hidden');
        }

        function hideEmojiPicker() {
            emojiPicker.classList.add('hidden');
            activeQrIdForEmoji = null;
        }
        
        async function selectEmoji(emoji) {
            if(activeQrIdForEmoji === null) return;
            const qr = qrCodes.find(q => q.id === activeQrIdForEmoji);
            if (!qr) return;
            
            qr.emoji = emoji;
            qr.logo = await emojiToDataURL(emoji, 256);
            qr.logoName = ''; // Clear file name when emoji is selected
            hideEmojiPicker();
            renderQrList();
            renderA4Preview();
        }


        function handleClearLogo(e) {
            const id = parseInt(e.target.dataset.id);
            const qr = qrCodes.find(q => q.id === id);
            if(qr) {
                qr.logo = null;
                qr.emoji = '';
                qr.logoName = '';
                renderQrList();
                renderA4Preview();
            }
        }

        function emojiToDataURL(emoji, size) {
            return new Promise(resolve => {
                const canvas = document.createElement('canvas');
                canvas.width = size;
                canvas.height = size;
                const ctx = canvas.getContext('2d');
                // 透明な背景で塗りつぶす処理を削除し、
                // ブラウザのデフォルトの絵文字描画に任せることで修正
                ctx.font = `${size * 0.8}px sans-serif`;
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                // 絵文字が中央に来るように少し縦位置を調整
                const yPos = size / 2 + size * 0.05;
                ctx.fillText(emoji, size / 2, yPos);
                resolve(canvas.toDataURL());
            });
        }
        
        async function download(format) {
            loadingIndicator.classList.remove('hidden');
            const DPI = 300;
            const A4_WIDTH_MM = 210;
            const A4_HEIGHT_MM = 297;
            const tempContainer = document.createElement('div');
            tempContainer.style.position = 'absolute';
            tempContainer.style.left = '-9999px';
            tempContainer.style.top = '-9999px';
            tempContainer.style.width = `${A4_WIDTH_MM * MM_TO_PX}px`;
            tempContainer.style.height = `${A4_HEIGHT_MM * MM_TO_PX}px`;
            tempContainer.style.backgroundColor = 'white';
            document.body.appendChild(tempContainer);
            renderA4Preview(tempContainer, 1);
            await new Promise(resolve => setTimeout(resolve, 500));
            const canvas = await html2canvas(tempContainer, { scale: DPI / 96, backgroundColor: '#ffffff' });
            if (format === 'jpg') {
                const link = document.createElement('a');
                link.download = 'qr-stickers.jpg';
                link.href = canvas.toDataURL('image/jpeg', 0.9);
                link.click();
            } else if (format === 'pdf') {
                const imgData = canvas.toDataURL('image/jpeg', 0.85);
                const pdf = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });
                pdf.addImage(imgData, 'JPEG', 0, 0, A4_WIDTH_MM, A4_HEIGHT_MM);
                pdf.save('qr-stickers.pdf');
            }
            document.body.removeChild(tempContainer);
            loadingIndicator.classList.add('hidden');
        }

        initialize();
    </script>
</body>
</html>

2次元バーコードシール作成ジェネレーター

ジェネレータだけ利用したい方はこちら

Gemini Canvasでの制作過程

初見のプロンプト

可愛いQRコードジェネレータ

QRコードを手帳に貼るようにシールみたいに加工でき・印刷できるサイトをつくりたい
作成したQRコードはA4の紙にプレビューして表示でき、QRコードのサイズを指定でき並べて表示できる
QRコード
ラベル
ダウンロードはJPG・PDF

QRコードは１種類ではなく何種類も追加できるように変更して、Q Rコードの縁も自由にデザインできるようにしたい
縁の色、点線だけじゃなくて柄とか色選べるようにしたい
さらに切り取り線も上に載せて欲しい
ダウンロードした画像とプレビューが全然違うから、プレビューに忠実になるように調整して欲しい

プレビュー画面を見ながら微調整していく

QRコードの大きさをラベル有無同じにして欲しい。
デザインは全体設定できればいいので個別に変更できる機能はいらない

後付けでツギハギしていった結果、ボタンとプレビューの配置などが少し気に入らなかったので、一旦作り直してもらうことにしました。エラーが多く上手くいかないときなどもこの方法を使うと一度リセットされるのでおすすめです。

今までのまとめて綺麗なプロンプトにして

生成AIが今までのプロンプトをまとめてくれた仕様書

可愛いQRコードシールジェネレーター仕様書

概要

手帳やノートに貼って楽しめる、デザイン性の高いQRコードシールを作成し、A4用紙にレイアウトして印刷できるWebアプリケーションを開発する。

必須機能一覧

1. QRコードの生成と管理

複数追加: ユーザーは異なるURLやテキストを持つQRコードをページ上に複数追加できる。

ラベル機能: 各QRコードに任意の短いテキストラベル（例：「ブログ」「インスタ」など）を追加できる。

QRコードの削除: 追加したQRコードをリストから個別に削除できる。

2. デザインとレイアウト

全体デザイン設定:

QRコードサイズ: 各QRコードの「QRコード部分の大きさ」をスライダーで個別に調整できる（単位：mm）。

サイズの一貫性: ラベルの有無によってQRコード画像のサイズが変わらないようにする。ラベルを追加した場合は、シール全体の縦幅が自動で伸びる仕様とする。

枠線デザイン: 全てのシールに共通のデザインを適用する。

種類: 「実線」「点線」「破線」「二重線」といった基本的なスタイルに加え、「ハート柄」「星柄」「あわ柄」のような装飾的なスタイルも選択可能にする。

太さ: 枠線の太さをスライダーで調整できる。

色: カラーピッカーで枠線の色を自由に変更できる。

A4プレビュー:

リアルタイム表示: 作成したシールをA4用紙のプレビュー上にリアルタイムで表示する。

ドラッグ＆ドロップ: プレビュー上のシールをマウスでドラッグし、自由に配置を変更できる。

レイアウトリセット: ボタン一つで、全てのシールを用紙の左上から自動で整列させる機能。

印刷補助機能:

切り取り線: 印刷後に切り取りやすいように、各シールの周りに点線の切り取り線を表示・非表示できるトグルスイッチを設ける。

3. 出力機能

プレビュー忠実性: 画面上のプレビューと、ダウンロードされるファイルの見た目が完全に一致するようにする。

ダウンロード形式:

JPG: 高解像度のJPG画像としてダウンロードできる。

PDF: 印刷に適したA4サイズのPDFとしてダウンロードできる。

4. ユーザーインターフェース (UI)

直感的な操作: 左側に設定パネル、右側にA4プレビューを配置し、誰でも直感的に操作できるレイアウトにする。

エラーハンドリング: URL/テキストが未入力の状態で追加ボタンを押した場合、コンソールエラーではなく、画面上に「入力してください」といった趣旨のメッセージを分かりやすく表示する。

開発のポイント

ライブラリ: QRコード生成、Canvasへの描画、PDF生成には、それぞれ適切なJavaScriptライブラリ（例: qrcode.js, html2canvas, jsPDF）を活用する。

見た目: 全体的に「可愛い」「手帳に合う」というコンセプトに沿った、柔らかい色使いや丸みのあるフォント、親しみやすいデザインを採用する。

この仕様書を元にして１からサイト作り直して

作り直したサイトを見ながら更に微調整していく

枠線の太さ (10px)はmm表示、枠線は柄も選択できるようにして、任意の画像もアップできる機能を追加ラベルの文字が切れてるのでラベルはQRコードの枠線の下に移動して

かなりいい感じだ
枠線の種類の星やハートなどのサイズも調整できるようにして
QRコードの周りにあるグレーの点線は消して欲しい

枠線の種類の調節は枠線の種類全部調節できるようにして。
ハート同士が重なって何の形かわからない、間隔を調節できるようにしたいの
柄の枠線の感覚もバーで調節できるようにして

「ハート」「星」「あわ」枠線の種類反映されなくなったの修正して
柄が表示されてない

ここでどうしても枠をハートなど柄にするのが上手くいかず行き詰まったので諦めることにしました。消去してもらいつつ、他に修正してもらいたいことも指示。

ハート・星・あわを消去

追加機能
枠線の角丸と角をボタンで選択できるようにして
ダウンロードボタンは２グリッドに変更

いい感じ
プレビューでQRコードがドラックで移動できるのがわかりにくいから説明文を追加してほしい

形も定まってきて、気になるエラーもないので、最後は初めてこのツールを触る人が操作を迷いにくいように説明文を入れてもらいました。

ところが更に欲が出て、さらに機能を追加してもらいました。

QRドットの形状を変更できるようにしたい
QRコードの個別設定でQRコードの真ん中に任意でアップロードしたロゴ画像や、絵文字を入れれる機能追加して

コンビニでネットプリントしようとしたら30MB以下じゃないとアップロードできなかったので、ダウンロードできる画質の調整をしてもらいました。

PDFのダウンロードできるファイルサイズを30.0MBまでに抑えてほしい

過程をまとめたプロンプト公開

プロンプト：可愛い二次元バーコードシールジェネレーター開発指示書
あなたは優秀なフロントエンド開発者AIです。以下の要件と追加機能を段階的に満たしながら、最終的に一つの自己完結したHTMLファイルとして「可愛い二次元バーコードシールジェネレーター」を開発してください。UI/UXの観点から、親しみやすく直感的なデザインを心がけてください。

フェーズ1：基本骨格の実装
目的: 手帳に貼るような可愛いシール風の二次元バーコードを作成し、A4用紙にレイアウトして印刷できるWebサイトを構築する。

基本レイアウト: 画面を左右に分割し、左側に操作パネル、右側にA4用紙のプレビューエリアを配置する。

基本機能:

URLやテキストを入力して二次元バーコードを生成し、リストに追加する機能。

生成した二次元バーコードをA4プレビューに表示する機能。

プレビュー内容をJPGおよびPDF形式でダウンロードする機能。

フェーズ2：デザイン機能の拡張
複数コード対応: 複数の異なる二次元バーコードをリストに追加・管理できるようにする。

全体デザイン設定: 個別設定ではなく、すべてのシールに共通のデザインを適用する「全体設定」パネルを設ける。

枠線カスタマイズ:

太さ: mm単位で調整できるスライダーを実装する。

色: カラーピッカーで色を自由に変更できるようにする。

種類: 「実線」「点線」「破線」「二重線」から選択できるようにする。

角の形: 枠線の角を「角丸」と「直角」で切り替えられるボタンを実装する。

二次元バーコード本体のカスタマイズ:

ドットの形: コードを構成する点（ドット）の形状を「四角」「丸」「角丸」など、複数のスタイルから選択できるようにする。

色: ドットの色と背景色をそれぞれカラーピッカーで変更できるようにする。

余白: 二次元バーコード本体とその周りの余白（マージン）をmm単位で調整できるスライダーを実装する。

フェーズ3：個別設定と高度なカスタマイズ
個別サイズ調整: リストに追加された各二次元バーコードの「本体サイズ」を、個別のスライダーでmm単位で調整できるようにする。

中央ロゴ・絵文字機能:

各二次元バーコードの中央に、任意のロゴ画像または絵文字を配置できる機能を追加する。

ロゴ: 個別に画像をアップロードできるようにする。アップロード後はファイル名を表示し、選択されていることが分かるようにする。

絵文字: 文字入力ではなく、ポップアップ表示されるパネルから好きな絵文字をクリックして選択できる「絵文字ピッカー」を実装する。

ロゴや絵文字をクリアする機能も設ける。

フェーズ4：UI/UXの向上と仕上げ
プレビュー操作: A4プレビュー上の二次元バーコードをドラッグ＆ドロップで自由に配置できるようにする。「プレビュー上のシールはドラッグで移動できます」といった趣旨のヒントを分かりやすい位置に表示する。

レイアウト補助: ボタン一つで、プレビュー上の全シールの配置を左上から綺麗に整列させる「レイアウトをリセット」機能を実装する。

サイズ表示: 各シールの個別設定カード内に、枠線や余白、ラベルを含めた最終的な「シールサイズ（幅×高さ mm）」をリアルタイムで表示する。

エラーハンドリング: テキスト未入力で「追加」ボタンを押した場合、コンソールエラーではなく、入力欄の下に「入力してください」というメッセージを画面上に表示する。

ダウンロード品質:

プレビューの見た目とダウンロードしたファイルが完全に一致するように調整する。

PDFのファイルサイズが過度に大きくならないよう、30MB以下を目安に圧縮率を調整する。

用語の統一: ユーザーが目にするUI上の「QRコード」という表記は、すべて「二次元バーコード」に統一する。

最終成果物:
上記のすべての要件を満たした、単一のHTMLファイル。