explain-with-section-clips

セクションクリップで説明する

従来型の、セクションをグループ化したページです。各セクションのビジュアルは、小さなプレーヤーフレーム内で短いループアニメーション（「クリップ」）として表示されます。各クリップでは、1つのアイデアだけを示します。

このスキルを使う場面

• セクションクリップを使って変更内容を視覚的に説明するようユーザーから求められた場合。
• オーケストレーターが、セクションクリップを使って変更内容を視覚的に説明する場合。

セクション

• 3～6個のセクション。各セクションは、1文の要点 → 1つのクリップ → 2～3行の短い説明 → 内容を示す名前が付いた1つのev-moreトグル（例：「新しいコード · 変更したファイル」）で構成します。
• 関連情報はトグル内にまとめます。強調表示されたコード、グループ化された項目、ステータスチップ、簡潔な表などを含めます。

クリップ

• 5～12秒でループし、1つのアイデアを示します。数値が増えていく様子、値が段階を経て流れる様子、リクエストが停止される様子、変更が利用側へ広がる様子などです。
• 表示されている間だけ再生し、スクロールして画面外に出たら一時停止します。再生／一時停止／再再生の操作ボタンとプログレスバーを用意します。
• 停止中（再生前、動きを減らす設定時、サムネイル表示時）は、最終フレームを表示します。最終フレームだけで結果が伝わる必要があります。
• クリップ内のテキストは、スマートフォンでも読みやすくします（デスクトップサイズで13 px以上。狭いフレームでは拡大します）。

作成方法

• explainer-kitスキルを使ってフラグメントとして作成し、EV.clip(el, {duration, setup, draw})でクリップを描画します。draw(t)は時刻だけからフレーム全体を設定するため、シーク、ループ、ポスターフレームを簡単に扱えます。
• 各セクションにidとdata-tocを設定し、チャプターリストに表示されるようにします。