X（Twitter）のタイムラインで画像が切れてしまう問題を解決！枚数に応じて最適なアスペクト比に自動調整し、投稿プレビューまで確認できるツールの作成方法を徹底解説。HTMLとCSSで誰でも簡単に作れるテクニックを紹介します。

現在のXでツールのとおりになるか確認中！

HTML コードビューア

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>X(Twitter)画像アスペクト比調整ツール</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css" xintegrity="sha512-hvNR0F/e2Jb1Mj9bZRdOXym0x5odssKRybDEcvy//nYRAAfg2B/O98EQp4JpS2I/FNZX7uKfyQRVsePPbnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.js" xintegrity="sha512-9KkIqdfN7ipEW6B6k+Aq20PVSAUiGwCrsG4eAC4vkSjLpNCNjfbNLvIseYDdePK5iskCYsDYoMKHfLwBCULpYA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/lucide@latest/dist/umd/lucide.min.js"></script>
    <style>
        body {
            font-family: 'Inter', 'Noto Sans JP', sans-serif;
            background-color: #101720; /* Dark background */
            color: #e2e8f0;
        }
        .cropper-container {
            background-color: #1e293b;
        }
        .slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            background: #3b82f6;
            cursor: pointer;
            border-radius: 50%;
        }
        .slider-track {
            width: 100%;
            height: 4px;
            cursor: pointer;
            background: #475569;
            border-radius: 2px;
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            background: #3b82f6;
            cursor: pointer;
            border-radius: 50%;
            margin-top: -6px;
        }

        input[type="range"]::-moz-range-thumb {
            width: 16px;
            height: 16px;
            background: #3b82f6;
            cursor: pointer;
            border-radius: 50%;
        }

        /* Preview Grid Styles */
        .preview-grid { display: grid; gap: 2px; border-radius: 16px; overflow: hidden; aspect-ratio: 1.91 / 1; }
        .preview-grid-1 { grid-template-columns: 1fr; }
        .preview-grid-2 { grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1; }
        .preview-grid-3 { grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1; }
        .preview-grid-3 > div:first-child { grid-row: span 2; }
        .preview-grid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1.91 / 1; }
        
        .preview-grid div {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
        }

        /* Hide default file input */
        #image-upload-input {
            display: none;
        }
    </style>
