できること

  • 1080p、30 fps、7 秒の MP4 を書き出す HyperFrames プロジェクトと、レンダリングのコマンド
  • 録画の実際の操作時刻に合わせたチェック
  • レイアウトとタイミングが同じ 4 種類の配色
  • 下書き用の、説明のためのスマホ画面(同梱)
  • 任意:PopNow の手順ごとのナレーション、BGM、下書き用の画面画像

向いている用途

  • アプリのチュートリアルや初回利用の手順
  • クリエイター動画の 3 ステップの解説パート
  • 各手順が目に見えて完了する短いプロダクトデモ

向いていない用途

  • 4 つを超える手順
  • 長い画面の操作説明(メディアは 6.8 秒まで)
  • スマホの枠に収まらないデスクトップ専用の画面

使い方

Claude・ChatGPT で

PopNow のスキル「チェックリストのアニメーション製品デモ」(animated-checklist-demo)を使って、次のことをしてください:オンボーディング用のチェックリスト動画。「ノートブックを作る」は 1.2 秒、「タグを追加する」は 2.9 秒、「チームメイトを招待する」は 4.6 秒、画面は ./onboarding.mp4。

コーディングエージェントで

/popnow-animated-checklist-demo オンボーディング用のチェックリスト動画。「ノートブックを作る」は 1.2 秒、「タグを追加する」は 2.9 秒、「チームメイトを招待する」は 4.6 秒、画面は ./onboarding.mp4。

次はこれ

比べられるように、チャコールとライムのスタイルも書き出して。

各手順に短い声のナレーションを付けて。先に見積もって。

用意しておくもの

  • 短いタスクのラベルを最大 4 つ
  • 画面録画かスクリーンショット、そして各手順が起きる秒数
  • Node.js 22+ と FFmpeg。任意で PopNow API キー

似ているスキル

すべて見る →

よくある質問

チェックは画面録画とどう同期しますか?

各タスクには秒単位の at の値があります。録画の中で操作が起きた瞬間に合わせてください。チェックの線とボックスの塗りは、その正確なフレームから始まります。

録画の代わりにスクリーンショットを使えますか?

使えます。静止画でも動きますが、そのときのチェックは説明用のタイミングだけになります。スキルは、実際に録画した操作であるかのように見せず、その旨を伝えます。

既定のスマホ画面とは何ですか?

パッケージに同梱の、説明用に生成したメモアプリの画面です。素材がなくても下書きを書き出せます。本番のデモでは、自分の製品の画面に差し替えてください。

ナレーションは追加できますか?

できます。PopNow は、各手順の短い一言を、チェックの直前に入れて声にできます。その下で静かな BGM を小さくします。生成の前に、クレジットの価格が表示されます。