ECサイト

ヤフオクの商品説明を綺麗に!売上アップのポイント

こんにちは、zakkです。みなさん、ヤフオクって使ったことありますか?zakkは、個人運営のECサイト(楽天・Yahoo・amazon)店長でもあるのですが、ヤフオクにも出品してます。
ヤフオクは大手モールと違い、管理システムなど個人出品では無いに等しいので出品や落札取引などちょっと面倒なのですが、なかなか売上げてくれます。
但し、この売上げもただ普通に出品していただけでは上がらず、しっかりとした見栄えの良いページ作りが必要です。

今日は、ヤフオクで使えるHTMLのテンプレートを紹介します。

ヤフオクの商品説明を綺麗にして売上UPを目指そう!

商品説明ページとは?

商品説明とは、商品の状態や魅力をアピールできる唯一の場所です。ヤフオクでは通常3枚の画像を登録することが可能ですが、商品説明を上手く利用することで、最大10枚までの画像をみせることが可能となります。その為、ヤフオクの商品説明欄は、非常に重要な場所です。
なお、ここではHTMLタグを使用した商品説明を作成いたします。HTMLタグを使用することでより見やすいページを作ることができます。

商品説明ページに画像を貼り付けよう

商品説明ページには画像をレンタルサーバーなどにアップし画像参照することで最大7枚貼り付けることが可能です。その際注意点として、サーバーが画像の直リンクを禁止しているかどうかを確認することが必要です。無料のレンタルサーバーなどは直リンクを禁止しているところが大半ですので、ご注意ください。

画像の参照は、HTMLタグを使用し呼び出すことが表示が可能です。

PCでもスマホでもアプリでも綺麗に表示

ここがポイントです。2016年1月現在ヤフオクは、パソコン・スマホ・アプリと3つの媒体で運用されております。しかしHTML登録フォームは1つしかありませんので、それぞれに最適化した表示にすることは難しく、またパソコンでは使えるタグがアプリでは使えないなど制約もあります。※ヤフーでは使用できるタグが一部公開されてますが全てではありません。


zakkがテンプレートとして使用しているポイントは、3つです。

  1. 画像もテキストBOXも横幅を600ピクセルとする。
  2. 文字は見やすくしっかり余白をとる。
  3. テーブルは1カラム(1行1列)で作る。

まず、600ピクセルに固定する理由は、画像サイズ(容量)を抑える為です。読みこむ容量は極力減らすことが重要ですが、小さすぎるでは魅力が半減してしまうでしょう。また逆に大きすぎると読込に時間がかかるため離脱率が高くなるおそれがあります。パソコンなら気にすることはないでしょうが、ヤフオクはスマホでも同じ商品説明のHTMLを使用しますので、600ピクセルが妥当と考えております。

次に文字・余白について。ヤフオクの使用できるHTMLタグには制限があり、またCSSなどは使用できません。その為、昔ながらのtableタグを上手く使い配置します。

最後にテーブルの行列数について。最初パソコンを基点に作った時、2カラム(〇行2列)にしたのですが、スマホで閲覧すると非常に見づらくなったため、zakkは1カラムを推奨します。

HTML

それでは、ヤフオクのテンプレート備忘録です。
※追記:ヤフオク!常時SSL(AOSSL)対応にともない、外部画像の格納・参照先はhttpsから始まるサーバーにしましょう。

centerタグでコンテンツを中央寄せにし各TDタグにalign=”left”を指定し左寄せにします。CSSは使用できませんので、tableには背景色を設け、cellspacing=”1″でボーダーを表現。cellpadding=”10″で各セルの余白を指定し可読性を高めます。

参考イメージ

下記がイメージとなります。画像は7枚まで設置できます。横幅を固定することで、パソコンでもスマホでも遜色なく閲覧可能です。


商品タイトル
商品説明
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
配送方法
定型外郵便 / ヤマト運輸 / 佐川急便
備考
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

最後に

画像の横幅とテーブル幅に相違がある場合、パソコンとスマホのブラウザでは、centerタグが効くので問題無いのですが、アプリではcenterが機能せず、左寄せになります。その場合横幅が大きい方がコンテンツ幅の基準となります。見た目てきにも崩れてるのが分かるので、画像とテーブルの幅は統一しましょう。

商品説明はHTMLタグ制限や編集がややこしい為、作り込んでいる人はあまりいません。そのため綺麗に商品ページを作ってあげれば、効果は出てきやすいと思います。

こんな記事で恐縮ですが、どなたかの役に立てれば幸いです。

 

lifezakk

lifezakk

投稿者の記事一覧

フリーランスのWEBデザイナー。日々WEB制作で気になるHtml CSS Photoshop illustrator アプリの備忘録をつけてます。#OVERHIT や #ホウチ帝国 にハマってます★

関連記事

  1. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載…
  2. マーケティングオートメーションの「Mautic」導入について
  3. YoutubeやUstreamの埋め込み動画をスマホ向けにレスポ…
  4. クニルプスの折りたたみ傘を購入レビュー。父の日のプレゼントにもお…
  5. Pythonの実行結果をGoogleスプレッドシートに出力してみ…
  6. WordPressの悩み相談「目次を中央寄せにしたい」を解決。
  7. table装飾時に持っておきたいベーステンプレートとなるCSS
  8. ビックリマン風のキラキラシールをPhotoshopで作成してみる…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

おすすめ記事

OVERHIT GvG「栄光の戦域」攻略のポイントを理解する。

GvGが実装され2日目、初日は偵察によるポイントが勝利ポイントに加算されるなど不具合がありましたね。…

簡単に美しいマーブル模様をPhotoshop CCで作成する方法

マーブル模様を簡単に作成する方法です。使用するのはPhotoshop CC。CCじゃなくてもいけるか…

WordPressの悩み相談「目次を中央寄せにしたい」を解決。

ひと昔はアメブロのカスタム相談が多かったですが、最近はWordPress(ワードプレス)に移行してい…

マーケティングオートメーションの「Mautic」導入について

マーケティングオートメーションの「Mautic」について、自社サーバーを利用したネットショップに導入…

OVERHIT(オーバーヒット) 「震天の神域 風の龍 ファフニール」が10月18日(木)START

前回の討伐戦の風BOSSは、「アラクネス」でしたが、今回は「震天の神域 風の龍 ファフニール」です。…

人気記事

  1. 城ドラ チビクロプス登場!4コス2体召喚可能!
  2. 城ドラ ヴァルキリーを30装備(レアアバター込み)まで育てて使った感想。
  3. 城ドラ 7コストの「ブルードラゴン」登場。気になるスキルなどまとめ。
  4. OVERHIT(オーバーヒット) 9/1から始まる新イベ!震天の神域「火の龍 イグニス」新装備「グリモア」が手に入る!?
  5. YoutubeやUstreamの埋め込み動画をスマホ向けにレスポンシブ対応させてみよう。

インスタグラム

カテゴリー記事一覧

PAGE TOP