# RemotionのUIコンポーネントとフローのアニメーションテンプレート

コンボボックス、コマンドメニュー、トースト、スライダー、タブ、さらに登録・決済・設定の完全なフローなど、無料のRemotion UIアニメーションテンプレート14点。編集するか、コードを入手できます。

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

これらのRemotionテンプレートは、インターフェースの部品をアニメーションさせます。開くコンボボックス、絞り込むコマンドメニュー、クリック後にスライドインするトースト、ドラッグされるスライダーなどです。いくつかは完全なフローになっていて、カーソルが登録フォームに入力したり、決済を完了したりします。アプリを実際に録画せずに動いている様子を見せたい製品デモやSaaSのローンチ動画に役立ちます。

## コンポーネントとフロー

コンポーネントのテンプレートは、それぞれ1つの操作を再生します。Comboboxはクエリを入力して結果を選び、Command Menuはコマンドの一覧を絞り込み、Context Menuは右クリックで開き、Tabsはパネルを切り替え、Sliderは値をドラッグし、Stepperはステップを進め、Resizableは仕切りハンドルをドラッグし、Skeletonは読み込み済みのコンテンツへと切り替わり、Toastは操作の完了を知らせ、Typing Indicatorは3つのドットの脈動を見せます。Search Revealは補助線の円から検索バーを組み立てます。

フローはこれらをつなげたものです。Signup Flowはすべての項目を入力して送信し、Checkout Flowはプランを選んでカード情報を入力し、Settings Toggle Flowはスイッチを切り替え、テーマを選んで保存します。

## インターフェースを編集する

各テンプレートは、ラベル、値、タイミングをシンプルなpropsと配列で持つTSXコンポーネントなので、文言を自分の製品に合わせて変えられます。Subclipで画面録画と並べて編集するか、コードを自分のRemotionプロジェクトにコピーしてください。

## 14件のテンプレート

- [Search Reveal](https://www.subclip.app/ja/motion-graphics-templates/remotion/search-reveal) (Remotion, UI): 細い補助線の円が広がって検索バーに収まり、テキストが入力され、その背後にカラフルなグラフィックパネルが開きます。
- [Combobox](https://www.subclip.app/ja/motion-graphics-templates/remotion/combobox) (Remotion, UI): プレースホルダー付きのトリガー、開いた選択肢パネル、ハイライトされた行を備えた検索付きセレクトコンポーネントで、UIデモ動画に使えます。
- [Command Menu](https://www.subclip.app/ja/motion-graphics-templates/remotion/command-menu) (Remotion, UI): 検索欄とショートカット付きのコマンド一覧を備えたキーボード用コマンドパレットを、暗くした背景の上に開いた状態で表示します。
- [Context Menu](https://www.subclip.app/ja/motion-graphics-templates/remotion/context-menu) (Remotion, UI): 4つの操作とホバー中の行を備えた右クリックメニューのパネルで、UIデモでカーソルの位置に置いてすぐ使えます。
- [Resizable](https://www.subclip.app/ja/motion-graphics-templates/remotion/resizable) (Remotion, UI): 仕切りハンドルのある2パネルのレイアウトで、UIデモ動画向けに分割比率とハンドルの状態を設定できます。
- [Skeleton](https://www.subclip.app/ja/motion-graphics-templates/remotion/skeleton) (Remotion, UI): 丸いアバターと2行のテキストの上を光沢が流れるスケルトンのローディングカードです。
- [Slider](https://www.subclip.app/ja/motion-graphics-templates/remotion/slider) (Remotion, UI): 塗りの値とつまみの状態を設定できるすっきりしたレンジスライダーで、つまみの上に現在の値が表示されます。
- [Stepper](https://www.subclip.app/ja/motion-graphics-templates/remotion/stepper) (Remotion, UI): ラベル付きの3ステップを持つ横向きのオンボーディング用ステッパーで、アクティブなステップを設定して進捗を見せられます。
- [Tabs](https://www.subclip.app/ja/motion-graphics-templates/remotion/tabs) (Remotion, UI): ピル型または下線のインジケーターと、アクティブなタブ用の短い文章パネルを備えたタブコンポーネントです。
- [Toast](https://www.subclip.app/ja/motion-graphics-templates/remotion/toast) (Remotion, UI): アイコン、タイトル、詳細の1行を備えた小さな通知カードで、標準または成功のスタイルがあり、アプリのデモ動画に使えます。
- [Typing Indicator](https://www.subclip.app/ja/motion-graphics-templates/remotion/typing-indicator) (Remotion, UI): チャットアプリの入力中インジケーターのように、小さなドットの列が順番になめらかな波となって弾みます。
- [Signup Flow](https://www.subclip.app/ja/motion-graphics-templates/remotion/signup-flow) (Remotion, UI): shadcn風の登録カードで、カーソルが名前、メール、パスワードを入力し、ローディング状態を経て送信し、成功のトーストを受け取ります。
- [Checkout Flow](https://www.subclip.app/ja/motion-graphics-templates/remotion/checkout-flow) (Remotion, UI): 支払いサイクルの切り替え、カード入力欄、規約のチェックボックスを備えた決済カードを、カーソルが入力して支払い、最後に成功のトーストが表示されます。
- [Settings Toggle Flow](https://www.subclip.app/ja/motion-graphics-templates/remotion/settings-toggle-flow) (Remotion, UI): 2列の設定カードで、カーソルが通知をオンにし、テーマを選び、スライダーをドラッグして保存します。