# Checkout Flow: 決済アニメーション

カーソルが年払いを選び、カード番号を入力し、規約のチェックボックスにチェックを入れてPayを押し、最後に成功のトーストが表示されます。 動画テンプレート。Claude用コードをコピーするか、Subclipで編集できます。

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

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

支払いサイクルの切り替え、カード入力欄、規約のチェックボックスを備えた決済カードを、カーソルが入力して支払い、最後に成功のトーストが表示されます。

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

「Upgrade your plan」カードがフェードインし、項目が1つずつぼかしから現れます。カーソルが支払いサイクルの切り替えでYearlyをクリックし、カード番号欄にフォーカスすると「4242 4242 4242 4242」が入力され、「I accept the terms and conditions」にチェックを入れます。続いて「Pay $49」を押すとローディング状態を経て成功に変わり、「Payment successful」のトーストがスライドインして、やがて閉じます。約11秒です。

再生速度とシーン周りの背景を調整でき、ラベル、値、色はコードで編集できます。SaaSの料金プランのデモ、決済サービスの製品動画、スピーディーな決済をうたう広告、プランのアップグレードの操作説明に使えます。

## 活用例

- SaaSの料金プランのデモ
- 決済サービスの製品動画
- スピーディーな決済の広告
- アップグレードの操作説明

## 変更できる項目

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

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

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

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