stickyimage

Menu

【eBay輸出】アクティブコンテンツ禁止に対する12の準備


“In mid-2017 eBay will begin to turn off active content. Make sure your item looks good with active content turned off by previewing it now.”

現在、上記のようなメッセージがあなたの出品ページにも表示されていると思います。

eBayは昨年、2017年6月から商品説明ページのすべてのアクティブコンテンツを禁止すると発表しました。

残り3ヶ月を切りましたが、あなたは既に対策済みでしょうか?

今回は、アクティブコンテンツの代替となる方法のご紹介など、アクティブコンテンツ禁止に向けてやるべきことに12の項目についてお話していきます。

 

目次

アクティブコンテンツ禁止の概要
1.クロスプロモーション
2.リンクに「target=”_blank”」を設定
3.ニュースレター、クーポン、割引の実装
4.eBayストア内検索の実装
5.カスタムタブの作成
6.イメージギャラリーの使用
7.HTMLコードを使って動画を埋め込む
8.配送料の指定
9.アナリティクスの実装
10.互換部品の指定
11.レスポンシブル対応
12.ページ訪問者カウンタの使用
まとめ

(クリックすると各見出しへジャンプできます)

 

アクティブコンテンツ禁止の概要

2017年6月以降、商品説明ページでアクティブコンテンツの利用ができなくなります。

アクティブコンテンツとは、

・JavaScript
・Flash
・plug-in
・アニメーション
・フォーム

などです。

禁止される理由は、モバイル機器を利用した際に正常に表示されなかったり、ロード時間が長くなってしまったりと、バイヤーにとって購入の妨げとなるだけでなく、セキュリティ上の脆弱性も伴うため、マイナスの影響が大きいからです。

これらを改善するために、2017年6月以降、商品ページですべてのアクティブコンテンツが段階的に制限されていきます。

制限後は、アクティブコンテンツを含む商品ページは意図したように表示されず、販売活動に支障が出る可能性があります。

また、eBayは「2017年秋期セラー・アップデートまでには、アクティブコンテンツを使用した出品を削除またはブロックする予定です。」と発表しています。

つまり、今まで商品ページにアクティブコンテンツを使用していた場合、今後も対策をせずに販売を行ってしまうと、以下のような支障をきたします。

1.新規出品のブロックまたは削除
2.更新していないGTC(Good ‘Til Cancelled)出品のブロックまたは削除

アクティブコンテンツの禁止は、何も悪いことばかりではありません。

セラーにとって、以下のメリットがあります。

●ロード時間の短縮
●モバイル上で術のコンテンツが表示可能
●よりセキュリティの高い環境
●検索エンジン上の検索結果に反映されやすくなる

これによりバイヤーは出品商品が見えやすくなり、購入に至る可能性が高まります。

これから出品する商品に関してはアクティブコンテンツを使用するのをやめ、現行の商品リストからもアクティブコンテンツを削除し、代替手段に置き換えるなどの対策をしっかりして行きましょう。

それでは次章から、アクティブコンテンツの代替となる方法についてご紹介していきます。

 

1.クロスプロモーション

eBayストア契約者であれば、Promotions Managerを使用して関連商品を販売することをオススメします。

Promotions Managerを使用すると、以下のように表示されます。

あなたが出品している商品は他のセラーも出品していますが、この機能を使うことで競合相手よりも目立つことができるようになります。

また、バイヤーが関連商品を見ることで、あなたのストアへのトラフィックを増やすことができ、一度の訪問で複数購入してもらうことに繋がります。

Promotions Managerについてはこちらの記事を参考にして下さい。
【eBay輸出】Promotions Managerでモバイルユーザーを獲得して売上を拡大しよう!

 

2.リンクに「target=”_blank”」を設定

eBayのリンクポリシーに準拠しているURLは許可されます。

あなたの商品説明にURLが含まれている場合、それらがポリシーに正しく準拠しているかどうか確認して下さい。

具体的には、リンク定義にtarget属性が含まれていることを確認します。

target属性は、リンクされたドキュメントを開く場所を指定するものです。

6月以降、リンクには「target=”_blank」属性を追加して、新しいタブまたはウィンドウで開くように設定する必要があります。

