日本拍賣網頻道首頁改版建議

一、這頁的 61% 在做同一件事

整頁 9,518px、內容欄 1,400px，非無限捲，640 張商品卡一次吐完。組成是這樣：

品牌與活動 10%

16 個完全同構的專館區塊 61%

說明與 SEO 尾巴 29%

16 個專館每塊高 352px、結構一模一樣（橫向三欄：關鍵字捲軸寬 196 ＋館圖寬 211 ＋商品橫向捲寬 964），各固定 40 件、沒有「看更多」，唯一出口是館圖上一個 211×272 的圖片按鈕。往下捲 5,812px 看到的是同一個模板換 16 次資料——沒有排行榜、沒有即將結標、沒有個人化。

逐塊盤點（y 座標與高度為 1440 寬實測）

1頂部廣告條 60px

2Logo ＋會員列 70px

3頻道列＋公告跑馬燈 39px

4搜尋列（非 sticky） 50px

5主視覺區（含 banner 384px） 725px

6專館頁籤（sticky） 46px

716 個專館區塊 5,812px

8會員開箱 318px

9Blog（4 篇） 482px

10代標流程（4 步） 361px

11快速連結（5 欄 25 條） 173px

12全站分類牆（24 大類 / 431 子類） 711px

13頁尾 448px

第一張商品卡的 top ＝ 1,066px。第一屏 900px 之內看不到任何商品。

二、五家對照 Playwright 實測

頁長與商品密度

站	整頁高	頻道頁商品	搜尋框	第一張卡	一句話
比比昂	9,518px	640 張	169px	1,066px	最長，但 61% 是同一模組重複 16 次。商品出現得比誰都早
樂淘 letao	6,545px	4 組輪播	102px	1,459px	最大的是四組商品輪播（4×647＝2,588px，40%）
Buyee	5,023px	30 件	157px	1,784px	最大的一塊是 1,045px 的服務流程，佔全頁 21%
樂淘一番 letaofun	2,588px	20 張	72px	—	一排分類＋20 卡＋3 條文案，就這樣
Doorzo	2,669px	0 張	228px	—	純導流頁，要先搜尋才有商品

長度不是問題，同構才是——比比昂 61% 的長度花在同一個模組上。（Doorzo 短是因為它根本不在頻道頁賣貨，不是版面效率高，見第五節。）

⚠️ 2026-08-28 第二輪重量，更正兩處： ①「樂淘最大的一塊是 3,357px 的部落格區，佔 51%」是錯的——最大的是四組商品輪播，開箱＋最新文章合體只有 416px。②「第一張卡」這一欄是這次新加的，而它推翻了 B1 的立論方式：真站的 1,066px 是五家裡最早的，沒有任何一家做得比它快。真正輸的是搜尋框深度，見下一張表。原始量測留在 docs/bench-auction-2026-08-28.md。

商品卡欄位——這是最痛的一張

欄位	比比昂	Buyee	樂淘	樂淘一番	Doorzo
縮圖 · 標題 · 現在價	✅	✅	✅	✅	✅
直購價（一口價）	✕	✅ 紅字	列表有	✅ 角標	✅
結標倒數	✕	✅ 紅字	✅	✅	✅
出價數	✕	✅	✅	✅	排序有・卡上無
台幣換算	✕	✅	✅	✕	✕
收藏	✕	✅	✅ 追蹤	✕	✕
角標	✕	Buyee 精選・新刊登	✕	一口價	免運
合計欄位數	3	8	8	6	6

比比昂 640 張卡，每張只有「圖 170×204 ／日文標題 170×40 ／現在 ¥3,501 170×23」三格。拍賣的轉換動能全來自「剩幾分鐘、幾個人在搶」，這頁一個都沒有。

拍賣機能

