無料
Vael · 16:9
このSkillで書き出した映像
スペックチェックリスト v1.0.0
左揃えのスペックリスト。ラベルと値の行が1行ずつスライドインし、その下をアクセントラインがすっと走ります。
まだ評価はありません 0 ダウンロード
- フォーマット
- 動画 · 16:9
- 尺
- 0:08
8秒のスペック・機能紹介向けの無料 HyperFrames ブロック。ラベルと値の5行が左から順にスライドインし、それぞれの下にアクセントの下線が走ります。ボード向けのライト配色と、映像向けにスクリムを敷くダーク配色があります。行、配色、線の幅、位置、タイミングは HTML 内の小さな設定で指定します。背景は透過です。
2026年11月4日 更新
得られるもの
- 透過背景の8秒・1920×1080 のオーバーレイ
- 下線が走りながらスライドインする5つの行
- スクリムを選べるライト・ダークの2つの配色
向いている用途
- 商品詳細ページや広告
- アプリやガジェットの機能紹介
- バッグ、靴、家電などスペック重視のカテゴリー
向いていない用途
- 5〜6行を超える内容
- 長い文章
このSkillについて
依頼の例
/mk-specs-list うちの Vael Cerise の写真にスペックチェックリストを重ねて。Leather「Cherry calf, hand-finished」、Hardware「Solid brass clasp」、Fits「A 14-inch laptop」、Handles「Hand-stitched, 22 cm drop」、Made「In small, numbered runs」。
スペックは、読みやすくてこそ説得力を持ちます。スペックチェックリストは、ラベルと値の5行を製品の横に1行ずつ並べ、それぞれにくっきりとした下線を引きます。製品を画面に映したまま、素材やサイズ、機能がしっかり伝わります。
使い方
- 依頼：短いラベルと値の組み合わせを5つと、背景がライトかダークかをエージェントに伝えます。
- 入力：コピーと色をブロックの変数に書き込みます。文字数はレイアウトの想定に近い長さに保ちます。
- レンダー：
npx hyperframes renderで下書きをレンダーし、いくつかのフレームを確認してから最終版の MP4 を書き出します。 - 再利用：変数は小さな JSON ファイル1つにまとまっているので、次のバージョンもレンダー1回で済みます。
コツ
- ラベルは1語、値は数語に収めましょう。
- 明るい写真にはライト配色を、暗い映像にはスクリム付きのダーク配色を使います。
- 背景は透過なので、アルファチャンネル付きでレンダーして自分の映像や写真、単色の背景に重ねます。そのための2つのコマンドは SKILL.md に載っています。
- 画面の右側は製品のために空けておきましょう。
オープンソース
これは HyperFrames のレジストリブロックです。HeyGen と HyperFrames のコントリビューター（heygen-com/hyperframes）が作り、Apache License 2.0 で公開しています。ダウンロードはアセット込みのブロックに Reelity が書いた SKILL.md を添えたもので、エージェントが中身の埋め方とレンダー方法を把握できます。HyperFrames 本体は npm から実行されます。
始める前に必要なもの
- 用意するもの
- ラベルと値の組み合わせ5つと、製品のショット。
- 依存関係
- Node.js 22 以降 — 必須 · FFmpeg — 必須
- 外部コスト
- ありません。HyperFrames は無料のオープンソースで、手元のマシンでレンダーします。
- 最終テスト
- v1.0.0 —
ユーザーレビュー
まだレビューはありません。インストールして最初に評価しましょう。
よくある質問
行を増やせますか？
はい。行は設定内のリストです。5〜6行ならゆったり収まります。
ごちゃごちゃした写真の上でも読めますか？
背景とコントラストがつく配色を選び、必要ならスクリムを濃くしてください。
なぜ無料なのですか？
HeyGen と HyperFrames のコントリビューターによるオープンソースの HyperFrames ブロックです。手を加えずに掲載し、エージェントが使えるよう SKILL.md を添え、自社ブランド Vael で作ったサンプルを付けています。
