# Tabs: タブUI

Account、Password、Settingsを並べたピル型のタブウィジェットで、Accountタブがアクティブになり、そのパネルの文章が表示されています。 動画テンプレート。Claude用コードをコピーするか、Subclipで編集できます。

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

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

ピル型または下線のインジケーターと、アクティブなタブ用の短い文章パネルを備えたタブコンポーネントです。

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

タブウィジェットの控えめなピル型のトラックにAccount、Password、Settingsが並び、Accountがアクティブで、その下にパネルの文章「Make changes to your account here.」が表示されています。テンプレートはこの状態を4秒間保ちます。コードでは、アクティブなタブが切り替わると、インジケーターが新しいタブへスライドし、ラベルの色が変わり、パネルの文章がクロスフェードします。

アクティブなタブを設定し、ピル型と下線のスタイルを切り替えられるほか、再生速度と背景も変更できます。設定画面やアカウント画面のデモ、SaaS製品のツアー、機能の比較、デザインシステムの紹介に使えます。

## 活用例

- 設定画面のデモ
- SaaS製品のツアー
- 機能の比較
- デザインシステムの紹介

## 変更できる項目

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

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

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

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