この設定をしない場合、リンクが正常に開かない可能性があります。

この設定をしても、サンドボックのフラグは強制適用されません。

リンク定義の例は次の通りです。

<a href="http://www.ebay.com" target="_blank">eBayにアクセス</a>

 

3.ニュースレター、クーポン、割引の実装

ニュースレター、クーポン、割引、セールスイベントは、バイヤーを引きつけること、そして維持するための効果的なツールです。

ここでは、さらに効果的に使用するためのヒントを紹介します。

バイヤーにニュースレターを購読させたい場合は、Listing FrameでeBayストアへのリンクを含めます。

この機能は2017年初頭に更新されます。

クーポンや割引の提供を検討している場合は、Promotions Managerを利用して下さい。

Promotions Managerについてはこちらの記事を参考にして下さい。
【eBay輸出】Promotions Managerでモバイルユーザーを獲得して売上を拡大しよう!

※Promotions Managerを利用するためには、eBayストアの購読が必要です。

 

4.eBayストア内検索の実装

商品説明セクションに検索ボックスを含めることで、バイヤーは簡単にあなたのストア内商品を検索することができるようになります。

ストア内検索を利用するためには、Listing Frameを有効にします。

Listing Frameはストア内検索だけでなく、カテゴリーリンク、ニュースレター購読の提供、ストアロゴの表示など、様々な機能が利用可能になります。

Listing Frameは2017年初頭に更新されます。

 

5.カスタムタブの作成

カスタムタブを作成する代わりに標準のeBayリスティング項目を使用すると、すべてのデバイスで最も完全で最適なリスティングの作成が可能です。

対応する項目に情報を入力します。

・商品説明(Description)
・配送方法(Shipping)
・支払方法(Payment)
・返品ポリシー(Returns)

カスタムタブ付スペースを作成する必要がある場合は、HTMLとCSSのみを使用して作成して下さい。

以下に4つのタブ付スペースを作成するためのサンプルコードを記載します。

このコードをそのまま商品説明に貼り付けるだけで使用可能です。

<! -- HTMLコード -->

<main>
  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">Tab 1</label>
  <input id="tab2" type="radio" name="tabs">
  <label for="tab2">Tab 2</label>
  <input id="tab3" type="radio" name="tabs">
  <label for="tab3">Tab 3</label>
  <input id="tab4" type="radio" name="tabs">
  <label for="tab4">Tab 4</label>
  <section id="content1">
	Tab 1 Content
  </section>
  <section id="content2">
	Tab 2 Content
  </section>
  <section id="content3">
	Tab 3 Content
  </section>
  <section id="content4">
	Tab 4 Content
  </section>
</main>


<! -- CSSコード -->

main {
  min-width: 320px;
  max-width: 400px;
  padding: 50px;
  margin: 0 auto;
  background: #fff;
}
section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #ddd;
}
input {
  display: none;
}

label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #bbb;
  border: 1px solid transparent;
}

label:hover {
  color: #888;
  cursor: pointer;
}

input:checked + label {
  color: #555;
  border: 1px solid #ddd;
  border-top: 2px solid orange;
  border-bottom: 1px solid #fff;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  display: block;
}

@media screen and (max-width: 650px) {
  label {
	font-size: 0;
  }
  label:before {
	margin: 0;
	font-size: 18px;
  }
}

@media screen and (max-width: 400px) {
  label {
	padding: 15px;
  }
}

 

サンプルコードの実際の表示は以下のようになります。

各タブのラベル名はlabelタグの間のテキストを編集することで設定できます。

例えば、「Tab1」に「Description」と表示させたい場合は、以下のように変更します。

<label for="tab1">Tab 1</label>
↓
<label for="tab1">Description</label>

 

各タブ以下のコンテンツは、sectionタグの間に入力します。

タブの寸法、テキストのフォントサイズ、色、動作、その他の見た目の要素はCSSによって設定します。

 

6.イメージギャラリーの使用

商品ページにインパクトのある写真を掲載することで、特にモバイル端末でのユーザーエクスペリエンスを向上させることができます。

イメージギャラリー機能を使用して、最大12枚の写真を自由に掲載することができます。

写真はコンバージョンの向上に繋がります。

