無料
Ember & Bun · 16:9
このSkillで書き出した映像
バーチャートレース v1.0.0
月が進むごとにランキングの棒が伸びて抜きつ抜かれつ。数値が上がるにつれ軸も自動で伸縮します。
まだ評価はありません 0 ダウンロード
- フォーマット
- 動画 · 16:9
- 尺
- 0:12
小さな表をバーチャートレースに変える無料の HyperFrames ブロック。期間と系列をプレーンテキストで貼り付けるだけで、棒が伸び、期間ごとに順位が入れ替わって追い抜き合い、横の数値はカウントアップし、伸びに合わせて軸のスケールも変わります。タイトル、サブタイトル、データ、棒の数、速さ、数値の書式、アクセントは変数です。
2026年11月3日 更新
得られるもの
- 1920×1080 の MP4 チャートレース（デフォルトは1期間2秒）
- 追い抜き、カウントアップするラベル、自動で伸縮する軸
- 表計算ツール不要、プレーンテキストで入れるデータ
向いている用途
- 売上、成長、ランキングのストーリー
- 年間の振り返りやマイルストーンの投稿
- データジャーナリズムや授業の解説
向いていない用途
- 何十もの系列やとても長い期間
- じっくり読む必要がある正確な数字
このSkillについて
依頼の例
/bar-chart-race 「Ember & Bun: burgers sold by month」というタイトルで、6月から11月までのバーチャートレースを作って。単位は千個。Double Stack は 12, 18, 26, 35, 47, 61、Classic Cheese は 22, 25, 28, 30, 32, 33、ほかにメニューを4品。アクセントはオレンジ。
時間とともに変わるランキングはそれだけでストーリーになり、バーチャートレースならそれを数秒で伝えられます。Bar Chart Race にいくつかの期間と系列をプレーンテキストで渡せば、上昇、追い抜き、トップ争いをアニメーションにします。すっきりとしたエディトリアルなタイポグラフィで、先頭の棒にだけアクセントカラーを1色使います。
使い方
- 依頼：タイトル、期間、各系列の値をプレーンテキストで、単位とあわせてエージェントに伝えます。
- 入力：コピーと色をブロックの変数に書き込みます。文字数はレイアウトの想定に近い長さに保ちます。
- レンダー：
npx hyperframes renderで下書きをレンダーし、いくつかのフレームを確認してから最終版の MP4 を書き出します。 - 再利用：変数は小さな JSON ファイル1つにまとまっているので、次のバージョンもレンダー1回で済みます。
コツ
- 系列は4〜8個、期間も4〜8個がいちばん見やすくなります。
- 視聴者に注目してほしい項目にアクセントを割り当てましょう。
- $、k、% などの単位には接頭辞と接尾辞を使います。
- 期間の長さを伸ばすと、落ち着いた読みやすいレースになります。
オープンソース
これは HyperFrames のレジストリブロックです。HeyGen と HyperFrames のコントリビューター（heygen-com/hyperframes）が作り、Apache License 2.0 で公開しています。ダウンロードはアセット込みのブロックに Reelity が書いた SKILL.md を添えたもので、エージェントが中身の埋め方とレンダー方法を把握できます。HyperFrames 本体は npm から実行されます。
始める前に必要なもの
- 用意するもの
- 期間と各系列の値、タイトル、単位。
- 依存関係
- Node.js 22 以降 — 必須 · FFmpeg — 必須
- 外部コスト
- ありません。HyperFrames は無料のオープンソースで、手元のマシンでレンダーします。
- 最終テスト
- v1.0.0 —
ユーザーレビュー
まだレビューはありません。インストールして最初に評価しましょう。
よくある質問
データはどんな形式ですか？
1系列につき1行で、名前、コロン、カンマ区切りの値を期間と同じ順に並べます。表計算のデータはエージェントがこの形式に変換できます。
動画の長さは？
デフォルトは1期間あたり2秒なので、6期間で約12秒です。期間の長さは変数です。
なぜ無料なのですか？
HeyGen と HyperFrames のコントリビューターによるオープンソースの HyperFrames ブロックです。手を加えずに掲載し、エージェントが使えるよう SKILL.md を添え、自社ブランド Ember & Bun で作ったサンプルを付けています。
