アニメ操作マニュアル

ビデオマニュアル

プロダクトのスクリーンショットを、短いキャプション付きのウォークスルービデオに変換します。アニメーションするカーソルがスクリーン上をクリックして進み、ハイライトやズームで注目を誘導し、アニメーションテキストで各ステップを説明します。

この作業は4つのステップからなります。ユーザーが決定し、あなたが制作を行います。

ステップ	ユーザー	あなた
1. プロダクトプロジェクト	プロダクトの対象ユーザーを表明し、ブランドカラー、背景テンプレート、ロゴ、ブランドガイドを設定	ボイスルールを導出し、モーションを調整
2. シーン	スクリーンショットまたはFigmaリンクを添付	Figmaフレームをインポート
3. ストーリーボード草案	主要なスクリーン、その順序、テキストを確定	ユーザーが編集できるように草案を作成
4. ビデオ	視聴、テキストと順序の編集、フレームへのコメント	アクションを追加、全フレームを確認、コメントから修正、レンダリング

表現と順序がユーザーの最も気にする点であるため、ステップ3で制作作業の前に確定され、ステップ4ではMP4がレンダリングされるまで編集可能な状態が保たれます。

ユーザーとはその言語で会話してください。キャプションは、特に指示がない限り、プロダクトUIの言語で記述します。

2つの作業方法

Studioを使用する場合（デフォルト）。 ローカルWebアプリが4つのステップを表示します。ユーザーはそこで作業し、✦マークのボタンがリクエストをキューに入れ、あなたがそれを受け取り、実行し、回答します。開始前に references/studio.md を読んでください。これがそのループのプロトコルです。

会話のみで行う場合。 ユーザーがブラウザを開きたくない場合、またはローカルサーバーを実行できない場合、質問と表示を会話内で行いながら同じ4つのステップを実行します。下の「Studioなしの場合」を参照してください。

どちらの方法でもファイルは同一であるため、プロジェクトは2つの間を行き来できます。

プロジェクトレイアウト

すべてはユーザーのプロジェクト内の video-manual/ に配置され、1つのプロファイルがそのプロダクト用に作成されたすべてのマニュアルに使用されます。

video-manual/
├── product-profile.json     # プロダクトごとに1つ: オーディエンス、ボイス、モーション、背景
├── brand/                   # guide.md（ペーストされたブランドガイド）、ロゴ
├── requests.json            # Studioからキューイングされたリクエスト
└── <manual-slug>/           # ビデオごとに1つのフォルダ（例：create-task/）
    ├── screens/             # 01-board.png, 02-new-task.png, ...
    ├── storyboard.json      # 最初は草案、その後完全なストーリーボード
    ├── comments.json        # Studioからのフレームコメント
    └── out/                 # manual.html, manual.mp4, stills/, frames/

セットアップ

スクリプトはこのスキルの scripts/ フォルダにあります。レンダリングには依存関係のインストールが一度必要です。

cd <skill-dir>/scripts && npm install

その後、Studioをバックグラウンドで起動し、ユーザーにそのアドレスを伝えます。

node <skill-dir>/scripts/studio.mjs video-manual --open

次に何が起こるかを一文で伝えます。ユーザーがステップ1を入力し、✦ボタンで送信したものはあなたが受け取ります。その後、references/studio.md の説明に従ってリクエストを待ちます。

ステップ1 — プロダクトプロジェクト

video-manual/product-profile.json にすでに voice ブロックが存在する場合、プロダクトはセットアップ済みです。そのまま使用してください。プロダクト間でビデオの一貫性を保つことは、個々のビデオを調整するよりも重要です。

それ以外の場合、ユーザーはフォーム（名前、ドメイン、B2C/B2B、対象年齢、デバイス、アクセントカラー、背景テンプレート、オプションのロゴとブランドガイド）に入力し、profile リクエストを送信します。その後：

1. product ブロックと brand/guide.md を読み取ります。
2. voice ブロックを記述します。 — レジスター、文の終わり方、最長キャプション、避けるべき単語、プロダクト用語。references/voice-guide.md を参照してください。ユーザーのブランドガイドが一般的なアドバイスよりも優先されます。
3. 同じオーディエンス向けにモーションを調整します。references/motion-profiles.md を参照してください。ユーザーがプリセットと背景を選択しました。オーディエンスに合わせてペーシング、サイズ、イージングを調整します。
4. 1〜2文の rationale を追加します。

