質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.69%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Q&A

解決済

1回答

518閲覧

動画を背景として流すのですが、その推奨ピクセルサイズを知りたい

masatamu

総合スコア6

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

0グッド

0クリップ

投稿2023/03/15 06:34

編集2023/03/15 06:35

WebサイトにてMP4の動画を背景として流すことになりました。
仕様としては全面いっぱいに背景として流し続けます。
動画制作の方にパソコン用、タブレット用、スマホ用と3つの動画を作成していただく予定です。

今回知りたいのは、動画の横幅と縦の長さ(ピクセル単位です)
パソコンに関しては、1920 x 1080ピクセル(推奨サイズがあるようなのでこのサイズいいかなと思うのですが)
タブレットやスマホだとどのサイズで作成していただくのが良いのでしょうか?
ブラウザの大きさとかでいいのでしょうか?
タブレット縦向き/(横)820px:(縦)1180px
スマホ/(横)375px:(縦)667px

詳しい方いらっしゃいましたら、教えていただけると幸いです。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

guest

回答1

2

ベストアンサー

要件にもよりますが、
(どこまで画質の粗が出ていいのか)
おおむねそのような画素数でいいかと。
ただし、スマホは、提示されている画素数の倍は合った方がいいと思います。

画素数よりも大事なことがあります。
それは、容量です。
Web上では、下位互換対応もあり、5MB以下が推奨されています。
でないと、閲覧するエンドユーザー側の経済的負担が大きくなります。
(特に、キャリア回線などで、月の通信量が決まっているユーザー、など)
それらを加味した時、PCにおいてのフルHDも苦しかったりします。
(5MB以下にしようとすると、とんでもなく画質が粗くなる)
また、単純に表示までの速度の短縮をせねばなりません。

そこら辺を、なるたけ軽減する方法に、
全画面にYouTubeなどの動画サービスに上げた動画を掲載する、という方法もあります。
少なくとも、表示速度は改善が見込めます。
ただし、それでも、容量はどうしようもないです。

これらを、要件と照らし合わせ、実装方法を熟慮する必要があります。

投稿2023/03/15 06:49

miyabi_takatsuk

総合スコア9524

YakumoSaki, masatamu👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

回答へのコメント

masatamu

2023/03/15 07:09

プログラミング関係でないにも関わらずご回答いただき感謝いたします。 確かに容量の問題はあるかと思います。背景として流す動画ですので、多少荒れても軽くなったほうが良いかと思っております。 スマホ/(横)375px:(縦)667px 上記の2倍のサイズで作成していただき、動画の制作の方にオリジナルの容量のものと、5MB以下に軽量化していただいたもの、2種類いただく形で進めようかと思います。 ご回答ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.69%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。