無料
Solenne · 16:9
このSkillで書き出した映像
3Dスマホ・ホーム画面 v1.0.0
やわらかなスタジオで3Dのスマホが回転。リキッドグラスのホーム画面、動く通知、そしてあなたの Web アプリを映します。
まだ評価はありません 0 ダウンロード
- フォーマット
- 動画 · 16:9
- 尺
- 0:15
15秒の3Dデバイス B ロール向けの無料 HyperFrames ブロック。シェーダーの壁紙の下、デスクの上で3Dのスマホモデルが回転します。リキッドグラスのホーム画面にアプリアイコン、ウィジェット、スライドインする通知が表示され、続いてヒーローの一文とカードが並ぶ Web ページが開きます。画面の中身（アイコン、ラベル、通知、ページ）はすべて編集できる HTML で、スマホとノートパソコンは3Dモデルです。
2026年11月4日 更新
得られるもの
- 3Dのスマホが映る15秒・1920×1080 の MP4
- リキッドグラスのホーム画面、通知、あなたのページ
- 画面の隅々まで編集できる HTML
向いている用途
- アプリのローンチフィルムや B ロール
- ランディングページのヒーロー動画
- 投資家向けや基調講演のデモ
向いていない用途
- アプリの実際の画面録画を見せたい場合
- 縦型専用のフォーマット
このSkillについて
依頼の例
/ios26-liquid-glass Solenne の3Dスマホ・ホーム画面を作って。イブニングシーンとエネルギーレポートの通知、それに Solenne のページ「Your home, on cue」。
デバイスの B ロールがあれば、どんなアプリもリリース済みの製品に見えます。3Dスマホ・ホーム画面は、最新のリキッドグラスのホーム画面を載せた本格的な3Dのスマホをレンダーします。スタジオライトの下で通知がポップアップし、あなたの Web アプリが開きます。撮影も3Dアーティストも不要です。
使い方
- 依頼：スマホに表示したい通知、アプリ名、ページの内容をエージェントに伝えます。
- 入力：コピーと色をブロックの変数に書き込みます。文字数はレイアウトの想定に近い長さに保ちます。
- レンダー：
npx hyperframes renderで下書きをレンダーし、いくつかのフレームを確認してから最終版の MP4 を書き出します。 - 再利用：変数は小さな JSON ファイル1つにまとまっているので、次のバージョンもレンダー1回で済みます。
コツ
- デフォルトのアプリアイコンと名前は、自分のものかニュートラルなものに差し替えましょう。サンプルでもそうしています。
- 通知はそれぞれ短い1行に収めます。
- ページにはプロダクトの実際の色を使いましょう。
- 変数はありません。エージェントが SKILL.md に沿って、HTML 内のテキストを直接編集します。
オープンソース
これは HyperFrames のレジストリブロックです。HeyGen と HyperFrames のコントリビューター（heygen-com/hyperframes）が作り、Apache License 2.0 で公開しています。ダウンロードはアセット込みのブロックに Reelity が書いた SKILL.md を添えたもので、エージェントが中身の埋め方とレンダー方法を把握できます。HyperFrames 本体は npm から実行されます。
始める前に必要なもの
- 用意するもの
- 画面に表示したい通知、アプリ名、ページのテキスト、ブランドカラー。
- 依存関係
- Node.js 22 以降 — 必須 · FFmpeg — 必須
- 外部コスト
- ありません。HyperFrames は無料のオープンソースで、手元のマシンでレンダーします。
- 最終テスト
- v1.0.0 —
ユーザーレビュー
まだレビューはありません。インストールして最初に評価しましょう。
よくある質問
実在のアプリアイコンが入っていますか？
オリジナルにはプレースホルダーとして有名アプリのアイコンが入っています。自分のものかニュートラルなものに差し替えてください。サンプルでは生成したニュートラルなアイコンを使っています。
画面にスクリーンショットを表示できますか？
はい。画面は HTML なので、ページの代わりにアプリの画像を表示できます。
なぜ無料なのですか？
HeyGen と HyperFrames のコントリビューターによるオープンソースの HyperFrames ブロックです。手を加えずに掲載し、エージェントが使えるよう SKILL.md を添え、自社ブランド Solenne で作ったサンプルを付けています。
