# HyperFramesのUIアニメーションテンプレート

設定のトグル、スケルトンの読み込み状態、メモの入力、ビルドコンソールなど、無料のHyperFrames UIアニメーションテンプレート4点。Subclipで編集するか、HTMLを入手できます。

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

これらのHyperFramesテンプレートは、インターフェースの小さな場面を独立したHTMLシーンとしてアニメーションさせます。オンになる設定、コンテンツへと切り替わる読み込み中のスケルトン、入力されていくメモ、実行中のビルドコンソールです。軽量でCSSで簡単にスタイルを変えられ、そのまま製品動画に組み込めます。

## このセットのテンプレート

Settings Toggleは、くっきりした状態変化とともにスイッチを切り替えます。Skeleton Revealはグレーのプレースホルダーが実際のコンテンツに変わる様子を見せます。Notes Typingはメモアプリに文章を入力し、Build consoleはビルドログをスクロールして成功の行まで進みます。

## シーンを編集する

テキストと色はSubclipで変数として公開されており、レイアウトを変えたい場合はマークアップがシンプルなHTMLとCSSなので編集できます。SaaSのデモ、開発者ツールの動画、更新履歴のクリップに使えます。

## 4件のテンプレート

- [Settings Toggle](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/settings-toggle-flow) (HyperFrames, UI): 白いカード上に 3 つのラベル付き行が表示され、それらのトグル スイッチがスライドしてオンまたはオフになる設定パネルのアニメーション。
- [Skeleton Reveal](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/skeleton-reveal) (HyperFrames, UI): きらめくスケルトンのプレースホルダーが、太字の名前と詳細行を持つカードにクロスフェードする短い読み込み状態のアニメーション。
- [Notes Typing](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/notes-typing) (HyperFrames, UI): スクリーン キーボードでタイトルと 7 行を入力する 9 分 16 秒の電話メモ アニメーション。その後、ブランドのチェックリスト カードで終わります。
- [Build console](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/build-console) (HyperFrames, UI): いくつかの段階でレンダリング コマンドを実行する暗いターミナル ウィンドウ。チェック マーク、進行状況バー、準備完了バッジが表示されます。