インスタに正方形サイズの動画投稿する手順!AdobePremierePro使用

Other

2021/6/25 追記

※Instagram仕様変更があったようで、

この記事で行う手順は

今は不要な部分があります!

DropboxからiPhoneへ、の手順は不要になりました(^^)/


こんにちは!

今回は、Instagram(以降 インスタ)に動画を投稿する手順のまとめになります。

インスタの投稿一覧が正方形なので、動画も正方形で揃えて投稿したいと思います!

私が作成したい動画は、

Manaさん本「ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座」

のカスタマイズサイトのお披露目動画です。(^^)/

動画の作成方法をいくつか試してみて、

最終的にこれからはAdobePremiereで作ることにしよう!

と決めました(^^)/

折角AdobeCC継続しているので、

少しでも元とったるぞ!(+o+)オカネナイヨ…

 

スポンサーリンク

インスタ投稿イメージ

カスタマイズサイトの野菜ブログ(Na2-vegilog)

本屋求人サイト(Na2 BOOKSOTRE)の動画投稿は

以下のような感じになってます。

本屋求人サイトの動画は、前回作成時との時間が空いて

手順がうろ覚えだったので失敗してます(+o+)

黒枠が…どどんと目立ち微妙になっちゃいましたね💦

そして表紙のタイトルがブログサイトになったままだった…( ゚Д゚)ヤッチマッタ!

修正した動画をアップし直したいけど、他の人にはウザイと思うので(-.-)

この記事の最後に載せて修正完了とします…

 

 

この投稿をInstagramで見る

 

na2factory_works(@na2factory)がシェアした投稿

 

この投稿をInstagramで見る

 

na2factory_works(@na2factory)がシェアした投稿

 

手順を整理

まず、私の動画作成環境は↓です。

PC:Windows10
携帯:iPhone7(だいぶ古いけど全然問題ないよ! (^_-)-☆) )
同じ感じの環境で、同じようなインスタへの投稿をしたい方には
参考になるかもしれません!(^^)!

概要

2021/6/25 追記

昨日久しぶりにInstagramに投稿したら、なんと!

PCから静止画・動画のアップができるようになってました!!!

Instagram仕様変更したんですね(^^)/

となると、以下に書いた⑦以降の手順は不要になります。

投稿し易くなって良かったです 🙂

(記事はこのまま残しておきたいと思います💦)

① PCでカスタマイズサイトの動きを録画(デスクトップ版、モバイル版を夫々)

② 表紙の画像と最後の画像を用意(正方形で作っておく)

③ AdobePremiere(以降、Premiereと略)で新規プロジェクト作成

④ ③のタイムライン枠に①、②の素材をドラッグして繋げる

※シーケンス設定で正方形の選択が必要
※正方形に限らず、他のインスタ用サイズも設定できそうです

⑤ サイズの調整、再生速度の調整を行う

⑥ H.264形式(mp4)で書き出し

※書き出し形式の選択で要注意(詳しくは以降の詳細で)

⑦ 書き出したファイルをDropboxに保存

⑧ iPhone側のDropboxアプリで⑦の動画を「カメラロールに保存」でダウンロード

PCとスマホ間のデータ転送サービスはDropboxでなくても
Googleフォトとか、
iCloud DriveとかでもOKだと思います!

⑨ インスタアプリで投稿!