機能	比比昂	對手做得最好的那家
吃網址的搜尋框	✅ placeholder 有寫	Buyee 另做成獨立導航入口「使用商品網址購買 — 只要提供商品網址，就能輕鬆申請購買！」
排序	✕ 完全沒有	Buyee 10 種，含「以剩下時間最短排列」「以最多下標數量排列」
狙擊出價說明	✕ 找不到承諾句	Buyee：「系統會為您在拍賣結束5分鐘前才進行下標」＋「拍賣結標前15分鐘起即不受理取消」
排除關鍵字	✕	Buyee「不包含」輸入框
只看直購	✕	Buyee「僅顯示直接購買商品」
一小時內結標篩選	✕	Buyee「距離結束時間一小時以內」
儲存搜尋條件	✕	Buyee 紅底「保存這個條件」，捲動時畫面中央還浮一顆跟著跑
中日關鍵字辭典	✕	Doorzo「搜尋助手」：8 大類展開到上百個作品名，入口掛在搜尋框裡

比比昂的「＋進階」是換頁到 /search_pro.php，那頁有價格、地區、賣家類型、商品狀態、競標方式——就是沒有剩餘時間、沒有出價數，也沒有任何排序。 而且 47 個都道府県全部日文未翻譯（群馬県、和歌山県…）。

三、問題清單每條都附實測證據

狀態（2026-08-28）：A 級六條與 B1–B4 已在改版稿實作完成，看改版稿・日本拍賣網。C 級（SEO／無障礙／RWD）延後，等這一版桌機版面經確認之後再做——RWD 與無障礙要照著定案的版面做，桌機還在改就等於做兩次。實作細節與實測數字記在專案的 CLAUDE.md。

第二輪（同日）重新比對五家之後新增 B5–B7，並撤回 B1 的立論方式。 三條的共同來源是 Carlson 的三個問題：公告為什麼被排到下面、五大保證跑哪去了、館別頭那一塊參考誰。答案分別是：公告該用 39px 跑馬燈留在上面（Buyee 把公告放在 642px，第一屏內）；五大保證沒有不見，在 83%，而五家的信任模組都在 61%–92%， 是建議書第四節那張表寫錯了不是頁面排錯；館別頭 Buyee 與 Doorzo 都有，但 205／330px，而且五家都沒有數據列。原始量測留在 docs/bench-auction-2026-08-28.md。

B5–B7 已實作完成，第三輪再補上主 banner。 搜尋框 468px → 226px（進到五家的 72–228 區間）；館別識別列 30px、數據與說明搬到信任區；公告跑馬燈回到 y173；會員開箱、Blog、代標流程三塊補上； 主 banner 890×384 ＋右側常駐兩張補上（前兩輪整塊漏掉）；熱門關鍵字搬回 banner 正上方並瘦成 34px。第一張商品卡 1,088px（真站 1,066px、樂淘 1,459px、Buyee 1,784px）， 500px 下 1,076px。共用元件 .unbox／.topics／.flow 照規矩 4 提進 site.css。

A 級輸在拍賣站的核心機能

A1 · 商品卡只有 3 個欄位

卡片 170×296：圖 170×204／標題 170×40／現在 ¥3,501 170×23。沒有倒數、沒有出價數、沒有台幣、沒有收藏、沒有直購價、沒有賣家評價。hover 只有 scale(1.03)。

對手：Buyee 搜尋卡 970×181 一張給 8 格，含紅字「直接購買價」與紅字「剩餘時間」。

A2 · 匯率寫了，但 640 張卡沒有一張有台幣

頂部標 1日円=0.2167元，但那只是一行連到公告頁的死連結，不是換算工具；商品全部只寫 ¥ 3,501，客人要自己心算。

對手：四家裡三家在某個層級印了台幣——樂淘連頻道頁的輪播卡都印兩行（6305円 / NT1364），Buyee 卡上是 4,000日元 (844台幣)，Doorzo 在商品詳情頁印 ≈ NT$。完全沒有的只有比比昂。

A3 · 沒有「即將結標」，也沒有時間軸排序

整頁 9,518px 沒有任何一個以「剩餘時間」組織的區塊；進階搜尋頁同樣沒有。

對手：樂淘排序列逐字是 現在出價　直購價　競標高到低　結標時間。

