ツール

【初心者向け】センスがいい企業イメージ動画を3時間で作成する方法

カッコイイオープニング動画を3時間で作るのイメージ画像

konkon

クリエイティブディレクター兼デザイナー
受託系制作会社、インハウスデザイナー、フリーランスを経て、さまざまなジャンルのデザイナーを23年やっています。デザイナーの立場やクライアントの立場の両方の視点からデザイナーのいろんな疑問を解説していきます。

動画を作れないデザイナーの方でも、センスがいいイメージ動画をカンタンに3時間程度で作成する方法をご紹介します。

特にこれまで動画を作ったことがないデザイナーの方に、是非トライしていただきたい内容です。企業サイトのTOPページに掲載するようなイメージ動画を参考例としています。観光地のイメージムービーやイベントのオープニングムービーなどにも応用できる内容となっています。

完成イメージ

以下は、本記事でご紹介する作成方法の完成イメージです。この動画を初心者が3時間で作ることを目標とした記事になります。

必要なスキルは?

特にありません。

konkon

ぶっちゃけPhotoshopやillustratorなどのグラフィックツールが使えなくても構いません。

必要な素材はたったの3点

必要な素材やソフトは以下のとおりです。

  • ソフト:Adobe Premier Pro
  • 素材1:モーショングラフィックテンプレート
  • 素材2:動画データ

Adobe Premier Proについて

動画編集ソフトとしてAdobe Premier Pro(有料)を使用します。Adobeのコンプリートプランを契約している方はAdobe Creative Cloudでインストールして下さい。PhotoshopやイラストレーターやAdobe XDしか使っていないWEBデザイナーの方は、もったいないので積極的に使ってみましょう。

konkon

Adobe Premier Proの単品購入でも、本記事の動画は作成可能です。

モーショングラフィックテンプレートについて

モーショングラフィックテンプレートとは拡張子.morgt形式のAdobe Premier Proで動作するモーショングラフィックテンプレートデータになります。これはすべてのモーションがあらかじめ設定されているファイルです。従って動画のモーション設定は必要ありません。Adobe Premier Proの管理画面内で動画素材とテキストとカラーなどを編集することで動画を作成することができます。

本記事では有料素材サイトAdobe Stockで購入できる以下のデータを使用します。

Corporate Opener Promo Replacement Title

動画素材について

動画に盛り込む動画素材を準備してください。無料・有料問わず動画素材サイトからダウンロードしたものでも良いですし、自分で撮影した動画でも構いません。できればiPhoneなどでオリジナルの動画を撮影したものを使用するとよいと思います。

※本記事で作成した動画素材はPixtabayで無料ダウンロードしたものとなります。

作り方(目標3時間)

全体の流れ

  1. Adobe Premier PROをインストール
  2. モーショングラフィックステンプレートをダウンロード
  3. 素材となる動画を撮影or収集
  4. Adobe Premier PROで編集
  5. 動画を書き出し
  6. 圧縮して完成

Adobe Premier PROをインストール

Adobe Premier Proをダウンロードしてインストールしましょう。

もしまだAdobe Premier Proを購入していない方は、Adobeで契約してからインストールする必要があります。ちなみに本記事で紹介している動画作成では、Adobe Premier Proのみを使うので、他のソフトを購入する必要はありません。

※もともとCreative Cloudコンプリートプランを契約しているデザイナーであれば、パッケージ内に入っているので、そのまま無料でインストールできます。

Adobe Creative Croud購入プランへ

モーショングラフィックステンプレートをダウンロード

動画の動きの部分を制御するテンプレートファイルのモーショングラフィックステンプレートをダウンロードしてください。無料版のものもありますが、今回はAdobe Stockで購入したCorporate Opener Promo Replacement Titleを使用します。

ダウンロードしたファイル名と拡張子が、[AdobeStock_514484732.mogrt]となっています。これはAdobe Premier Pro専用のファイルなので、Adobe Premier Proのソフトをインストールしていないと開けません。

素材となる動画を撮影or収集

素材となる動画を用意しましょう。できれば簡単にiPhoneなどで撮影した動画素材を使用してほしいのですが、撮影が難しければ動画素材をダウンロードして用意しましょう。Adobe StockでもPixtaでもMotion Element でも有料動画は手に入ります。無料動画であれば「動画素材 無料」などで検索するといくつかヒットします。

※本記事ではPixtabayのものを使用しています。

