# Settings Toggle Flow: 設定画面アニメーション

カーソルがスイッチを切り替え、セレクトからテーマを選び、音量スライダーをドラッグして保存をクリックし、最後に保存完了のトーストが表示されます。 動画テンプレート。Claude用コードをコピーするか、Subclipで編集できます。

Canonical URL: https://www.subclip.app/ja/motion-graphics-templates/remotion/settings-toggle-flow

Preview video: https://subclipweb.subclip.app/motion-graphics-templates/v1/previews/motion-template-remotion-remocn-settings-toggle-flow.mp4?v=a786adea42

2列の設定カードで、カーソルが通知をオンにし、テーマを選び、スライダーをドラッグして保存します。

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

「Notification settings」カードがフェードインし、コントロールが1つずつぼかしから現れます。カーソルが通知のスイッチをオンにし、テーマのセレクトを開いて最後の選択肢のDarkを選び、続いて音量スライダーをドラッグして値を変えます。右下の「Save settings」をクリックするとボタンにチェックが表示され、「Settings saved」のトーストが現れて、やがて閉じます。約10秒です。

再生速度とシーン周りの背景を調整でき、ラベル、選択肢、色はコードで編集できます。SaaS製品のツアー、環境設定機能のデモ、アプリのチュートリアル、デザインシステムの紹介に使えます。

## 活用例

- SaaS製品のツアー
- 環境設定機能のデモ
- アプリのチュートリアル
- デザインシステムの紹介

## 変更できる項目

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

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

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

remocnのSettings Toggle Flowをベースに作成: https://remocn.dev