無料
Halden Solace · 16:9
このSkillで書き出した映像
棒グラフ＋折れ線グラフ v1.0.0
エディトリアルな棒グラフと折れ線グラフが月ごとに組み上がる。棒が伸び、線がその上を走り、すべての値がカウントアップします。
まだ評価はありません 0 ダウンロード
- フォーマット
- 動画 · 16:9
- 尺
- 0:15
新聞のようなスタイルで15秒のデータストーリーを語る無料 HyperFrames ブロック。グリッド線と月のラベルが現れ、棒が値とともに1本ずつ伸び、続いて折れ線がパーセンテージのラベル付きでその上に描かれます。セリフ体の見出し、サブタイトル、凡例、出典の行も入ります。月、2つのデータ系列、目盛り、ラベル、タイトルは HTML で編集します。
2026年11月3日 更新
得られるもの
- 透過背景の15秒・1920×1080 のグラフ
- 順番に組み上がる棒、折れ線、値のラベル
- セリフ体の見出し、凡例、出典の行
向いている用途
- 成果や成長のストーリー
- 投資家や取締役会への報告
- 解説動画やレポート
向いていない用途
- 7期間以上のデータ
- 情報量の多いダッシュボード
このSkillについて
依頼の例
/data-chart 棒グラフ＋折れ線グラフを作って。「Halden Solace: pairs sold vs. repeat buyers」、6月から11月、販売足数は9千から2万3千、リピーターは24%から44%。
連動して動く2つの数字は、ストーリーになります。売上とリピーター、トラフィックと登録数、売上高と利益率。棒グラフ＋折れ線グラフは、その両方を落ち着いたエディトリアルなグラフひとつで見せ、グラフが自ら組み上がっていくので、ナレーションが説明する前に視聴者がトレンドを読み取れます。
使い方
- 依頼：6か月分の月、棒と折れ線の値、単位、見出しをエージェントに伝えます。
- 入力：コピーと色をブロックの変数に書き込みます。文字数はレイアウトの想定に近い長さに保ちます。
- レンダー：
npx hyperframes renderで下書きをレンダーし、いくつかのフレームを確認してから最終版の MP4 を書き出します。 - 再利用：変数は小さな JSON ファイル1つにまとまっているので、次のバージョンもレンダー1回で済みます。
コツ
- 折れ線の目盛りを棒より高くしておくと、ラベルが棒と重なりません。
- 単位はサブタイトルと凡例に明記しましょう。
- 背景は透過なので、アルファチャンネル付きでレンダーして自分の映像や写真、単色の背景に重ねます。そのための2つのコマンドは SKILL.md に載っています。
- 変数はありません。エージェントが SKILL.md に沿って、HTML 内のテキストや数字を直接編集します。
オープンソース
これは HyperFrames のレジストリブロックです。HeyGen と HyperFrames のコントリビューター（heygen-com/hyperframes）が作り、Apache License 2.0 で公開しています。ダウンロードはアセット込みのブロックに Reelity が書いた SKILL.md を添えたもので、エージェントが中身の埋め方とレンダー方法を把握できます。HyperFrames 本体は npm から実行されます。
始める前に必要なもの
- 用意するもの
- 2つの指標の6期間分のデータ、単位、見出し。
- 依存関係
- Node.js 22 以降 — 必須 · FFmpeg — 必須
- 外部コスト
- ありません。HyperFrames は無料のオープンソースで、手元のマシンでレンダーします。
- 最終テスト
- v1.0.0 —
ユーザーレビュー
まだレビューはありません。インストールして最初に評価しましょう。
よくある質問
月以外の期間も使えますか？
はい。ラベルはスクリプト内のリストなので、四半期、年、週でも使えます。
ラベルの重なりを防ぐには？
折れ線の最大値を棒の最大値より低く設定すると、線が棒の上に来ます。サンプルではそうしています。
なぜ無料なのですか？
HeyGen と HyperFrames のコントリビューターによるオープンソースの HyperFrames ブロックです。手を加えずに掲載し、エージェントが使えるよう SKILL.md を添え、自社ブランド Halden Solace で作ったサンプルを付けています。
