スマホ商品説明文に動画を掲載する方法につきまして

Question

https://item.rakuten.co.jp/radia-ju/si-tomasuku/
こちらの商品（他社）のスマホ商品説明文の一番上に動画が掲載されています。
YouTubeに飛んでいるわけでもなく、どのようにしているのかわかりません。

同じように動画を掲載する方法が分かればご教授ください。

よろしくお願いします。

Answer

ECマスターズの北原です。

>同じように動画を掲載する方法が分かればご教授ください。

参考ショップ様では、
楽天GOLDに動画用のHTMLを用意し
スマホ商品説明文から楽天GOLDのページへ
遷移させているようです。

以下は楽天GOLDで
動画を再生のページを作る方法です。

RMSトップ > 店舗設定 > 画像・動画管理 > 動画管理
よりR-cabinetの動画管理へアクセスして下さい。

https://ec-masters.gyazo.com/6ddedd8bff0aac17a9b6005f24149a57

掲載する動画をアップロード後
貼り付け用HTMLソースをコピーし
楽天GOLDのページへ貼り付けてください。

https://ec-masters.gyazo.com/561b665284c79da8d8c9d6a6669b3716

Answer

ご対応ありがとうございます。
1つ分からない点があるので質問させてください。

楽天GOLDのページへ貼り付けとはどういう事でしょうか。
質問に上げたURLは通常の商品ページでGOLDのページではないと思いますが、動画用にページを作成するということでしょうか。
（そうなるとそのやり方が分からないです。）

貼り付け用HTMLソースをコピーした後の手順が分からずです。
HTMLをメモ帳か何かにペーストしてそのファイルをゴールドにアップするということでしょうか。
（違いますよね？）
申し訳ありませんがこのあたりのご説明をお願いします、

お手数をおかけいたします。

Answer

ECマスターズの北原です。

>質問に上げたURLは通常の商品ページでGOLDのページではないと思いますが、動画用にページを作成するということでしょうか。

はい、動画用にGOLDのページを
作っていただく認識でお間違いないです。

＞HTMLをメモ帳か何かにペーストしてそのファイルをゴールドにアップするということでしょうか。

こちらも認識の通りでございます。
GOLD上に作成していただいた、ファイルに
HTMLを貼り付けていただく方法になります。

楽天GOLDにページを作成することが難しい
ということでしたら、参考ショップ様とは
方法が異なりますが下記の方法で、
動画を掲載する方法をお試しください。

RMSより掲載した商品の商品編集ページへ
アクセスしてください。
編集ページ内の画像・動画の中に動画（HTMLソース）という
項目がございますので、こちらに先ほどの
貼り付け用HTMLソースを貼り付けてください。

https://ec-masters.gyazo.com/44ff1bb5751f3a892c8021b672ff51bb

商品を保存後、商品ページにて商品画像に
動画が掲載されるようになります。

Answer

お世話になります。

RMSに動画を保存して商品ページに掲載する方法ですと、既定の場所にしか設置できないのではないでしょうか。

今回お伺いしたかったのはスマホ商品説明文の上のほう（というか任意の場所）に設置する方法についてです。

テキストドキュメントにHTMLソースだけを貼り付けてGOLDにアップしても動画の設置はできませんよね？

＞GOLD上に作成していただいた、ファイルに
HTMLを貼り付けていただく方法になります。

これがどういうことなのか理解できません。


あと、追加でお伺いしたいのですが、GOLDを使ってスマホ商品説明文に動画を設置した場合、GOLDページに移動した時に動画が小さく表示されます。
タップすると大きく表示されますが、これを最初から大きく表示する方法はあるでしょうか。

よろしくお願いします。

Answer

ECマスターズの伊藤です。

> テキストドキュメントにHTMLソースだけを貼り付けてGOLDにアップしても動画の設置はできませんよね？

おっしゃるとおりです。
具体的な手順は下記のとおりとなりますので、
ご確認ください。

【】部分を【】含め、修正をお願いします。
例：width="【横幅】" → width="750"

１）
下記内容のHTMLファイルを
楽天GOLDにアップしてください。

===== この下の行から ================


【Cabinetの「貼り付け用HTMLソース」】


===== この上の行まで ================
貼り付け用HTMLソース内に記述されている
w= : 幅
h= : 高さ
となっておりますので、
ご希望のサイズに修正をお願いいたします。


２）
クリックする画像の作成をお願いいたします。

参考のサイトでは、下記のような
画像をご用意いただいています。

https://www.rakuten.ne.jp/gold/radia-ju/top2.jpg

作成後、CabinetもしくはGOLDにアップをお願いします。


３）
スマートフォン用商品説明文の任意の場所に



を設置して登録してください。


> あと、追加でお伺いしたいのですが、GOLDを使ってスマホ商品説明文に動画を設置した場合、GOLDページに移動した時に動画が小さく表示されます。
> タップすると大きく表示されますが、これを最初から大きく表示する方法はあるでしょうか。

こちらは、上記手順の(1)の
w= : 幅
h= : 高さ
にて、サイズ調整をお願い致します。

Answer

ご説明大変良く分かりました。ありがとうございます。
もう少し分からない部分があるのでお伺いします。

私がアップしようとしている動画の貼り付け用HTMLソースがこちらです。


この時点でサイズはw=320&h=286になると思うのですが（合っていますでしょうか？）
サイズ調整はどれぐらいの大きさにすれば良いのでしょうか。

現状のサイズが小さいため、GOLDページにジャンプした際に小さくなってしまうという認識で合っていますでしょうか。

＞【】部分を【】含め、修正をお願いします。
例：width="【横幅】" → width="750"

これぐらいのサイズに修正するということでしょうか。
お手数をおかけいたしますがご説明をお願いします。

Answer

ECマスターズの伊藤です。

> この時点でサイズはw=320&h=286になると思うのですが（合っていますでしょうか？）

こちらはご認識通りでお間違いございません。


> サイズ調整はどれぐらいの大きさにすれば良いのでしょうか。

サイズについては、ご希望のサイズを
ご指定してくださいとしか、
お伝えすることができません。

と申しますのも、
スマホの画面サイズが多岐に渡るため、
「このサイズがいい」
とお伝えすることができないのです。

iPhoneのみですが、
下記サイトに、各種画面サイズが
記載されていますので、ご参考に御覧ください。
（CSSピクセルを参考にしてください。）
https://www.genz.jp/useful_information/iphone_size_quickreferencematrix/

個人的な意見となりますが、
6s以下はOSアップデートが対応しなくなったため、
こちらは省いて頂いてよろしいかと思います。

また、上記の値を適用するため、
先に案内しておりましたhtmlを
スマホに最適化するため、




↓↓





に変更をお願い致します。

Answer

ありがとうございます。
問題解決できました。
今後ともどうぞよろしくお願いします。