ヘルプモーションデザイン

モーションデザイン

注目のモーション作例を視聴してから、プロジェクトの指示、プレビュー、修正、書き出しの方法を学びます。手順のウォークスルーでは、別の練習用 Focus プロジェクトを使用します。

モーションデザイン — 注目の作例、37秒。以下の手順では、別の Focus プロジェクトを使ってワークフローを説明します。

5つの組み込み作例から選んで始める

Homeで、プロンプトの下にあるMotion designを選択します。一度に4行が表示されます。作例リスト上でスクロールすると、最下部にProduct Promoが表示されます。

連続スクロールキャプチャ。アプリには一度に4行が表示されます。

目的に合った方向性を見つける

  • Bring Ideas to Life:ストーリー、キャラクター、手作り感のある質感を表現する、20秒の切り絵風ストーリー。
  • The Future Is Already Here:ビートに合わせた編集、キネティックタイポグラフィ、クローム調の表面表現を取り入れた、20秒のテクノロジーリール。
  • Motion Designer Showreel:ポートフォリオや自己紹介向けの、15秒のモーションショーケース。
  • One-Shape UI Motion:ボタンや読み込み状態からプレーヤーやチャートまで、インターフェースが連続的に変化する14秒のアニメーション。
  • Product Promo:メリット、インターフェースのデモ、ブランドを印象づけるエンディングを盛り込んだ、架空の決済プロダクト向け15秒映像。

まずPreviewで確認し、プロンプトを調整する

サムネイルをクリックしてPreviewを開きます。Previewを閉じてから、タイトルまたはプロンプトのテキストをクリックすると、作例の指示文がコンポーザーに入力されます。送信する前に、プロダクト、コピー、タイミング、スタイルを置き換えてください。Previewを開くだけでは、自分用の新しいプロジェクトは作成されません。

始める前に

AI 接続のセットアップを一度完了してください。内容を確認しやすい小規模なプロジェクトを選びます。Focus の例では、緑のドット、タスクカード、完了チェック、最後のブランドメッセージを使用します。外部の有料メディア生成サービスではなく、ローカルのアニメーションと音声を使用します。

ステップ1 — Motion design を選択する

Home で、プロンプトの下にある制作タイプメニューを開き、Motion design(モーションデザイン)を選択します。コンポーザーの下に組み込みのモーション作例が表示されます。リストには一度に4行表示されます。リスト内をスクロールすると5つ目を表示できます。開始点が必要な場合は、5つの作例をすべて見ることができます。

Home の制作タイプメニューから Motion design を選択します。

ステップ2 — 仕上がりを説明する

長さ、アスペクト比、画面に表示するコピー、ビジュアルの方向性、シーンのタイミング、音声、最終ファイルを指定します。編集可能なソースと再生可能な MP4 の両方が必要な場合は、その両方を依頼してください。

Focus という10秒のプロダクトモーション映像を、1920×1080、30fps で作成してください。ペーパーホワイト #fafafa、インク #262626、控えめなグリーン #63fe13 のアクセントを使用してください。1つの緑のドットを、Collect タスクカード、Done チェック、最後の Focus マークまで連続して動かしてください。0~2秒に Focus、2~5秒に Collect、5~8秒に Done、8~10秒に「Make room for what matters.」を表示してください。穏やかなオリジナル音楽と、いくつかの控えめな効果音を追加し、ナレーションや外部の有料メディアサービスは使用しないでください。このプロジェクト内に、編集可能なソースと実際の MP4 を作成してください。
Home のコンポーザーに入力された英語の指示文の下書き。送信前に制作タイプを確認します。

ステップ3 — 制作とレンダリングを待つ

エージェントはソースファイルとアセットを作成してから、動画をレンダリングします。プランやアニメーションするソースのプレビューが表示されても、MP4 が存在する証明にはなりません。動画ファイルが作成され、レンダリングが完了状態になるまで待ちます。

アプリが実際の動画をレンダリングしている画面。

ステップ4 — 動画を確認する

MP4 アーティファクトを開いて再生します。コピー、動きの連続性、トランジション、最後の静止時間、音楽、効果音を確認してください。最初から最後まで視聴するだけでなく、タイムライン上をスクラブして確認します。作業を続ける必要がある場合は、編集可能なソースも別途確認してください。

元のアプリのコントロールと操作位置。プレーヤー内のアートワークには、説明用として注目の映像を合成しています。
注目の映像の18秒時点にある、青い手描き風のシーン。

ステップ5 — 具体的な修正を1つ依頼する

同じプロジェクトで作業を続けます。変更する箇所と一貫性を維持する箇所を明確にしてから、新しいレンダリングを依頼します。実際のウォークスルーでは、2つ目のバージョンで最後のメッセージだけを変更します。新しい MP4 を開き、修正後の文言が表示されていることを確認してください。ソースを更新しても、すでにレンダリング済みの動画には遡って反映されません。

最後の文言を「Make room for what matters.」から「Focus on what matters.」に変更してください。他のシーン、10秒の長さ、色、音声はそのまま維持してください。focus-v2.mp4 をレンダリングし、比較用に元の focus.mp4 も残してください。
元のアプリのコントロールと操作位置。プレーヤー内のアートワークには、説明用として注目の映像を合成しています。

ステップ6 — 確認済みのバージョンをダウンロードする

納品する MP4 を開き、右上のツールバーにある Download をクリックします。システムの保存ウィンドウで保存先とファイル名を選択します。ローカルファイルが存在し、再生でき、最新の修正が含まれていることを確認してください。保存ウィンドウで処理を完了できない場合は、プロジェクトを保持し、サポートに問い合わせる際にウィンドウのエラー状態を含めてください。Download コントロールをクリックしただけでは、保存は完了していません。

元のアプリのコントロールと操作位置。プレーヤー内のアートワークには、説明用として注目の映像を合成しています。

編集可能なプロジェクトを保持する

この例のエントリーファイルは motion-source/focus/index.html です。ソースを移動するときは、その GSAP ファイル、フォント、音声も一緒に保持してください。MP4 は再生用の納品物であり、編集可能なソースプロジェクトは含まれていません。

元のアプリのコントロールと操作位置。プレーヤー内のアートワークには、説明用として注目の映像を合成しています。

わかりやすい指示文にする

画面に表示するコピーは、エージェントに推測させるのではなく明示してください。重要な展開には時間範囲を使い、出力が映像なのかインタラクティブアニメーションなのかを指定します。音楽とナレーションについても明記してください。修正時には、対象のシーンまたは時間範囲を示し、変更せずに維持する要素を特定します。