ストーリーボードフォーマット
video-storyboard-format
video-generate=storyboard
と併用して、imgix によってエンコードされた動画からストーリーボードを生成します。このパラメータは video-generate
が storyboard
に設定されている場合にのみ有効です。
使用可能な値は、vtt
、jpg
、png
、json
です。デフォルトは jpg
です。
video-storyboard-format=vtt
video-storyboard-format=vtt
を指定すると、WebVTT ファイルが返されます。この形式は、多くの一般的な動画プレーヤーでタイムラインホバープレビューを有効にするために使用されます。
WEBVTT
00:00:00.000 --> 00:00:00.959
https://image.media.imgix.video/01l1pCNbdLDnFoB9eScrLQ6374SdOhv8t/storyboard.jpg#xywh=0,0,232,160
...
video-storyboard-format=jpg
video-storyboard-format=jpg
を指定すると、動画の多数のフレームをタイル状に並べた大型 JPG 画像ファイルが返されます。
video-storyboard-format=png
video-storyboard-format=png
を指定すると、JPG と同様にフレームをタイル状に並べた大型 PNG ファイルが返されます。
video-storyboard-format=json
video-storyboard-format=json
を指定すると、WebVTT と同じ情報を JSON 形式で取得できます。
{
"url": "https://image.media.imgix.video/01l1pCNbdLDnFoB9eScrLQ6374SdOhv8t/storyboard.jpg",
"tile_width": 232,
"tile_height": 160,
"duration": 24.08,
"tiles": [
{ "start": 0, "x": 0, "y": 0 },
{ "start": 0.9592, "x": 232, "y": 0 },
...
]
}
ユースケース
ストーリーボードは、動画コンテンツを強化しユーザーエンゲージメントを高めるための多用途なツールです。以下は代表的な使用例です。
トリックプレイ

トリックプレイは、ユーザーがスクラブ中にサムネイルプレビューを表示しながら動画を視覚的にナビゲートできるようにする機能です:
- 長尺動画のシーク中に視覚的コンテキストを提供
- 特定シーンへの正確な移動を可能に
- タイムスタンプと併せて視覚的手がかりを提供
WebVTT フォーマット(video-storyboard-format=vtt
)は、多くの動画プレーヤーでトリックプレイを実装するのに最適です。ix-elements はこの機能を内蔵しており、ユーザーフレンドリーな動画プレーヤー作成チュートリアルでも詳しく紹介しています。
コンテンツレビュー
ストーリーボードは、動画のビジュアル要約を提供することでコンテンツレビューの効率を高めます。Slack 通知と連携すれば、アップロードごとにビジュアルな要約を共有可能です。

この例では jpg
または png
出力形式が適しています。
サムネイルピッカー
ストーリーボードは、コンテンツ制作者や管理者が代表的なフレームを選択できるようなサムネイル選択 UI の自動化にも活用できます。
JSON フォーマット(video-storyboard-format=json
)は、構造化データとしてフレームの位置やタイムスタンプを提供するため、imgix API による直接サムネイル生成と組み合わせてカスタムピッカーを構築するのに便利です。
以下は、video-thumbnail-time
パラメータと連携した例です:
長尺動画のチャプター作成にも応用できます。
動画編集の参照用
ストーリーボードは、動画編集者やプロデューサーの編集作業中の参照資料としても有効です:
- 編集判断のためのシーントランジション特定
- ショットリストや編集計画の作成
- 特定のフレームやシーケンスのチーム共有
- 完成コンテンツのビジュアル構成の記録
タイル画像形式は、一つのファイルで包括的なビジュアル参照ができるため特に便利です。