さらにもう1つ便利な機能として、バイヤーは写真を拡大することができますが、こちらもコンバージョンの促進に役立ちます。

以下、モバイルのギャラリーの例です。

また、独自のギャラリーを作成することはオススメしません。

以下の例のようなカスタムギャラリーを作成すると、モバイルユーザーはそれを見ることができません。

バイヤーの50%以上がモバイルを使用しているため、これをしてしまうとかえってマイナスになります。

さらに、カスタムギャラリーはページの読み込みに時間がかかるのも良くない点です。

もしどうしても利用したい場合は、推奨されてはいませんが、商品説明欄にHTMLとCSSを使ってイメージカルーセルを作成します。

以下はカルーセル作成のサンプルコードの一例です。

<!-- HTMLコード -->

<header>
<div><img src="http://ir.ebaystatic.com/pictures/aw/pics/s.gif" alt></div>
<div><img src="http://ir.ebaystatic.com/pictures/aw/pics/s.gif" alt></div>
<div><img src="http://ir.ebaystatic.com/pictures/aw/pics/s.gif" alt></div>
<div><img src="http://ir.ebaystatic.com/pictures/aw/pics/s.gif" alt></div>
<div><img src="http://ir.ebaystatic.com/pictures/aw/pics/s.gif" alt></div>
</header>

<!-- CSSコード -->

body { margin: 0; background: #333; }
header {
  padding: .5rem;
  font-size: 0;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  display: -webkit-box;
  display: flex;
}
header div {
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto;
  margin: .5rem;

}
header div img {
  width: 100%;
  height: auto;
  border: 1px solid #fff;
}
@media screen and (max-width: 400px) {
  header div { margin: 0; }
  header { padding: 0; }

}

 

こちらのコードを商品説明に貼り付けると、以下の画像のような表示になります。

時計の写真はサンプルコードには入っていませんので、使用する際には上記のdivタグの間にイメージファイルのパスを記載して下さい。

カスタムイメージギャラリーは推奨されていませんが、商品のストーリや背景を伝える写真を掲載することは理にかなっています。

しかし、リストテンプレートに組み込まれている標準のイメージギャラリーを使用して画像を載せる方が良いでしょう。

 

7.HTMLコードを使って動画を埋め込む

以下のHTMLコードを使用することで、商品説明に動画を載せることができます。

<video width="320" height="240">
	  <source src="movie.mp4" type="video/mp4">
	  <p>Here is a video of the product</p>
	</video>

 

動画サイトの中にはHTML5を完全にサポートしていないものもありますが、2017年前半には有名サイトは解決策を提示しています。

ビデオを掲載するする前に、ビデオの制限の詳細についてeBayのリンクポリシーをしっかり理解して準拠するようにしましょう。

リンクポリシーに反する場合、動画の埋め込みは避けて下さい。

 

8.配送料の指定

eBayが推奨する最善の方法は、検索時および購入時にバイヤーに明確な配送料を提示することです。

定額料金を提示出来ない場合は、標準的な配送オプションを利用します。

バイヤーが見積もりを立てたり、自社配送の手配をするのに役立ちます。

 

9.アナリティクスの実装

eBayセラー・ハブ関連のAPIが利用可能になったことで、リスト分析のためにJavaScriptコードを埋め込む必要がなくなりました。

セラー・ハブの詳細についてはこちらをご覧下さい。
Growing your business on eBay

 

10.互換部品の指定

カー部品を販売する場合、Parts Compatibility機能を使うことで、互換性のある車に部品をマッチングすることができるようになります。

もしこの機能を使っても情報が不完全な場合には、シンプルなHTMLテーブルを埋め込むことで、完全な情報を提供することができます。

詳細については以下をご覧ください。
Selling parts that fit specific vehicles

 

11.レスポンシブル対応

さまざまなデバイスやブラウザで幅広くユーザーフレンドリーな描画を実現するレスポンシブルデザインで、商品ページを最適化することができます。

商品説明欄にHTMLとCSSを使用することで、ブラウザやデザイスの種類を検出して、ユーザーの見やすいコンテンツを提供できます。

以下、サンプルコードです。

<!-- HTML code -->

<div id="pagewrap">

  <header>
	<h1>3 Column Responsive Layout</h1>
  </header>

  <section id="content">
	<h2>Column 1</h2>
  </section>

  <section id="middle">
	<h2>Column 2</h2>

  </section>

  <aside id="sidebar">
	<h2>Column 3</h2>

  </aside>

  <footer>
	<h4>Footer</h4>
	<p>Footer text</p>
  </footer>

</div>


<!-- CSS -->

#pagewrap {
  padding: 5px;
  width: 960px;
  margin: 20px auto;
}

