ECサイト

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

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

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

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

商品説明ページとは?

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

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

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

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

<img src="http://〇〇〇.com/〇〇〇.jpg" />

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>
  <img src="https://〇〇〇.com/img.jpg" width="600"><br />
  <img src="https://〇〇〇.com/img.jpg" width="600"><br />
  <img src="https://〇〇〇.com/img.jpg" width="600"><br />
  <img src="https://〇〇〇.com/img.jpg" width="600"><br />
  <img src="https://〇〇〇.com/img.jpg" width="600"><br />
  <img src="https://〇〇〇.com/img.jpg" width="600"><br />
  <img src="https://〇〇〇.com/img.jpg" width="600"><br /><br />
  <table width="600" border="0" cellspacing="1" cellpadding="10" bgcolor="#c0c0c0">
    <tbody>
      <tr>
        <th bgcolor="#2678b7" align="center"> <font color="#FFFFFF">商品タイトル</font> </th>
      </tr>

      <tr>
        <th bgcolor="#ddedff" align="center"> <font color="#222222">商品説明</font> </th>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" align="left">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
      </tr>
      <tr>
        <th bgcolor="#ddedff" align="center"><font color="#222222">配送方法</font></th>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" align="left">定型外郵便 / ヤマト運輸 / 佐川急便</td>
      </tr>
      <tr>
        <th bgcolor="#ddedff" align="center"><font color="#222222">備考</font></th>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" align="left">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
      </tr>
    </tbody>
  </table>
</center>

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

参考イメージ

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


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

最後に

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

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

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

 

lifezakk

lifezakk

投稿者の記事一覧

フリーランスのWEBデザイナー。日々WEB制作で気になるHtml CSS Photoshop illustrator や好きなアプリの備忘録をつけてます。カメラはレタッチで使う素材撮りや趣味レベルでやっています。

関連記事

  1. Amazon Prime Now(プライム ナウ) で2Lのお茶…
  2. Pythonで作成したボットの実行結果をLINEに通知させる備忘…
  3. CSSグリッドレイアウトについて。flexboxより使いやすいが…
  4. WordPressの悩み相談「目次を中央寄せにしたい」を解決。
  5. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載…
  6. マジックアワー α6400 – sigma 30mm f1.4
  7. クニルプスの折りたたみ傘を購入レビュー。父の日のプレゼントにもお…
  8. LINEで郵便局の荷物追跡や再配達ができる!?

コメント

  1. アバター
    • 通りすがり
    • 2020年 6月 12日

    とてもわかり易く、素人からみても良く出来ておる説明と全体構成だと思いました
    大事に使わせていただきます、有難うございました。

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

おすすめ記事

雪山フォト – フォトレタッチ

投稿コメント雪山フォトrezakk399 Instagram…

ずっと苦手なイメージ持ってた3D。使ってみると思ったより簡単で、プロっぽく制作できる便利な超高機能。 – フォトレタッチ

投稿コメントずっと苦手なイメージ持ってた3D。使ってみると思ったより簡単で、プロっぽく制作できる…

多重露光 アート風のレタッチ。人物と風景のバランスが難しい、簡単に出来るかなと思ったけど結構時間を使った。ただ、面白い。 – フォトレタッチ

投稿コメント多重露光 アート風のレタッチ。人物と風景のバランスが難しい、簡単に出来るかなと思った…

秋探し。十月桜は咲き始めかな?紅葉はもう少し先だね、気温が一気に下がれば色づきも期待。 – フォトレタッチ

投稿コメント秋探し。十月桜は咲き始めかな?紅葉はもう少し先だね、気温が一気に下がれば色づきも期待…

Photoshopの「空の置き換え」について、どれだけラクになるか体感。私がよく使う現在の手順はコレ①選択範囲を作成②「選択とマスク」で微調整しマスク③空の画像を配置④色調補正「カラーの適用」でトーン調整これがワンタッチに。トーン調整が付いてるのがヤバイ。進化がはやいなぁ、sensei。 – フォトレタッチ

投稿コメントPhotoshopの「空の置き換え」について、どれだけラクになるか体感。私がよく使う…

人気記事

  1. Pythonの実行結果をGoogleスプレッドシートに出力してみた。グラフ表示も簡単。
  2. OVERHIT(オーバーヒット) ギルド対抗戦 2日目 ランキングに変動順位も追加。
  3. アプリ配信開始!サッカーRPG「サッカースピリッツ」
  4. 平昌オリンピックを200%楽しむ民放公式アプリ「gorin.jp」LIVE配信も視聴できる!
  5. 城ドラ10月の新キャラ雪ん子登場!スキルやステータスまとめ。

インスタグラム

This error message is only visible to WordPress admins

Error: There is no connected account for the user 8694609815 Feed will not update.

カテゴリー記事一覧

PAGE TOP