フレームベースのアニメーションの作成

最終更新日 : 2025年12月4日

Adobe Photoshop では、レイヤーの位置、不透明度またはスタイルをフレームごとに異なる設定にすることで、フレーム単位のアニメーションを作成できます。

Photoshop のフレームベースのアニメーションでは、レイヤーの様々な設定状態を表現するフレームをシーケンスにすることで、シンプルなアニメーションコンテンツを作成できます。この手法は、web コンテンツ、ソーシャルメディア投稿、シンプルなモーショングラフィックス用のアニメーション GIF の作成に最適です。

フレームアニメーションは、フレームのシーケンスを順番に表示することで、動きの錯覚を生み出します。タイムラインアニメーションではキーフレームと自動補間を使用するのに対し、フレームアニメーションでは個々のフレームを正確にコントロールできます。このワークフローは、複雑で流動的な動きよりも、はっきりとした状態の変化を持つシンプルなアニメーションに最適です。

ウィンドウ／タイムラインとウィンドウ／レイヤーを選択して、タイムラインパネルとレイヤーパネルを開きます。

タイムラインパネルの中央にある下向き矢印アイコンを選択し、「フレームアニメーションを作成」を選択します。

新しいレイヤーを追加するか、背景レイヤーを通常のレイヤーに変換します。

アニメーションにコンテンツを追加します。個別に動くオブジェクトがアニメーションに複数含まれている場合、またはカラーやコンテンツを異なるフレームで変更する場合は、該当するオブジェクトを別個のレイヤーに作成します。

タイムラインパネル下部の選択したフレームを複製アイコンを選択して、新しいフレームを追加します。

タイムラインパネルで新しいフレームを選択し、レイヤーパネルでこのフレームのレイヤーを変更します。異なるレイヤーの表示のオン/オフを切り替えたり、レイヤーの位置を変更したり、フェード効果を作成するために不透明度を調整したり、レイヤースタイルを変更したりできます。

必要に応じてフレームを追加し、レイヤーを編集し続けます。アニメーションに必要な数のフレームを追加します。フレーム数は、システムの利用可能なメモリによってのみ制限されます。

各フレームの下に表示される遅延時間を選択し、ドロップダウンメニューから時間を選択して、各フレームの時間を設定します。

タイムラインパネル下部のループオプションを選択ドロップダウンメニューから、「一度」、「無限」または「その他」を選択して、ループオプションを設定します。

タイムラインパネルで再生アイコンを選択して、アニメーションをプレビューします。

アニメーションへのフレームの追加

学ぶ

アプリ内のステップバイステップのビデオチュートリアルと実践的なガイダンスで学習できます。

コミュニティ

ディスカッションに参加し、回答を見つけ、専門家から学び、知識を共有することができます。

Adobe Home

お気に入りの Creative Cloud アプリ、サービス、ファイル管理などにアクセスできます。