screen-demo-production

画面デモ制作

操作中のインターフェースが主要な証拠となる場合は、このスキルを使用します。コマンドの実行、ファイルの変更、コントロールの作動、アプリケーションの状態変化、ワークフローの完了などが該当します。

これは SaaS のマーケティングより広い範囲を対象とします。手順説明、サポート、オンボーディング、エンジニアリング、リリースノート、社内トレーニング、ターミナル、IDE、ブラウザー、デスクトップ、リモートデスクトップ、複数アプリケーションを使ったデモが含まれます。

証拠に対する姿勢

• 文書化された事実： 公式のキャプチャ、自動化、アクセシビリティ、プライバシー、セキュリティに関する情報に基づく挙動です。
• 制作上の指針： 対象視聴者や最終的なラスターデータで試すべき、実践的な方向性の選択です。
• 実証的な観察： 実際の製品、ビルド、リハーサル、キャプチャ、レンダリングで確認した結果です。

ツールや OS の挙動は変わりやすいものです。事実は 2026-07-12 に確認済みです。製品とビルド、ブラウザー／OS、自動化／キャプチャのバージョン、フィクスチャ、モック、権限を記録してください。

主張の種類を分類する

すべてのデモで、次のいずれかを明示してください。

• 実際のキャプチャ： 実行中の製品または OS からピクセルを取得しています。
• 条件付きの実際のキャプチャ： 実際の UI を動作させ、シードデータ、固定時刻、モック依存関係、自動化、その他の重要な制御を適用しています。これらを開示してください。
• 説明用の合成映像： 説明やテンポ調整のために、ターミナルまたは UI を再現しています。実際の実行を録画したものとして説明してはいけません。
• ハイブリッド： 実際のピクセルに、合成カーソル、入力操作、コールアウト、タイミングの再構成、その他のレイヤーを組み合わせています。各要素を記録してください。

意図する主張を支えられる範囲で、最も介入の少ない方式を選んでください。概念の説明やプライバシーに配慮した説明には合成 UI が適しています。再現可能な実際のウェブ操作にはブラウザー自動化を、ネイティブのクローム、ターミナル／IDE の挙動、権限、アプリ間連携が重要な場合には OS／ウィンドウキャプチャを使用してください。

シミュレートしたデータやモックサービスを、実稼働時のパフォーマンス、セキュリティ、取引、ベンチマーク、顧客の成果の証拠として示してはいけません。

対象範囲

このスキルでは、キャプチャ方式の選択、ワークフローのスクリプト作成、リセット、プライバシーレビュー、可読性、カーソル／コールアウトの方向、ナレーション／字幕の同期、アスペクト比のバリエーション、撮り直し、QA、出所の管理を扱います。

一般的な Playwright／テストのアーキテクチャ、キャンペーンの位置付け、操作ワークフローを伴わないウェブサイトのビジュアル紹介、一般的な編集技術、アプリケーションのアクセシビリティ適合性テストの代わりにはなりません。

デモの契約を作成する

次の項目を定義します。

• 対象視聴者、タスク、前提条件、期待される結果、事実に即した主張
• 製品／ビルド／コミット、環境、アカウントのロール、ロケール、タイムゾーン、時計、ビューポート、DPI／スケール、テーマ、機能フラグ
• 実際のキャプチャ／条件付きの実際のキャプチャ／合成映像／ハイブリッドの分類
• フィクスチャデータとリセット手順
• アクション、準備完了の合図、失敗時の分岐、ナレーション、字幕、カーソル、コールアウト、停止時間
• 表示禁止項目のリストと、プライバシー／セキュリティの承認者
• マスター版と各バリエーションの寸法、長さ、fps、字幕／コールアウトのセーフエリア
• キャプチャツール、コーデック、音声ソース、後処理レイヤー
• 出所台帳とレビューのゲート

ショット台帳を使用します。

beat | claim | start state | action | readiness signal | result | narration | cursor/callout | hold | reset

あらかじめリセット可能な状態を作る

破棄可能なディレクトリ、デモ専用アカウント、シード済みフィクスチャ、冪等なリセットエンドポイント、固定ロケール／タイムゾーン／時計、固定バージョンの依存関係、通知のブロック、バージョン管理されたモックを優先してください。

