動画制作ガイド Video

Recommendation: Record the real app with a scripted Playwright run, add captions and callouts in code, and record your own voiceover. Don't use AI avatars or AI-generated footage. For a 60-second homepage demo, showing the real UI is what builds trust. Generative models also can't render legible UI text.

Steps

1. Script first (about 150 words for 60s)

• 0–5s: Hook on the pain, e.g. "Standups shouldn't eat 30 minutes."
• 5–45s: Show 3 moments at most, such as posting an update, the team view with blockers flagged, and the auto-summary.
• 45–60s: Result and CTA ("Try Huddle free").
• Write the script as a shot list: one action on screen per sentence.

2. Prepare a clean demo environment

• Seed a demo workspace with realistic fake people, updates and blockers. Avoid "test test" and real customer data.
• Use a fresh browser profile with no extensions or bookmarks bar. Set the window to exactly 1920×1080 (or 1280×720 scaled up). Turn off notifications.

3. Record with Playwright instead of by hand

• Script the clicks and typing with deliberate pauses and a visible cursor. Use Playwright's recordVideo, with slowMo or typing delays so it reads as human.
• You can re-run it every time the UI changes, which matters more than the first take. Hand-recorded demos go stale quickly.
• Record each scene as its own clip. That makes retakes and trimming easy.

4. Add overlays and assembly in code

• Use Hyperframes (plain HTML/CSS/GSAP, renders to MP4) or Remotion (if you prefer React). Both are free for a small team, but check Remotion's license terms for commercial use.
• Add the title card, zoom-ins on the relevant UI region, callout highlights, captions, and the end CTA card.
• If you'd rather not build this, CapCut or DaVinci Resolve (both free) will do it by hand.

5. Voiceover

• Record your own voice with a decent USB mic or a recent phone, in a closet or a room with soft furnishings. Clean human audio beats a robotic TTS voice.
• If nobody wants to be on mic, use TTS as a fallback and listen to it end to end first.
• Add a quiet royalty-free music bed, mixed well below the voice.

6. Export and embed

• Export H.264 MP4, 1080p, 16:9, and compress it (HandBrake or ffmpeg, aiming for a few MB).
• Also export a WebM if you want. Add a poster image.
• Host it via your CDN or YouTube/Vimeo/Mux.
• Autoplay needs muted playsinline, so the captions have to carry the message on their own.

What to watch out for

• Length vs. content: 60 seconds fits about 3 features. Cut the rest, because every extra feature dilutes the message.
• Pacing: Real app speed is too slow for video. Trim load times and speed up or cut waiting, and keep each UI beat on screen for 3–5 seconds so people can read it.
• Readability: Text that's legible on your monitor is tiny in a homepage embed. Zoom in on the active area, use large fonts, and bump the browser zoom to 125–150%.
• Captions: Most homepage video plays muted, so captions are required, not optional.
• Sensitive data: Check for real emails, API keys, or URLs in tabs and the address bar before you record.
• Staleness: The video will go out of date as the UI changes. Keep the Playwright script and overlay project in your repo so a re-render takes minutes.
• Page performance: A heavy autoplaying video hurts load time and Core Web Vitals. Lazy-load it or use a click-to-play poster. Keep the file small.
• Don't over-produce: Skip fancy transitions and stock footage. A clear screen, a clear voice and a clear CTA convert better.

Rough effort

Script and seed data take about half a day. The Playwright script and overlays take about a day, and voiceover and polish take a few hours. After that, re-recording costs almost nothing.

If you'd like, I can scaffold the Playwright recording script and a Hyperframes project here. I'd need your app's URL (or local dev setup) and the 3 flows you want to show.