UI モーションデザイン ワークフローガイド
Claude Opus 5.5 を使用した 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. Write one 1440×1440 HTML scene whose styles are calculated from seek(t), using closed-form spring motion rather than timers or autonomous CSS transitions. Place interface sound effects according to their measured peaks. Preview a frame at each beat to correct the timing, then render four subframes per output frame with Playwright and blend them in ffmpeg for a 60 fps film.”
PagePopで制作するには
助手を選んで依頼を伝え、PagePopと制作を進めます。会話で修正し、完成した作品をダウンロードできます。
目的に合う助手を選ぶ
幅広い業界の専門助手を探せます。豊富な事例集からアイデアを見つけることもできます。
自然な言葉で依頼する
画像、動画、PPT、ドキュメント、Webページなど、作りたいものを伝えてください。必要に応じて参考画像や資料を追加できます。
モデルを自動で選び制作
PagePopが目的に合うモデルとツールを選び、作品を制作します。
修正してダウンロード
同じ会話の中で内容や見た目を繰り返し調整できます。納得できたらダウンロードして使えます。
自分の言葉で始めましょう
この実例を参考に自由に変更し、最適な制作方法はPagePopに任せてください。
よくある質問
この動画事例を自分の制作に活かすには？
「UI モーションデザイン ワークフローガイド」の参考プロンプトを起点に、テーマ・スタイル・縦横比を置き換え、参考画像や関連資料を追加してください。取り入れたい構成を残し、不要な条件を削除して、結果を見ながら調整できます。
閲覧やプロンプトのコピーは無料ですか？
プロンプト集の閲覧とコピーは100%無料です。PagePopも無料で利用できます。料金とクレジットのルールは料金ページでご確認ください。
PagePopとは何ですか？何ができますか？
PagePopは対話型のAI制作プラットフォームです。自然な言葉で依頼し、画像・動画・プレゼンテーション・ドキュメント・Webページを制作できます。PagePopが適切なモデルとツールを選び、同じ会話の中で修正を続けられます。
その他の実際のプロンプト例
UI Motion Design Animation Prompt
“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,…”
キネティック・タイポグラフィ スピーチフィルム
“Stage Build the Floor as a 20-second square typographic film in a self-contained SVG or Canvas HTML file. Use the supplied original miniature speech, with no attribution to a real person, and make its words physically c…”
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…”