Adobe「After Effect」動画制作

更新日：2024年2月9日
公開日：2024年1月18日

最近のWEBサイトは動きがあって、わかりやすく、UIデザインもしっかりしているのでストレスフリーで情報を得ることができます。

さて、アピスの公式サイトはワードプレスで制作されていますが、古く、メンテナンスが行き届いていないため、色褪せたサイトとなっていたため、リデザインの必要があります。

TOPページのイメージを変えるために、オリジナルの動画を作成しました。（SP用）

再生時間を一桁間違えてしまい二度手間になりましたが、約8時間でPC用とSP用ができました。

（動きにこだわると何時間もかけてしまいたくなります汗）

手順は次のとおりです。

illustratorでデザインを作る
上記でデザインしたデータをpngで保存する
After Effectプロジェクトの開始:
- After Effectsを開き、「新規プロジェクト」を選択。
- 「新規コンポジション」を作成し、必要な設定（フレームレート、解像度、持続時間など）を行う。
素材のインポート:
- 「ファイル」メニューから「インポート」を選び、動画、画像、オーディオファイルなど必要な素材をプロジェクトに追加。
タイムラインへの配置:
- インポートした素材をタイムラインにドラッグ＆ドロップして配置。
- 素材の順序や持続時間を調整。
基本的な編集:
- カット、トリミング、スプリット（分割）などの編集を行う。
- 「トランスフォーム」オプションを使用して、スケール、位置、回転などを調整。
エフェクトとアニメーション:
- 「エフェクト＆プリセット」パネルからエフェクトを選択し、素材に適用。
- キーフレームを使用してアニメーションを作成。
テキストとタイトルの追加:
- 「テキストツール」を使用してテキストを追加。
- テキストのフォント、色、サイズを調整。
オーディオの編集:
- タイムラインでオーディオトラックを調整。
- 必要に応じて、オーディオエフェクトを適用。
プレビューと調整:
- 「プレビュー」パネルで作成した動画を確認。
- 必要に応じて、エフェクトやタイミングの微調整を行う。
動画のレンダリング:
- 「コンポジション」メニューから「レンダーキューに追加」を選択。
- 出力設定を選び、ファイル形式や品質を設定。
- 「レンダー」ボタンをクリックして動画を出力。
完成した動画の保存:
- レンダリングが完了したら、完成した動画ファイルを保存。