1限目
学科 WEB動画基礎①
Adobe After Effectsについて
2限目
学科 WEB動画基礎①
ソフトの役割や特徴について
3限目
学科 WEB動画基礎①
動画制作のポイント
4限目
学科 WEB動画基礎①
課題制作
5限目
学科 WEB動画基礎①
課題制作
本日のテーマ
動画制作ツール「Adobe After Effects」についてです
Adobe After Effectsについて
アドビが販売している映像のデジタル合成やモーション・グラフィックス、タイトル制作などを目的としたソフトウェアであり、この分野では代表的な存在である。「A.E.」「AE」「Ae」（えーいー）と略されることもある。After Effectsは主に映画やテレビ番組の映像加工、CM制作、ゲーム、アニメ、Webなどのコンテンツ制作に広く利用されている。
◆15秒動画作成のポイント！
・考え方はバナーと同じ動く広告
・企画意図の理解を見せるのが重要
・動画をSNSへプラットフォームの主流
プロフェッショナル用アプリだけでなく、スマートフォンアプリでも簡単に投稿出
来るこの時代に、お仕事（業務）として需要が高まるのは、ショート動画です。
PCを使ったお仕事で今後誰もが必要とされる技術かもしれません。
素材参考サイト
15秒の動画を作りましょう！【After Effects】
01.コンポジション設定とファイルの読み込み
コンポジションとは？
コンポジション（略してコンポ）は、After Effectsにおける作業スペースです。
動画や画像、テキストなどの素材（フッテージ）を配置し、エフェクトやアニメーションを加えて映像を構成します。
コンポジションの設定は、最終的な映像の形式（解像度、フレームレートなど）を決定します。
■コンポジションの作成方法
After Effectsを起動し、「新規プロジェクト」を選択します。
「新規コンポジション」をクリックします。 (または、メニューバーから「コンポジション」>「新規コンポジション」を選択)
「コンポジション設定」ダイアログボックスが表示されます。
コンポジション設定ダイアログボックスの主な項目
【コンポジション名】
コンポジションの名前を入力します。プロジェクト内で複数のコンポジションを作成する場合、分かりやすい名前を付けることで管理が容易になります。
【プリセット】
あらかじめ用意された設定（プリセット）を選択できます。よく使われるプリセットには以下のようなものがあります。
HDTV 1080 29.97: フルHD（1920×1080ピクセル）、29.97fps（フレーム/秒）。テレビ放送やオンライン動画でよく使われます。
HDTV 720 29.97: HD（1280×720ピクセル）、29.97fps。フルHDよりもファイルサイズを抑えたい場合に適しています。
NTSC DV Widescreen: DVDなどのSD解像度（720×480ピクセル）、29.97fps。
PAL DV Widescreen: DVDなどのSD解像度（720×576ピクセル）、25fps。
【幅と高さ】
コンポジションの解像度をピクセル単位で指定します。プリセットを選択すると自動的に値が入力されますが、必要に応じて変更できます。
【ピクセル縦横比】
ピクセルの縦横比を指定します。通常は「正方形ピクセル」を選択します。
【フレームレート】
1秒間に表示するフレーム数（fps）を指定します。
24fps: 映画などでよく使われます。
29.97fps: テレビ放送やオンライン動画でよく使われます。
30fps: Web動画などでよく使われます。
60fps: スムーズな動きを表現したい場合や、スローモーションを作成する場合に適しています。
【デュレーション】
コンポジションの長さを指定します。時間、分、秒、フレームで指定できます。
【背景色】
コンポジションの背景色を指定します。
コンポジション設定の変更方法
作成したコンポジションの設定は、後から変更することもできます。以下のいずれかの方法で「コンポジション設定」ダイアログボックスを開きます。
プロジェクトパネルから: 変更したいコンポジションを右クリックし、「コンポジション設定」を選択します。
タイムラインパネルから: タイムラインパネルの右上にあるメニューアイコンをクリックし、「コンポジション設定」を選択します。
メニューバーから: メニューバーの「コンポジション」>「コンポジション設定」を選択します。
■よく使うプリセットと設定
【YouTube向け】
プリセット: HDTV 1080 29.97 または HDTV 1080 30
幅: 1920
高さ: 1080
フレームレート: 29.97fps または 30fps
【Instagram向け（正方形動画）】
幅: 1080
高さ: 1080
フレームレート: 30fps
Instagramストーリーズ/縦型動画:
幅: 1080
高さ: 1920
フレームレート: 30fps
■設定のポイント
最終出力形式を考慮する: 最終的にどのような形式で出力するのかを考えて設定しましょう。例えば、YouTubeにアップ
ロードする場合は、YouTube推奨の設定に合わせることで、最適な画質でアップロードできます。
フレームレートは素材に合わせる: 素材のフレームレートと異なるフレームレートでコンポジションを作成すると、動きが
カクカクしたり、逆に滑らかになりすぎたりする場合があります。
デュレーションは余裕を持って設定する: 編集途中で尺が足りなくなることを避けるため、ある程度余裕を持ってデュレー
ションを設定することをおすすめします。
※15秒の場合「デュレーション」の項目で、時間を[0:00:15:00]と設定します。
読み込めるファイル形式
※フッテージ・ファイル（素材）
After Effectsは、映像、音声、画像など、非常に多くのファイル形式を読み込むことができます。
適切に素材を準備することで、After Effectsでの作業をスムーズに進めることができます。
ここでは、After Effectsが読み込める主なファイル形式と、読み込み時の注意点について詳しく解説します。
■主なファイル形式
After Effectsは、以下の種類のファイルを読み込むことができます。
【映像ファイル】
QuickTime (.mov): 幅広く使われる形式で、様々なコーデックに対応しています。
AVI (.avi): Windowsで一般的な形式ですが、コーデックによっては読み込めない場合があります。
MP4 (.mp4): Web動画でよく使われる形式で、H.264コーデックなどが一般的です。
MPEG (.mpg, .mpeg, .mpe, .m2v, .m2p): DVDなどで使われる形式です。
MXF (.mxf): 放送業界などで使われる形式です。
FLV (.flv): Flash Video形式です。
3GP (.3gp, .3g2): 携帯電話などで使われる形式です。
その他: WMV (.wmv), WebM (.webm), RED (.r3d), ARRI (.ari) など、様々な形式に対応しています。
【音声ファイル】
WAV (.wav): 非圧縮の音声形式で、高音質です。
AIFF (.aif, .aiff): Appleが開発した音声形式です。
MP3 (.mp3): 圧縮された音声形式で、ファイルサイズが小さいです。
AAC (.aac, .m4a): MP3よりも高音質で、ファイルサイズも小さいです。
【画像ファイル】
JPEG (.jpg, .jpeg): 圧縮された画像形式で、Web画像などでよく使われます。
PNG (.png): 可逆圧縮の画像形式で、透過情報を持つことができます。
TIFF (.tif, .tiff): 非圧縮または可逆圧縮の画像形式で、高画質です。
PSD (.psd): Photoshopのファイル形式で、レイヤー情報などを保持しています。
AI (.ai): Illustratorのファイル形式で、ベクターデータなどを保持しています。
EPS (.eps): ベクター画像形式です。
その他: BMP (.bmp), GIF (.gif), OpenEXR (.exr), HDR (.hdr) など、様々な形式に対応しています。
【その他のファイル】
After Effectsプロジェクト (.aep, .aepx): After Effectsのプロジェクトファイルを読み込むことができます。
Premiere Proプロジェクト (.prproj): Premiere Proのプロジェクトファイルを読み込むことができます（Dynamic Linkを使用）。
Cinema 4Dファイル (.c4d): Cinema 4Dのファイルを読み込むことができます。
XML (.xml): Final Cut Proなどの編集ソフトから出力されたXMLファイルを読み込むことで、タイムライン情報をAfter Effectsに持ち込むことができます。
OBJ (.obj): 3Dモデルファイル形式。
02.アニメーションについて
・キーフレームについて
キーフレームとは
キーフレームとは、タイムライン上の特定の時点におけるプロパティの値を記録したものです。
例えば、あるレイヤーの位置をアニメーションさせたい場合、開始位置と終了位置にキーフレームを作成し、それぞれの位置情報を記録します。
After Effectsは、これらのキーフレーム間の値を自動的に補間し、滑らかな移動を表現します。
■キーフレームの追加方法
キーフレームを追加する方法はいくつかあります。
ストップウォッチアイコンをクリック: アニメーションさせたいプロパティ（例えば「位置」）の左側にあるストップウォッチアイコンをクリックします。これにより、そのプロパティ
のアニメーションが有効になり、現在の時間インジケーターの位置に最初のキーフレームが作成されます。
プロパティ値を変更: ストップウォッチアイコンがオンになっている状態で、時間インジケーターを別の時間に移動し、プロパティの値を変更すると、自動的に新しいキーフレームが作
成されます。
メニューから追加: メニューバーの「アニメーション」>「[プロパティ名]キーフレームを追加」を選択します。例えば、「アニメーション」>「位置キーフレームを追加」を選択しま
す。
■キーフレームの操作
キーフレームの選択: タイムライン上でキーフレームをクリックすると選択できます。複数のキーフレームを同時に選択するには、Shiftキーを押しながらクリックするか、ドラッグで
囲みます。
キーフレームの移動: 選択したキーフレームをドラッグすることで、時間軸上で移動できます。
キーフレームの削除: 選択したキーフレームをDeleteキーまたはBackspaceキーで削除できます。
キーフレームのコピー＆ペースト: 選択したキーフレームをCtrl+C（Macの場合はCommand+C）でコピーし、別の時間に時間インジケーターを移動してCtrl+V（Macの場合は
Command+V）でペーストできます。
キーフレームの反転ペースト: コピーしたキーフレームを反転させてペーストすることができます。例えば、右から左への移動アニメーションをコピーし、反転ペーストすることで、左
から右への移動アニメーションを作成できます。メニューバーの「編集」>「反転したキーフレームをペースト」を選択します（ショートカットキーはCtrl+Shift+Vまたは
Command+Shift+V）。
■キーフレームの種類と補間方法
After Effectsでは、キーフレーム間の補間方法をいくつか選択できます。これにより、アニメーションの動きの質感を調整できます。
線形補間（Linear Interpolation）: キーフレーム間を直線で補間します。一定の速度で変化する動きになります。
イージーイーズ（Ease In/Ease Out）: キーフレームの前後で速度が緩やかに変化します。自然な加速・減速を表現できます。
イーズイン（Ease In）: キーフレームの直前で速度が緩やかに変化します。
イーズアウト（Ease Out）: キーフレームの直後で速度が緩やかに変化します。
ベジェ補間（Bezier Interpolation）: キーフレームにハンドルが表示され、曲線を調整することでより複雑な補間が可能です。
補間方法を変更するには、キーフレームを選択し、右クリックして「キーフレーム補助」から目的の補間方法を選択するか、グラフエディターで調整します。
■グラフエディター
グラフエディターを使用すると、キーフレーム間の補間を視覚的に調整できます。
速度グラフ: 時間経過に伴う速度の変化をグラフで表示します。グラフの傾きが急なほど速度が速く、緩やかなほど速度が遅いです。
値グラフ: 時間経過に伴うプロパティの値の変化をグラフで表示します。
グラフエディターでキーフレームのハンドルを操作することで、より細かくアニメーションの動きを調整できます。
■キーフレームアニメーションの例
位置のアニメーション: オブジェクトを画面の端から端へ移動させる。
スケールのアニメーション: オブジェクトを拡大・縮小させる。
回転のアニメーション: オブジェクトを回転させる。
不透明度のアニメーション: オブジェクトをフェードイン・フェードアウトさせる。
■キーフレームを使用する際のヒント
キーフレームを打ちすぎない: 必要最小限のキーフレームでアニメーションを作成することで、編集作業が楽になります。
イージングを活用する: イージングを使用することで、より自然な動きを表現できます。
グラフエディターで微調整する: グラフエディターを使用することで、より複雑な動きを表現できます。
プレビューを繰り返す: アニメーションを作成したら、プレビューを繰り返して動きを確認し、必要に応じて修正しましょう。
03.エフェクトについて
■エフェクトの種類
After Effectsには、大きく分けて以下のような種類のエフェクトがあります。
カラー補正: 色相、彩度、明度、コントラストなどを調整し、映像の色味を補正・変更します。（例：トーンカーブ、レベル補正、色相/彩度）
ディストーション: 映像を歪ませたり、変形させたりします。（例：波形ワープ、タービュレントディスプレイス、ベンド）
ブラー＆シャープ: 映像をぼかしたり、逆にシャープにしたりします。（例：ガウスブラー、シャープ、方向ブラー）
ノイズ＆グレイン: 映像にノイズや粒子状の質感を加えます。（例：ノイズを加える、グレインを追加）
スタイライズ: 映像に独特なスタイルや効果を加えます。（例：輪郭抽出、ポスタリゼーション、ソーラリゼーション）
シミュレーション: パーティクル（粒子）や物理現象をシミュレートします。（例：パーティクルワールド、CC Particle Systems II）
トランジション: 映像と映像の切り替え効果を作成します。（例：リニアワイプ、クロスディゾルブ）
ユーティリティ: その他の便利な機能を提供するエフェクトです。（例：クロップ、塗りつぶし）
3Dチャンネル: 3D関連の処理を行うエフェクトです。（例：3Dメガネ、コンポジット）
キーイング: 特定の色を抜き、背景を透明にするエフェクトです。（例：キーイング、カラーキー）
マット: マスク作成やマット合成に使用するエフェクトです。（例：マット生成、シンプルチョーカー）
オーディオ: 音声処理を行うエフェクトです。（例：イコライザー、リバーブ）
プラグインエフェクト: サードパーティ製のプラグインを導入することで、標準エフェクト以外の効果を追加できます。
エフェクトの使い方
レイヤーを選択: エフェクトを適用したいレイヤーをタイムラインパネルで選択します。
エフェクトの適用:
エフェクト＆プリセットパネルから: パネル内でエフェクト名を検索し、レイヤーにドラッグ＆ドロップします。
メニューバーから: メニューバーの「エフェクト」から目的のエフェクトを選択します。
エフェクトコントロールパネルで調整: エフェクトを適用すると、エフェクトコントロールパネルにパラメータが表示されるので、値を調整して効果をカスタマイズします。
エフェクトの操作
エフェクトのオン/オフ: エフェクトコントロールパネルで、エフェクト名の左にある目のアイコンをクリックすると、エフェクトのオン/オフを切り替えられます。
エフェクトの削除: エフェクトコントロールパネルで、削除したいエフェクトを選択し、DeleteキーまたはBackspaceキーを押します。
エフェクトのコピー＆ペースト: エフェクトコントロールパネルで、エフェクトを選択し、Ctrl+C（Macの場合はCommand+C）でコピーし、別のレイヤーにCtrl+V（Macの場合は
Command+V）でペーストできます。
エフェクトの順序: エフェクトコントロールパネルで、エフェクトをドラッグ＆ドロップすることで、適用順序を変更できます。エフェクトの順序によって結果が変わることがあります。
キーフレームとエクスプレッション
キーフレーム: エフェクトのパラメータにキーフレームを打つことで、時間経過とともに変化する効果を作成できます。
エクスプレッション: JavaScriptベースのスクリプトを使用して、エフェクトのパラメータを動的に制御できます。
エフェクトの活用例
色調補正: 映像の色味を調整し、雰囲気を変える。
特殊効果: SF映画のような光線や爆発などの効果を作成する。
モーショングラフィックス: テキストや図形にアニメーションとエフェクトを組み合わせて、動きのあるグラフィックを作成する。
映像の修復: ノイズ除去や手ブレ補正など、映像の品質を向上させる。
エフェクトを探す方法
エフェクト＆プリセットパネル: エフェクト名の一部を入力すると、候補が表示されます。
オンラインリソース: Adobeの公式ウェブサイトやチュートリアルサイト、YouTubeなどで、様々なエフェクトの使い方や応用例が紹介されています。
04.レイヤーについて
・文字
レイヤー > 新規 > 文字
・シェイプ
レイヤー > 新規 > シェイプ
・マスク
レイヤー > 新規 > 平面 ※そこから図形ツールの描画
05.書き出しについて
After Effectsで作成した動画を書き出す方法はいくつかあります。
ここでは、初心者の方にも分かりやすいように、基本的な書き出し方法から、MP4出力、透過動画の書き出しまで、詳しく解説します。
■書き出しの基本：レンダーキューを使う方法
After Effects単体で書き出せる形式は、主にMOVとAVIです。高画質で保存したい場合や、他の編集ソフトで編集する場合に適しています。
【コンポジションを選択】
書き出したいコンポジションが選択されている状態にします。
【レンダーキューに追加】
メニューバーから「コンポジション」>「レンダーキューに追加」を選択します。
または、タイムラインパネルの下部にある「レンダーキュー」タブをクリックします。
【レンダー設定】
「レンダー設定」をクリックすると、画質や解像度などを設定するウィンドウが開きます。
「プリセット」から適切な設定を選択するか、個別に設定することもできます。
「最高画質」：最も高画質で出力しますが、ファイルサイズが大きくなります。
「ドラフト」：画質は落ちますが、高速にレンダリングできます。プレビューなどに使用します。
必要に応じて「フレームレート」「解像度」「フィールドレンダリング」などを調整します。
【出力モジュール】
「出力モジュール」をクリックすると、出力形式やコーデックなどを設定するウィンドウが開きます。
「形式」から出力形式を選択します。（例：QuickTime、AVI）
「ビデオ出力」の「形式オプション」をクリックすると、コーデックを選択できます。
QuickTimeの場合、「Apple ProRes」は高画質で編集に適したコーデックです。
AVIの場合、「Uncompressed」は非圧縮で最高画質ですが、ファイルサイズが非常に大きくなります。
【出力先】
「出力先」をクリックして、保存場所とファイル名を指定します。
【レンダリング】
「レンダリング」ボタンをクリックすると、書き出しが開始されます。
MP4で書き出す方法：Adobe Media Encoderを使う方法
After Effects単体ではMP4で書き出すことはできませんが、Adobe Media Encoderと連携することでMP4出力が可能です。
Media EncoderはAfter Effectsと同時にインストールされることが多いです。
コンポジションを選択: 書き出したいコンポジションが選択されている状態にします。
【Media Encoderキューに追加 】
メニューバーから「ファイル」>「書き出し」>「Adobe Media Encoderキューに追加」を選択します。
Media Encoderが起動: Media Encoderが自動的に起動し、コンポジションがキューに追加されます。
【出力形式を設定】
「形式」から「H.264」を選択します。これがMP4形式です。
「プリセット」から適切なプリセットを選択するか、個別に設定することもできます。
「YouTube 1080p HD」や「H.264 – 高ビットレート」などがよく使われます。
「出力ファイル」をクリックして、保存場所とファイル名を指定します。
【エンコード開始】
右上の緑色の再生ボタンをクリックすると、エンコードが開始されます。
透過動画（背景が透明な動画）を書き出す方法
背景が透明な動画を書き出すには、アルファチャンネルを含んだ形式で書き出す必要があります。
コンポジションの背景を透明にする: コンポジション設定で背景色を透明にします。（背景が透明になっていることを確認）
【出力モジュールを設定】
レンダーキューまたはMedia Encoderで出力モジュールを設定します。
QuickTime形式で書き出す場合は、「ビデオ出力」の「チャンネル」を「RGB + アルファ」に設定します。
PNGシーケンスで書き出す場合は、各PNG画像がアルファチャンネルを持ちます。
書き出し: 通常通り書き出します。
■書き出し時の注意点
ファイルサイズ: 高画質で書き出すほどファイルサイズが大きくなります。用途に合わせて適切な設定を選択しましょう。
レンダリング時間: 高画質、高解像度、複雑なエフェクトを使用している場合は、レンダリングに時間がかかることがあります。
コーデック: 再生環境に合わせて適切なコーデックを選択しましょう。H.264は汎用性が高く、多くの環境で再生できます。
プレビュー: 書き出す前に必ずプレビューを行い、問題がないか確認しましょう。
■書き出し設定の例
YouTubeやVimeoなどのWeb動画:
形式：H.264
プリセット：YouTube 1080p HD、またはH.264 – 高ビットレート
解像度：1920×1080 (フルHD) または 1280×720 (HD)
フレームレート：29.97fps または 24fps
編集用素材:
形式：QuickTime
コーデック：Apple ProRes 422 HQ
解像度：元の素材と同じ
フレームレート：元の素材と同じ
透過動画:
形式：QuickTime または PNGシーケンス
チャンネル：RGB + アルファ
これらの情報を参考に、After Effectsでの書き出しを行ってみてください。
不明な点があれば、Adobeの公式ヘルプやオンラインのチュートリアルなども参考にすると良いでしょう。
01.コンポジション設定とファイルの読み込み
02.アニメーションについて
03.エフェクトについて
04.レイヤーについて
05.書き出しについて
※この5つの工程だけは覚えといたら損はしないです！！
本日の課題
提出課題はありません。
就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。
コメント