# Signup Flow: 登録フォームアニメーション

カーソルが登録カードの項目を1つずつ入力し、Create accountをクリックすると、成功のトーストがスライドインします。 動画テンプレート。Claude用コードをコピーするか、Subclipで編集できます。

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

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

shadcn風の登録カードで、カーソルが名前、メール、パスワードを入力し、ローディング状態を経て送信し、成功のトーストを受け取ります。

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

「Create an account」カードに、Full Name、Email、Password、Confirmの各項目、Create accountボタン、Sign up with Googleボタン、ログインリンクが表示されています。カーソルが上から順に各項目をクリックし、「John Doe」「m@example.com」と伏せ字のパスワードが入力されます。続いてCreate accountにホバーして押すと、ボタンにスピナーが表示されて成功に変わり、「Account created」のトーストがスライドインして、やがて閉じます。約11.5秒です。

再生速度とシーン周りの背景を調整でき、ラベル、値、色はコードで編集できます。SaaSのオンボーディングのデモ、「数秒で登録」をうたう広告、ランディングページのヒーロー動画、認証機能の操作説明に使えます。

## 活用例

- SaaSのオンボーディングのデモ
- すばやい登録の広告
- ランディングページのヒーロー動画
- 認証機能の操作説明

## 変更できる項目

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

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

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

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