# Stepper: 進捗ステッパーUI

Account、Plan、Doneの3ステップからなる横向きの進捗インジケーターを、2ステップ目の状態で表示します。 動画テンプレート。Claude用コードをコピーするか、Subclipで編集できます。

Canonical URL: https://www.subclip.app/ja/motion-graphics-templates/remotion/stepper

Preview video: https://subclipweb.subclip.app/motion-graphics-templates/v1/previews/motion-template-remotion-remocn-stepper.mp4?v=acda60c86a

ラベル付きの3ステップを持つ横向きのオンボーディング用ステッパーで、アクティブなステップを設定して進捗を見せられます。

- フレームワーク: Remotion
- カテゴリ: UI
- 再生時間: 5秒
- アスペクト比: 16:9 横向き
- コード: コードを取得（無料ログイン）：https://www.subclip.app/ja/motion-graphics-templates/remotion/stepper

横向きのステッパーに、線でつながったAccount、Plan、Doneの3ステップが表示され、2ステップ目のPlanがアクティブになっています。テンプレートはこの状態を4秒間保ちます。コードでは、進捗が連続的なステップ位置に沿って動くため、フローが進むにつれて線が塗られ、各ステップが点灯していきます。

アクティブなステップに加えて、再生速度と背景も設定できます。オンボーディングの説明、購入や登録のデモ、「3ステップで使える」という解説動画、デザインシステムの紹介に使えます。

## 活用例

- オンボーディングの説明
- 購入と登録のデモ
- 3ステップの解説動画
- デザインシステムの紹介

## 変更できる項目

- `speed`: 再生速度 (数値)
- `stageBackground`: 現場の背景 (色)

## このテンプレートの使用方法

1. Mac または Windows 用の Subclip をダウンロードします。このページのすべてのテンプレートはプリインストールされています。
2. [テンプレート]パネルを開き、[Stepper]を選択してタイムラインにドロップします。
3. レイヤー設定のテキスト、色、タイミングを変更するか、AI エージェントに編集を依頼します。
4. ビデオをエクスポートするか、コードをダウンロードして独自のプロジェクトでテンプレートを使用します。

remocnのStepperをベースに作成: https://remocn.dev