A4 · 商品標題 100% 日文未翻譯

例：ベイブレードＸ　ランダムブースター　レア　ヘビンスリング　内袋未開封 （戰鬥陀螺X 隨機補充包稀有天堂投擲內袋未拆）。而搜尋框 placeholder 自己寫著「輸入中日文關鍵字」——平台知道客人不懂日文，卻不翻標題。標題區只有 2 行 40px，日文全形字截得更早。

對手：Doorzo 用「搜尋助手」正面解掉這個門檻，一本中日對照辭典掛在搜尋框裡。

A5 · 狙擊出價講不清楚

全站找不到一句「結標前 N 秒／N 分鐘自動出價」的承諾。

對手：Buyee 兩顆按鈕並排（下標／預約下標），旁邊一條連結一句話講完；樂淘一番的商品頁也把「結束前10分鐘出價」做成出價方式的選項。

A6 · 643 張商品圖零延遲載入，而你們的手機版已經做對了

桌機 HTML 873KB（893,878 bytes），內含 643 個商品圖，帶 loading="lazy" 的 0 個、帶 data-src 的 0 個。每張都跟來源要 300×300 原圖，卻只顯示 170×204。 同一支網址只差 UA，手機版是 lazy 712 次、data-src 713 次，桌機是 0 和 0。 這是唯一一條「正確做法你們自己已經寫過，只是沒套到桌機」的證據，成本最低。

B 級節奏與資訊架構

B1 · 黃金版位給了 1/19 的曝光（「第一屏零商品」這條已撤回）

384px 的主 banner 是一次只看得到 1 張的輪播，卻掛了 19 張，每張的曝光被攤薄（19 選 1 是算術推論，不是量到的曝光數）；而且第 2 張與第 12 張在右側欄又各重複一次——實測兩者的連結目的地完全相同。

⚠️ 2026-08-28 第二輪撤回原本的立論。 第一版寫「第一屏 900px 零商品（第一張卡 top=1,066px）」，事實對，但語氣是「輸給對手」——重量之後發現沒有任何一家做得比真站早：樂淘 1,459px、Buyee 1,784px、Doorzo 策展商品 0 張。 1,066px 是五家裡最早的。這條改成只講 banner 曝光被攤薄。

B5 · 搜尋框是真正輸的那一項——而改版稿比真站更糟

代標的第一個使用情境是「我在別的地方看到一件東西」，所以搜尋框的深度是硬指標。實測：樂淘一番 72px、樂淘 102px（placeholder 逐字是 關鍵字、商品ID或網址）、Buyee 157px、真站 169px、Doorzo 228px。真站在這一項其實不差。問題出在改版稿自己：搜尋框在 468px，是真站的 2.8 倍深，因為前面壓了一個 441px 的館別頭。這一條是第二輪才發現的，改的是我們自己的稿。

B6 · 館別頭 441px：有對照組，但兩家都比我小很多，而且都沒有數據列

Carlson 2026-08-28 問「這塊你參考誰的」。誠實答案： Buyee 有（205px：一段服務說明＋搜尋框）、Doorzo 有（330px：館名＋大搜尋框 Go），樂淘、樂淘一番、比比昂真站三家都沒有。但五家沒有任何一家在頻道頁放數據列——「在售件數／手續費／出價同步間隔／賣家寄到日本倉」那四項是改版稿自己加的，也是 .chero 之所以比 Buyee 大 2.1 倍的主因。

B7 · 改版稿缺了真站有、對手也有的三塊：會員開箱、Blog、代標流程

真站三塊都有：會員開箱 y6,846 h318（「開箱送 NT2,100 ›」，卡片 250×249）、 Blog 4 篇 y7,176 h482、代標流程 4 步 y7,670 h361。對手：UGC 開箱五家有三家（比比昂／樂淘 y2,287 開箱＋文章合體 416px／Doorzo 「相關購物體驗」y1,672 h340）；Blog 五家有兩家； 流程與教學模組五家全有，Buyee 甚至做到 1,045px、佔全頁 21%。改版稿 channel.html 三塊全缺——這不是這一輪弄掉的，是這頁從來沒做。