これら3つの要素 — 対象年齢、ドメイン、B2C/B2B — がすべてのキャプションを決定します。フォームで空欄があったり、スクリーンショットと矛盾する場合は、ボイスルールを記述する前に質問してください。

ステップ2 — シーン

各スクリーン状態ごとに1つの画像を、screens/ に出現順に番号を付けて配置します。状態が視覚的に変化する場合（モーダルが開く、ドロップダウンが展開する、フォームが入力されるなど）、その状態ごとに画像が必要です。ビデオは、クリックの結果を次のスクリーンショットに切り替えることで表示します。

ユーザーは通常、Studioにこれらをアップロードします。Figmaリンク付きの scenes リクエストの場合、各フレームをPNGとしてエクスポートし、coordWidth のためにその論理幅を記録します。また、レイヤーメタデータも読み取ります。要素の正確な境界は、ピクセルからの推定よりもはるかに信頼性が高いためです。

ウォークスルーに必要な状態が不足している場合は、どの状態かを伝え、そのステップをスキップせずに提供を依頼してください。視聴者が追えないジャンプはマニュアルの目的を損ないます。

ステップ3 — ストーリーボード草案

draft リクエストが来たら、すべてのスクリーンとプロファイルを読み取り、storyboard.json に草案を記述します。順序どおりのシーン、それぞれに caption と、そのシーンで何が起こるかを説明する note を含めます。アクションはまだ追加しません。ビデオの範囲を決定しテキストを記述する方法については references/manual-script.md を参照し、すべての行をプロファイルのボイスで記述します。

ユーザーはStudioで草案を編集し、表現と順序が適切になったら「ビデオをリクエスト」を押します。この produce リクエストが承認です。これが届くまでアクションを追加しないでください。

ステップ4 — ビデオ

制作

references/storyboard-schema.md を読み、承認された草案を完全なストーリーボードに変換します。各シーンの note に従い、アクションを追加し、coordWidth を設定します。キャプションは承認されたまま正確に維持します。

座標は最も間違いやすい部分です。正確な境界が得られる場合（Figmaメタデータ、DOM矩形）はそれを使用します。画像しかない場合は、注意深く見て推定します。以下のチェックは、間違えた箇所を捕捉するために存在します。

ユーザーが確認する前にチェック

ビルドし、スチルをレンダリングします。各クリック、テキスト変更、キャプション変更時、および各シーンの終わりに1フレームずつ生成します。

node <skill-dir>/scripts/build.mjs video-manual/<slug>/storyboard.json
node <skill-dir>/scripts/render.mjs video-manual/<slug>/out/manual.html --stills video-manual/<slug>/out/stills

build.mjs はストーリーボードを検証し、各キャプションをプロファイルのボイスルールに対してチェックし、各シーンのタイミングを出力します。エラーを修正します。ユーザーが書いたテキストに対するボイス警告の場合は、その表現を保持し、警告について返信で言及します。

スチルを読み取り、それぞれを確認します。

• カーソルの先端は、キャプションで指定された要素の上にありますか？
• ハイライトリングは要素全体を囲み、それ以外を含んでいませんか？
• ズーム後、ターゲットは完全に表示され、読み取れますか？
• 入力テキストはフィールド内に収まり、プレースホルダーを覆っていますか？
• 各キャプションは完全に表示され、最大2行ですか？
• 各コールアウトは、カーソルや要素を覆うことなく、正しい要素を指していますか？

すべてのフレームが合格するまでストーリーボードを修正し、再ビルド、再レンダリングしてからリクエストに回答します。ボタンの横をクリックするカーソルはマニュアル全体を不適切に見せるため、ユーザーがそのような問題を見つけるべきではありません。

レビューループ

Studioのステップ4では、ユーザーは以下を行うことができます。

• 任意のキャプション、タイトル、画面上のテキストを編集し、シーンの順序を変更。 変更は直接 storyboard.json に保存され、リクエストは発生しません。
• フレームで一時停止し、位置をピン留めしてコメントを書き、コメントを revise リクエストとして送信。