新しいブラウザーコンテキストでは、Cookie やローカルストレージなどのブラウザーストレージは分離できますが、外部データベースやアカウントの状態はリセットされません。録画前に、リセットとワークフローを繰り返しテストしてください。非決定的な分岐はすべて、明示的な分岐、制御された依存関係、またはキャプチャ方式を変更する理由のいずれかにしてください。

ブラウザー自動化のキャプチャ

Playwright の文書に記載されている事実：

• ブラウザーコンテキストはセッション状態を分離します。
• ロケーターのアクションは、該当する場合、表示状態、安定状態、イベントを受信できる状態、有効状態など、操作可能な状態になるまで自動的に待機します。
• Playwright は準備完了の判断基準として networkidle を使うことを推奨しておらず、固定の waitForTimeout() による待機は不安定になりやすいとしています。
• 動画はブラウザーコンテキストの終了時に確定されます。デフォルトの動画のスケーリングによって出力品質が低下する場合があるため、ビューポートと動画サイズは明示してください。
• 保存された認証状態を使うとアカウントになりすませるため、コミットしないでください。
• トレースと HAR ファイルには、スクリーンショット、DOM、ネットワーク、コンソール、ヘッダー、Cookie、本文、タイミング、場合によってはソースファイルが含まれることがあります。

正確な URL、レスポンス、見出し、ステータスメッセージ、有効になったコントロール、更新された行、または永続化された結果など、業務上確認できる状態を待ってください。システムの準備完了と視聴者に見せるための間を分け、状態をアサートしてから、編集上のホールドを追加します。

主張する内容が許容する範囲でのみモックを使ってください。モック化した外部システムや固定した時計は明示してください。制御された本物の UI はインターフェースの動作を示す証拠として有効ですが、モック化したプロバイダーの実際のレスポンスや速度を示すものではありません。

動画、トレース、HAR、ログ、ストレージ状態、スクリーンショット、コンソール出力は、それぞれ別個の機密性の高い成果物として扱ってください。ひとつをスクラブしても、ほかの成果物の機密情報は除去されません。

実際の画面／ウィンドウのキャプチャ

ブラウザーの getDisplayMedia() を使うには、その時点でのユーザー操作と、キャプチャ対象の新たな選択が必要です。音声への対応は環境によって異なります。オペレーティングシステムでのキャプチャには権限が必要な場合があり、キャプチャ中のインジケーターが表示されることもあります。

実際の画面をキャプチャする場合：

• 画面またはウィンドウのうち、必要最小限の範囲を選択します。
• 個人用アプリ、通知、パスワードマネージャー、個人用ブラウザープロファイル、関係のないターミナルは閉じます。
• 必要に応じて、クリーンなデスクトップ／アカウントを使い、壁紙やメニューバーを無難なものにします。
• ブックマーク、履歴、ローカルパス、ユーザー名、ホスト名、API キー、トークン、メールアドレス、顧客データ、時計、社内 URL は非表示にします。
• ネイティブダイアログ、権限、スケーリング、カーソル、音声をテストします。
• 編集に備えて、各アクションの前後でハンドルを記録します。

プライバシー対策として、切り抜きやぼかしだけに頼らないでください。そもそも機密情報を含むピクセルを記録しないようにしてください。

合成されたターミナルと UI

コマンドや結果が既知で検証済みの場合、プライバシー上の配慮が必要な場合、またはナレーションのタイミングを正確に合わせる必要がある場合は、合成出力が役立ちます。

• 代表的な出力であると主張する場合は、使い捨てのフィクスチャでコマンドと結果を検証します。
• 行の折り返し、プロンプト、幅、タイミング、エラー、状態遷移を正確に再現します。
• フィクスチャで検証した合成出力には、その旨をラベル付けします。未検証の場合は、例示であることをラベル付けします。
• 製品の機能、ベンチマークの数値、ネットワークのレスポンス、セキュリティ上の結果を捏造しないでください。
• ソースのトランスクリプトと生成ルールを来歴情報に含めます。

合成による再構成は、読みやすさとテンポを向上させるものであり、実際に起きたことを偽るものであってはなりません。

