通販サイトやSNSの画像加工で「Photoshopは高機能すぎる…」「必要な機能だけのシンプルなツールが欲しい」と感じたことはありませんか？

実は、プログラミング知識がなくても、AIと日本語で対話するだけで自分だけの専用ツールが作れる時代になりました。この記事では、その実例として画像一括編集ツール「リサイズくん」をゼロから作った過程を全公開します。専門知識不要の新しいものづくりをご覧ください。

HTML コードビューア

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>リサイズくん – 画像一括編集ツール</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <style>
        /* カスタムスタイル */
        body {
            font-family: 'Inter', 'Noto Sans JP', sans-serif;
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #1f2937;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #4b5563;
            border-radius: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #6b7280;
        }
        #preview-grid-container.dragover {
            outline: 2px dashed #3b82f6;
            background-color: #2563eb1a;
            outline-offset: -1rem;
        }
        /* ローディングスピナー */
        .loader {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3b82f6;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* disabled スタイル */
        .disabled-ui, input:disabled, button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        input[type="range"]:disabled::-webkit-slider-thumb {
            cursor: not-allowed;
        }
        /* 数値入力の矢印を非表示に */
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type=number] {
            -moz-appearance: textfield;
        }
        /* チェッカーボード背景 */
        .checkerboard {
            background-image: linear-gradient(45deg, #374151 25%, transparent 25%), linear-gradient(-45deg, #374151 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #374151 75%), linear-gradient(-45deg, transparent 75%, #374151 75%);
            background-size: 20px 20px;
            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
        }
    </style>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-900 text-white antialiased">

    <!-- メインコンテナ -->
    <div class="flex h-screen">

        <!-- 左側パネル: 画像プレビューグリッド -->
        <main id="preview-grid-container" class="flex-1 p-4 bg-gray-900 overflow-y-auto custom-scrollbar transition-all duration-300 relative min-h-0">
             <div id="grid-inner" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
                <!-- Preview cards will be injected here -->
             </div>
             <div id="welcome-message" class="h-full flex flex-col items-center justify-center text-center text-gray-500 cursor-pointer">
                <svg class="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                <h2 class="text-2xl font-semibold">画像をここにドラッグ＆ドロップ</h2>
                <p>または、このエリアをクリックしてファイルを選択してください。</p>
            </div>
             <input type="file" id="file-input" multiple accept="image/*" class="hidden">
        </main>

        <!-- 右側パネル: 加工設定 -->
        <aside id="controls-panel" class="w-[380px] bg-gray-800 border-l border-gray-700 flex flex-col">
            <div class="p-4 md:p-6 custom-scrollbar overflow-y-auto">
                <div class="flex flex-col gap-6">
                    <div class="text-center pb-4 border-b border-gray-700">
                         <h2 class="text-2xl font-bold text-white">リサイズくん</h2>
                         <p class="text-sm text-gray-400">画像一括編集ツール</p>
                    </div>

                    <!-- グループ: 出力設定 -->
                    <div class="space-y-4 bg-gray-700/50 p-4 rounded-lg">
                        <h3 class="text-sm font-bold text-gray-400 border-b border-gray-600 pb-1 mb-3">出力設定</h3>
                         <div class="flex items-center space-x-2">
                             <label class="text-gray-300 text-sm w-14">形式:</label>
                             <div class="flex">
                                 <button id="format-jpg" class="flex-1 bg-blue-600 text-sm py-1 px-3 rounded-l">JPG</button>
                                 <button id="format-png" class="flex-1 bg-gray-700 hover:bg-gray-600 text-sm py-1 px-3 rounded-r">PNG</button>
                             </div>
                         </div>
                         <div id="jpg-quality-container" class="flex items-center space-x-2 w-full">
                            <label for="jpg-quality-slider" class="text-gray-300 text-sm w-14">品質:</label>
                            <input type="range" id="jpg-quality-slider" min="1" max="100" value="100" class="flex-grow h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer">
                            <input type="number" id="jpg-quality-input" min="1" max="100" value="100" class="bg-gray-900 text-center text-sm w-20 rounded p-1">
                        </div>
                    </div>

                    <!-- グループ: レイアウト -->
                    <div class="space-y-4 bg-gray-700/50 p-4 rounded-lg">
                        <h3 class="text-sm font-bold text-gray-400 border-b border-gray-600 pb-1 mb-3">レイアウト</h3>
                        <div class="flex items-center space-x-2">
                            <label class="text-gray-300 text-sm w-14">リサイズ:</label>
                            <div id="resize-mode-btns" class="flex">
                                <button data-mode="aspectRatio" class="bg-blue-600 text-sm py-1 px-3 rounded-l">比率維持</button>
                                <button data-mode="square" class="bg-gray-700 hover:bg-gray-600 text-sm py-1 px-3 rounded-r">正方形</button>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2">
                            <label for="size-slider" class="text-gray-300 text-sm w-14">サイズ:</label>
                            <input type="range" id="size-slider" min="100" max="4000" value="800" class="flex-grow h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer">
                            <input type="number" id="size-input" min="100" max="4000" value="800" class="bg-gray-900 text-center text-sm w-20 rounded p-1">
                        </div>
                        <div class="flex items-center space-x-2">
                            <label for="padding-slider" class="text-gray-300 text-sm w-14">余白:</label>
                            <input type="range" id="padding-slider" min="0" max="200" value="0" class="flex-grow h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer">
                            <input type="number" id="padding-input" min="0" max="200" value="0" class="bg-gray-900 text-center text-sm w-20 rounded p-1">
                        </div>
                    </div>

                    <!-- グループ: デザイン -->
                    <div class="space-y-4 bg-gray-700/50 p-4 rounded-lg">
                         <h3 class="text-sm font-bold text-gray-400 border-b border-gray-600 pb-1 mb-3">デザイン</h3>
                         <div id="bg-controls" class="flex items-center space-x-2">
                             <label class="text-gray-300 text-sm w-14">背景:</label>
                             <input type="color" id="bg-color-input" value="#FFFFFF" class="w-8 h-8 p-0 border-0 rounded cursor-pointer appearance-none bg-gray-700">
                             <button id="bg-image-btn" class="bg-gray-700 hover:bg-gray-600 text-white text-sm py-1 px-3 rounded whitespace-nowrap">画像…</button>
                             <button id="bg-transparent-btn" class="bg-gray-700 hover:bg-gray-600 text-white text-sm py-1 px-3 rounded whitespace-nowrap hidden">透明</button>
                             <input type="file" id="bg-image-input" accept="image/*" class="hidden">
                        </div>
                        <div class="flex items-start space-x-2">
                            <label class="text-gray-300 text-sm w-14 pt-1">シャドウ:</label>
                            <div id="shadow-container">
                                <div class="flex items-center">
                                    <input type="checkbox" id="shadow-enable" class="form-checkbox h-4 w-4 bg-gray-700 border-gray-600 text-blue-500 rounded focus:ring-blue-500">
                                    <label for="shadow-enable" class="text-gray-300 text-sm ml-2 cursor-pointer">有効にする</label>
                                </div>
                                <div id="shadow-controls" class="space-y-2 mt-3 pl-6">
                                    <div class="flex items-center space-x-2">
                                        <label for="shadow-color" class="text-sm text-gray-400 w-12">色:</label>
                                        <input type="color" id="shadow-color" value="#000000" class="w-8 h-8 p-0 border-0 rounded cursor-pointer appearance-none bg-gray-600">
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <label for="shadow-opacity-slider" class="text-sm text-gray-400 w-12">不透明度:</label>
                                        <input type="range" id="shadow-opacity-slider" min="0" max="1" step="0.01" value="0.5" class="w-28 h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer">
                                        <span id="shadow-opacity-value" class="text-sm w-10 text-center">50%</span>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <label for="shadow-blur-slider" class="text-sm text-gray-400 w-12">ぼかし:</label>
                                        <input type="range" id="shadow-blur-slider" min="0" max="50" value="15" class="w-28 h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer">
                                        <span id="shadow-blur-value" class="text-sm w-10 text-center">15px</span>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <label for="shadow-offset-x-slider" class="text-sm text-gray-400 w-12">X軸:</label>
                                        <input type="range" id="shadow-offset-x-slider" min="-50" max="50" value="5" class="w-28 h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer">
                                        <span id="shadow-offset-x-value" class="text-sm w-10 text-center">5px</span>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <label for="shadow-offset-y-slider" class="text-sm text-gray-400 w-12">Y軸:</label>
                                        <input type="range" id="shadow-offset-y-slider" min="-50" max="50" value="5" class="w-28 h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer">
                                        <span id="shadow-offset-y-value" class="text-sm w-10 text-center">5px</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- グループ: コピーライト -->
                    <div class="space-y-4 bg-gray-700/50 p-4 rounded-lg">
                        <h3 class="text-sm font-bold text-gray-400 border-b border-gray-600 pb-1 mb-3">コピーライト</h3>
                        <div class="flex items-center space-x-2">
                            <label for="copyright-text" class="text-gray-300 text-sm w-12">テキスト:</label>
                            <input type="text" id="copyright-text" placeholder="© Your Name" class="bg-gray-700 text-white rounded px-3 py-1 w-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div class="flex items-center space-x-2">
                            <label for="copyright-font-size-slider" class="text-gray-300 text-sm w-12">サイズ:</label>
                            <input type="range" id="copyright-font-size-slider" min="8" max="128" value="24" class="flex-grow h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer">
                            <input type="number" id="copyright-font-size-input" min="8" max="128" value="24" class="bg-gray-900 text-center text-sm w-20 rounded p-1">
                        </div>
                        <div class="flex items-center space-x-2">
                            <label class="text-gray-300 text-sm w-12">文字色:</label>
                            <div id="copyright-color-btns" class="flex border border-gray-600 rounded">
                                <button data-color="white" title="白文字" class="bg-blue-600 p-1"><div class="w-4 h-4 rounded-full bg-white border border-gray-400"></div></button>
                                <button data-color="black" title="黒文字" class="bg-gray-700 p-1"><div class="w-4 h-4 rounded-full bg-black border border-gray-400"></div></button>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2">
                            <label class="text-gray-300 text-sm w-12">位置:</label>
                            <div class="flex" id="copyright-position">
                                <button data-pos="left" title="左下" class="bg-gray-700 hover:bg-gray-600 p-1 rounded-l"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18M10 3v18"/></svg></button>
                                <button data-pos="center" title="中央" class="bg-blue-600 p-1"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></button>
                                <button data-pos="right" title="右下" class="bg-gray-700 hover:bg-gray-600 p-1 rounded-r"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18M14 3v18"/></svg></button>
                            </div>
                        </div>
                    </div>

                    <!-- グループ: ダウンロード -->
                    <div class="space-y-4 bg-gray-700/50 p-4 rounded-lg mt-auto">
                        <button id="download-btn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition-colors duration-300 w-full">
                            ダウンロード (<span id="image-count">0</span>)
                        </button>
                         <button id="clear-all-btn" title="全画像をクリア" class="text-gray-400 hover:text-white self-center">
                             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                         </button>
                    </div>
                </div>
            </div>
        </aside>

    </div>
    
    <!-- ローディングオーバーレイ -->
    <div id="loading-overlay" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
        <div class="text-center">
            <div class="loader mx-auto"></div>
            <p id="loading-text" class="text-white text-lg mt-4">画像を処理中…</p>
        </div>
    </div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    // DOM要素の取得
    const previewGridContainer = document.getElementById('preview-grid-container');
    const gridInner = document.getElementById('grid-inner');
    const fileInput = document.getElementById('file-input');
    const imageCount = document.getElementById('image-count');
    const clearAllBtn = document.getElementById('clear-all-btn');
    const welcomeMessage = document.getElementById('welcome-message');

    // コントロール要素
    const resizeModeBtns = document.getElementById('resize-mode-btns');
    const sizeSlider = document.getElementById('size-slider');
    const sizeInput = document.getElementById('size-input');
    const paddingSlider = document.getElementById('padding-slider');
    const paddingInput = document.getElementById('padding-input');
    const bgColorInput = document.getElementById('bg-color-input');
    const bgImageBtn = document.getElementById('bg-image-btn');
    const bgTransparentBtn = document.getElementById('bg-transparent-btn');
    const bgImageInput = document.getElementById('bg-image-input');
    const copyrightTextInput = document.getElementById('copyright-text');
    const copyrightFontSizeSlider = document.getElementById('copyright-font-size-slider');
    const copyrightFontSizeInput = document.getElementById('copyright-font-size-input');
    const copyrightColorBtns = document.getElementById('copyright-color-btns');
    const copyrightPositionBtns = document.getElementById('copyright-position');
    const downloadBtn = document.getElementById('download-btn');
    const formatJpgBtn = document.getElementById('format-jpg');
    const formatPngBtn = document.getElementById('format-png');
    
    // ドロップシャドウ要素
    const shadowEnable = document.getElementById('shadow-enable');
    const shadowControls = document.getElementById('shadow-controls');
    const shadowColorInput = document.getElementById('shadow-color');
    const shadowOpacitySlider = document.getElementById('shadow-opacity-slider');
    const shadowOpacityValue = document.getElementById('shadow-opacity-value');
    const shadowBlurSlider = document.getElementById('shadow-blur-slider');
    const shadowBlurValue = document.getElementById('shadow-blur-value');
    const shadowOffsetXSlider = document.getElementById('shadow-offset-x-slider');
    const shadowOffsetXValue = document.getElementById('shadow-offset-x-value');
    const shadowOffsetYSlider = document.getElementById('shadow-offset-y-slider');
    const shadowOffsetYValue = document.getElementById('shadow-offset-y-value');

    // JPG品質要素
    const jpgQualityContainer = document.getElementById('jpg-quality-container');
    const jpgQualitySlider = document.getElementById('jpg-quality-slider');
    const jpgQualityInput = document.getElementById('jpg-quality-input');

    // ローディング
    const loadingOverlay = document.getElementById('loading-overlay');
    const loadingText = document.getElementById('loading-text');

    // 状態管理
    let imageSources = []; // { file, img, originalName, id }
    let settings = {
        resizeMode: 'aspectRatio', // 'aspectRatio' or 'square'
        size: 800,
        padding: 0,
        bgColor: '#FFFFFF',
        bgImage: null,
        copyright: { text: '', position: 'center', color: 'white', fontSize: 24 },
        shadow: {
            enabled: false,
            color: '#000000',
            opacity: 0.5,
            blur: 15,
            offsetX: 5,
            offsetY: 5,
        },
        format: 'jpeg',
        jpgQuality: 100, // 1-100
    };

    // --- ファイル処理 ---
    previewGridContainer.addEventListener('click', () => {
        if (imageSources.length === 0) fileInput.click();
    });
    previewGridContainer.addEventListener('dragover', (e) => { e.preventDefault(); previewGridContainer.classList.add('dragover'); });
    previewGridContainer.addEventListener('dragleave', () => previewGridContainer.classList.remove('dragover'));
    previewGridContainer.addEventListener('drop', (e) => { e.preventDefault(); previewGridContainer.classList.remove('dragover'); handleFiles(e.dataTransfer.files); });
    fileInput.addEventListener('change', (e) => handleFiles(e.target.files));

    async function handleFiles(files) {
        showLoading('画像を読み込み中...');
        const newImages = Array.from(files).filter(file => file.type.startsWith('image/'));
        if (newImages.length === 0) {
            hideLoading(); return;
        }

        const promises = newImages.map(file => new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = e => {
                const img = new Image();
                img.onload = () => {
                    const id = Date.now() + Math.random();
                    resolve({ file, img, originalName: file.name, id });
                };
                img.onerror = reject;
                img.src = e.target.result;
            };
            reader.onerror = reject;
            reader.readAsDataURL(file);
        }));

        const loadedImages = await Promise.all(promises);
        imageSources.push(...loadedImages);
        updateUI();
        hideLoading();
    }
    
    // --- UI更新 ---
    function updateUI() {
        populatePreviewGrid();
        drawAllCanvases();
        const hasImages = imageSources.length > 0;
        welcomeMessage.classList.toggle('hidden', hasImages);
        imageCount.textContent = imageSources.length;
    }

    function populatePreviewGrid() {
        gridInner.innerHTML = '';
        imageSources.forEach(src => {
            const card = document.createElement('div');
            card.className = 'relative bg-gray-800 p-2 rounded-lg shadow-md flex flex-col items-center group';
            card.innerHTML = `
                <canvas data-id="${src.id}" class="w-full h-auto rounded-md bg-center bg-cover checkerboard"></canvas>
                <div class="w-full text-center mt-2">
                    <p class="text-xs text-gray-400 truncate">${src.originalName}</p>
                    <p class="text-xs text-gray-500 processed-size" data-id="${src.id}"></p>
                </div>
                <button data-id="${src.id}" class="delete-btn-grid absolute top-3 right-3 bg-black bg-opacity-50 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity">
                     <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            `;
            gridInner.appendChild(card);
        });
    }
    
    gridInner.addEventListener('click', e => {
        const deleteBtn = e.target.closest('.delete-btn-grid');
        if (deleteBtn) {
            const id = deleteBtn.dataset.id;
            deleteImage(id);
        }
    });

    function deleteImage(id) {
        imageSources = imageSources.filter(img => img.id != id);
        updateUI();
    }
    
    clearAllBtn.addEventListener('click', () => {
        imageSources = [];
        updateUI();
    });

    function updateControls() {
        resizeModeBtns.querySelectorAll('button').forEach(btn => {
            btn.classList.toggle('bg-blue-600', btn.dataset.mode === settings.resizeMode);
            btn.classList.toggle('hover:bg-gray-600', btn.dataset.mode !== settings.resizeMode);
            btn.classList.toggle('bg-gray-700', btn.dataset.mode !== settings.resizeMode);
        });

        sizeSlider.value = settings.size;
        sizeInput.value = settings.size;
        paddingSlider.value = settings.padding;
        paddingInput.value = settings.padding;
        
        copyrightTextInput.value = settings.copyright.text;
        copyrightFontSizeSlider.value = settings.copyright.fontSize;
        copyrightFontSizeInput.value = settings.copyright.fontSize;

        // Background controls
        const isTransparent = settings.bgColor === 'transparent';
        const hasBgImage = !!settings.bgImage;

        bgTransparentBtn.classList.toggle('hidden', settings.format !== 'png');
        bgTransparentBtn.classList.toggle('bg-blue-600', isTransparent);
        bgTransparentBtn.classList.toggle('bg-gray-700', !isTransparent);
        
        bgImageBtn.classList.toggle('bg-blue-600', hasBgImage && !isTransparent);
        bgImageBtn.classList.toggle('bg-gray-700', !hasBgImage && !isTransparent);
        
        bgColorInput.disabled = isTransparent;
        bgImageBtn.disabled = isTransparent;

        if (!isTransparent) {
             bgColorInput.value = settings.bgColor;
        }

        copyrightColorBtns.querySelectorAll('button').forEach(btn => {
            btn.classList.toggle('bg-blue-600', btn.dataset.color === settings.copyright.color);
            btn.classList.toggle('bg-gray-700', btn.dataset.color !== settings.copyright.color);
        });
        
        copyrightPositionBtns.querySelectorAll('button').forEach(btn => {
            btn.classList.toggle('bg-blue-600', btn.dataset.pos === settings.copyright.position);
            btn.classList.toggle('bg-gray-700', btn.dataset.pos !== settings.copyright.position);
        });

        shadowEnable.checked = settings.shadow.enabled;
        if (settings.shadow.enabled) {
            shadowControls.classList.remove('disabled-ui');
            shadowControls.querySelectorAll('input').forEach(input => input.disabled = false);
        } else {
            shadowControls.classList.add('disabled-ui');
             shadowControls.querySelectorAll('input').forEach(input => input.disabled = true);
        }
        shadowColorInput.value = settings.shadow.color;
        shadowOpacitySlider.value = settings.shadow.opacity;
        shadowOpacityValue.textContent = `${Math.round(settings.shadow.opacity * 100)}%`;
        shadowBlurSlider.value = settings.shadow.blur;
        shadowBlurValue.textContent = `${settings.shadow.blur}px`;
        shadowOffsetXSlider.value = settings.shadow.offsetX;
        shadowOffsetXValue.textContent = `${settings.shadow.offsetX}px`;
        shadowOffsetYSlider.value = settings.shadow.offsetY;
        shadowOffsetYValue.textContent = `${settings.shadow.offsetY}px`;
        
        formatJpgBtn.classList.toggle('bg-blue-600', settings.format === 'jpeg');
        formatJpgBtn.classList.toggle('bg-gray-700', settings.format !== 'jpeg');
        formatPngBtn.classList.toggle('bg-blue-600', settings.format === 'png');
        formatPngBtn.classList.toggle('bg-gray-700', settings.format !== 'png');
        
        jpgQualityContainer.classList.toggle('hidden', settings.format !== 'jpeg');

        jpgQualitySlider.value = settings.jpgQuality;
        jpgQualityInput.value = settings.jpgQuality;
    }
    
    // --- コントロールイベント ---
    function syncSliderAndInput(slider, input) {
        slider.addEventListener('input', () => {
            input.value = slider.value;
            updateSettingsFromControls();
            drawAllCanvases();
        });
        input.addEventListener('change', () => {
            const min = parseFloat(input.min);
            const max = parseFloat(input.max);
            let value = parseFloat(input.value);
            if (isNaN(value)) { value = min; }
            if (value < min) value = min;
            if (value > max) value = max;
            input.value = value;
            slider.value = value;
            updateSettingsFromControls();
            drawAllCanvases();
        });
    }

    syncSliderAndInput(sizeSlider, sizeInput);
    syncSliderAndInput(paddingSlider, paddingInput);
    syncSliderAndInput(jpgQualitySlider, jpgQualityInput);
    syncSliderAndInput(copyrightFontSizeSlider, copyrightFontSizeInput);

    copyrightTextInput.addEventListener('input', () => { 
        updateSettingsFromControls(); 
        drawAllCanvases(); 
    });

    resizeModeBtns.querySelectorAll('button').forEach(btn => {
        btn.addEventListener('click', () => {
            settings.resizeMode = btn.dataset.mode;
            updateControls();
            drawAllCanvases();
        });
    });

    copyrightColorBtns.querySelectorAll('button').forEach(btn => {
        btn.addEventListener('click', () => {
            settings.copyright.color = btn.dataset.color;
            updateControls();
            drawAllCanvases();
        });
    });

    copyrightPositionBtns.querySelectorAll('button').forEach(btn => {
        btn.addEventListener('click', () => {
            settings.copyright.position = btn.dataset.pos;
            updateControls();
            drawAllCanvases();
        });
    });

    // Background Controls
    bgColorInput.addEventListener('input', () => {
        settings.bgColor = bgColorInput.value;
        settings.bgImage = null;
        updateControls();
        drawAllCanvases();
    });

    bgTransparentBtn.addEventListener('click', () => {
        settings.bgColor = 'transparent';
        settings.bgImage = null;
        updateControls();
        drawAllCanvases();
    });

    bgImageBtn.addEventListener('click', () => bgImageInput.click());
    bgImageInput.addEventListener('change', (e) => {
        if (e.target.files && e.target.files[0]) {
            const reader = new FileReader();
            reader.onload = (event) => {
                const img = new Image();
                img.onload = () => {
                    settings.bgImage = img;
                    settings.bgColor = '#FFFFFF';
                    updateControls();
                    drawAllCanvases();
                };
                img.src = event.target.result;
            }
            reader.readAsDataURL(e.target.files[0]);
        }
    });


    // Shadow controls
    shadowEnable.addEventListener('change', () => {
        settings.shadow.enabled = shadowEnable.checked;
        updateControls();
        drawAllCanvases();
    });

    [shadowColorInput, shadowOpacitySlider, shadowBlurSlider, shadowOffsetXSlider, shadowOffsetYSlider].forEach(input => {
        input.addEventListener('input', () => {
            updateSettingsFromControls();
            drawAllCanvases();
        });
    });

    // Format controls
    formatJpgBtn.addEventListener('click', () => { 
        settings.format = 'jpeg'; 
        if(settings.bgColor === 'transparent') {
            settings.bgColor = '#FFFFFF';
        }
        updateControls();
        drawAllCanvases();
    });
    formatPngBtn.addEventListener('click', () => { 
        settings.format = 'png'; 
        updateControls();
        drawAllCanvases();
    });
    
    function updateSettingsFromControls() {
        settings.size = parseInt(sizeInput.value);
        settings.padding = parseInt(paddingInput.value);
        settings.copyright.text = copyrightTextInput.value;
        settings.copyright.fontSize = parseInt(copyrightFontSizeInput.value);
        
        settings.shadow.enabled = shadowEnable.checked;
        settings.shadow.color = shadowColorInput.value;
        settings.shadow.opacity = parseFloat(shadowOpacitySlider.value);
        shadowOpacityValue.textContent = `${Math.round(settings.shadow.opacity * 100)}%`;
        settings.shadow.blur = parseInt(shadowBlurSlider.value);
        shadowBlurValue.textContent = `${settings.shadow.blur}px`;
        settings.shadow.offsetX = parseInt(shadowOffsetXSlider.value);
        shadowOffsetXValue.textContent = `${settings.shadow.offsetX}px`;
        settings.shadow.offsetY = parseInt(shadowOffsetYSlider.value);
        shadowOffsetYValue.textContent = `${settings.shadow.offsetY}px`;
        
        settings.jpgQuality = parseInt(jpgQualityInput.value);
    }

    function hexToRgb(hex) {
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : null;
    }

    // --- Canvas描画 ---
    function drawAllCanvases() {
        imageSources.forEach(src => {
            const canvas = gridInner.querySelector(`canvas[data-id="${src.id}"]`);
            if(canvas) {
                drawSingleCanvas(canvas, canvas.getContext('2d'), src.img);
            }
        });
    }

    function drawSingleCanvas(canvasEl, ctxEl, img) {
        let totalWidth, totalHeight;
        let imageDrawWidth, imageDrawHeight;
        let imageDrawX, imageDrawY;
        
        const padding = settings.padding;
        const size = settings.size;
        const imgRatio = img.width / img.height;

        if (settings.resizeMode === 'square') {
            totalWidth = size + padding * 2;
            totalHeight = size + padding * 2;
            
            if (imgRatio >= 1) { // 横長
                imageDrawWidth = size;
                imageDrawHeight = size / imgRatio;
            } else { // 縦長
                imageDrawHeight = size;
                imageDrawWidth = size * imgRatio;
            }
            imageDrawX = padding + (size - imageDrawWidth) / 2;
            imageDrawY = padding + (size - imageDrawHeight) / 2;

        } else { // aspectRatio
            let targetWidth, targetHeight;
            if (imgRatio >= 1) { // 横長または正方形
                targetWidth = size;
                targetHeight = Math.round(targetWidth / imgRatio);
            } else { // 縦長
                targetHeight = size;
                targetWidth = Math.round(targetHeight * imgRatio);
            }
            totalWidth = targetWidth + padding * 2;
            totalHeight = targetHeight + padding * 2;
            imageDrawWidth = targetWidth;
            imageDrawHeight = targetHeight;
            imageDrawX = padding;
            imageDrawY = padding;
        }

        canvasEl.width = totalWidth;
        canvasEl.height = totalHeight;

        // 背景
        if (settings.bgImage) {
            const bgRatio = settings.bgImage.width / settings.bgImage.height;
            const canvasRatio = totalWidth / totalHeight;
            let sx=0, sy=0, sWidth=settings.bgImage.width, sHeight=settings.bgImage.height;
            if (bgRatio > canvasRatio) {
                sWidth = sHeight * canvasRatio;
                sx = (settings.bgImage.width - sWidth) / 2;
            } else {
                sHeight = sWidth / canvasRatio;
                sy = (settings.bgImage.height - sHeight) / 2;
            }
            ctxEl.drawImage(settings.bgImage, sx, sy, sWidth, sHeight, 0, 0, totalWidth, totalHeight);
        } else if (settings.bgColor !== 'transparent') {
            ctxEl.fillStyle = settings.bgColor;
            ctxEl.fillRect(0, 0, totalWidth, totalHeight);
        }

        // シャドウ設定
        if (settings.shadow.enabled) {
            const rgb = hexToRgb(settings.shadow.color);
            if (rgb) {
                ctxEl.shadowColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${settings.shadow.opacity})`;
            }
            ctxEl.shadowBlur = settings.shadow.blur;
            ctxEl.shadowOffsetX = settings.shadow.offsetX;
            ctxEl.shadowOffsetY = settings.shadow.offsetY;
        }

        // 画像
        ctxEl.drawImage(img, imageDrawX, imageDrawY, imageDrawWidth, imageDrawHeight);

        // シャドウをリセット
        ctxEl.shadowColor = 'transparent';
        ctxEl.shadowBlur = 0; ctxEl.shadowOffsetX = 0; ctxEl.shadowOffsetY = 0;

        // コピーライト
        if (settings.copyright.text) {
            const fontSize = settings.copyright.fontSize; 
            ctxEl.font = `bold ${fontSize}px sans-serif`;

            if (settings.copyright.color === 'white') {
                ctxEl.fillStyle = 'rgba(255, 255, 255, 0.8)';
                ctxEl.strokeStyle = 'rgba(0, 0, 0, 0.8)';
            } else {
                ctxEl.fillStyle = 'rgba(0, 0, 0, 0.8)';
                ctxEl.strokeStyle = 'rgba(255, 255, 255, 0.8)';
            }

            ctxEl.lineWidth = fontSize * 0.15;
            let y = totalHeight - (fontSize * 0.5); 
            let x;
            
            switch (settings.copyright.position) {
                case 'left': ctxEl.textAlign = 'left'; x = padding + (fontSize * 0.5); break;
                case 'right': ctxEl.textAlign = 'right'; x = totalWidth - padding - (fontSize * 0.5); break;
                default: ctxEl.textAlign = 'center'; x = totalWidth / 2; break;
            }
            ctxEl.strokeText(settings.copyright.text, x, y);
            ctxEl.fillText(settings.copyright.text, x, y);
        }
        
        // サイズ表示を更新
        const groupEl = canvasEl.closest('.group');
        if (groupEl) {
            const sizeDisplay = groupEl.querySelector('.processed-size');
            if (sizeDisplay) {
                sizeDisplay.textContent = `${totalWidth} x ${totalHeight}px`;
            }
        }
    }
    
    // --- ダウンロード処理 ---
    downloadBtn.addEventListener('click', async () => {
        if (imageSources.length === 0) return;
        
        showLoading('ダウンロード準備中...');
        const offscreenCanvas = document.createElement('canvas');
        const offscreenCtx = offscreenCanvas.getContext('2d');
        const quality = settings.jpgQuality / 100;

        if (imageSources.length === 1) {
            const source = imageSources[0];
            drawSingleCanvas(offscreenCanvas, offscreenCtx, source.img);
            const fileName = generateFileName(source.originalName, offscreenCanvas.width, offscreenCanvas.height);
            offscreenCanvas.toBlob(blob => {
                saveAs(blob, fileName);
                hideLoading();
            }, `image/${settings.format}`, quality);
        } else {
            const zip = new JSZip();
            const folderName = generateFolderName();
            
            for (let i = 0; i < imageSources.length; i++) {
                const source = imageSources[i];
                loadingText.textContent = `画像を処理中... (${i + 1}/${imageSources.length})`;
                drawSingleCanvas(offscreenCanvas, offscreenCtx, source.img);
                const blob = await new Promise(resolve => offscreenCanvas.toBlob(resolve, `image/${settings.format}`, quality));
                const fileName = generateFileName(source.originalName, offscreenCanvas.width, offscreenCanvas.height);
                zip.file(fileName, blob);
            }
            loadingText.textContent = 'ZIPファイルを生成中...';
            zip.generateAsync({ type: 'blob' }).then(content => {
                saveAs(content, `${folderName}.zip`);
                hideLoading();
            });
        }
    });

    // --- ヘルパー関数 ---
    function generateFileName(originalName, width, height) {
        const nameWithoutExt = originalName.includes('.') ? originalName.split('.').slice(0, -1).join('.') : originalName;
        const ext = settings.format === 'jpeg' ? 'jpg' : 'png';
        return `${nameWithoutExt}_${width}x${height}.${ext}`;
    }

    function generateFolderName() {
        const now = new Date();
        const y = now.getFullYear();
        const m = String(now.getMonth() + 1).padStart(2, '0');
        const d = String(now.getDate()).padStart(2, '0');
        const h = String(now.getHours()).padStart(2, '0');
        const min = String(now.getMinutes()).padStart(2, '0');
        return `加工画像_${y}${m}${d}${h}${min}`;
    }

    function showLoading(text = '処理中...') {
        loadingText.textContent = text;
        loadingOverlay.classList.remove('hidden');
    }

    function hideLoading() {
        loadingOverlay.classList.add('hidden');
    }
    
    // 初期化
    updateControls();
});
</script>

</body>
</html>

画像一括加工「リサイズくん」

ツールだけ利用したい方はこちら

Gemini Canvasでの制作過程

初見のプロンプト

画像をアップロードORドロップして同時に自動で画像加工ができるサイトが作りたい。 バーやボタンを使いユーザビリティの高いエディタにして

条件
サイズ指定（デフォルトは大きい方を800px）
解像度指定
余白の指定（余白に合わせて画像も拡大縮小）
ダウンロード画像はJPG・PNG
背景色OR任意の背景画像が指定できる
任意でコピーライトが指定できる
コピーライトは場所を指定できる（左下・真ん中・右下）
２枚以上を同時にダウンロードする場合はフォルダに入れて圧縮してダウンロード
ダウンロードしたファイル名の指定：元のファイル名_加工後のサイズ
ダウンロードしたフォルダ名の指定：加工画像_日時

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

同時に加工できるようにして
余白の設定はバーにして欲しい
画像の背景にドロップシャドウを任意で入れるようにして
サイズ指定は片方でいい。バーにして大きい方が動けばいい
個別の画像を消せるようにして
上に加工設定
下にプレビュー
加工設定のファイル選択は消去してプレビューの場所からアップロード・ドロップができるようにして
サイズ指定は片方でいい。バーにして大きい方が動けばいい
これを戻して、加工後正方形か画像に合わせて縮小選べるようにしたい
コピーライトの色を選べるようにしたい
黒字にしろ縁、白地に黒縁
ドロップシャドウの加工がもう少し自由にできるようにしたい
加工後の画質選べるようにして
ドロップシャドウにチェックを入れると出てくるポップアップが切れて使いずらい
ドロップシャドウ設定UIまだ使いづらい
ボタンがごちゃごちゃして使いづらい、１から整理して

などなど、ひたすらGeminiにパワハラしていく（笑）
大体バイブコーディングでエディタを作る時は、１時間ぐらいで作成していますが、今回は納得行くものができるまで２時間ぐらいはかかりました。機能が増えれば増えるほどコードも複雑になりエラーの回数も増えるので。よくGeminiと喧嘩をしています。

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

画像加工ツール「リサイズくん」作成プロンプトまとめ
このドキュメントは、多機能な画像一括加工ツール「リサイズくん」を開発する過程で、AIに対してどのような指示（プロンプト）が出されたかを時系列で記録したものです。シンプルなアイデアから始まり、対話を通じてどのように機能が洗練されていったかをご覧いただけます。

1. 発端：ツールの基本構想
すべては、画像加工サイトを作りたいというシンプルな要望から始まりました。

最初のプロンプト：
画像をアップロードまたはドラッグ＆ドロップして、同時に自動で画像加工ができるサイトが作りたい。バーやボタンを使いユーザビリティの高いエディタにしてほしい。

【初期要件】

サイズ指定：デフォルトは長辺800px

余白の指定：余白に合わせて画像も拡大縮小

ダウンロード形式：JPG・PNG

背景：背景色または任意の背景画像が指定できる

コピーライト：任意で指定でき、場所（左下・中央・右下）も選択可能

一括処理：複数画像をまとめてZIP形式でダウンロード

ファイル名の命名規則：元のファイル名_加工後のサイズ

フォルダ名の命名規則：加工画像_日時

2. UI/UXの改善サイクル
初期バージョンが完成した後、使いやすさを向上させるための改善要望が次々と出されました。

Step 1: 操作性の改善
プロンプト: 「同時に加工できるようにして」「余白の設定はバーにして欲しい」

変更点: 全画像に設定が共通で適用されるようになり、余白設定が直感的なスライダーに変更されました。

Step 2: レイアウトの模索（3カラム → 2カラム → 上下分割）
プロンプト: 「３カラムが使いずらいな」

変更点: プレビューを左、設定を右に配置した2カラムレイアウトに変更。

プロンプト: 「左のプレビューからファイル選択ドロップできるようにしてほしい」

変更点: メインのプレビューエリアがアップロードエリアを兼ねるようになり、利便性が向上。

プロンプト: 「一度作り直してみて」「上に加工設定、下にプレビューにして」

変更点: ユーザーの操作フローを考慮し、設定パネルを上、プレビューを下にしたレイアウトに全面的に刷新。

Step 3: レイアウトの再決定（上下分割 → 最終的な2カラムへ）
プロンプト: 「まだゴチャゴチャして見える」「プレビューエリアと２カラムにしてみて」

変更点: ユーザー体験を最優先し、最終的に「左に大きなプレビュー、右に設定パネル」という、最もシンプルで分かりやすい2カラムレイアウトに落ち着きました。これが現在のUIの原型です。

3. 機能の追加と高度化
UIの改善と並行して、より細かいニーズに応えるための機能追加が行われました。

デザイン機能の強化
プロンプト: 「画像の背景にドロップシャドウを任意で入れるようにして」「ドロップシャドウの加工がもう少し自由にできるようにしたい」

変更点: 単純なON/OFFだけでなく、色・ぼかし・位置・不透明度を細かく調整できる、高度なドロップシャドウ機能が実装されました。

プロンプト: 「コピーライトの色を選べるようにしたい（黒字に白縁、白地に黒縁）」

変更点: 背景色に応じて見やすい文字色が選べるよう、縁取り付きの文字色プリセットが追加されました。

プロンプト: 「PNGの時に背景に透明も追加したい」

変更点: PNG形式選択時に、背景を透過させるオプションが追加されました。

操作性の向上
プロンプト: 「加工後の画質選べるようにして」

変更点: JPG形式の品質を調整できるスライダーが追加され、ファイルサイズと画質のバランス調整が可能になりました。

プロンプト: 「バーは数字入力でも可能にして」

変更点: スライダーでの直感的な操作に加え、数値の直接入力にも対応し、正確な値設定が可能になりました。

プロンプト: 「プレビューの画像はそれぞれ加工後のサイズが分かるようにして」

変更点: 各プレビューに加工後の寸法がリアルタイムで表示されるようになり、ダウンロード前に結果を正確に把握できるようになりました。

4. バグ修正と細部の調整
開発の過程で発生した問題点や、より自然な操作感を実現するための細かな修正も頻繁に行われました。

プロンプト: 「アップできなくなった」「余白を増やすとフォントサイズが変わるのを直して」「一度背景画像を選んだら、背景をカラーにすることができなくなるのって直せる？」

変更点: これらの具体的なプロンプトに基づき、アップロード機能の不具合修正や、設定変更時の意図しない挙動の修正が都度行われ、ツールの安定性が向上しました。

5. ツールの命名
最後に、このツールに名前を付けることで、プロジェクトは完成を迎えました。

プロンプト: 「SEOを意識して日本人にわかり易い名前にして」

提案: 「秒速！画像加工」「一括編集ツール『リサイズくん』」などを提案。

プロンプト: 「リサイズくん気に入ったんだけどツールの何処かに入れてほしい」

変更点: ユーザーに選ばれた「リサイズくん」という名前が、正式にツールのタイトルとUIに反映されました。

まとめ
「リサイズくん」は、最初の包括的なアイデアから始まり、AIとの対話を通じてレイアウトの試行錯誤、機能の追加、細部の改善を繰り返すことで完成しました。この開発プロセスは、具体的な要望を伝えることで、ツールがユーザーの理想に近づいていく良い例と言えるでしょう。