revise は references/studio.md の説明に従って処理します。コメントされたフレームをレンダリングしてユーザーが見たものを確認し、コメントに関連する部分のみを変更し、新しいフレームで修正されたことを確認してから各コメントに返信します。ユーザーがシーンを並べ替えた後は、各クリックが後続の画面に正しくつながっていることを確認します。壊れたチェーンは黙って修復するのではなく、ユーザーに伝えるべき問題です。

このループはユーザーが満足するまで繰り返されます。

レンダリング

ユーザーはStudioの1つのボタンでMP4をエクスポートします。自分でレンダリングするには：

node <skill-dir>/scripts/render.mjs video-manual/<slug>/out/manual.html --out video-manual/<slug>/out/manual.mp4

レンダリング時間はビデオの長さとほぼ同じで、遅いマシンでは2〜3倍かかることもあります。1分を超えるマニュアルの場合はバックグラウンドで実行します。出力パス、長さ、ファイルサイズを報告します。

Studioなしの場合

会話内で同じ4つのステップを実行します。

1. プロジェクト — スクリーンショットとUIコピーから対象年齢、ドメイン、B2C/B2Bを推測し、その解釈を述べ、1つの質問でユーザーに確認を求めます。その後、プリセット、アクセント、背景を含むプロファイル全体を自分で記述します。
2. シーン — ユーザーが提供した画像を screens/ にコピーするか、ブラウザやFigmaツールがあれば自分でキャプチャします。
3. 草案 — ストーリーボードの草案を作成し、表（ステップ、画面、何が起こるか、キャプション、画面上のテキスト）と推定長さとともに表示し、承認を待ちます。ユーザーが最初からそのまま進めると言った場合は、続行して草案の場所を伝えます。
4. ビデオ — 上記と同様に制作とチェックを行い、out/manual.html の場所をユーザーに伝えます。このスタンドアロンページはビデオを再生し、テキストと順序を編集するための独自のパネルを持っています。「Download edits」で storyboard.edited.json が出力され、ユーザーはそれをあなたに渡すことができます。受け取ったら、変更点をリストアップして意図通りに読んだことを確認してもらい、storyboard.json として保存し、再ビルドしてスチルを再チェックします。その後レンダリングします。

後からの変更

• 表現や順序：ユーザーがStudioで編集するか、あなたに伝えます。
• ボイス（「堅すぎる」「私たちのユーザーはもっと年配だ」など）：プロファイルの voice ブロックを変更し、キャプションをそれに合わせて書き直します。
• フィーリング（「遅すぎる」「バウンスが強すぎる」など）：個々のシーンではなく、プロファイルのモーショントークンを変更します。references/motion-profiles.md の調整表を参照してください。
• 1つのステップがおかしい：そのシーンのアクションを修正し、スチルを再確認します。

変更後は、再レンダリングする前に再ビルドし、スチルを再チェックします。

制限事項

リクエストが以下の制限に該当する場合は、はっきりと伝えてください。

• スクリーンは静止画像です。スクロール、ホバー状態、アプリ内アニメーションは再現されません。これらは個別のスクリーンショットとして表示してください。
• ナレーションや音楽はありません。キャプションと画面上のテキストで説明を行います。
• Studioはテキストとシーンの順序を編集します。クリックやハイライトが何を指すかは、あなたへのコメントを通じて変更されます。
• 出力はデフォルトで16:9です。他の形状の場合は、ストーリーボードで meta.width と meta.height を設定してください。

トラブルシューティング

• playwright-core is not installed：スクリプトフォルダで npm install を実行します。
• no browser found：Google Chromeをインストールするか、スクリプトフォルダで npx playwright install chromium を実行します。
• ffmpeg not found：ffmpegをインストールするか、FFMPEG_PATH を設定します。npm install で通常 ffmpeg-static 経由で提供されます。
• Studioでリクエストが「waiting」のままになる：studio.mjs wait が実行されていません。実行するか、studio.mjs pending を実行してください。
• ステップ4でビデオの代わりにエラーが表示される：シーンが存在しない画像を参照しているか、座標がスクリーン外です。build.mjs が該当シーンを表示します。
• フォントが正しく表示されない：ビデオはマシンにインストールされているフォントを使用します。プロファイルの font.family にインストールされているフォントを設定してください。