Communitygithub.com

スクリーンキャストキャプチャ

チュートリアルやプロダクトデモ向けに、クリーンな生の画面とカメラ映像をキャプチャします。レコーダーの選択(macOSのスクリーンショットツールバー、QuickTime、OBS、Windows Game Bar)、解像度・フレームレート・カーソル・マイクの設定、邪魔のないステージの準備、リテイク可能なセグメント単位での録画を行います。誰かが「録画したい」と言った時に使用します。

スクリーンキャストキャプチャ とは?

Screencast Captureは、チュートリアルやプロダクトデモ向けに高品質なスクリーンキャプチャを実現するAIエージェントスキルです。このスキルは、macOS(Cmd+Shift+5、QuickTime)やWindows(Win+G、Snipping Tool)のビルトインレコーダーから、OBS Studioのような高度なツールまで、ユーザーのニーズに合わせて最適なレコーダーを選択します。キャプチャ設定(解像度、フレームレート、カーソル表示、マイク分離)の調整を支援し、Do Not Disturbの有効化、デスクトップのクリーン化、デモデータの準備といった録画前の準備手順をガイドします。また、編集を容易にするために、リテイク可能な小さなセグメントに分割して録画する手法を推奨します。ポストプロダクションで修正できないキャプチャ品質の問題を防ぎ、編集パイプライン(Remotion、ナレーション、字幕生成)にクリーンな生映像を渡すことを目的としています。 このスキルは主に、Claude CodeやClineなどのAIエージェント環境を想定して設計されています。CursorやCodexのユーザーも、ターミナル内でレコーディング手順を確認する際に間接的に利用できます。開発者やコンテンツクリエイターが、効率的でプロフェッショナルなスクリーンキャプチャを行うためのベストプラクティスを提供します。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/SkillMedev/tutorial-video-studio/tree/main/skills/screencast-capture

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

スクリーンキャストキャプチャ は何をしますか?

キャプチャは、編集では修正できない唯一の段階です。ぼやけた、ラグい、通知だらけの録画は、どんなに編集しても救えません。生の映像をクリーンに撮っておけば、後続のすべてが楽になります。

使用するタイミング

ユーザーが画面上の何かを録画する必要がある場合に使用します。つまり、キャプチャそのもの(ステージングや編集ではなく)です。レコーダーの選択、設定の調整、マシンの準備、実際のテイク実行が含まれます。すでに映像が存在し、カーソルの動き、ズーム、カット、ナレーションについての質問がある場合は、説明に記載されている他のスキルに引き継いでください。

ニーズに合わせてレコーダーを選ぶ

  • 手軽、シングル画面、オーバーレイなし → macOS:Cmd+Shift+5(スクリーンショットツールバー)またはQuickTime「新規画面収録」。Windows:Win+G(ゲームバー)またはSnipping Toolのビデオモード。設定不要で、短いクリップに最適です。
  • ウェブカメラのバブル、複数ソース、シーン切り替え、システム音声とマイクを別トラックで → OBS Studio(無料、クロスプラットフォーム)。トーキングヘッドのオーバーレイや複数ソースが必要な場合は、設定の手間をかける価値があります。
  • 洗練された製品ウォークスルー(自動ズーム、カーソルスムージング付き) → 専用ツール(macOS版Screen Studioなど)。ユーザーがすでに持っている場合にのみ推奨し、有料ツールを前提条件にしないでください。

トレードオフを明確に示します。OBSはコントロール性を得る代わりに10分のセットアップ時間がかかり、ビルトインレコーダーは速度を得る代わりにオーバーレイとトラック分離ができません。

重要なキャプチャ設定

  • 解像度: 配信解像度以上でキャプチャします。それより低くは絶対にしないでください。1080p(1920×1080)がチュートリアルの最低基準です。最終的に1080pにするなら1440p/4Kで撮影すると、後で拡大する余裕が生まれます。
  • フレームレート: カーソルの動き、スクロール、アニメーションがある場合は60 fpsにします。はるかに滑らかに見えます。30 fpsはほぼ静止したトーキングヘッドのパートで許容範囲です。1つ選んで、すべてのテイクで一貫させてください。
  • カーソル: ツールが対応している場合は、クリックの可視化/ハイライトを有効にします。カーソルは意図的にゆっくり動かします。カーソルは視聴者の目です。カーソルが主題でない部分では完全に非表示にします。
  • マイク: マイクはシステム音声とは別のトラックに録音します(OBSはネイティブで対応)。後でバランスを調整できます。最初に10秒間のレベルチェックを行い、ピークが−12〜−6 dB程度になるようにします。クリッピングは絶対に避けてください。編集者のために、無音のルームトーンを3〜5秒録音します。
  • ビットレート: 映像が圧縮されて見えない限り、ツールのデフォルトに任せます。必要なら上げてください。今は軽く圧縮された大きなファイルを残しておく方が、後で小さなアーティファクトだらけのファイルを持つよりはましです。

録画開始前にステージを準備する