B2 · 61% 的頁面是 16 次完全同構的重複

每塊 352px，結構一模一樣。每館固定 40 件、沒有「看更多」，唯一出口是館圖上一個 211×272 的圖片按鈕。

B3 · 專館頁籤在 1440 螢幕上就已經溢出

16 顆 × 107px ＝ 1,712px，容器只有 1,352px。實測 茶具古董(x1435)、懷舊珍藏(x1542)、寶可夢卡(x1649) 三個落在預設視野外，要按左右箭頭或橫捲才找得到（容器是 overflow:auto，兩顆 32×32 的箭頭確實有渲染，所以是「多一個動作」不是「不存在」）——而寶可夢卡正是熱門關鍵字裡標黃的重點館。

B4 · 同一批分類在頁面出現三次，命名四套

左側欄（24 大類 479 連結）／搜尋下拉（25 項）／頁尾分類牆（24 大類 431 子類，佔 711px）。進階搜尋頁又是第四套命名。

C 級衛生問題，成本低但現在是零分

C1 · SEO 與 HTML 基本盤

<h1> 數量＝ 0；<title> 出現兩次； DOCTYPE 還是 HTML 4.01 Transitional；meta description 還寫著舊品牌名（title 與 description 的改法已定案，見第六節第 2 條）。

C2 · 品牌命名同一頁四種寫法

頻道列寫 JDirectItems Auction 原 Yahoo 拍賣、同一列隔壁的 JDirectItems Fleamarket 卻把 Items 的 I 寫成小寫、分類牆標題寫 JDirectItems Auction分類、 <title> 還是舊品牌名；搜尋按鈕的 value 甚至還留著日文 検索（搜尋）。

C3 · 頁尾 448px 裡沒有任何導航

有 Facebook 與 LINE 兩個社群圖示，但沒有關於我們／隱私權／服務條款／客服中心／App 下載，其餘只有防詐文字與地址。SEO 內鏈與信任連結都缺。

C4 · 無障礙

頁首 logo 連 alt 屬性都沒有（頁尾 logo 是 alt=""）、付款方式圖 alt=""、右側分享四顆按鈕（分享／複製網址／Facebook／LINE）無文字也無 aria-label、自製分類下拉不是 <select> 也沒有 role。

C5 · 手機是另一套模板，而且資訊模型不一樣

桌機模板在 390 寬下 scrollWidth=1200（成因是 <meta viewport content="width=1200">），完全不 RWD——站方版面 CSS 只往大螢幕分歧（1440／1600／2000），沒有任何 ≤768px 的縮小斷點。手機版是伺服器依 UA 換的另一套模板， 連專館的資訊模型都不同（手機是原地切換內容，桌機是 16 塊全部堆疊＋錨點跳）。手機版 user-scalable=0 禁用縮放，違反 WCAG 1.4.4。

四、建議的樣子

商品卡：3 欄位 → 8 欄位

現在（170×296）

圖 170×204

1日文原標題（2 行截斷）
2現在 ¥ 3,501
—沒有了

建議

圖（1:1，補 lazy-load）

1角標：即將結標／新刊登／已鑑定
2收藏 ♡（列表上就能按）
3中文標題
4日文原名（小字，方便對照賣場）
5現在價 ¥
6台幣換算 ≈ NT$
7直購價（有才顯示）
8卡腳：N 次出價｜結標倒數

改版稿 channel.html 的 .product 是全站共用卡，補這幾格會讓其他館一起受益。「剩幾分鐘、幾個人在搶」是拍賣唯一的轉換動能。

區塊順序 2026-08-28 第二輪依五家實測改寫

