単一HTMLファイル内のビデオショーリールジェネレーター
フリーのプロンプト百科事典 Wikiprompt より
単一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 ツールに貼り付けてください。
最良の結果を得るには、プレースホルダー(角括弧や大文字で示された部分)を具体的な要件に置き換えてください。
ノート
0 件のコメント