直接操作、カーソル、コールアウト

操作の前に意図を伝え、その後に結果を解釈します。ラベルが切り替わる瞬間に、変化するラベルを読み上げることは避けてください。

制作上の目安：

• ナレーションが内容を伝えている間は、カーソルを動かさずに置きます。
• まっすぐ移動して停止し、クリックは一度だけ行います。必要な場合にのみ、その場にとどめます。
• ターゲットの周りを連続してなぞらないでください。
• 強調の手段は一度にひとつだけ使います。
• ターゲット、フォーカスインジケーター、エラー、結果を覆わないでください。
• 編集後に追加したカーソル／クリックリングと、元のピクセルに含まれるものを来歴情報で区別します。
• 複雑な結果は、最終サイズで読めるだけの時間表示します。

自動化のアサーションは、視聴者が内容を理解するより早く完了することがあります。準備が整った後に編集上のホールドを追加し、その前に根拠のない待機時間を設けないでください。

ナレーション、字幕、視覚的な説明

ナレーションでは、すべてのコントロールのラベルを繰り返すのではなく、目的と結果を説明します。タスクの完了に役立つ場合は、正確な UI 名を使用してください。

意味のある音声を含む、あらかじめ収録された同期メディアには字幕が必要です。重要な視覚のみの状態変化は、必要に応じてナレーション、トランスクリプト、または音声解説で伝えてください。字幕でコントロール、エラー、コード、出力を覆わないでください。

次の 3 つのテストを実施します。

• ミュート時：視聴者は字幕と視覚的な指示を通じて操作や結果を把握できますか？
• 音声のみ：重要な結果が説明されていますか？
• 最終サイズ時：UI、コード、ターミナルのテキスト、吹き出し、字幕を読めますか？

プライバシー、セキュリティ、主張

収集は最小限にし、明示した目的に役立つものだけをキャプチャします。未加工のキャプチャと診断用アーティファクトについて、アクセス制御、保存期間、削除方法、レビュー担当者の責任を定めてください。

次の情報をマスキングしてください。

• シークレット、API キー、トークン、パスワード、認証状態、Cookie、QR コード。
• 氏名、メールアドレス、顔、アバター、顧客 ID、支払い情報、健康・人事・法務に関するデータ。
• 社内ホスト、パス、チケット、分析情報、未公開のフラグ、管理者用コントロール。
• 通知、自動入力、クリップボード、ブラウザー履歴、ソースマップ、ログ。
• メタデータやファイル名、および画面に表示されるピクセル。

デジタル署名や C2PA レコードが、描写されたワークフローの実行や、すべての主張の真実性を証明すると主張しないでください。来歴情報によって、署名済みレコードが改ざんされていないことを確認できるようにし、素材や操作を記録できます。

可読性とバリエーション

最終的な納品ラスターデータを基準に設計します。

• キャプチャ前にターミナル／IDE／UI のテキストを拡大します。
• 関係のないパネルや UI フレームを取り除きます。
• ビューポートとデバイススケールを慎重に選びます。
• コントラストとフォーカスインジケーターを読みやすく保ちます。
• 証拠を拡大してから、周囲の状況がわかる表示に戻します。
• 圧縮の影響を受けやすい小さなテキストや 1 ピクセル幅の線は避けます。

縦長と正方形のバリエーションは、それぞれ構図を考えて制作します。デスクトップ映像を中央でクロップすると、ナビゲーション、ラベル、結果の状態が見切れることがよくあります。ワークフローが収まらない場合は、再実行するか、構図を組み直してください。

撮り直しと連続性

状態の境界が明確なビートまたはチャプターごとに撮り直します。トランジションの前後にハンドルを残してください。フィクスチャ／ビルド、開始／終了状態、失敗、選択したテイクを記録したテイクログを保存します。

編集で待ち時間を削除してもかまいませんが、実際には不可能な因果関係を作り出したり、主張を変えるエラーを隠したり、失敗した操作の直後の結果として後の成功を見せたりしてはいけません。

QA と来歴

次の項目を確認します。

