ebay輸出のブログ / File exchangeの使い方 / 海外ブログ / 海外ネットショップ作り

最新 ebay テンプレートを公開するよ。スマホ対応だよ 2016 ver.1

      2016/11/18

【6月18日:コード内容修正しています】

【8月7日:このテンプレートは、Android 4 系 などで見ると意図した動きにならないようです。比較的新しい端末使ってそうなお客さんがいる方におススメします。】

ココで紹介してるのはVer.1だけど、Ver.2のテンプレートも公開してます。Ver.2の方がおススメです


Templates

スマホ対応の ebay テンプレート 作ったので公開するよ!シンプルな中身なので誰でも使えます。

テーマは「誰でも改造できる ebay テンプレート

書き方を2016年の最新内容にし、かつebayの求めるスマホ対応としたので今風になってると思う。もちろん最新ポリシーにも対応済み。良く言ってベーシックなタイプかと。

機能面と使い方を併せて紹介します。ではでは、まずはデザインについて

スポンサーリンク

こんなテンプレートです

パソコンからebayのDescription を見た際、このように表示されます

bvb-temp-s

あれ?と思った方も多いと思いますが、デザインのベースは日本人セラーの多くが使用中の「reproport.com」さんで公開されているHTML。reproportさんのテンプレートは2009年に作られたもので、スマホ対応しておらず内容が古いです。

そこで、多くの人が取っつき易いよう見た目はそのままで、中身をebayに対応した最新タイプに改造してます。特徴は以下の通り

大きな特徴は3つ

  1. タブレットで見ると、画像表示がなくなる
  2. スマホで見ると、ebayルールに沿った商品説明だけになる
  3. 改造が比較的簡単

それぞれの詳細

1.タブレットで画像表示がなくなる

タブレットから出品ページを見た際に画像表示がなくなります。イメージですがタブレットからだとこんな表示になります。

bvb-temp-t

まあ、この機能はさして重要ではないです。続いてスマホ

2.スマホで見ると商品説明だけになる

ここメイン機能です。まずスマホでItem Descriptionを見た場合このようになります。※イメージ

bvb-temp-smart

パソコンで見た時の商品説明部分だけが表示される仕組みです。bvb-temp-s-2赤い枠の部分だけがスマホで表示されます。

さらにスマホから商品を見て、Item specificsなどが並んでいる画面では「商品説明(赤枠)で書いた所から大事なところを250文字抜粋して表示」されるようになります。

これはebay最新ルールに基づいた設計

2016年春期セラーアップデートで、ebayのモバイル向け商品説明の最適化についてルールが設けられました。

モバイル向け商品説明の最適化(US, UK, DE, AU)

ざっと要約すると

今後はJavaScriptなどのアクティブコンテンツは出品の削除やブロックの対象となっていくルールで、Description内は最大800文字のテキストが推奨され、その中から250文字までを自動的に抽出してモバイル表示される仕組みとなります。

ポイントは、自動的に抽出される内容をHTMLで指定することもできる仕組みです。

このテンプレートではスマホの対応をJavaScriptを使わずにCSSで制御しています。さらに自動抽出される内容をこちら側でコントロールできるようHTMLで操作しています。

つまるところ、商品説明しっかり書けば売れるよ!ってことです。

重要なキーワードを商品説明に含めることでより検索に引っかかるし、バイヤーの視認性が上がって販売促進につながる可能性が高まるテンプレートです。

※メディアクエリ使ってるだけなので、iPhone 6 Plus より小さい物をスマホと定義してるだけの話

3.改造が比較的簡単にできる

今後のポリシーアップデートに備えて改造ができるよう作っています。ですので現時点での最適化だとお考えください。

簡単な改造例 1.テーマカラー(現在は黄色)の変更

change-color※黄色を紫に変更したイメージ

ebayテンプレートの色変更する方法はこちら

2.スマホの表示方法を変更

スマホ画面で、商品説明にプラスして「International buyers」も表示させたい時のイメージ
smart

スマホで見た時の表示方法を変更したい場合はこちら

改造方法については随時更新していきます。

メインの機能は以上です。続いて実際の中身について

中身(HTML)はこちら

【6月18日:67行目の一部を修正しています。不必要なpタグを除外しました。】

これを全部コピーして使います。あなたが変更する場所は62行目から下ぐらいです。使い方を次の項目で紹介します

実際にebayでHTMLテンプレートを使う方法

紹介したテンプレートを実際にebayの出品ページで使っていきます。まずは、出品ページのItem descriptionまで行き、HTMLタブをクリック

listing01

HTMLをクリックしたら、先ほどコピーしたテンプレートの中身を貼り付けます。

listing-02こんな感じ。

あとは、HTMLタブからStandard タブに切り替えて、必要な所を出品する商品に沿って書き換えるだけの作業です。

listing-03赤枠のタブ切り替えした後に
緑枠の部分を任意の情報へ変更ください。

文字の編集方法は以上です。あとは中身にすでに入っている画像の編集が必要です。

画像のURLを変更する方法

tempテンプレートにはすでにこのbvb-arigato画像が入ってます。このままだと出品できないので、画像のURL変更を行います。

ちなみに Descriptionページに画像を組み込むことをebayは推奨していません商品ページに画像は必要ないって方は、Standard タブ上で画像を選択して削除してください。もしくはテンプレート中身(HTML)の63行目から65行目を削除してください。それでオッケーです。

画像掲載するよって方

商品ページに画像掲載する方は、HTMLタブからURLの変更をしていきます。変更するのは64行目の”<img src “から始まる部分です。

まずは商品画像のURLをご用意ください。自身で用意されたサーバーにアップした画像や、photobucketにアップした画像でよろしいかと思われます。

あとは、64行目のURLを書き換えるだけ

<img src=”http://bvb-arigato.com/wp/wp-content/uploads/2016/06/bvb-temp.png” width=”640px”>

<img src=”任意のURL” width=”640px”>

はい、以上です。

出品ページに画像を複数掲載したい方は、複数タグを記入したらOKです。

<span class=”dec_img”>
<img src=”任意のURL” width=”640px”>
<img src=”任意のURL2” width=”640px”>
<img src=”任意のURL3” width=”640px”>
<img src=”任意のURL4” width=”640px”>
</span>

こんな感じになってればオッケー。

テンプレートの使い方は以上になります。

まとめ

いかがでしょうか。このテンプレートを使用した所で見た目の差別化にはつながりませんが、内容の差別化になります

reproportさんのテンプレートを使用されている方であれば、すんなり導入できると思いますので、よかったら使ってみてくださいね。

販売促進の為にもちゃんと使ってほしいので意味不明な所があれば、問い合わせよりご連絡ください。

>> 出品画面でテンプレートを10個使い分ける方法はこちら

無料のebayテンプレート集をまとめました

テンプレートが増えてきたので、サイトで紹介してるebayテンプレートをまとめました。次のバナーからどうぞ

The following two tabs change content below.
海外行ったことないし英語もできないけど海外オークション ebay をエンジョイしてます。ebay 楽しいので、みんな始めたら良いと思ってる。続いてる理由のすべてがこのブログの中にあるよ。

 - ebay テンプレート, ebay 輸出