ほとんどのアマチュアスクリーンキャストはここで失敗します。最初のテイクの前に:

  • おやすみモード/フォーカスをオンにして、録画中に通知バナーが一切表示されないようにします。
  • デスクトップをクリーンにします。ニュートラルな壁紙、個人ファイルなし、Dockの clutter を非表示にします。
  • 関係のないタブやアプリをすべて閉じます。チャットアプリ、メール、カレンダーのポップアップを終了します。
  • シードデータが入ったダミーアカウントを使用します。実際の顧客のPII、実際のメールアドレス、実際の名前は絶対に画面に表示しないでください。機密情報をすべて消去します。
  • アプリのズームを、大きなモニター上だけでなく、配信サイズでもテキストが読めるように設定します。ブラウザでは約125〜150%にズームし、ブックマークバーを非表示にします。新しい空のブラウザプロファイルを検討してください。
  • キャプチャウィンドウをターゲットのアスペクト比(通常はチュートリアルでは16:9)に合わせます。後でクロップする必要がなくなります。

リテイク可能なセグメントで録画する

10分のテイクを1回で完璧にしようとしないでください。ストーリーボードの1ビートを1クリップとして録画します:

  • ビートを一度無言でリハーサルして、動きを完璧にします。
  • 録画を開始し、一拍置いてから実行します。頭と尾に1秒の無音を編集用ハンドルとして残します。
  • 失敗したら、止めて、息を整えて、そのセグメントだけを録り直します。1ビートのやり直しは安価ですが、ビデオ全体のやり直しは高価です。
  • ビート間のペースを一定に保ち、きれいにカット編集できるようにします。

引き継ぎ

生のクリップは、アセンブリのためにエディター/Remotionパイプラインに、そしてそれらに重なるナレーション用にナレーションスクリプトに、そしてオーディオがロックされたら文字起こしからのキャプションに引き継がれます。このスキルの役割は、クリーンな映像が存在する時点で終了です。

してはいけないこと

  • 「容量を節約するため」に出力解像度より低い解像度で録画しないでください。後で詳細を取り戻すことは絶対にできません。
  • 通知、実際のデータ、散らかったデスクトップを画面に残さないでください。Slackのバナー1つでテイク全体が無効になり得ます。
  • ここでデモの指示(どこをズームするか、強調のためにカーソルをどう動かすか)を行わないでください。それはプロダクトデモディレクターの役割です。
  • 不安定なカーソル操作や間違ったズームを編集で修正しようとしないでください。録り直してください。

Individual skills in this repo

This repo contains 11 individual skills — each has its own dedicated page.

Captions From Transcript

Produce an accurate, properly timed caption track (SRT or WebVTT) from a video

Kinetic Typography

Put text in motion the right way - title cards, animated captions, lower-thirds, callouts, and word-by-word reveals - with a reading-time-per-word budget so copy holds long enough to read, plus enter/exit timing, weight and size transitions, and type hierarchy in motion. Use when someone asks to

Motion Design Principles

The craft layer for motion: pick the right easing (ease-in / ease-out / ease-in-out / spring), get timing and spacing right, build the anticipation→action→follow-through arc, and apply Disney

Narration Script

Write the spoken voiceover for a tutorial or demo - the actual words, phrased for the ear and synced one-instruction-per-action to what is on screen, with a pacing budget and a confident, jargon-checked tone. Use when someone says

Product Demo Director

Direct the craft of putting a real software UI on screen - cursor choreography, zoom/pan/callout language, screen-recording vs recreated-UI, and making state changes legible with highlights, focus pulls, and slow-downs. Use when filming or recreating an app for a product demo, feature walkthrough, onboarding clip, or release reel and asking

Remotion Compose

Turns a natural-language video brief into a complete, ready-to-preview Remotion composition - extracts duration, scenes, brand colors, aspect ratio, and real copy; plans the frame budget; and writes data-driven React/TypeScript using useCurrentFrame, interpolate, spring, AbsoluteFill, and Sequence, registered in Root.tsx. Use when someone says

Remotion Render

Renders a Remotion composition to MP4 and runs the edit-and-re-render loop - CLI render commands, 1080p/4K/9:16 presets, concurrency tuning, codec selection, batch variants from a JSON data file, and Lambda for cloud rendering. Use when someone says

Remotion Setup

Scaffolds a new Remotion video project wired for Claude Code Agent Skills - Node check, create-video scaffold, skills install, folder conventions, Google Fonts, and a smoke-test render. Use whenever someone wants to start making videos with Remotion and Claude, even just

SkillMedev/tutorial-video-studio

Plan a product demo, feature announcement, or launch video as a beat sheet and shot list BEFORE animating - hook in the first 3s, problem, reveal, proof, CTA - with target duration and pacing per scene type, output as a JSON scene plan that remotion-compose consumes directly. Use when someone says

Social Video Formatter

Reframe and export a finished video for social platforms - 9:16 ↔ 16:9 cropping, burned-in captions, a platform-native first frame, loop design, and per-platform specs (aspect, length, safe areas) for TikTok, Reels, Shorts, X, and LinkedIn. Use when someone says

Sound and Music Sync

Score a video like an editor: beat-match cuts to the music, land SFX on transitions, pace the voiceover so it breathes, source royalty-free tracks safely, and duck the music so the VO sits clearly on top. Use when adding music, sound effects, or voiceover to a video, when asked to

関連スキル