Adobe Premier PROで編集

ソフトと素材が揃ったら、実際に動画を作成してみましょう。手順は以下となります。

Adobe Premier Proを開き、新規プロジェクトを作成

画面1

ファイル名を入力して作成ボタンを押下

画面2

モーショングラフィックステンプレートファイルを読み込み

右側のウィンドウに出てきた、エッセンシャルグラフィックスウィンドウ内の「+」アイコンをクリックしてモーショングラフィックステンプレートファイルを選択して読み込みを実行

画面3

シーケンス作成

上部メニューのファイル>新規>シーケンスを選択すると、真ん中下にタイムラインが表示されます。

画面4

テンプレートをタイムラインに設置

このタイムライン上に、先程読み込んだモーショングラフィックテンプレートをドラック&ドロップします。

画面5
画面6

もしタイムライン上の表示が狭かったりした場合は、以下の部分で長さの表示を調整できます。

画面7

テンプレートに動画素材を設定

タイムライン上でモーショングラフィックステンプレートのピンクの部分を選択した状態で、右側のエッセンシャルグラフィックウィンドウの編集タブを選択して、ADD YOUR IMAGEのアコーディオンタブを開きます。右上にある横3本ラインのメニューアイコンをクリックして、動画素材を読み込みます。

画面8

一旦試しにプレビュー

ここで一旦真ん中上のウィンドウで再生をしてみましょう。1シーンが動作しているはずです。

画面9

テキスト変更などの各種設定

さらに画面内に表示されるテキストを変更してみましょう。右側のエッセンシャルグラフィックスウィンドウ内のTEXT CONTROLタブを開いて、3つのテキストボックス内に任意の文言を入力します。

このテンプレートでは、テキスト内容・フォント種類・太字や斜体など・テキストカラー・表示位置の5点の設定をこの管理画面から変更可能です。

画面10

このエッセンシャルグラフィックスウィンドウでは、上記に加えて、以下の設定も可能です。

  • 動きの方向を6種類の中から選択可能
  • テキストエリアの背景カラーを選択可能
  • 全体背景の透過量を変更可能

これで1シーンが完成しました。

同じように繰り返すことで、動画を作成していきます。

完成形のタイムライン

同じ作業で作成した画面は以下になります。

画面11

このタイムラインに含まれている構成を図に表すと以下のようになります。

モーショングラフィックステンプレートの下のレイヤーに切り替わりで背景に表示する背景動画を入れています。

動画を書き出し

上部メニュータブの書き出しを選択して、動画を書き出しましょう

画面12

書き出し時間はPCのスペックによりますが、10~30分程度はかかると思います。

圧縮して完成

もし完成した動画をWEBで掲載するのであれば、必ず動画を圧縮してから掲載してください。

キャリアアップとして動画を作れるようになろう!

今回ご紹介した動画作成は、あくまで初心者が手っ取り早くセンスのいい動画を作る方法をご紹介しました。現在WEBでは動画制作が盛んにおこなわれており、WEBデザイナーとしても動画を作れるかどうかでキャリアの幅が変わってきます。

本記事でご紹介した動画制作をスタートラインとして、もっと動画編集ソフトで遊び倒してみると、WEBデザイナー兼動画クリエイターという肩書を手に入れられるかもしれません。

是非、動画クリエイターのスキル習得にもトライしてみてください!

デザイナーのおすすめ記事

ウェブデザイナーの年収はどれくらい?のイメージ画像 1

ウェブデザイナーの年収実態について、現在の業界全体を踏まえてわかりやしく解説します。 ウェブデザイナーの年収は、スキルや所属する企業によって大きく異なるため、年収の平均値だけを見ても参考になりません。 ...

採用担当者を惹き付けるデザイナーの職務経歴書と自己PRの書き方のイメージ画像 2

本記事では、デザイナー職の特性を考慮した採用担当者に刺さる職務経歴書や自己PRの書き方をご紹介します。 数百人のデザイナーを書類選考し数十人採用した経験がある、自身もデザイナーの筆者が職務経歴書に書く ...

デザイナーの仕事がつらいと感じるときの対処法のイメージ画像 3

現在デザイナー職として従事されている方や、これからデザイナーを目指したいと考えていらっしゃる方向けに、デザイナーの仕事がつらいと感じられた時の対処法についてご紹介します。 私は、これまで20年以上企業 ...

-ツール