ヤフオクで月に何件か出品している人なら、一度はこう思ったことがあるはずです。
「この画面、出品作業をするだけにしてはやけに賑やかだな」
ページを開いた瞬間に被さる「はじめて・ひさしぶり出品1,500円相当」のモーダル。スクロールするとどこかしらに置かれているPayPay関連のバナー。配送方法を埋め尽くすおてがる配送の対応サービス一覧。商品情報を入力し終えたあたりに突然現れる注目のオークションと あなたへのおすすめコレクション (どちらも有料)。さらに下に売上金オートチャージ設定の案内。
入力フィールドそのものよりも、付随する要素のほうが画面に占める面積が大きいのではないかと感じます。
そこで、Chrome拡張機能AucKitの編集モードを使い、ヤフオクの出品フォームから「自分は使わない」と判断した要素をひとつずつ剥がしてみました。同一ページ内で17件の要素を非表示にできた状態で残ったのは、出品作業に必要な入力フィールドだけで構成された、シンプルな画面でした。
この記事はその検証記録です。
ヤフオク標準の出品フォームに置かれている要素
まず、ヤフオク標準の出品フォームを開いたときに、画面に何が並んでいるかを上から下まで列挙します。
入力フォームそのものの要素は次のとおりです。
- 画像アップロード
- 商品名
- カテゴリ
- 商品の状態
- 説明
- 個数
- 発送元の地域
- 送料負担
- 配送方法 (配送会社+サービス)
- 支払いから発送までの日数
- 販売形式 (オークション/フリマ)
- 開始価格/即決価格
- 終了する日時/自動再出品
これらが「出品に必要な情報を埋める」項目です。一方、入力作業とは別軸の要素も同じ画面に同居しています。
| 種別 | 要素 | Yahoo!側の説明 |
|---|---|---|
| ① モーダル | はじめて・ひさしぶり出品1,500円相当PayPayポイント | 新規・休眠の出品者向けキャンペーン |
| ② バナー | 売れるとBONUS /落札システム利用料50% / PayPayポイント | 期間限定の優遇案内 |
| ③ 配送方法のブロック | おてがる配送 (ヤマト運輸・日本郵便) | 配送サービスの提案 |
| ④ 終了日時上部のバナー | 期間限定落札システム利用料50%案内 | 期間限定の優遇案内 |
| ⑤ 商品のアピール (有料) | 注目のオークション | 「商品をリストの上位に表示して目立たせよう」 |
| ⑥ 商品のアピール (有料) | あなたへのおすすめコレクション | 「興味のありそうな利用者のマイオクなどに商品を表示できます」 |
| ⑦ 出品者情報セクション | 売上金オートチャージ設定にする | 「売上金がPayPay残高にチャージされます」 |
| ⑧ ※注記 | スニーカーダンクに掲載する場合の条件など | 別サービスへの誘導 |
各要素は、Yahoo!のビジネス上の目的から見れば説明可能です。新規・休眠の出品者を取り込み、決済シェアを広げ、有料オプションの認知を広げ、配送サービスのパートナー導線を作り、別サービス (スニーカーダンク)への送客を増やす。プラットフォーム側の合理性は確かにあります。
ただ、それらの目的と出品作業の動線は、必ずしも揃いません。
「Yahoo!側が見せたいもの」と「出品者が入力したいもの」のズレ
出品フォームには、2種類の主導権がせめぎ合っています。
- Yahoo!側が見せたいもの: キャンペーンの認知、有料オプションの認知、決済導線、パートナーサービスへの誘導 ── いずれも、プラットフォームの収益と利用促進に繋がる要素
- 出品者が入力したいもの: タイトル/カテゴリ/商品状態/説明/価格/発送設定 ── 出品を成立させるために必要な項目
両方を同じ画面に並べる限り、出品者はスクロールのたびに「これは自分の作業に関係ある要素か、関係ない要素か」を判定しながら画面を進むことになります。1件の出品ならわずかな認知負荷ですが、月に何十件、何百件と繰り返すと、この判定コストは無視できません。
編集モードで消す ── 17件の内訳
AucKitの編集モードでは、ヤフオクの各ページで「消したい要素」を直接クリックして非表示にできます。編集モードをオンにすると、ページ上の要素にホバー時のハイライトが出て、クリックで非表示リストに追加できるようになります。
非表示設定はその場で保存されるので、次回フォームを開いたときには最初から消えた状態になります。
今回の検証では、ヤフオクの出品フォーム1ページ内で17件の要素を非表示にしました。内訳は、上で挙げた ①〜⑧ の要素+それぞれの注記や見出し、計17件です。
説明欄の上に「出品テンプレート挿入ツール」を置く
出品フォームで一番時間がかかる項目のひとつが商品説明の欄です。AucKitは説明欄の上に、HTMLテンプレートを呼び出すツールバーを置けます。
- 商品説明テンプレート (ジャンル別の表組みHTMLを複数種類同梱)
- 送料表 (配送会社ごとの料金表HTML)
- 営業日カレンダー (発送可能日のHTML)
- 画像編集 (複数写真の結合・サムネ作成)
ボタンをクリックするとモーダルが開き、テンプレを編集してから「出品フォームに挿入」を押すと、説明欄にそのままHTMLが入ります。説明欄を毎回ゼロから書く運用から、テンプレで下書きを作って項目だけ差し替える運用に切り替わります。
説明欄まわりが整うと、出品フォーム全体の中で残る入力負担は、画像のドラッグ&ドロップ・タイトル・カテゴリ・価格の4か所に集約されます。
さらに縦を圧縮する: 高速出品モード
編集モードで広告ノイズを剥がしたあとでも、入力フィールドそのものの縦の長さは残ります。AucKitには、入力フィールドの縦も圧縮するための「高速出品モード」があります。
設定 → 出品フォーム既定値 → 高速出品モード = ONで、以下がまとめて有効になります。
- 説明欄の編集領域 (textarea)を1行分の高さに圧縮 (右下のつまみで広げ直し可)
- ページ上部のStepNavi (商品情報入力 → 入力内容確認 → 完了)を非表示
- 各セクション間の縦マージン・パディングを詰める
- ラベル左30% /入力欄右70%の2カラムレイアウト
- 即決価格・自動再出品のアコーディオンを常時展開 (クリックして開く動作を省略)
UIを損ねない範囲で、1画面に項目が収まるように整えるイメージです。
17件非表示 (編集モード) +入力フィールド圧縮 (高速出品モード)を併用すると、ヤフオク標準では数ページぶんあった縦スクロールが、1〜2スクロールで収まります。出品1件あたりの「画面を行ったり来たりする視線移動」が大きく減ります。
CSV一括流し込みとは違う角度
大量出品を扱うツールでは、CSVに商品情報をまとめて記述し、それを一括で流し込む方式が知られています。数百件・数千件を一気に登録するには向いていますが、CSVの項目名/カテゴリID /送料テーブルを事前に整えておく前提が必要で、初期セットアップの学習コストは決して低くありません。
今回紹介した「編集モード+出品テンプレ+高速出品モード」は、そこまで規模を追わない1件ずつの出品を、画面上で速く回すための整理です。
- 初期セットアップは、非表示にしたい要素をクリックするだけ (数分)
- ヤフオクの標準フォームの流れをそのまま使えるので、ヤフオク側の仕様変更にも影響を受けにくい
- 1件ごとの出品判断 (どの商品状態を選ぶか、価格をどうするか)を、画面上で目視しながら決められる
1日10〜50件くらいの出品数で、商品ごとに判断が入る運用スタイルには、こちらの角度のほうが合います。
Web利用者には、自分の画面を整える自由がある
Webページを開いたとき、それを自分が使いやすいように整えるのは利用者の自由です。ブラウザには広告ブロッカーがあり、CSSを上書きするユーザースクリプトがあり、DOMを操作する拡張機能があります。Webの歴史のなかで、これらは常に利用者側の道具として存在してきました。
AucKitの編集モードは、その「任意に消す」を成立させる仕組みです。Yahoo!のDOM構造そのものは触らず、CSSの表示制御だけで見えなくするので、ヤフオク側の動作には影響しません。将来Yahoo!側のHTML構造が変わったときには、AucKit側で対応します。
プラットフォームは自分たちの見せたいものを画面に置きます。それは間違いではありません。ただ、そのすべてを受け入れるかどうかは、利用者側で決めていい話です。
まとめ
- ヤフオクの標準出品フォームには、モーダル・バナー・有料オプション案内・別サービス誘導など、入力作業とは別軸の要素が多く配置されている
- AucKitの編集モードで、それら要素を1クリックで非表示にでき、今回の検証では17件を剥がせた
- 説明欄の出品テンプレート挿入ツールと 高速出品モードを組み合わせると、縦スクロールも大きく圧縮できる
- CSV一括とは別の角度で、1件ずつの出品を画面上で速く回すためのアプローチ
- Webの画面を自分に合わせて整えるのは、利用者側の自由 ── その道具として拡張機能がある
出品作業の生産性は、単に速くタイピングすることでは上がりません。画面を整える → 判断に集中できる状態にするという順序で、結果として1件あたりの所要時間が短くなります。同じ1時間でも、消耗の量がぜんぜん違います。