AI Services Market
AI Services Market › スキルファクトリー › 動画 › Step Cards to Chapter
$4.99 · サインイン不要v1.0.0– 回表示

Step Cards to Chapter

散らばり、積み上がり、折りたたまれて、記憶に残るチャプターになるステップ。

ステップのリストをチャプターに変えます。散らばったステップカードが飛来し、順序通りに積み上がり、一連の流れの総和を伝えるチャプタータイトルへと折りたたまれます。

Step Cards to Chapter のプレビュー
こんな方におすすめ
レッスンをチャプター構成にするチュートリアル・コース制作者
所要時間
30分
レベル
初心者向け

3ステップでインストール

登録不要。CLIツールも不要です。お使いのAIを選んで、1行コピーして貼るだけです。

Pro — 全511件のスキル

ご自分で入れたい場合は、スキルを購入($4.99)し、購入完了画面からZIPをダウンロードして、上のディレクトリに展開し、AIのセッションを再起動してください。結果は同じです。すでに購入済みの場合は、AIアシスタントにダウンロードしてもらうこともできます。

パックの内容

SKILL.md(手順書)1点とスターターテンプレート1点が入っています。プレビューはこちらです:

Step Cards to Chapter

When to use

  • Your tutorial has a sequence of steps that viewers experience one at a time, and you need a moment that shows how they fit together before moving on
  • You're structuring a course and each section opens with a chapter card that previews the steps inside it
  • Your how-to video lists "step 1, step 2, step 3" in the voiceover but never shows the sequence as a whole, so viewers can't tell how far along they are
  • You're recapping a completed procedure — "here's what we just did" — and want the recap to feel like a conclusion, not a repeat
  • You want a consistent chapter-opening style across a course so viewers learn to read "chapter card = new section, new payoff"

Workflow

  1. Write the steps as cards (input: procedure → output: 3–7 step cards)
    Break the procedure into 3–7 steps, one card per step. Each card has three lines max: a step number, a verb-first title ("Connect the cable," not "Cable connection"), and one clarifying line of at most 8 words ("…until it clicks"). If a step needs more than one clarifying line, it's two steps — split it. Number the cards in the order they'll be performed, and write the titles so they read as a coherent sequence when stacked: reading the titles top to bottom should tell the whole procedure in one breath.
  2. Name the chapter (input: step cards → output: chapter title + payoff line)
    Write the chapter title as the outcome the steps produce, not a label for the steps: "A Working Connection," not "Setup Steps." Add a payoff line underneath in one sentence: "By the end of this chapter, you'll have a tested connection and know how to check it." The title + payoff is what the cards fold into — it's the answer to "why am I doing these steps?" If you can't write the payoff in one sentence, the steps don't belong in one chapter; regroup them until the payoff is obvious.
  3. Scatter the cards in (input: step cards → output: 0.0–1.5s scatter animation)
    Animate the cards flying in one at a time, 0.15s apart, from slightly different angles and offsets (±12 px, ±4° rotation), each landing with a soft settle (overshoot 4 px, 0.25s ease-out). The scatter should feel like cards being dealt onto a table — lively but controlled. Keep the scatter tight: cards land in a loose grid or a fanned row, never overlapping the text of a neighbor. Total scatter time: 0.8–1.5s depending on card count. The voiceover during this beat names the chapter, not the individual steps — the cards are a visual promise of what's coming.
  4. Stack them in order (input: scattered cards → output: 0.6s stacking animation)
    After a 0.5s hold on the scatter, the cards reorder themselves into a neat vertical stack in step order: each card glides to its stack position over 0.6s with an ease-in-out curve, rotation easing back to 0°, in sequence from first step to last with a 0.08s stagger. The stack reads top to bottom, step 1 to step N, with a connecting spine or numbered rail on the left so the order is visible even at a glance. This is the "here's the plan" moment — hold the full stack for 1.5–2s so viewers can read every title.
  5. Fold into the chapter title (input: ordered stack → output: 0.8s fold animation)
    The stack folds into the chapter title: cards collapse toward each other (each card sliding 60% toward the stack's center over 0.4s), then the stack as a whole shrinks and fades (0.4s) as the chapter title scales in from 95% to 100% with a 0.3s fade. The payoff line appears under the title 0.2s later. The fold should read as "these steps become this chapter" — a transformation, not a cut. Never cut from the stack to the title without the fold: the fold is what makes viewers feel the steps add up to something.
  6. Return to the cards as you go (input: chapter title → output: progress callbacks)
    As the chapter proceeds and each step is completed, bring back the stack briefly (0.8s) with completed steps visibly checked and the current step highlighted — the same cards, the same layout, so viewers recognize them instantly. Each callback lasts 1–1.5s: long enough to orient, short enough not to stall the tutorial. By the final step, the stack returns fully checked, and the chapter title reappears for one closing beat — the loop closes, and viewers feel the chapter land.

テンプレートのプレビュー

Step Cards to Chapter — Chapter Template

One chapter per procedure. Fill in the cards and title before animating.

Chapter: {outcome title, e.g. "A Working Connection"}

Payoff line: {one sentence — "By the end of this chapter, you'll have {outcome}."}

Step cards (3–7, in performance order)

Sequence read-test: {reading the titles top to bottom tells the whole procedure in one breath — yes / no} Split rule: {more than 7 steps → split the chapter; more than one clarifying line → split the step}

Animation timing

Progress callbacks (same cards, same layout every time)

Checklist before export

[ ] 3–7 cards, verb-first titles, ≤3 lines per card

スキルパック本体(SKILL.md とテンプレート)は英語で書かれています。

Pro — 全511件のスキル

こちらもおすすめです