第一版這張表有一列是我沒有對照組就寫下的：「購物保證／代標特色緊接在即將結標後面」。重量五家之後發現 信任與教學模組全部落在全頁 61%–92% 的位置——Buyee 61%、Doorzo 76%、樂淘一番 76%、比比昂真站 81%、樂淘 87%～92%。沒有一家放在前面。 樂淘那四條保證（商品未到貨全額理賠／賣家寄錯全額處理／ 運送損壞全額理賠／全透明資訊及費用）跟我們的五大保證前四條幾乎同構，而他們擺在 92%。所以這一列改掉，改版稿現在落在 80%–85%，是對的。

第三輪（2026-08-28 傍晚）再改一次，這次是驗收 agent 與 Carlson 同時打回來的。 這張表原本混了兩種東西：對真站的改造建議，和對改版稿的驗收條件。拿「19 張 banner 收斂」「快速連結 25 條」去驗改版稿必然失敗——改版稿本來就沒有 19 張 banner。現在拆成兩欄：左邊是改版稿的實作狀態（可驗收），灰字那幾列是只對真站說的，不列入改版稿驗收。

頂部廣告條／會員列／頻道列＋公告跑馬燈✅ 已做。.ticker 39px 在 y173（真站 y130、Buyee 把公告放 y642，都在第一屏）

搜尋列＋中日關鍵字助手＋匯率換算✅ 已做。.sband 獨立一條，搜尋框 468 → 226px，落在五家的 72–228 區間（原本這一列寫「壓在 200px 以內」，那個門檻沒有依據，跟 B5 的區間打架，已刪）

館別識別列✅ 已做。識別留在上面（30px），數據列與說明搬到信任區；.chero 441 → 132px

熱門關鍵字 15 顆✅ 已做。搬回 banner 正上方、瘦成一條 34px（真站 y233 h32），原本被排到即將結標之後

主 banner✅ 第三輪補上。19 張收斂成 6 張輪播 890×384（真站同高）＋右側常駐兩張。前兩輪整塊漏掉，是這次最大的錯

即將結標＋排序列✅ 已做。12 張卡＋ 5 種排序

16 個專館✅ 已做。三種版型輪替、每館「看更多」、頁籤換行不溢出

會員開箱✅ 第二輪補上。6 張（真站 y6,846 h318）

Blog 4 篇✅ 第二輪補上（真站 y7,176 h482）

代標流程 4 步✅ 第二輪補上（真站 y7,670 h361，Buyee 做到 1,045px）

館別數據／購物保證／代標特色✅ 放在全頁 80%–85%，五家的信任模組都在 61%–92%

快速連結 25 條這一列是對真站說的。改版稿的對應物是 .quick×8「第一次用？先看這幾個」，不是 25 條，不列入驗收

全站分類牆 711px這一列是對真站說的。改版稿收成可展開的 .mega（26 大類・446 細分類），命名已與館內分類列、進階搜尋下拉三處同源，不列入驗收

頁尾這一列是對真站說的，而且與第六節第 1 條矛盾——第六節已裁定「頁尾公司資訊維持現狀，只清掉原始碼裡註解掉的舊地址」。以第六節為準，這一列不列入驗收

五、你們已經比對手好的七件事改版時不要弄丟

頻道頁上就有匯率與費用訊號，兩家國際對手都沒有。 Buyee 頻道頁全文掃過：「手續費」0 次、「運費」0 次、「關稅」0 次； Doorzo 頻道頁一個數字都沒有，而且它的費用說明頁是一面 24,597px 的純圖片牆，連文字都抄不到——那是反面教材。
頻道頁真的在賣貨。Doorzo 的日拍頻道頁整頁 2,352px、商品卡 0 張，客人必須先搜尋才看得到任何東西。
16 個策展式主題館遠勝所有對手。樂淘一番只有 16 格單層圖示、零子分類；樂淘是通用分類樹，沒有這種策展。
頁籤上標了決策資訊（3公斤免運、1公斤免運）， Buyee 與 Doorzo 的商城列都只有商城名。
費用、關稅、實名認證直接放在頻道頁（快速連結 5 欄 25 條）。樂淘要點進說明中心，樂淘一番的頻道頁一個字費用都沒有。
社會證明、流程圖、防詐騙提醒都在頻道頁上。 防詐那一段兩家台灣對手都沒有，在台灣的詐騙環境下這是實打實的信任資產。
繁體中文在地化品質。Doorzo 繁中站商品頁的主要按鈕印的是簡體 出价竞拍；Buyee 的分類側欄還留著日文 音楽（音樂）。

