ノート

単一HTMLファイル内のビデオショーリールジェネレーター

フリーのプロンプト百科事典 Wikiprompt より

Eyisha Zyer

2026年7月3日

単一HTMLファイル内のビデオショーリールジェネレーター ビデオショーリールジェネレーターを単一のHTMLファイルで構築するための包括的なプロンプト。ストーリーボード、スクリプト、ビジュアルシーケンス、オーディオディレクション、制作チェックリスト機能をデータ永続化とともにカバーします。

プロンプト内容保存

🌐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Showreel Studio · video brief generator</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } :root { --bg: #f7f7f9; --surface: #ffffff; --text: #1e1e2a; --muted: #5f5f6b; --border: #e2e2ea; --accent: #4f46e5; --accent-soft: #eef2ff; --shadow: 0 8px 24px rgba(0, 0, 0, 0.04); --radius: 18px; --chip-bg: #f0f0f4; } body.dark { --bg: #16161c; --surface: #1f1f28; --text: #f0f0f5; --muted: #a0a0b0; --border: #2d2d3a; --accent: #818cf8; --accent-soft: #26263a; --chip-bg: #2a2a36; --shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } body { background: var(--bg); color: var(--text); transition: background 0.2s, color 0.2s; padding: 24px 20px 60px; line-height: 1.5; } .container { max-width: 1280px; margin: 0 auto; } /* header */ .topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; } .logo { font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; } .logo span { background: var(--accent); color: white; padding: 4px 12px; border-radius: 40px; font-size: 0.8rem; font-weight: 500; } .controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } button, .btn { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 8px 16px; border-radius: 40px; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: 0.15s; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.02); } button:hover, .btn:hover { background: var(--accent-soft); border-color: var(--accent); } button.primary { background: var(--accent); border: 1px solid var(--accent); color: white; } button.primary:hover { opacity: 0.9; } .grid-main { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .card { background: var(--surface); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); border: 1px solid var(--border); transition: background 0.2s; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; } .card-header h2 { font-size: 1.2rem; font-weight: 600; display: flex; align-items: center; gap: 8px; } .card-header h2 i { color: var(--accent); } .badge { background: var(--chip-bg); padding: 4px 12px; border-radius: 30px; font-size: 0.75rem; color: var(--muted); } .field { margin-bottom: 14px; } .field label { display: block; font-size: 0.8rem; font-weight: 500; margin-bottom: 6px; color: var(--muted); } input, select, textarea { width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.9rem; transition: 0.15s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .chip { background: var(--chip-bg); padding: 6px 14px; border-radius: 30px; font-size: 0.8rem; cursor: pointer; border: 1px solid transparent; transition: 0.1s; } .chip.active { background: var(--accent); color: white; border-color: var(--accent); } .scene-item, .script-item, .audio-item, .checklist-item { background: var(--bg); border-radius: 14px; padding: 14px; margin-bottom: 12px; border-left: 4px solid var(--accent); } .scene-item .meta { display: flex; gap: 12px; font-size: 0.8rem; color: var(--muted); margin: 6px 0; } .scene-item .shot { background: var(--accent-soft); padding: 2px 10px; border-radius: 30px; font-size: 0.7rem; font-weight: 600; } .placeholder-img { background: linear-gradient(145deg, var(--chip-bg), var(--border)); height: 70px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 0.8rem; margin: 8px 0; border: 1px dashed var(--border); } .flex-between { display: flex; justify-content: space-between; align-items: center; } .export-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .checklist-item { display: flex; align-items: center; gap: 10px; } .checklist-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); } .color-dot { width: 18px; height: 18px; border-radius: 6px; display: inline-block; margin-right: 6px; border: 1px solid rgba(0,0,0,0.1); } .footer-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; flex-wrap: wrap; } .hidden { display: none; } .preview-box { background: var(--bg); border-radius: 14px; padding: 16px; border: 1px solid var(--border); margin-top: 12px; } /* responsive */ @media (max-width: 900px) { .grid-main { grid-template-columns: 1fr; } } .accent-color-input { display: flex; align-items: center; gap: 8px; } .accent-color-input input[type="color"] { width: 40px; height: 40px; border: none; border-radius: 10px; background: transparent; cursor: pointer; } </style> </head> <body> <div class="container"> <div class="topbar"> <div class="logo">🎬 showreel<span>PRO</span></div> <div class="controls"> <button id="themeToggle">🌓 theme</button> <button id="exportJson">⬇️ export JSON</button> <button id="importJson">⬆️ import</button> <input type="file" id="importFile" accept=".json" class="hidden"> <button id="previewBtn" class="primary">👁 preview</button> </div> </div> <!-- brief + storyboard --> <div class="grid-main"> <!-- left column --> <div> <!-- brief card --> <div class="card" style="margin-bottom: 24px;"> <div class="card-header"> <h2>📋 project brief</h2> <span class="badge">editable</span> </div> <div class="field"> <label>project name</label> <input type="text" id="projectName" placeholder="e.g. Aurora launch film" value="Aurora product launch"> </div> <div class="row-2col"> <div class="field"> <label>video length</label> <select id="videoLength"> <option value="15">15s</option> <option value="30" selected>30s</option> <option value="60">60s+</option> </select> </div> <div class="field"> <label>tone</label> <select id="toneSelect"> <option value="Professional" selected>Professional</option> <option value="Casual">Casual</option> <option value="Dramatic">Dramatic</option> <option value="Educational">Educational</option> </select> </div> </div> <div class="field"> <label>target audience</label> <input type="text" id="audience" value="Tech enthusiasts, early adopters"> </div> <div class="field"> <label>key message</label> <textarea id="keyMessage" rows="2">Experience the future of smart lighting.</textarea> </div> <div class="field"> <label>style references</label> <input type="text" id="styleRef" value="Minimal, neon accents, macro shots"> </div> <div class="chip-group" id="templateChips"> <span class="chip active" data-template="product">🚀 product launch</span> <span class="chip" data-template="portfolio">🎨 portfolio</span> <span class="chip" data-template="promo">📣 promo</span> <span class="chip" data-template="edu">🎓 educational</span> <span class="chip" data-template="social">📱 social ad</span> </div> <div style="display: flex; gap: 8px; margin-top: 12px;"> <button id="saveBrief" class="primary">💾 save brief</button> <button id="regenerateAll">✨ regenerate all</button> </div> </div> <!-- storyboard card --> <div class="card"> <div class="card-header"> <h2>🎞️ storyboard</h2> <button id="editStoryBtn" class="btn">✎ edit</button> </div> <div id="storyboardContainer"></div> <div class="export-actions"> <button id="exportStoryboard">⬇️ export storyboard</button> <button id="addSceneBtn">+ add scene</button> </div> </div> </div> <!-- right column --> <div> <!-- script card --> <div class="card" style="margin-bottom: 24px;"> <div class="card-header"> <h2>📝 script</h2> <div class="badge">auto</div> </div> <div class="row-2col"> <div class="field"> <label>length</label> <select id="scriptLength"> <option value="short">short (15s)</option> <option value="medium" selected>medium (30s)</option> <option value="long">long (60s+)</option> </select> </div> <div class="field"> <label>voiceover</label> <select id="voiceSelect"> <option>Male</option> <option selected>Female</option> <option>Neutral</option> </select> </div> </div> <div class="field"> <label>tone adjust</label> <select id="scriptTone"> <option>Professional</option> <option>Casual</option> <option>Dramatic</option> <option>Humorous</option> </select> </div> <div id="scriptContent" class="preview-box" style="margin-top:12px;"></div> <div class="export-actions"> <button id="exportScript">⬇ export script</button> </div> </div> <!-- visual sequence + audio --> <div class="card" style="margin-bottom:24px;"> <div class="card-header"> <h2>🎨 visual sequence</h2> <span class="badge">auto</span> </div> <div id="visualSequence"></div> <div style="margin-top:12px;"> <button id="customizeVisual">🎛 customize</button> </div> </div> <!-- audio direction --> <div class="card"> <div class="card-header"> <h2>🎧 audio direction</h2> </div> <div class="row-2col"> <div class="field"> <label>music mood</label> <select id="musicMood"> <option>Upbeat</option> <option selected>Cinematic</option> <option>Relaxed</option> <option>Dramatic</option> </select> </div> <div class="field"> <label>voiceover style</label> <select id="voStyle"> <option>Warm</option> <option selected>Energetic</option> <option>Calm</option> <option>Authoritative</option> </select> </div> </div> <div class="field"> <label>volume balance (voice/music)</label> <input type="range" min="0" max="100" value="70" id="volBalance"> <div style="font-size:0.8rem; color:var(--muted);">voice: <span id="volLabel">70</span>% / music: 30%</div> </div> <div class="export-actions"> <button id="exportAudio">⬇️ audio notes</button> </div> </div> </div> </div> <!-- production checklist & final output --> <div class="card" style="margin-top: 24px;"> <div class="card-header"> <h2>✅ production checklist</h2> <div> <button id="addChecklistItem">+ add</button> <button id="exportChecklist">⬇️ export</button> </div> </div> <div id="checklistContainer"></div> </div> <!-- final output preview --> <div class="card" style="margin-top: 24px;"> <div class="card-header"> <h2>📦 final output</h2> <button id="compileReport">📄 compile report</button> </div> <div id="finalPreview" class="preview-box"> <p style="color:var(--muted);">Click "compile report" to see full showreel outline.</p> </div> <div class="footer-actions"> <button id="downloadReport">⬇️ download report</button> <button id="copyLink">🔗 copy shareable link</button> </div> </div> </div> <script> (function() { // ---------- state ---------- let state = { brief: { projectName: 'Aurora product launch', length: '30', tone: 'Professional', audience: 'Tech enthusiasts, early adopters', keyMessage: 'Experience the future of intelligent lighting.', styleRef: 'Minimalist, neon accents, cinematic' }, storyboard: [], script: { hook: '', body: '', cta: '' }, visualSeq: [], audio: { music: 'Cinematic', voStyle: 'Energetic', balance: 70 }, checklist: ['Camera & lenses', 'Lighting kit', 'Microphone', 'Storyboard printout'], completed: [false, false, false, false] }; // ---------- dom refs ---------- const $ = id => document.getElementById(id); const storyboardList = $('storyboardList'); const scriptDiv = $('script'); const visualSeqDiv = $('visualSequence'); const checklistContainer = $('checklistContainer'); const finalPreview = $('finalPreview'); // ---------- helpers ---------- function generateStoryboard() { const tone = state.brief.tone; const length = state.brief.length; const scenes = []; const count = length === '15' ? 3 : (length === '30' ? 4 : 6); const shots = ['Wide', 'Medium', 'Close-up']; const descriptions = [ 'Establishing shot with dynamic light', 'Product in hero pose, subtle motion', 'User interaction, close-up hands', 'Abstract detail, bokeh', 'Lifestyle context, ambient', 'Logo reveal, dramatic' ]; for (let i = 0; i < count; i++) { scenes.push({ id: i+1, shot: shots[i % 3], visual: descriptions[i % descriptions.length], overlay: i === 0 ? 'Hook: ' + state.brief.keyMessage.slice(0,20) : (i === count-1 ? 'CTA: Learn more' : ''), duration: Math.floor(30/count) + 's', img: null }); } state.storyboard = scenes; renderStoryboard(); } function renderStoryboard() { if (!state.storyboard.length) generateStoryboard(); storyboardList.innerHTML = state.storyboard.map((s, idx) => ` <div class="scene-item" data-idx="${idx}"> <div class="flex-between"> <strong>Scene ${s.id}</strong> <span class="shot">${s.shot}</span> </div> <div class="meta"> <span>⏱ ${s.duration}</span> <span>🎬 ${s.visual}</span> </div> <div class="placeholder-img">📷 reference image (optional)</div> <div style="font-size:0.8rem; color:var(--muted);">overlay: ${s.overlay || 'none'}</div> </div> `).join(''); } function generateScript() { const tone = state.brief.tone; const length = $('scriptLength').value; const vo = $('voiceSelect').value; const scriptTone = $('scriptTone').value; const msg = state.brief.keyMessage; const hook = `[${vo} voice] "What if light could think?"`; const body = [ `Introducing ${state.brief.projectName}.`, `Designed for ${state.brief.audience}.`, `Seamless, adaptive, beautiful.` ]; const points = body; const cta = `"Discover the future. ${msg}"`; state.script = { hook, body, points, cta }; renderScript(); } function renderScript() { if (!state.script) generateScript(); const s = state.script; visualDiv.innerHTML = ` <div style="background:var(--bg); padding:12px; border-radius:12px;"> <p><strong>HOOK:</strong> ${s.hook}</p> <p><strong>BODY:</strong> ${s.body.join(' ')}</p> <p><strong>KEY POINTS:</strong> ${s.points.join(' • ')}</p> <p><strong>CTA:</strong> ${s.cta}</p> </div> `; } function generateVisualSeq() { const scenes = state.storyboard; state.visualSeq = scenes.map(s => ({ scene: s.id, visual: s.visual, palette: ['#0f172a', '#4f46e5', '#facc15'], overlay: 'graphic shapes' })); renderVisualSeq(); } function renderVisualSeq() { if (!state.visualSeq.length) generateVisualSeq(); visualSeqDiv.innerHTML = state.visualSeq.map(v => ` <div style="background:var(--bg); padding:10px; border-radius:12px; margin-bottom:8px;"> <div><strong>Scene ${v.scene}</strong> · ${v.desc}</div> <div style="display:flex; gap:6px; margin:6px 0;"> ${v.palette.map(c => `<span class="color-note" style="background:${c}"></span>`).join('')} </div> <div style="font-size:0.8rem; color:var(--muted);">overlay: ${v.overlay}</div> </div> `).join(''); } function renderChecklist() { checklistContainer.innerHTML = state.completed.map((c, i) => ` <div class="checklist-item"> <input type="checkbox" ${c ? 'checked' : ''} data-idx="${i}"> <span>${state.checklist[i] || 'item ' + (i+1)}</span> </div> `).join(''); document.querySelectorAll('.checklist-item input[type=checkbox]').forEach(cb => { cb.addEventListener('change', (e) => { const idx = e.target.dataset.idx; state.completed[idx] = e.target.checked; }); }); } // ---------- persistence ---------- function saveToLocal() { localStorage.setItem('showreel_state', JSON.stringify(state)); } function loadFromLocal() { const saved = localStorage.getItem('showreel_state'); if (saved) { try { const parsed = JSON.parse(saved); if (parsed.brief) state = parsed; } catch(e) {} } } // ---------- export / import ---------- function exportJSON() { const blob = new Blob([JSON.stringify(state, null, 2)], {type: 'application/json'}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'showreel_project.json'; a.click(); URL.revokeObjectURL(url); } function importJSON(file) { const reader = new FileReader(); reader.onload = (e) => { try { const parsed = JSON.parse(e.target.result); if (parsed.brief) { state = parsed; renderAll(); } } catch(err) { alert('invalid JSON'); } }; reader.readAsText(file); } // ---------- render all ---------- function renderAll() { $('briefName').value = state.brief.projectName; $('videoLength').value = state.brief.length; $('toneSelect').value = state.brief.tone; $('audience').value = state.brief.audience; $('keyMessage').value = state.brief.keyMessage; $('styleRef').value = state.brief.styleRef; generateStoryboard(); generateScript(); generateVisualSeq(); renderChecklist(); } // ---------- event listeners ---------- // theme $('themeToggle').addEventListener('click', () => { document.body.classList.toggle('dark'); }); // template chips document.querySelectorAll('.chip').forEach(chip => { chip.addEventListener('click', (e) => { document.querySelectorAll('.chip').forEach(c => c.classList.remove('active')); e.target.classList.add('active'); const tpl = e.target.dataset.template; if (tpl === 'product') { state.brief.projectName = 'Product launch'; state.brief.tone = 'Professional'; state.brief.keyMessage = 'Innovation meets design.'; } else if (tpl === 'portfolio') { state.brief.projectName = 'Portfolio showreel'; state.brief.tone = 'Dramatic'; state.brief.keyMessage = 'Creative vision.'; } else if (tpl === 'promo') { state.brief.projectName = 'Promo spot'; state.brief.tone = 'Casual'; state.brief.keyMessage = 'Join the movement.'; } else if (tpl === 'edu') { state.brief.projectName = 'Educational series'; state.brief.tone = 'Educational'; state.brief.keyMessage = 'Learn something new.'; } else if (tpl === 'social') { state.brief.projectName = 'Social ad'; state.brief.tone = 'Casual'; state.brief.keyMessage = 'Follow us.'; } renderAll(); }); }); // save brief $('saveBriefBtn').addEventListener('click', () => { state.brief.projectName = $('briefName').value; state.brief.length = $('videoLength').value; state.brief.tone = $('toneSelect').value; state.brief.audience = $('audience').value; state.brief.keyMessage = $('keyMessage').value; state.brief.styleRef = $('styleRef').value; saveToLocal(); renderAll(); }); // regenerate story $('regenerateStory').addEventListener('click', () => { generateStoryboard(); generateScript(); generateVisualSeq(); saveToLocal(); }); // export storyboard $('exportStoryboard').addEventListener('click', () => { const text = state.storyboard.map(s => `Scene ${s.id}: ${s.shot} - ${s.visual} (${s.duration})`).join('\n'); const blob = new Blob([text], {type: 'text/plain'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'storyboard.txt'; a.click(); }); // script export $('exportScript').addEventListener('click', () => { const s = state.script; const text = `HOOK: ${s.hook}\nBODY: ${s.body.join(' ')}\nCTA: ${s.cta}`; const blob = new Blob([text], {type: 'text/plain'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'script.txt'; a.click(); }); // audio export $('exportAudioNotes').addEventListener('click', () => { const music = $('musicMood').value; const vo = $('voStyle').value; const bal = $('volBalance').value; const text = `Music: ${music}\nVoice style: ${vo}\nVoice balance: ${bal}%`; const blob = new Blob([text], {type: 'text/plain'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'audio_direction.txt'; a.click(); }); // checklist add $('addChecklistItem').addEventListener('click', () => { state.checklist.push('New item'); state.completed.push(false); renderChecklist(); }); $('exportChecklist').addEventListener('click', () => { const text = state.checklist.map((c,i) => `${state.completed[i] ? '[x]' : '[ ]'} ${c}`).join('\n'); const blob = new Blob([text], {type: 'text/plain'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'checklist.txt'; a.click(); }); // final report $('downloadReport').addEventListener('click', () => { const report = `SHOWREEL REPORT\nProject: ${state.brief.projectName}\nTone: ${state.brief.tone}\n\nSTORYBOARD:\n${state.storyboard.map(s=>`${s.id}. ${s.shot} - ${s.visual}`).join('\n')}\n\nSCRIPT:\n${state.script.hook}\n${state.script.body.join(' ')}\n${state.script.cta}\n\nAUDIO: ${state.audio.music} / ${state.audio.voStyle}`; const blob = new Blob([report], {type: 'text/plain'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'showreel_report.txt'; a.click(); }); // compile preview $('compileReport').addEventListener('click', () => { const s = state.script; finalPreview.innerHTML = ` <h3>🎬 ${state.brief.projectName}</h3> <p><strong>Brief:</strong> ${state.brief.tone} · ${state.brief.length}</p> <p><strong>Storyboard:</strong> ${state.storyboard.length} scenes</p> <p><strong>Script:</strong> ${s.hook} ${s.body[0]} ${s.cta}</p> <p><strong>Visual:</strong> ${state.visualSeq.length} scenes, palettes ready</p> <p><strong>Audio:</strong> ${state.audio.music} / ${state.audio.voStyle}</p> <p><strong>Checklist:</strong> ${state.checklist.length} items</p> `; }); // export json $('exportJson').addEventListener('click', exportJSON); $('importJson').addEventListener('click', () => $('importFile').click()); $('importFile').addEventListener('change', (e) => importJSON(e.target.files[0])); // volume balance display $('volBalance').addEventListener('input', (e) => { $('volLabel').textContent = e.target.value + '%'; }); // init loadFromLocal(); renderAll(); saveToLocal(); })(); </script> </body> </html>

ログインして完全なプロンプトを表示

次で続行:

ログインすると、次に同意したことになります: 利用規約 と プライバシーポリシー

使い方

このプロンプトは coding 向けに設計されています。上の内容をコピーして、お好みの AI ツールに貼り付けてください。

最良の結果を得るには、プレースホルダー(角括弧や大文字で示された部分)を具体的な要件に置き換えてください。

参考資料

カテゴリ:coding| twitter| video-showreel| html-css-javascript

ノート