1. 主張と真偽の分類。
2. 正確なビルド、アカウントのロール、フィクスチャ、モック、時計、ロケール、リセット。
3. ワークフローの反復実行での成功と、エラーへの対処。
4. 動画、音声、トレース、HAR、ログ、字幕、メタデータ、サムネイルに PII／シークレットが含まれていないこと。
5. 操作と結果の連続性、およびタイミング編集の正確さ。
6. カーソル／吹き出しの節度と、最終サイズでの可読性。
7. 字幕、視覚的な説明、コントラスト、点滅。
8. アスペクト比のバリエーションですべての必須手順／結果が維持されていること。
9. コーデック、寸法、fps、音声、出力の完全性。
10. 来歴台帳とハッシュ。

例 1：フィクスチャで検証した合成 CLI

これは完全な例であり、必須の定型ではありません。

意図： 実際のシェルやシークレットを見せずに、架空の acme deploy を 32 秒で紹介するチュートリアル。

使い捨てのフィクスチャで、UTC、固定ロケール／ターミナル幅、一時的なホームディレクトリ、シード demo-17、ローカルのフェイクエンドポイントを使ってコマンドを検証します。承認済みの出力のみを保存します。大きな等幅フォントを使って 1920x1080 の合成ターミナルをレンダリングし、1080x1920 のレイアウトも別途作成します。

$ acme init storefront --seed demo-17
Created storefront/acme.yaml

$ acme deploy --environment preview
Building 6 assets...
Preview ready: https://preview.example.test/storefront

$ acme status
storefront  preview  healthy  revision 8c41d2

タイムライン：目的を示す、init の入力／実行、作成されたファイルの結果を保持する、決定的な進行状況を表示して deploy を実行する、URL を保持する、status を実行する、正常な状態を保持する。ナレーションで意図を紹介し、結果を解説します。テイクごとにトランスクリプトから再構築し、「フィクスチャで検証した出力に基づく合成ターミナルのデモ」と明記します。

起こりやすい失敗： 出力が実際には検証されていなかった。説明を「イメージ例」に変更するか、公開前に検証します。

例2：制御された、実際のブラウザーフロー

これは完全な例であり、必須の定型ではありません。

目的： オペレーターが用意された注文の問題を解決する様子を示す、45秒のサポート研修動画です。

冪等なリセットで、専用のアカウント／注文／チケットを用意します。時刻とロケールを固定し、通知と分析をブロックして、外部の配送事業者をモックしていることを明示します。新しいコンテキストと保護された認証状態を使用し、ビューポート／動画サイズを1920x1080に明示的に設定します。

正確な見出し／ステータス、および応答／状態の変化を待ちます。スリープやnetworkidleは使用しません。トレースを使ってリハーサルした後、診断用アーティファクトを消去／削除し、クリーンな状態で実行を記録します。後処理で追加するカーソルは、対象の前で静止させます。リセットとフローを3回実行します。個人情報、字幕、コンソール／ネットワークエラー、モックサービスの明示、最終的なクロップ、ビルド／フィクスチャ／自動化／カーソルの編集履歴を記録した台帳を品質確認します。

よくある失敗： 成功を示すUIは表示されるものの、状態が永続化されたことを確認していません。編集上の静止画を挿入する前に、永続化された状態を観測して確認するアサーションを追加します。

参照元

2026-07-12に確認済み：

• Playwrightのアクショナビリティ、コンテキスト、ロケーター、ナビゲーション、ネットワーク、モック、動画、トレース、認証、クロック：https://playwright.dev/docs/
• W3C Screen CaptureおよびMDNのgetDisplayMedia：https://www.w3.org/TR/screen-capture/ および https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia
• Microsoftの画面キャプチャ：https://learn.microsoft.com/en-us/windows/apps/develop/media-authoring-processing/screen-capture
• Apple ScreenCaptureKit：https://developer.apple.com/documentation/screencapturekit
• WCAG 2.2の字幕、音声解説、コントラスト、リフロー、点滅：https://www.w3.org/WAI/WCAG22/Understanding/
• W3Cプライバシー原則：https://www.w3.org/TR/privacy-principles/
• NIST SP 800-122およびプライバシーフレームワーク：https://csrc.nist.gov/pubs/sp/800/122/final および https://www.nist.gov/privacy-framework
• C2PA仕様インデックス：https://spec.c2pa.org/