使い方ガイドへスキップ
Web Video Presentation作者 ConardLi

Web Video Presentation スキル。

動画のようなペースで、話す一拍ごとに進むブラウザ上のプレゼンテーション。

  • プレゼンテーション
  • モーション
  • ナレーション
ソースレビュー · Web Video PresentationSKILL.md
タスク プレゼンテーション 成果物 • 章に分かれた、クリックで進む 16:9 React プレゼンテーション • ソースから作成する話し言葉の原稿、章の構成案、補足情報 • 自動で進む録画モード向けの、ステップごとの音声ファイル(任意) 開始前に Vite、React、TypeScript、Node のツールを使用します。任意の TTS は、選択したプロバイダー、認証情報、アダプターに依存します。最終的な録画にはブラウザのキャプチャまたは録画ソフトが必要です。
編集者による要約 · ソース確認日 2026-10-07 · 生成された例ではありません

01 機能概要

Web Video Presentation

固定ステージ、レビュー済みの最初の章、章ごとのナレーション記録、音声を使った録画(任意)を備えた、ナレーション単位のプレゼンテーション制作ワークフローです。

ソースに基づくワークフロー実行ベンチマークではありません

進め方

Web Video Presentation は、提供された素材を録画可能なウェブプレゼンテーションに変換します。成果物は固定の 16:9 ステージ上の Vite、React、TypeScript プロジェクトであり、レスポンシブなマーケティングサイトでも、自動的に納品される動画ファイルでもありません。クリックするごとにナレーションが一拍進み、シーンが焦点を絞った全画面構成に切り替わります。

このワークフローは二つのコンテンツ参照を保ちます。話し言葉の原稿が順序とペースを決め、元の記事がビジュアルを豊かにする詳細を提供します。章の narrations.ts は、ステップ数とテキスト、および任意の音声の基準です。最初の章を完成させてレビューしてから、残りの章でビジュアル表現を広げます。音声合成は、ウェブ体験が整ったあとの別の判断です。

想定される成果物

  • 章に分かれた、クリックで進む 16:9 React プレゼンテーション
  • ソースから作成する話し言葉の原稿、章の構成案、補足情報
  • 自動で進む録画モード向けの、ステップごとの音声ファイル(任意)
サンプルブリーフを見る

ブリーフからレビューまで

  1. 01
    原稿と構成案を用意する

    提供された記事は保持し、話し言葉の原稿は元の言語で調整し、章の区切りと画面の内容を計画します。構成案は情報のリズムを定めますが、すべてのアニメーションを指定するものではありません。

  2. 02
    計画をすり合わせる

    原稿、構成案、テーマ、アセット、開発モードをまとめて確認し、最初の章の内容とビジュアルの方針を固めます。

  3. 03
    完成した章をレビューする

    メインエージェントが、実際の内容と意図したモーションを備えた最初の章を完成させ、規定のレビューと修正を終えたうえで、後続の章に進む前に必須のユーザー承認のため一時停止します。このサンプルでペースやデザイントークンの不整合を解消します。

  4. 04
    音声と録画を選ぶ

    希望がある場合は、章のナレーション記録から音声を生成し、各セグメントの長さを確認します。そうでなければ手動で進め、録画または編集時にナレーションを追加します。

02 利用場面

使う場面

Vite、React、TypeScript、Node のツールを使用します。任意の TTS は、選択したプロバイダー、認証情報、アダプターに依存します。最終的な録画にはブラウザのキャプチャまたは録画ソフトが必要です。

向いているケース

  • 技術的な解説概念を一度に一つの関係ずつ見せながら、読み上げる言葉以外のソースの詳細も盛り込みたい場合に役立ちます。
  • 録画するプロダクトトークブラウザから録画するチュートリアルやプロダクト紹介で、各拍で何を表示するかを細かく制御したい場合に適しています。

確認すべき制限

  • レスポンシブなウェブサイトではありません固定ステージは利用可能なビューポートに合わせて拡縮します。これはプレゼンテーション向けの方式であり、一般的なモバイルでの閲覧を想定したレイアウトではありません。
  • 音声は任意で、外部のものです音声には、設定済みのプロバイダーまたは別の TTS の経路が必要です。ウェブプロジェクトが完成していても、音声合成や最終的な動画録画が行われた証拠にはなりません。

