# Resizable: 分割パネルUI

ドラッグできるハンドルで仕切られた2つのパネルを均等に分割した状態で表示し、Panel oneとPanel twoというサンプルカードが入っています。 動画テンプレート。Claude用コードをコピーするか、Subclipで編集できます。

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

Preview video: https://subclipweb.subclip.app/motion-graphics-templates/v1/previews/motion-template-remotion-remocn-resizable.mp4?v=05db6c03b5

仕切りハンドルのある2パネルのレイアウトで、UIデモ動画向けに分割比率とハンドルの状態を設定できます。

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

明るいコンテナが左右に分かれ、「Panel one」と「Panel two」という控えめなサンプルカードが並び、その間の仕切りに小さなハンドルがあります。テンプレートはハンドルが待機状態の50/50の分割を4秒間表示します。コードでは、ホバーやクリックでハンドルが大きくなってリングが表示され、ドラッグに合わせて仕切りがスライドします。

分割比率、ハンドルの状態（待機、ホバー、押下）、方向（横または縦）に加えて、再生速度と背景も設定できます。エディターやIDEのデモ、ダッシュボードのレイアウト解説、デザインシステムの紹介、分割ビュー機能の動画に使えます。

## 活用例

- エディターとIDEのデモ
- ダッシュボードのレイアウト解説
- デザインシステムの紹介
- 分割ビュー機能の動画

## 変更できる項目

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

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

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

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