ウェブサイトのメインビジュアル用動画の書き出しについて

[junannko]

はじめまして。

ウェブサイトのメインビジュアル（ファーストビューで全画面）

用にpremire proで動画を書き出したい場合、

どのような書き出し設定が最適なのでしょうか？

macos 10.13.3

premire pro 12.0.1

環境は以上でございます。

ご教授お願いいたします。

[150kw]

こんにちは、junannkoさん

Windowsの場合ですが、「書き出し設定」の「形式；H.264」にVimeoやYouTube用プリセットがあります（下図）。書き出すフレームサイズ等により最適なのを選択したら良いと思います。

[junannko]

150kwさん

ご丁寧にありがとうございます！

macの場合もございます。

まさにこの「プリセット」の項目が何が最適化が分からなくて質問させていただいた次第です。

目的は、ウェブサイトのメインビジュアルに使用するので

おそらく1600〜2000pxくらいの幅は必要かと思います。

ウェブサイトなので、なるべくデータ量を軽くして

かつ遜色ない画質のレベルであれば御の字、といった感じなのです。

（レスポンシブなのでモバイルでも表示）

今回初めてのpremireでして、

以上のような目的の動画では「プリセット」で

どの項目が最適なのでしょう？

初歩的なことを聞いてしまっているかもしれませんが、

ご教授いただけると幸いです。

何卒よろしくお願いいたします。

[150kw]

こんばんは

＞ウェブサイトのメインビジュアル・・・

ここの意味が分からないのですが、

YouTubeに書き出す場合、

2K（1920×1080ピクセル）映像なら、「YouTube 1080p HD」

4K（3840×2160ピクセル）映像なら、「YouTube 2160p 4K」

モバイルに書き出す場合、

2K（1920×1080ピクセル）映像なら、「Mobile Device 1,080p HD」

4K（3840×2160ピクセル）映像なら、「Mobile Device 2,160p 4K」

一般的には、どちらも1080pの方を選択すれば良いと思います。

50インチもあるような4Kモニターで視聴する場合は2160pにすれば良いと思います。

[junannko]

150kwさん

こんばんは。

レスありがとうございます。

＞＞ウェブサイトのメインビジュアル・・・

＞ここの意味が分からないのですが、

分かりづらくてすみません。たとえば、

- JAL STEAM SCHOOL -　飛行機と空の世界をSTEAMで紐解く体験型プログラム
こちらのサイトのファーストビューにある全画面の動画、
というイメージです。
できればvideoタグを使ってmp4を直接読ませたいと考えております。

＞YouTubeに書き出す場合、

＞2K（1920×1080ピクセル）映像なら、「YouTube 1080p HD」

＞4K（3840×2160ピクセル）映像なら、「YouTube 2160p 4K」

＞モバイルに書き出す場合、

＞2K（1920×1080ピクセル）映像なら、「Mobile Device 1,080p HD」

＞4K（3840×2160ピクセル）映像なら、「Mobile Device 2,160p 4K」

＞一般的には、どちらも1080pの方を選択すれば良いと思います。

＞50インチもあるような4Kモニターで視聴する場合は2160pにすれば良いと思います。

おお。勉強になります。

かしこまりました！

ウェブとモバイル両方に対応する場合、やはりモバイルの方へ合わせて

＞2K（1920×1080ピクセル）映像なら、「Mobile Device 1,080p HD」

とするのが妥当でしょうか？

[Ckun]

横から失礼いたします。

ウェブサイトのデザインで使用する動画ですと、YouTube用プリセットなどではビットレートが高すぎるように思います。

最終的にはサイトを構築する方とのご相談、ということになるかと思いますが、おそらく大雑把に1〜3Mbpsくらいの10〜30秒程度で、数MBのファイルといったところではないかと思います。そこから逆算すると、解像度はフルHDではなく、1280x720や960x540程度にしないと圧縮ノイズが目立つかと思います。それを、ブラウザ上で拡大して表示するかたちですね。画質的にはあまりきれいではないかもしれませんが、ウェブの場合は表示されるまでの速度などの快適さも要求されますので、なかなか動画品質優先というのは難しいのかなと思っています。

