完全無料＆ブラウザ上で動画編集やアニメ制作が可能なAfter Effectsっぽいウェブアプリ「PIKIMOV」

動画編集・アニメーション作成が可能なAdobeのAfter Effectsのように、デジタル合成やモーション・グラフィックス、タイトル制作などが可能なウェブアプリが「PIKIMOV」です。完全無料でブラウザから使えるとのことで、実際にPIKIMOVで動画を編集してみました。

PIKIMOV ☆ Free web-based motion design and video editor
https://pikimov.com/

PIKIMOVを使うには上記URLにアクセスして、「GET STARTED」をクリックします。なお、PIKIMOVはChromeもしくはEdgeのみに対応しており、記事作成時点でFirefoxでは利用できないので注意が必要です。

PIKIMOVが起動すると、プロジェクトを開くポップアップが表示されるので、「NEW PROJECT」をクリック。

プロジェクトで設定できる最大解像度は2000×2000ピクセルで、フレームレートは最大30fps、動画の長さ(Duration)は最大6分となっています。今回はプリセットにある「1920×1080ピクセル・30fps」を選んで「OK」をクリックしました。

表示される編集画面はこんな感じ。左にある「Add item」をクリックして、編集元のメディアを追加します。

「Image, video, audio」を選択し、画像・動画・音声を選択できます。

「Import a file」をクリックし、読み込みたいファイルを選択します。

動画の解像度やフレームレートがプロジェクト設定と合っていない場合、設定をメディアに合わせるかどうかを尋ねられます。今回はプロジェクト設定を優先するため、「No」を選択。

動画を読み込むとこんな感じ。

動画編集については基本的なトリミングやカットが可能。カットしたいポイントで右クリックし、「Split」を選択すればその場で動画を分割できます。

細かいカットタイミングについては、アイテム一覧の項目名の右端に各アイテムの長さがフレーム単位で表示されています。この数字を直接編集することでタイムライン上の長さを調節できます

「Export video」をクリックすると、動画に書き出すことができます。

「Export as .mp4 video」をクリック。

書き出しが始まります。今回1920×1080ピクセル・30fps・10秒の動画を書き出すのに約18秒かかりました。

「Save video file」をクリックして、書き出した動画をローカルに保存します。

書き出した動画のビデオコーデックはH264、音声コーデックはAACでした。

さらに、PIKIMOVは動画や写真だけでなく、glTF形式の3Dモデルを読み込ませることができ、Adobe After Effectsに似たUIでアニメーションを作成することができます。

今回は1枚の画像から高品質な3Dメッシュを高速で生成できる「Unique3D」で作成した3Dモデルを追加してみました。3Dモデルにファイルのプロパティからposition(座標)・rotation(回転)・scale(大きさ)を設定し、タイムライン上にキーポイントを設定することで自由に動かすことができます。

また、「effects」で、カラーオーバーレイやブラー、コントラストなどのエフェクトを選択できます。

実際にPOKIMOVで作ってみた3Dモデルを使ったアニメーションが以下。

ブラウザ上で3Dモデルを使ったアニメーションを作れる完全無料アプリ「PIKIMOV」でサクッと作ってみた10秒アニメ - YouTube

「Save project as」でプロジェクトをローカルに保存することができます。