UI Motion Design Animation Prompt
Claude Opus 5.5 向けの詳細なプロンプト。HTML/Canvas を使用し、スプリング物理演算とビート同期トランジションを特徴とする、ループ可能な洗練された UI モーションデザイン動画を作成します。
創作結果
参考プロンプト
事例の意図をもとに編集した参考例です。自分のテーマに合わせて調整できます。作者の元投稿は出典欄をご覧ください。
“Ask for eight to twelve UI states, a monochrome or single-accent palette, and a usable track near 120 BPM. Make a 14-second, 1440×1440 loop where one shape becomes a button, loader, player, slider, toggle, tabs, graph, command palette, and toast before returning. Use Japanese interface copy with Noto Sans JP and Geist, on warm gray. Drive the changes with cursor actions and restrained closed-form springs; keep dragged values tied to the pointer. Calculate every frame from seek(t) without timers or carried state. Analyze the music with NumPy, render through Playwright with four subframes, and blend at 60 fps with ffmpeg. Review each beat and match the loop's cursor position and velocity.”
PagePopで制作するには
助手を選んで依頼を伝え、PagePopと制作を進めます。会話で修正し、完成した作品をダウンロードできます。
目的に合う助手を選ぶ
幅広い業界の専門助手を探せます。豊富な事例集からアイデアを見つけることもできます。
自然な言葉で依頼する
画像、動画、PPT、ドキュメント、Webページなど、作りたいものを伝えてください。必要に応じて参考画像や資料を追加できます。
モデルを自動で選び制作
PagePopが目的に合うモデルとツールを選び、作品を制作します。
修正してダウンロード
同じ会話の中で内容や見た目を繰り返し調整できます。納得できたらダウンロードして使えます。
自分の言葉で始めましょう
この実例を参考に自由に変更し、最適な制作方法はPagePopに任せてください。
よくある質問
この動画事例を自分の制作に活かすには？
「UI Motion Design Animation Prompt」の参考プロンプトを起点に、テーマ・スタイル・縦横比を置き換え、参考画像や関連資料を追加してください。取り入れたい構成を残し、不要な条件を削除して、結果を見ながら調整できます。
閲覧やプロンプトのコピーは無料ですか？
プロンプト集の閲覧とコピーは100%無料です。PagePopも無料で利用できます。料金とクレジットのルールは料金ページでご確認ください。
PagePopとは何ですか？何ができますか？
PagePopは対話型のAI制作プラットフォームです。自然な言葉で依頼し、画像・動画・プレゼンテーション・ドキュメント・Webページを制作できます。PagePopが適切なモデルとツールを選び、同じ会話の中で修正を続けられます。
その他の実際のプロンプト例
壮大な歴史年表ビデオのプロンプト
“Make an epic chronology of Chinese civilization with code-rendered frames assembled through ffmpeg. Let a pentatonic score provide the timing, evolving from bone flute and bronze bells to orchestral instruments and incr…”
UI モーションデザイン ワークフローガイド
“Build a 14-second UI motion piece from eight to twelve states such as a button, loading indicator, toggle, chart, and command palette. Choose commercially usable music near 120 BPM and measure its beats with NumPy. Writ…”
HTML で実現する WebGPU オーシャンシーン
“Build an ocean scene that runs in the browser as a single HTML file using WebGPU. Drive the sea surface with FFT waves, add whitecaps, and place it under a realistic sky. Include WASD movement so the viewer can explore…”