header {
  height: 100px;
  padding: 0 15px;
}

#content {
  width: 290px;
  float: left;
  padding: 5px 15px;
}

#middle {
  width: 294px;
  float: left;
  padding: 5px 15px;
  margin: 0px 5px 5px 5px;
}

#sidebar {
  width: 270px;
  padding: 5px 15px;
  float: left;
}

footer {
  clear: both;
  padding: 0 15px;
}


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/


/* for 980px or less */

@media screen and (max-width: 980px) {
  #pagewrap {
	width: 94%;
  }
  #content {
	width: 41%;
	padding: 1% 4%;
  }
  #middle {
	width: 41%;
	padding: 1% 4%;
	margin: 0px 0px 5px 5px;
	float: right;
  }
  #sidebar {
	clear: both;
	padding: 1% 4%;
	width: auto;
	float: none;
  }
  header,
  footer {
	padding: 1% 4%;
  }
}


/* for 700px or less */

@media screen and (max-width: 600px) {
  #content {
	width: auto;
	float: none;
  }
  #middle {
	width: auto;
	float: none;
	margin-left: 0px;
  }
  #sidebar {
	width: auto;
	float: none;
  }
}


/* for 480px or less */

@media screen and (max-width: 480px) {
  header {
	height: auto;
  }
  h1 {
	font-size: 2em;
  }
  #sidebar {
	display: none;
  }
}

#content {
  background: #f8f8f8;
}

#sidebar {
  background: #f0efef;
}

header,
#content,
#middle,
#sidebar {
  margin-bottom: 5px;
}

#pagewrap,
header,
#content,
#middle,
#sidebar,
footer {
  border: solid 1px #ccc;
}

 

このサンプルコードを使用すると、以下のように表示されます。

Media Queriesセクションにあるように、列幅、フォントサイズ、その他のページ属性は、ページをレンダリングしている画面のサイズに基いて調整されます。

 

12.ページ訪問者カウンタの使用

リスティングに訪問カウンターを設置するのは効果的です。

訪問カウンターを設置すると、以下のように表示されます。

 

まとめ

かなりのボリュームになりましたが、まだ移行までには時間があります。

焦らず、ひとつずつ確認して対応していきましょう。

また、出品ツールを利用することで、これらの手間省くことも有効な手段です。

シンプルでユーザーが見やすい商品ページを簡単に作成でき、さらに出品効率を大幅にあげるためには、以下のツールが便利です。
一括出品ツールNijuyon

 


The following two tabs change content below.

エグゼクティブクラブ編集部

eBay、Amazon輸出など、海外販売の最新情報をどこよりも早く発信していきます。
 
【エグゼクティブクラブ】
2007年7月創設。9年以上に及ぶ実績を元に多数の成功者を輩出。14,000件以上に及ぶメール相談実績、2,700有余名以上の歴代会員サポート実績、 マニュアル・コンテンツ総数3300ページ以上、10名以上の講師陣によるサポート体制。業界最大級の海外販売・個人輸出の会として現在も成長を続けている。
3年 ago by in eBay. You can follow any responses to this entry through the | RSS feed. You can leave a response, or trackback from your own site.

About

eBay、Amazon輸出など、海外販売の最新情報をどこよりも早く発信していきます。
 
【エグゼクティブクラブ】
2007年7月創設。9年以上に及ぶ実績を元に多数の成功者を輩出。14,000件以上に及ぶメール相談実績、2,700有余名以上の歴代会員サポート実績、 マニュアル・コンテンツ総数3300ページ以上、10名以上の講師陣によるサポート体制。業界最大級の海外販売・個人輸出の会として現在も成長を続けている。

Copyright ©2019 海外販売をしよう! All Rights Reserved