用意する入力

  • 記事または原稿内容のあるソースコンテンツまたは構成案を用意してください。話す内容を決める作業の代わりになるスキルとして紹介されているわけではありません。
  • テーマとアセットビジュアルの雰囲気を選び、計画した章で使えるプロダクトのキャプチャ、図、承認済みのプレースホルダーを特定します。
  • 共同作業と音声後続の章を個別にレビューするかまとめて完成させるかを決め、音声生成のバックエンドは別途承認してください。

03 重要な判断

重要な判断

  1. 一つのナレーション記録

    章で描画されるステップ数とナレーション配列を一致させることで、画面の順序、話すテキスト、生成される音声セグメントの食い違いを減らせます。

  2. 内容に基づくモーション

    構成案ではアニメーションの判断を実装段階に委ねます。そのため、早い段階で恣意的な効果を割り当てるのではなく、実際に説明する関係性に応じて見せ方を決められます。

04 依頼例

絞ったブリーフで試す

以下のサンプルブリーフはテストされていません。使用前にスキルのセットアップを確認してください。

セットアップを確認する

スキャフォールド、章の参照資料、テーマ、任意の音声スクリプトを含む、リポジトリのスキルパッケージ一式を保持してください。

アップストリームのソースファイル
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/web-video-presentation/SKILL.md

Vite、React、TypeScript、Node のツールを使用します。任意の TTS は、選択したプロバイダー、認証情報、アダプターに依存します。最終的な録画にはブラウザのキャプチャまたは録画ソフトが必要です。

一つの成果物から始める

スキルを実行する前に、このブリーフの範囲、ソース素材、制約を調整してください。

サンプルブリーフ
Web Video Presentation を使って、添付したブラウザレンダリングに関する記事を、5分間の英語の解説に変換してください。元の記事は保持し、話し言葉の原稿と構成案を作成して、落ち着いた技術的なテーマを提案してください。最初の章では、テキストだけのスライドではなく、レイアウトとペイントの違いを示してください。後続の章を作る前に、その章のレビューのために止まってください。私が音声プロバイダーを選ぶまで、音声合成は行わないでください。

結果を確認する

実際の出力を、以下の観察可能な基準で確認してください。

  • 各章の表示ステップ数が、そのナレーション項目の数と一致している。
  • 最初の章が、段落だけでなくビジュアルによる実演で概念を伝えている。
  • 音声ファイルと自動再生は、これらの任意の段階が実際に完了した場合にのみ報告されている。

OpenDesign は、コーディングエージェント向けのローカルなデザイン作業スペースを提供します。この掲載は、スキルが同梱されていること、または外部ツール、認証情報、ソフトウェアの依存関係が含まれていることを意味しません。

05 ソースとライセンス

ソースとライセンス

このページは、下記にリンクされた固定のソースリビジョンについて説明しています。アップストリームの挙動や要件は変更される可能性があります。

ソースの所有者
ConardLi
リポジトリ
ConardLi/garden-skills
ライセンス
MIT
確認したスナップショット
2026-10-07 · aaf9a82f5efd
編集者によるソース要約
固定ステージ、レビュー済みの最初の章、章ごとのナレーション記録、音声を使った録画(任意)を備えた、ナレーション単位のプレゼンテーション制作ワークフローです。

リンク先のソースに基づく、OpenDesign による独自の要約です。リポジトリのスター数は日付時点の人気の目安であり、スキルの利用状況や品質評価ではありません。

06 開始前の質問

始める前の質問

結果は MP4 ですか?

中核となる成果物はブラウザのプロジェクトです。録画とポストプロダクションによってその体験を動画にします。任意の音声ファイルは、録画中の再生を自動化するのに役立ちます。

自分の音声プロバイダーを使えますか?

ソースでは、組み込みの経路とアダプターを備えた、プロバイダーに依存しないランナーが説明されています。利用可能なアカウントまたはローカルツールの設定は別途必要です。

原稿を書いた後も記事を残すのはなぜですか?

原稿は話すリズムを決めますが、記事は例、数値、詳細の元として残り、ナレーションを詰め込みすぎずに画面を支えることができます。

OpenDesign

次のデザイン反復に向けて余地をつくりましょう。

ブリーフ、ソース素材、デザイン作業をローカルの作業スペースにまとめて保管できます。ワークフローに追加する前に、スキル自体のセットアップを確認してください。

アップストリームのソースファイル
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/web-video-presentation/SKILL.md