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. クニルプスの折りたたみ傘を購入レビュー。父の日のプレゼントにもお…
  2. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載…
  3. Pythonで作成したボットの実行結果をLINEに通知させる備忘…
  4. Pythonの実行結果をGoogleスプレッドシートに出力してみ…
  5. 川沿いの景色 – α6400 – sig…
  6. 合成する時のトーン調整レタッチ
  7. ビックリマン風のキラキラシールをPhotoshopで作成してみる…
  8. table装飾時に持っておきたいベーステンプレートとなるCSS

コメント

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

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

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

CAPTCHA


おすすめ記事

SNOW.雪が降り、晴れて一夜経った朝、表面が少し凍った感じが1番好き。キラキラするんだよね。そこを踏むと中にはサラサラのパウダーが詰まってる。 – フォトレタッチ

投稿コメントSNOW.雪が降り、晴れて一夜経った朝、表面が少し凍った感じが1番好き。キラキラする…

ALLGREEN. – フォトレタッチ

投稿コメントALLGREEN.rezakk399 Instagram…

factory. – フォトレタッチ

投稿コメントfactory.rezakk399 Instagram…

雪のPhotoshop合成レタッチ。本日2/2にMdnからPhotoshop本を出版いたしました。初めての方でもレタッチが楽しめるよう解説した一冊です。電子書籍では試し読みもできます。プロフィールのリンク先を掲載してますので良かったらご覧ください。 – フォトレタッチ

投稿コメント雪のPhotoshop合成レタッチ。本日2/2にMdnからPhotoshop本を出版…

夕焼けシルエット。 – フォトレタッチ

投稿コメント夕焼けシルエット。rezakk399 Instagram…

人気記事

  1. Photoshopの炎フィルターを使って簡単にテキストを炎文字にしてみる。
  2. 黒騎士と白の魔王 序盤攻略 覚えておきたいTIPSまとめ
  3. 超期待の新作!アナザーエデン 時空を超える猫 が本日(4/12)リリース!
  4. 桜-レタッチ – from Instagram
  5. 仮想通貨歴10日間で戸惑った3つのこと

インスタグラム

このエラーメッセージは WordPress の管理者にだけ表示されます
エラー: ユーザー 8694609815 のアカウントに接続できません。

カテゴリー記事一覧

PAGE TOP