現在PC上で直接インスタに動画を投稿できる仕様がなく、
一旦iPhoneにダウンロードが必要というのが何とも面倒です…(-.-)
では、以降から夫々をできるだけ詳細に記録していきます!
作りながら書いていきます(^^;

手順① PCでカスタマイズサイトの動きを録画

PC上でブラウザをスクロールしたりクリックしている様子を録画する作業です。

色んな手段があると思います。

私はこちらのツールを使っています。

PCにアプリをインストールせずに使えます。

操作も直感的ですぐに慣れました(^^♪

このツールでブラウザのアドレスバーの部分を録画範囲外にして作っています。

 

モバイル版の録画は、

GoogleChrome等の検証ツールの画面だとクリックの様子がよく分からないかと思って

こちらのレスポンシブ対応確認ツールの画面を使用させてもらってます。

他にもスマホの枠が付いているサービスとか、

もっと見栄え良くできそうですね(^^♪

今後、移行するかもです!

 

これで動画素材の準備OK!

 

手順② 表紙の画像と最後の画像を用意

表紙と最後の画像があった方が動画っぽいかな?

という事で、フォトショやイラレで正方形の画像を用意してます。

↓表紙、タイトル修正!(^-^;

 

手順③④ Premiereで新規プロジェクト作成、素材読み込み

ここから、いよいよPremiereを立ち上げます!

慣れていないので操作は適当な感じです💦

新しい動画を作成するための新規プロジェクト作成をクリックし、

重要:※シーケンス設定で正方形の選択

の作業をします!

こちらについて参考にさせていただいた記事↓

この設定を最初知らなかったから…

Premiereでは正方形の動画が作れないんだと思ってました💦

他のツールを試したり、iPhoneのアプリでわざわざ正方形にしたり

迷走しましたねぇ(-.-)

 

シーケンス設定までの手順

新規プロジェクト作成後~シーケンス設定までの手順の動画を作ってみました!

動画でやっている作業

新規プロジェクト作成し、素材を画面右下の青枠部分(タイムライン)にドラッグする。

その後、上部のツールバーの「シーケンス」をクリック!

シーケンス>シーケンス設定を選択。

編集モードを「カスタム」に変えて、

その下のフレームサイズに縦横、任意の同じ数字を入力。

私はインスタ用の画像は1080px x 1080px で作ってきたので、

動画でも最初同じにしていましたが、

後述の書き出し後の作業で問題があった為

640px x 640pxに設定してます。

 

手順⑤ Premiere内でサイズの調整、再生速度の調整を行う

サイズをフレームに合わせる

画像、動画夫々をPremiereの正方形にフィットさせる作業です。

素材の上で右クリックし、

「フレームサイズに合わせてスケール」をクリック!

そうすると、シーケンス設定で決めた正方形サイズに変更されます!

プレビューの画像のサイズが、フレームサイズにフィットした!

再生速度を変更する

動画を自分のiPhoneにダウンロードしなきゃいけないという事もあって

容量は控え目にしたい!

再生時間は長くても30秒ぐらいかな?

録画した動画を2倍速ぐらいにして無駄を省きます!

サイズ変更と同様に素材の上で右クリックし、

「速度・デュレーションを設定」を選択して

静止画は何秒表示か、動画は速度を設定します。

私は静止画1.5秒ぐらい、動画は220%にしてました。

 

サイズ・速度の変更部分の動画は以下になります!

 

手順⑥ H.264形式(mp4)で書き出し

動画が完成したら書き出しです。

ファイル>書き出し>メディアを選択します。

 

ここで重要な選択があります。

私の環境だけの問題の可能性が高いのですが、ご参考までに(-.-)

最初にPremiereで動画を作成した時、ここで躓きました。

 

書き出しのプリセット設定を特に変えず、

デフォルトのまま書き出したファイルだと

DropboxからiPhoneにダウンロードできず、エラーになってしまったんです。

Dropboxではなく、Googleフォトアプリも試してみましたがエラーは変わらずでした💦

そこで、書き出す時にプリセットの設定が必要なのでは…と思いつき、

プリセットの一覧で正方形のフォーマットを探して

Twitter640x640に設定して書き出してみました。

この方式ですと問題なくiPhoneにダウンロードできました!!(;’∀’)

なので、私の手順ではプリセットをTwitter640x640にするとしております。

もしかしたら他にいい方法があるのかもしれませんが…

 

尚、書き出しファイルの名前を変更する場合は

出力先:の横の青字をクリックして可能です!

下の方にある「書き出し」ボタンをクリックで、

動画が書き出されます。

 

手順⑦ 書き出したファイルをDropboxに保存

⑥で書き出したファイルをDropboxを立ち上げてコピーします。

 

手順⑧ iPhone側のDropboxアプリで⑦の動画を「カメラロールに保存」でダウンロード

iPhoneで作業します。

Dropboxアプリを開いて、⑦のファイルを選択し、

動画の画面上でタップします。

それで以下のように出てくる

「カメラロールに保存」をタップ。

これで動画がiPhoneにダウンロードされます。

※PremiereのプリセットがTwitter640x640では無かった時、

ここで「ダウンロードできません!!」( ゚Д゚)とエラーになり、
インスタに投稿できませんでした。

 

手順⑨ インスタアプリで投稿

こちらは説明省略で!

手順は以上になります。

本屋サイトNA2 BOOKSTOREの動画 修正版

さて、インスタに投稿し直しはしないのですが

修正した動画を最後に載せて、終了とさせて頂きます(^^)/

この動画のサイズは約3Mbyteでした。

 

また次のカスタマイズサイトを公開できたら

今回の手順で動画を作りたいと思います!!

最後までご覧頂き、ありがとうございました(^^)/

 

Other
スポンサーリンク
この記事をシェア!
na2factoryをフォロー
Webデザイン勉強中

このサイト、
Na2 factory(なな ふぁくとりー)を運営している
"ななふ"と申します。

40代からのWEBデザイナーへの道!
少しづつステップアップしていきたいです。

このサイトでは、自分が覚えた事、
テクニック等を詳細に紹介していきたいと思います。
これからWEBデザイナーを目指す方々と
情報共有できたら嬉しいです!

約2.5か月かけて(^^;photoshopでのバナトレ30本達成できました!
さらにその倍ぐらいの時間をかけて、
illustratorでもバナトレ30本達成~!!
現在はXDとコーディング勉強中!

詳しいプロフィールはこちら

na2factoryをフォロー
Na2 factory

コメント

タイトルとURLをコピーしました