スマホページの動画の表示位置と再生について

Question

お世話になります

4/30の清水様の公開コンサル内で動画をスマホページの途中に入れていらっしゃる会員様がいらして、
もう少し上の方が有効では？というようなお話もありましたが、
スマホをスクロールするとすでに動画が再生していたように見えました
同じようにするにはどのように入れることができるのかをご教授いただきたいです


ーー
「現状弊社ページ」

デザインレシピを拝見してトライした弊社のページ
商品ページ　 t000612-1　
動画制作はインスタグラムのリールサイズです
またRMSの編集ページの動画にも入れていますのでPCでも縦長で両サイドは黒くなっていますが表示はされています
ーー


デザインレシピの１、のサムネイル画像では動画をクリックしないと動き出さない表示になっており
清水さんがご紹介されていたページ(鍵のショップ様でしょうか？）のように初めから動いてはいないです

また、▶︎ をクリックしても、中心に綺麗に見えておらず、半分切れています

デザインレシピの３、の動画ページの・cabinet に入れるときの数値の入れ方
・w h の数値がいけないのか？
サイズを数字で入れずに１００％などにすれば改善されるのか？
または、cabinet  に入れるときの数値の選び方によりますでしょうか？
どの部分で数値の入れ方などを含め、どの部分がいけないのか、改善するべきかがわかりません

下記2点に関してご教授いただけますようお願いいたします

・PC　スマホとも的確な大きさで綺麗に表示できることを希望します
・清水様が案内されていたページのように勝手に再生したい

どうぞよろしくお願いいたします

Answer

ECマスターズの伊藤です。

> デザインレシピの３、の動画ページの・cabinet に入れるときの数値の入れ方
> ・w h の数値がいけないのか？

残念ながら、楽天の使用上レスポンシブには
対応しておらず、動画は固定サイズで
表記いただくようになります。

また、こちらも楽天の仕様となりますが、
Cabinetにアップロードいただいた動画は縦長には対応しておらず
4：3、または16：9のサイズとなり、
それ以外のサイズは上記サイズに合わせるように
黒枠が表示されるようになります。

[動画管理 R-Cabinet] 動画を登録する
https://navi-manual.faq.rakuten.net/design/000035353
＝＝＝＝
動画縦横サイズについて
動画を再生するプレイヤー側は画面サイズ4：3、または16：9で再生されます（選ぶプレイヤーによって異なります）。
アップロードされた動画のサイズが異なる比率である場合は上下、または左右が黒く表示される場合があります。
アップロードした動画は登録完了後にプレビュー表示をして問題がないか確認してください。
＝＝＝＝

> ・清水様が案内されていたページのように勝手に再生したい

ご覧いただいた店舗様にてご対応されていた方法ですが、
GIFアニメーションを利用した動画となっています。

GIFアニメーションであれば、画像として
扱えるため、Width="100%"といった
設定が可能となっています。

Answer

お世話になります

つまりインスタで使っているmp4 を流用するのではなく　
GIFアニメーションで4：3、または16：9　で製作すれば問題は解決するということですね？
確認ですが、横長ということですよね？？
縦横比がかなり違うので改めて作ることにも時間がかかりそうですので少し検討しようかと思います

現状のcabinetに普通に動画を入れてアップした場合、
スマホページの場合、画像をスワイプすると一番最後に動画があり、
スワイプしなければお客様は見ないことになります
１画像目の下に「動画」のアイコンがありますが、
これを目立たせて動画を見ていただくように誘導するようなことはできるのでしょうか？

どうぞよろしくお願いいたします

Answer

ECマスターズの伊藤です。

>つまりインスタで使っているmp4 を流用するのではなく　
>GIFアニメーションで4：3、または16：9　で製作すれば問題は解決するということですね？
>確認ですが、横長ということですよね？？
>縦横比がかなり違うので改めて作ることにも時間がかかりそうですので少し検討しようかと思います

はい、GIFアニメーションであれば
問題ございません。

GIFアニメーションは動画ではなく、
画像としての扱いとなりますため、
4：3、または16：9を気にせず
縦長のまま掲載が可能です。

なお、GIFアニメのアップロードは
R-Cabinetの「動画管理」ではなく、
「画像管理」へアップロードを
お願いいたします。

>１画像目の下に「動画」のアイコンがありますが、
>これを目立たせて動画を見ていただくように誘導するようなことはできるのでしょうか？

誠に恐れ入りますが、
こちらのアイコンにつきましては、
出店者様側での変更や調整はできかねます。

楽天市場の仕様によるものですので、
ご了承くださいますようお願いいたします。

Answer

お世話になります
ーー
GIFアニメーションは動画ではなく、
画像としての扱いとなりますため、
4：3、または16：9を気にせず
縦長のまま掲載が可能です。
ーー
縦長のまま、、とのコメントをいただきましたが、
今の縦長mp4をGIFアニメに簡単に変換できたりするのでしょうか？？
もしかしてcanva でできたりしますか・・？

まだまだcanvaも使いこなせていません。。

Answer

ECマスターズの伊藤です。

> 縦長のまま、、とのコメントをいただきましたが、
> 今の縦長mp4をGIFアニメに簡単に変換できたりするのでしょうか？？

下記の様な変換ツールにて可能となっています。

https://rakko.tools/tools/86/

https://www.iloveimg.com/ja/compress-image/compress-gif

注意点としまして、あまり滑らな動画にすると
容量が重くなり、ページ表示スピードが低下、
離脱の原因となる可能性がありますので、

実際にスマホで表示を確認し、ページの
表示速度のご確認をお願いいたします。

Answer

ツールがあるのですね
ありがとうございます

一般的な幅、高さ、速度　はどれくらいなのでしょうか？
アニメーションgif自体をよく理解できておらずに
全く察しがつかず、、ご教授お願いいたします###HR######IMG0e83e9ee0fa2a30f40075e6deeb949b41.pngIMG0###

Answer

度々失礼致します
gifアニメーションに慣れておらず、
よくわからないまま、試しに
40秒の動画　mp4で２７MB を
元の縦横の半分で　幅540px  高さ960px  
速度100 
開始 0
終了40
でGIFにしましたら　４７MB にさらに大きくなり、キャにネットでアップができずにエラーになりました

少しググったら、gifは１MB以下の200KB以内が望ましいようなコメントがあり、、
４７MB　は大きすぎると思われましたので
圧縮ソフトで７５％圧縮して135×240 ４MBになっても全く無理そうです

もしかしたら弊社であげようとしている動画をアニメーションGIFにしてアップすることはそもそも無謀な話なのでしょうか・・？
ただ単に手順が理解できていないだけのようでしたら、一般的に設定する数値なども含めて
ご教授いただけますとありがたいです
よろしくお願いいたします

Answer

ECマスターズの菅原です。

いただいたご質問につきまして
お調べしておりますので、
恐れ入りますが、もうしばらくお時間いただけますと幸いです。

Answer

ECマスターズの菅原です。

ご回答までお時間いただいてしまい
申し訳ございません。

> もしかしたら弊社であげようとしている
> 動画をアニメーションGIFにしてアップ
> することはそもそも無謀な話なのでしょうか・・？

> ただ単に手順が理解できていないだけのようでしたら、
> 一般的に設定する数値なども含めて
> ご教授いただけますとありがたいです

詳細をご教示いただき
ありがとうございます。

GIFアニメーションを作成する際、
推奨されているアニメの長さは
5秒～10秒程度、長くても30秒程度までと
言われております。

これは、ご認識の通り、
長いアニメーションとした場合、
ファイルサイズが大きくなってしまう事や、
GIF画像は、表現できる色数が256色と
限られているため、画像をあまりきれいに
表現できない為です。

※GIFアニメーションは、
パラパラ漫画の要領で、複数枚の
画像を高速で切り替えてアニメの
様に表現しているものであると
お考え下さい。

これらの点から、
GIFアニメーションは
どちらかというと、
動きのあるバナー（看板）として
ご利用頂く事が主流であると考えます。

ご質問で頂きました
画像の「サイズ」については、
ご検討されている大きさで
問題無いと思います。

変更をご検討頂く必要が
あるのは動画の長さ（尺）です。

今回ご検討されている動画の表示方法について
「ある程度大きいサイズで見せたい」
というご希望がメインでしたら、

GIFアニメーションとして
アップロード可能なサイズまで
画像の尺を短くして頂ければ、
GIFファイルの画像として
R-cabinetにアップロードできます。

動画の内容は短くカットする事が
できないという事でしたら、
楽天で表示させるためには、
GIFファイルではなく、従来通り、
動画としてアップロードして頂く形になります。

Answer

ありがとうございます
gifアニメーション自体をよく理解しておリませんでした
希望する動画のままではgifアニメーションではアップできないことが理解できました