</head>
<body class="antialiased">
    <div class="container mx-auto p-4 md:p-8">
        <header class="text-center mb-8">
            <h1 class="text-3xl md:text-4xl font-bold text-white">X(Twitter)画像アスペクト比調整ツール</h1>
            <p class="text-slate-400 mt-2">枚数に応じて最適な構図に自動トリミング＆タイムラインプレビュー</p>
        </header>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Left Side: Editor -->
            <div class="bg-slate-800 p-6 rounded-2xl shadow-lg">
                <div id="upload-area" class="border-2 border-dashed border-slate-600 rounded-xl p-8 text-center cursor-pointer hover:bg-slate-700 transition-colors">
                    <div class="flex flex-col items-center justify-center space-y-4">
                        <i data-lucide="upload-cloud" class="w-12 h-12 text-slate-500"></i>
                        <p class="text-slate-400">クリックまたはドラッグ＆ドロップで画像を選択</p>
                        <p class="text-xs text-slate-500">最大4枚までアップロードできます</p>
                    </div>
                    <input type="file" id="image-upload-input" accept="image/*" multiple>
                </div>

                <div id="image-thumbnails" class="flex flex-wrap gap-4 mt-6"></div>

                <div id="editor-section" class="mt-6 hidden">
                    <h2 class="text-xl font-semibold mb-4">画像エディタ</h2>
                    <div class="bg-slate-900 rounded-lg overflow-hidden">
                        <img decoding="async" id="image-editor" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="Image for editing" data-src="https://aitool-lab.jp/ai/work-efficiency/x-image-aspect-ratio-tool/%20alt=" class="lazyload"><noscript><img decoding="async" id="image-editor" src="https://aitool-lab.jp/ai/work-efficiency/x-image-aspect-ratio-tool/" alt="Image for editing" data-eio="l"></noscript>
                    </div>
                    
                    <div class="mt-6 space-y-6">
                        <h3 class="text-lg font-medium">色の調整</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
                            <!-- Brightness -->
                            <div>
                                <label for="brightness" class="text-sm font-medium text-slate-300 flex justify-between"><span>明るさ</span><span id="brightness-value">100%</span></label>
                                <input id="brightness" type="range" min="0" max="200" value="100" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer">
                            </div>
                            <!-- Contrast -->
                            <div>
                                <label for="contrast" class="text-sm font-medium text-slate-300 flex justify-between"><span>コントラスト</span><span id="contrast-value">100%</span></label>
                                <input id="contrast" type="range" min="0" max="200" value="100" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer">
                            </div>
                            <!-- Saturation -->
                            <div>
                                <label for="saturate" class="text-sm font-medium text-slate-300 flex justify-between"><span>彩度</span><span id="saturate-value">100%</span></label>
                                <input id="saturate" type="range" min="0" max="200" value="100" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer">
                            </div>
                            <!-- Sepia -->
                            <div>
                                <label for="sepia" class="text-sm font-medium text-slate-300 flex justify-between"><span>セピア</span><span id="sepia-value">0%</span></label>
                                <input id="sepia" type="range" min="0" max="100" value="0" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer">
                            </div>
                        </div>
                        <button id="reset-filters" class="w-full py-2 px-4 bg-slate-600 hover:bg-slate-500 text-white font-semibold rounded-lg transition-colors">
                            色の調整をリセット
                        </button>
                    </div>

                    <div class="mt-8">
                         <button id="download-btn" class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg transition-colors flex items-center justify-center gap-2">
                             <i data-lucide="download"></i>
                             <span>加工した画像をダウンロード</span>
                         </button>
                    </div>
                </div>
                 <div id="no-image-placeholder" class="text-center py-16 text-slate-500">
                    <p>画像をアップロードして編集を開始</p>
                </div>
            </div>

            <!-- Right Side: Preview -->
            <div class="bg-slate-800 p-6 rounded-2xl shadow-lg">
                <h2 class="text-xl font-semibold mb-4">タイムラインプレビュー</h2>
                <div class="bg-[#000] p-4 rounded-xl border border-slate-700 w-full max-w-xl mx-auto">
                    <div class="flex items-start space-x-3">
                        <!-- Profile Icon -->
                        <div class="w-12 h-12 rounded-full bg-slate-600 flex-shrink-0">
                            <img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="rounded-full lazyload" alt="User Icon" data-src="https://placehold.co/48x48/334155/e2e8f0?text=U"><noscript><img decoding="async" src="https://placehold.co/48x48/334155/e2e8f0?text=U" class="rounded-full" alt="User Icon" data-eio="l"></noscript>
                        </div>
                        <div class="flex-1">
                            <!-- User Info -->
                            <div class="flex items-center space-x-2">
                                <span class="font-bold text-white">あなた</span>
                                <span class="text-slate-500">@your_account</span>
                                <span class="text-slate-500">·</span>
                                <span class="text-slate-500">Now</span>
                            </div>
                            <!-- Tweet Text -->
                            <p class="mt-1 text-white">
                                画像を編集して投稿！こんな感じに見えます👀
                            </p>
                            <!-- Image Preview Area -->
                            <div id="preview-container" class="mt-3">
                                <!-- Images will be injected here by JS -->
                                <div class="w-full aspect-video bg-slate-900 rounded-2xl flex items-center justify-center text-slate-600">
                                    <p>プレビューがここに表示されます</p>
                                </div>
                            </div>
                            <!-- Action Icons -->
                            <div class="flex justify-between text-slate-500 mt-4 max-w-sm">
                                <i data-lucide="message-circle" class="w-5 h-5"></i>
                                <i data-lucide="repeat-2" class="w-5 h-5"></i>
                                <i data-lucide="heart" class="w-5 h-5"></i>
                                <i data-lucide="bar-chart-2" class="w-5 h-5"></i>
                                <i data-lucide="share-2" class="w-5 h-5"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const uploadArea = document.getElementById('upload-area');
        const fileInput = document.getElementById('image-upload-input');
        const thumbnailsContainer = document.getElementById('image-thumbnails');
        const editorSection = document.getElementById('editor-section');
        const noImagePlaceholder = document.getElementById('no-image-placeholder');
        const imageEditor = document.getElementById('image-editor');
        const previewContainer = document.getElementById('preview-container');
        const downloadBtn = document.getElementById('download-btn');
        const resetFiltersBtn = document.getElementById('reset-filters');
        
        const brightnessSlider = document.getElementById('brightness');
        const contrastSlider = document.getElementById('contrast');
        const saturateSlider = document.getElementById('saturate');
        const sepiaSlider = document.getElementById('sepia');

        const brightnessValue = document.getElementById('brightness-value');
        const contrastValue = document.getElementById('contrast-value');
        const saturateValue = document.getElementById('saturate-value');
        const sepiaValue = document.getElementById('sepia-value');

        let cropper = null;
        let images = []; // { id, file, url, adjustments, croppedDataUrl }
        let activeImageId = null;

        // --- Upload Logic ---
        uploadArea.addEventListener('click', () => fileInput.click());
        fileInput.addEventListener('change', handleFiles);
        
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            uploadArea.addEventListener(eventName, preventDefaults, false);
        });

        ['dragenter', 'dragover'].forEach(eventName => {
            uploadArea.addEventListener(eventName, () => uploadArea.classList.add('bg-slate-700'), false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            uploadArea.addEventListener(eventName, () => uploadArea.classList.remove('bg-slate-700'), false);
        });

        uploadArea.addEventListener('drop', handleDrop, false);

        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }

        function handleDrop(e) {
            handleFiles(e);
        }

        async function handleFiles(e) {
            const files = Array.from((e.dataTransfer || e.target).files);
            if (images.length + files.length > 4) {
                alert('画像は4枚までしかアップロードできません。');
                return;
            }

            const newImages = [];
            const readerPromises = files
                .filter(file => file.type.startsWith('image/'))
                .map(file => {
                    return new Promise(resolve => {
                        const reader = new FileReader();
                        reader.onload = (event) => {
                            const id = Date.now() + Math.random();
                            newImages.push({
                                id,
                                file,
                                url: event.target.result,
                                adjustments: { brightness: 100, contrast: 100, saturate: 100, sepia: 0 },
                                croppedDataUrl: null
                            });
                            resolve();
                        };
                        reader.readAsDataURL(file);
                    });
                });
            
            await Promise.all(readerPromises);

            if (newImages.length > 0) {
                const wasEmpty = images.length === 0;
                images.push(...newImages);
                // Invalidate all crops
                images.forEach(img => img.croppedDataUrl = null);

                renderThumbnails();

                if (wasEmpty) {
                    selectImage(images[0].id);
                } else {
                    updateCropperAspectRatio();
                    updatePreview();
                }
            }

            fileInput.value = ''; // Reset input for next selection
        }

        // --- UI Rendering ---
        function renderThumbnails() {
            thumbnailsContainer.innerHTML = '';
            images.forEach((image, index) => {
                const thumbWrapper = document.createElement('div');
                thumbWrapper.className = 'relative group flex-shrink-0 w-20 h-20';
                
                const thumb = document.createElement('img');
                thumb.src = image.url;
                thumb.className = `w-full h-full object-cover rounded-lg cursor-pointer border-2 transition-all ${activeImageId === image.id ? 'border-blue-500 scale-105' : 'border-transparent'}`;
                thumb.onclick = () => selectImage(image.id);
                
                const removeBtn = document.createElement('button');
                removeBtn.innerHTML = '×';
                removeBtn.className = 'absolute -top-2 -right-2 w-6 h-6 bg-red-600 text-white rounded-full flex items-center justify-center font-bold text-lg opacity-0 group-hover:opacity-100 transition-opacity z-10';
                removeBtn.onclick = (e) => {
                    e.stopPropagation();
                    removeImage(image.id);
                };

                const controlsContainer = document.createElement('div');
                controlsContainer.className = 'absolute inset-0 bg-black bg-opacity-50 flex justify-between items-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg';

                const leftArrow = document.createElement('button');
                leftArrow.className = 'text-white p-1 hover:bg-white/20 rounded-full';
                leftArrow.innerHTML = '<i data-lucide="arrow-left" class="w-5 h-5"></i>';
                if (index === 0) {
                    leftArrow.classList.add('invisible');
                }
                leftArrow.onclick = (e) => {
                    e.stopPropagation();
                    moveImage(image.id, 'left');
                };

                const rightArrow = document.createElement('button');
                rightArrow.className = 'text-white p-1 hover:bg-white/20 rounded-full';
                rightArrow.innerHTML = '<i data-lucide="arrow-right" class="w-5 h-5"></i>';
                if (index === images.length - 1) {
                    rightArrow.classList.add('invisible');
                }
                rightArrow.onclick = (e) => {
                    e.stopPropagation();
                    moveImage(image.id, 'right');
                };

                controlsContainer.appendChild(leftArrow);
                controlsContainer.appendChild(rightArrow);
                
                thumbWrapper.appendChild(thumb);
                thumbWrapper.appendChild(removeBtn);
                thumbWrapper.appendChild(controlsContainer);
                thumbnailsContainer.appendChild(thumbWrapper);
            });
            lucide.createIcons();
        }
        
        function selectImage(id) {
            activeImageId = id;
            const image = images.find(img => img.id === id);
            if (!image) return;

            editorSection.classList.remove('hidden');
            noImagePlaceholder.classList.add('hidden');
            
            setupCropper(image.url);
            applyAdjustmentsToSliders(image.adjustments);
            renderThumbnails();
        }

        function removeImage(id) {
            const wasActive = activeImageId === id;
            images = images.filter(img => img.id !== id);

            // Invalidate all saved crops because the aspect ratio might have changed
            images.forEach(img => img.croppedDataUrl = null);

            renderThumbnails();

            if (images.length === 0) {
                activeImageId = null;
                if (cropper) cropper.destroy();
                cropper = null;
                editorSection.classList.add('hidden');
                noImagePlaceholder.classList.remove('hidden');
            } else if (wasActive) {
                // If the active one was deleted, select the first one
                selectImage(images[0].id);
            } else {
                // If a non-active one was deleted, just update the aspect ratio of the current cropper
                updateCropperAspectRatio();
            }
            
            // Always update the preview at the end
            updatePreview();
        }
        
        function moveImage(id, direction) {
            const index = images.findIndex(img => img.id === id);
            if (index === -1) return;

            const newIndex = direction === 'left' ? index - 1 : index + 1;

            if (newIndex < 0 || newIndex >= images.length) return;

            // Swap elements
            [images[index], images[newIndex]] = [images[newIndex], images[index]];
            
            // The order has changed, which might affect the 3-image layout aspect ratios.
            images.forEach(img => img.croppedDataUrl = null);

            renderThumbnails();
            updatePreview();
        }

        // --- Cropper Logic ---
        function getAspectRatio() {
            switch (images.length) {
                case 1: return 1.91 / 1;
                case 2: return 0.9 / 1;
                case 3: return 0.75 / 1;
                case 4: return 16 / 9;
                default: return NaN; // Free crop
            }
        }

        function setupCropper(imageUrl) {
            if (cropper) {
                cropper.destroy();
            }
            imageEditor.src = imageUrl;
            cropper = new Cropper(imageEditor, {
                aspectRatio: getAspectRatio(),
                viewMode: 2,
                autoCropArea: 0.9,
                responsive: true,
                cropend: () => {
                    updatePreview();
                },
                ready: () => {
                    updatePreview();
                }
            });
        }
        
        function updateCropperAspectRatio() {
            if(cropper) {
                cropper.setAspectRatio(getAspectRatio());
            }
        }

        // --- Image Adjustments ---
        [brightnessSlider, contrastSlider, saturateSlider, sepiaSlider].forEach(slider => {
            slider.addEventListener('input', applyAdjustmentsToImage);
        });

        function applyAdjustmentsToImage() {
            if (!activeImageId) return;

            const adjustments = {
                brightness: brightnessSlider.value,
                contrast: contrastSlider.value,
                saturate: saturateSlider.value,
                sepia: sepiaSlider.value,
            };

            const image = images.find(img => img.id === activeImageId);
            image.adjustments = adjustments;
            
            updateFilterStyle();
            updateSliderValues(adjustments);
            updatePreview();
        }

        function applyAdjustmentsToSliders(adjustments) {
            brightnessSlider.value = adjustments.brightness;
            contrastSlider.value = adjustments.contrast;
            saturateSlider.value = adjustments.saturate;
            sepiaSlider.value = adjustments.sepia;
            updateFilterStyle();
            updateSliderValues(adjustments);
        }
        
        function updateFilterStyle() {
             if (!cropper) return;
             const activeImage = images.find(img => img.id === activeImageId);
             if(!activeImage) return;

             const { brightness, contrast, saturate, sepia } = activeImage.adjustments;
             const filterString = `brightness(${brightness}%) contrast(${contrast}%) saturate(${saturate}%) sepia(${sepia}%)`;
             
             // Apply filter to both the background image canvas and the cropped viewbox image
             const cropperElements = document.querySelectorAll('.cropper-canvas, .cropper-view-box');
             cropperElements.forEach(el => {
                el.style.filter = filterString;
             });
        }

        function updateSliderValues(adjustments) {
            brightnessValue.textContent = `${adjustments.brightness}%`;
            contrastValue.textContent = `${adjustments.contrast}%`;
            saturateValue.textContent = `${adjustments.saturate}%`;
            sepiaValue.textContent = `${adjustments.sepia}%`;
        }

        resetFiltersBtn.addEventListener('click', () => {
            if (!activeImageId) return;
            const image = images.find(img => img.id === activeImageId);
            image.adjustments = { brightness: 100, contrast: 100, saturate: 100, sepia: 0 };
            applyAdjustmentsToSliders(image.adjustments);
            updatePreview();
        });

        // --- Preview Logic ---
        async function generateDefaultCroppedUrl(imageUrl, targetAspectRatio) {
            return new Promise(resolve => {
                const img = new Image();
                img.crossOrigin = "anonymous"; // Handle potential CORS issues
                img.onload = () => {
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');

                    const originalWidth = img.width;
                    const originalHeight = img.height;
                    const originalAspectRatio = originalWidth / originalHeight;

                    let srcX = 0, srcY = 0, srcWidth = originalWidth, srcHeight = originalHeight;

                    if (originalAspectRatio > targetAspectRatio) {
                        // Original image is wider than target
                        srcHeight = originalHeight;
                        srcWidth = srcHeight * targetAspectRatio;
                        srcX = (originalWidth - srcWidth) / 2;
                    } else {
                        // Original image is taller than or same aspect as target
                        srcWidth = originalWidth;
                        srcHeight = srcWidth / targetAspectRatio;
                        srcY = (originalHeight - srcHeight) / 2;
                    }

                    const outputWidth = 800; // Use a fixed resolution for previews
                    canvas.width = outputWidth;
                    canvas.height = outputWidth / targetAspectRatio;

                    ctx.drawImage(img, srcX, srcY, srcWidth, srcHeight, 0, 0, canvas.width, canvas.height);
                    resolve(canvas.toDataURL());
                };
                img.onerror = () => {
                    resolve("https://placehold.co/600x400/1e293b/475569?text=Error"); // Fallback
                }
                img.src = imageUrl;
            });
        }

        function updatePreview() {
            if (images.length === 0) {
                previewContainer.innerHTML = `<div class="w-full aspect-video bg-slate-900 rounded-2xl flex items-center justify-center text-slate-600"><p>プレビューがここに表示されます</p></div>`;
                return;
            }
            
            const cropPromises = images.map(img => {
                return new Promise(async (resolve) => {
                    let croppedUrl;
                    if (img.id === activeImageId && cropper) {
                        const croppedCanvas = cropper.getCroppedCanvas({
                            imageSmoothingEnabled: true,
                            imageSmoothingQuality: 'high'
                        });
                        
                        if (croppedCanvas) {
                            croppedUrl = croppedCanvas.toDataURL(img.file.type);
                            img.croppedDataUrl = croppedUrl; // Save this result
                        } else {
                            // Fallback to the last known good URL or generate a default one
                            croppedUrl = img.croppedDataUrl || await generateDefaultCroppedUrl(img.url, getAspectRatio());
                        }
                    } else {
                        // For non-active images, use the saved URL or generate a default one
                        croppedUrl = img.croppedDataUrl || await generateDefaultCroppedUrl(img.url, getAspectRatio());
                        img.croppedDataUrl = croppedUrl; // Save for next time
                    }
                    resolve(croppedUrl);
                });
            });

            Promise.all(cropPromises).then(croppedUrls => {
                const grid = document.createElement('div');
                grid.className = `preview-grid preview-grid-${images.length}`;
                
                images.forEach((image, index) => {
                    const imgDiv = document.createElement('div');
                    imgDiv.style.backgroundImage = `url(${croppedUrls[index]})`;
                    const { brightness, contrast, saturate, sepia } = image.adjustments;
                    imgDiv.style.filter = `brightness(${brightness}%) contrast(${contrast}%) saturate(${saturate}%) sepia(${sepia}%)`;
                    grid.appendChild(imgDiv);
                });
                
                previewContainer.innerHTML = '';
                previewContainer.appendChild(grid);
            });
        }


        // --- Download Logic ---
        downloadBtn.addEventListener('click', async () => {
            if (images.length === 0) {
                alert('ダウンロードする画像がありません。');
                return;
            }

            // Ensure the currently edited image's crop data is saved before download
            if (cropper) {
                 const activeImg = images.find(img => img.id === activeImageId);
                 if (activeImg) {
                    const croppedCanvas = cropper.getCroppedCanvas();
                    if(croppedCanvas){
                         activeImg.croppedDataUrl = croppedCanvas.toDataURL(activeImg.file.type);
                    }
                 }
            }

            for (let i = 0; i < images.length; i++) {
                const image = images[i];
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                
                const img = new Image();
                // Use croppedDataUrl, which should be populated by updatePreview or the logic above
                img.src = image.croppedDataUrl || image.url;

                await new Promise(resolve => {
                    img.onload = () => {
                        canvas.width = img.width;
                        canvas.height = img.height;
                        
                        const { brightness, contrast, saturate, sepia } = image.adjustments;
                        ctx.filter = `brightness(${brightness}%) contrast(${contrast}%) saturate(${saturate}%) sepia(${sepia}%)`;
                        
                        ctx.drawImage(img, 0, 0);

                        const link = document.createElement('a');
                        const originalName = image.file.name;
                        const baseName = originalName.substring(0, originalName.lastIndexOf('.')) || originalName;
                        link.download = `edited-${i + 1}-${baseName}.jpg`;
                        link.href = canvas.toDataURL('image/jpeg', 0.9);
                        link.click();
                        resolve();
                    };
                    img.onerror = () => {
                        console.error(`Failed to load image for download: ${image.file.name}`);
                        resolve(); // Resolve anyway to not block other downloads
                    }
                });
            }
        });
        
        lucide.createIcons();
    </script>
</body>
</html>

X(Twitter)画像アスペクト比調整ツール

ツールだけ使いたい方はこちら

Gemini Canvasでの制作過程

初見のプロンプト

Xに投稿する写真や画像を、アップロードした枚数に応じて自動で最適なアスペストサイズに加工でき、X投稿時にプレビューができるサイト作って

4枚まで複数同時加工できるようにして
トリミング機能
色の調整
ダウンロード
タイムラインプレビュー

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

画像の並び順を矢印で変更できるようにして
ダウンロードする画像はjpgにして

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

Xに投稿する写真や画像を、アップロードした枚数に応じて自動で最適なアスペストサイズに加工でき、X投稿時にプレビューができるサイト作って

4枚まで複数同時加工できるようにして
トリミング機能
色の調整
ダウンロード
タイムラインプレビュー
画像の並び順を矢印で変更できるようにして
ダウンロードする画像はjpgにして