六、已定案 2026-08-28 Carlson 拍板

1 · 頁尾的公司資訊維持現狀，只要清掉原始碼裡的死碼
「日本比比昂株式会社（ビビアン）」與「PChome Bibian Inc.」是同一個法人的兩種寫法，不是兩個主體；真正的第三方只有物流協力 SGH 環球日本（SGHグローバル・ジャパン株式会社）。所以頁尾現在的寫法是對的，不用動。

唯一要做的一件事：auction.php 與 search_pro.php 的原始碼裡都還躺著一份被  註解掉的舊資料—— 「106 台北市大安區復興南路一段209號6樓／客服 14:00~18:00／Bibian Co., Ltd.」。它不會被渲染，但留著遲早有人誤用，建議清掉。

⚠️ 這一條我前兩版都寫錯過。第一版寫成「兩頁的頁尾自相矛盾、兩份都在正式站上」（事實查核推翻：兩頁渲染結果一字不差相同）；第二版改寫成「同一個頁尾掛了三個法人主體」（Carlson 更正：其中兩個是同一個法人）。跨頁比對要比渲染後的結果，法人關係要問人，兩件事都不能只看原始碼推。

2 · title 與 meta description 改成「JDirectItems Auction（原日本 Yahoo 拍賣）」

背景：Yahoo Japan 規定日本以外一律要寫 JDirectItems Auction，所以頻道頁上才有那個「原日本 Yahoo」的框框。現況是改到一半——同一個檔案裡的 keywords 已經是 JDirectItems Auction，但 title 與 description 還停在舊名。

欄位	現在	改成
`<title>`	Bibian 比比昂 - 日本Yahoo雅虎拍賣官方合作，新品/二手即時競標	Bibian 比比昂 - JDirectItems Auction（原日本 Yahoo 拍賣）官方合作，新品/二手即時競標
`description`	Bibian 比比昂日本Yahoo雅虎拍賣官方合作，一站式專業代標代拍代購…	Bibian 比比昂 JDirectItems Auction（原日本 Yahoo 拍賣）官方合作，一站式專業代標代拍代購…
`keywords`	已經是 `JDirectItems Auction`，不用動

meta description 不是只有程式看的。它是 Google 搜尋結果底下那兩行摘要，分享到 LINE 或 Facebook 時的預覽文字通常也抓它——它不出現在網頁畫面上，但對外曝光量比很多頁面文字都大。同一頁還有一個問題： <title> 目前出現兩次（另一個是「日本雅虎拍賣」），要合併成一個。

七、一個日本代標頻道頁最不能缺的五件事五站交集反推

吃得下「關鍵字＋商品網址」的搜尋框，而且明說它吃網址。 這是五站唯一 100% 交集的元素——代標的第一個使用情境就是「我在別的地方看到一件東西」。
跨語言的分類與關鍵字入口。客人不會打日文，頻道頁必須替他把日文關鍵字準備好。
帶時間壓力的商品卡。沒有倒數，拍賣頁就只是一個普通商品列表。這是你們現在最缺的。
講清楚「會被收多少錢」，而且要有數字。你們已經贏一半（有匯率、有信任 icon），差的是一句可驗證的費率。
信任模組要在同一屏內看得完。跨境代標的核心恐懼是「錢先付了、東西在別人手上」。

調查於 2026-08-28，Playwright 實測。所有尺寸來自 1440×900 與 390×844 兩次渲染的 getBoundingClientRect()。抓不到的項目（需登入的會員出價狀態、Doorzo 的費率文字、樂淘的自動出價設定）在報告中一律標為「抓不到」，未以印象補足。日文原文一律寫成「中文（日文原文）」。 · 改版稿・日本拍賣網 · 集運影響評估 · 全站導覽