[junannko]

Ckunさん

こんばんは。

レスありがとうございます。

ほほう、なるほどでございます。

you tube用ですと、大きすぎると言うことですね。

えーと、本当に知識不足で申し訳ないのですが、

踏まえますと、具体的にプリセットは何が妥当なのでしょうか？

ご教授いただけると助かります。

[Ckun]

あえてプリセットから選ぶならば、「Twitter 720p HD」あたりでしょうか。しかしながら、フレームレートはシーケンスの設定に合わせた方が良いと思いますので、プリセットをそのまま使うのはお勧めできません。

プリセットをそのまま使うのではなくマニュアルで設定した方が良いと思いますが、一からカスタムで作るのも面倒かと思います。

そこで、例えばYouTube 720p HDを選択してから幅と高さを960と540、ビットレート設定をVBR, 2パス ターゲット1Mbps 最大1.5Mbps、音が必要なければオーディオの書き出しのチェックを外すといった具合に作業していただくと良いのではないかと思います。

蛇足ですが、このような類の映像を作るときはビットレートの制約がきついので、制作段階で映像内容に合わせたフレームレートや解像度の設定をすることも重要なポイントです。ゆっくりとしたスライドショーならば解像度優先でフレームレートを低めにしたり、動画の実写映像メインでしたら素材に合わせたフレームレート(29.97fpsなど)で少し解像度を低めに出すなどの工夫が必要になるかもしれません。

ひょっとすると、アダプティブビットレート配信のしくみと併用してデザインする方法もあるのかもしれませんが、専門外なのでよくわかりません……。

[junannko]

Ckunさん

レスありがとうございます！

委細承知いたしました。

「Adobe stockから素材を買って、

それをウェブ用にボタンポンで書き出して、

videoタグで埋め込んでおわり」

という風に簡単に考えておりましたが、

こんなにもデリケートな設定が必要だとは思ってもみませんでした。

いろいろと勉強になりました。^^;

いただいたご意見を参考にして、試行錯誤してみます。

ご丁寧なご対に感謝いたします。ありがとうございました！

[UY320]

私もコーダーではないので的確な事は言えないのですが、

サイズについてはCkunさんと同じ720P以下で同意見です。

それをWebの開発段階で引き延ばして頂く用に記述するのがよいかなと、

あと映像としては

「明暗がハッキリしているコントラスト高め」ではなく

のっぺりとした薄い絵の方が引き延ばした映像がごまかせるのでお勧めですｗ

特に全体的に色味が薄い方が文字が生えるので、

映像作品ではなくWebの場合「文字情報」を重要視するため

映像自体の優先度はメインテキストの次にするようなカラコレが好まれますー

あとごまかしと言えばAeのエフェクトでCC Sphereの値を最小値にするとグリッド模様のように表現で来てより一層画質の粗さをごまかせますｗ

見た目もけっこうスタイリッシュですー

このサイトのような感じですかね

http://tcdwp.net/tcd037/

ここのサイトの構成もそうなんですが、

Wordpressのヘッダー背景にYoutubeを組み込んでます。

もし画質が重要という場合にはこういった方法もあると覚えておられると便利かと

Web開発の時点での具体的なテクニックなどはgoogle検索とか、

このフォーラムのDreamweaverのスレッドで助言を集めてみるのがよいかなと思います。

[junannko]

UY320さん

レスありがとうございます！

＞サイズについてはCkunさんと同じ720P以下で同意見です。

おお。承知いたしました。

＞映像作品ではなくWebの場合「文字情報」を重要視するため

＞映像自体の優先度はメインテキストの次にするようなカラコレが好まれますー

確かにそうかもしれませんねー。

他、アドバイスありがとうございます。

ちがうルートでも調べてみます。