*

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

公開日: : 最終更新日:2019/03/23 CSSやHTML、CGI, ヤフーショッピング・作成講座

この記事は約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」以内に収めて登録するとうまくいくかと思います。


Adsense

関連記事

オリジナルページ

ショップサーブオリジナルページへのカートボタン他

物忘れがひどくなるのは年齢のせい? たま~にHTMLやCGIをいじってページを作るのですが、と

記事を読む

ヤフーデザイン

ヤフーショッピング出店デザインはどうやって作るのか

「無料で簡単に」申し込みができるようになったヤフーショッピングですが、ページ作りをするには技術が必要

記事を読む

たたりなし

CMS・・触らぬ神に祟りなし

「触らぬ神に祟(たたり)なし」とは、『かかわり合いさえしなければ、余計な災いを受けることもない。』の

記事を読む

メールフォームCGI

レスポンシブ対応メールフォームCGIを設置した

ショップサーブのメールフォームが気に入らないので、レスポンシブ対応の無料CGIメールフォーム

記事を読む

自作ショップ常識

自作ショップ構築ファイル構成の考え方

自作構築をする場合、知らないと後で「トンデモない事態」を引き起こしかねないががファイルの構成。(商品

記事を読む

no image

ショップ運営者のHTMLメール作成について

HTMLメールのメルマガが増えてきているのは周知のところです。その流れでネットショップ運営の現場でも

記事を読む

ヤフー出店

ヤフーショッピング出店の傾向と対策

ヤフーストア出店いいと思いますよ。出店無料だし、集客が見込めるし、初めて開店する場所の選択としては正

記事を読む

2019年から

今年2019年からネットショップを始めるなら「ここ」しかない。

何度も書いていますが、ここ2、3年でEC業界は激変しました。ネット通販業界は、もともと変化の

記事を読む

レスポンシブ・ウェブ・サイト

レスポンシブ・ウェブ・サイトの仕組み

もっともレスポンシブ・サイトを作りやすいのは、コンテンツがデータベースに記録されているケースですね。

記事を読む

CGI、PHPフリーのプログラマーの(集客)マーケティング・アイデア

ネットショップを自作する人が超マニアックであるように、レスポンシブ対応の掲示板を探している人

記事を読む

Adsense

Adsense

ワードプレス
サブディレクトリにインストールしたwordpressをルートディレクトリに表示させる方法

今、自作ネットショップをwordpressに移行しようと奮闘

リアルのセミナー
ネット副業希望者にもおすすめ。セミナーはリアルに限る!

ショップサーブに本店サイト、ヤフーショッピングに支店、それ以外

固定費0円。手数料3.6%のみ。オンライン・クレジット決済の新スタンダード

最近、あるASP(ネット通販運営システム)から秘密の?ダイレ

リファラル採用
ECサイトのパート・アルバイト採用は低コストなリファラル採用

リファラル採用(Refarral recruitment)とい

送料を安くする
灯台下暗し!?送料を普通に安くする方法

個人事業主として契約して以来、「安いから」という理由で使い続けてい

→もっと見る

PAGE TOP ↑