*

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

関連記事

フッター

フッターは「とりあえず」設定で

商品ページで良く見られるエリアは上部なので、下部のフッター部分は、とりあえず必要情報を載せておくだけ

記事を読む

シンメトリー効果

デザインはシンメトリー効果を意識する

シンメトリーとは左右対称や上下左右でつり合っていること。ホームページのレイアウトが崩れていると「この

記事を読む

電話予約

「ご予約はお電話で?」「ご予約のご変更はお電話で?」はっ????

※http://support.biglobe.ne.jp/ask/konzatu.html

記事を読む

ヤフーショッピング自社サイトに埋め込む

自社サイトにヤフーショッピングを埋め込む方法

いくつか考えられるものを。 1つ目は、自社サイト内に商品ページが既にあって、そのページにヤフー

記事を読む

HTML編集

ヤフーショッピングの画像やHTML編集方法

ヤフーショッピングは、ショッピングモールなので、と言うと語弊

記事を読む

カスタマイズ

WEB MART(KentWeb)カスタマイズ

WEB MART CGIの続き。購入は最低限のスッキリ3ステップなので、カスタマイズもしやすく、かつ

記事を読む

no image

まだまだ売れるホームページビルダー20!

「通販サイト作成 ホームページビルダー20」というキーワードでご訪問。 ホームページビルダーっ

記事を読む

認証キー

EC CUBE プラグイン用の認証キーの場所

納期が迫っているのに、ついついサボってEC CUBEでお遊びです。EC CUBEもバージョン3.0に

記事を読む

サーバーエラー

CSV編集CGIがない

放置気味の自作サイトのCSVファイルをウェブ上で編集するためのCGIを探してみたところ、意外にないん

記事を読む

ストアサービス変更

デザイン設定で最初にやっておきたいこと(その1)

「ヤフーショッピングに出店してみた。」ものの、デザインをいじりだすと止まらなくなるのが、もとウェブク

記事を読む

Adsense

Adsense

サポートの品質
サポートの品質で企業の正体がバレてしまう。

ネットショップ1店舗の引っ越し先として検討していた某社。気にな

簡単に取れて稼げる資格
簡単に取れて稼げる資格

税理士の資格を取れば税理士として商売ができるけど独学では難しい

固定費0円
クレジット決済手数料が安い・固定費が無料や安いサービス5選

あっちこっちにネットショップを作っていると大変です。ある通販サ

5つの鉄則
ネットショップ成功の秘訣5つの鉄則

ビジネスとはあまり関連のない教育ジャンルで、とてもいい記事があ

スマホ対応レスポンシブ化
コーポレートサイト(会社ホームページ)のレスポンシブWEBデザイン化で儲ける方法

今ではほとんどの企業やお店がウェブサイトを持っているのは周知の

→もっと見る

PAGE TOP ↑