yahoo! shoppingの商品ページに、その場で見られる動画を埋め込むウラ技

動画の裏技

この記事は約5分で読むことができます。

動画裏座

裏技!?

ヤフーショッピングの商品ページに動画(youtube)を埋め込んだ場合「外部リンク」になってしまうんですよね。これだけが難点ですね。

で、仕方なく、これまでも「そう」してましたが、「そうせず(外部リンク)」に、その場で動画が見られる方法があったことを発見!

では、そのウラ技とは!

GIFアニメーションです。

と聞いて、わかる方なら「そっか!」で良いと思いますが、よくわからない方のために一応説明。

yahoo! shoppingの商品ページには「画像」を登録できます。で、登録できる画像の形式は「GIFもしくはJPEG形式のみ拡張子は.gif/.jpg/.jpe/.jpegのみ」ということですが、要するに2種類です。

ヤフー画像規定

Jpeg(ジェイペグ)かGIF(ジフ)です。

jpegは聞いたことがあると思いますが、もしかすると、GIFに馴染みがない方も多いかも知れません。簡単に説明すると、Jpegは写真です。静止画です。でも、GIFは写真のような静止画もいけるのですが、アニメーションとしても使えるんです。

これ↓

動画GIFアニメーション

正方形の動画を作って、商品詳細画像のところに追加します。注意点としては、この「なんちゃって動画」は、メインの「商品画像(1枚目)」や「商品詳細画像」以外に「追加画像」も追加できるのですが、大きさの制限(500キロバイト以下)があって、ファイルサイズが大きくなってしまうGIFアニメーションには向いていないです。(500kb以下で作れば使えますが。)

商品詳細画像
参照:https://store.shopping.yahoo.co.jp/dinos/

簡易的に作ったのですが、本格的なものを作る場合は次のステップで作ります。

1.動画を撮影
2.無駄な箇所を極力カットして最短に
3.GIFアニメーションに変換

1.動画を撮影

動画は、「商品の使い方」であったり、「使用中のモデルさんのポーズ」の動画であったり、お店さんそれぞれのアイデアで作ると良いですね。どんな動画にするのか?」ということを事前に計画して撮ります。

2.無駄な箇所を極力カットして最短に

そして撮った動画を動画編集ソフト(Wiondows Movie Makerなど無料ソフトで十分)で開いて、無駄なところを削ぎ落としていきます。30秒以内に収めるのを目安にすると良いです。

動画編集中に注釈(キャプション)なども入れてもOKです。完成したなら動画ファイルとして保存します。(例.wmv)など。これをデスクトップなどに一時的に配置しておきます。

3.GIFアニメーションに変換

このサイトで、作った動画をGIFアニメーションに変換します。

https://ezgif.com/video-to-gif

そして、完成した動画ファイルを以下のサイトでGIFアニメーションに変換します。動画の大きさは2メガまです。上記のサンプル動画は、30秒で、サイズは「480xAUTO」、Frame rate(FPS)は「10(max 30 seconds)、Methodは「FFMPEG]で設定して、1.38M(メガ)です。

追記
上記のように理屈上、商品画像の1枚としてGIFアニメーションが登録できるはずでしたが、なぜかアニメとして表示されないという事態になっています。(「特に禁止」という文言は見当たらないのですが・・・)

結果的には、「追加画像」として500kb以内に収めて登録するとうまくいきます。480kbでは容量オーバーで、440kbで登録できるという、ちょっと不思議な現象がありました。

まとめますが、ヤフーショッピングでGIFアニメーションを使う場合は、「追加画像」として、「450kb」以内に収めて登録するとうまくいくかと思います。