內部決策文件 · 2026-09-03

日本代購 頻道首頁改版建議

這一頁是代購頻道首頁——線上的 bibian.co.jp/buy/, 改版稿對應 buy.html。結論一句話: 真站在「馬上看到貨」與「中文標題」兩件事上贏了三家,輸在卡上資訊太薄、沒有品牌入口; 而改版稿把僅有的商品也弄丟了。

0 張 改版稿 buy.html 的商品卡數。真站 46、Doorzo 96、樂淘 48、Buyee 18
498px 真站第一張商品卡的位置,四家最早(Buyee 1,123/Doorzo 1,705/樂淘 2,299)
25 張 真站 banner 輪播張數,一次只看得到 1 張。代標頁是 19 張,這裡更稀釋

調查方式:Playwright 實際渲染,1440×900,數字全部來自 getBoundingClientRect(),不是估的。原始量測留在 docs/bench-buy-2026-09-03.md。 對照組:Buyee、Doorzo、樂淘 letao —— 樂淘一番 letaofun 2026-09-03 全站「系統維護中」,抓不到,不補推估值。 相關頁面 改版稿・日本代購 · 日本拍賣網改版建議 · 全站導覽

狀態(2026-09-03):A1–A3、B1–B4 已在改版稿實作完成;A4 做一半、A5 不適用(A4 的「文字站名」與「張數統一」做了,「四張 logo 補 alt」與 A5 的 lazy-load 都是對真站說的——設計稿 0 張 <img>,沒東西可以補),看 改版稿・日本代購。實測 1440:畫面上同時 20 張 商品卡(當前頁籤 8 + 你可能喜歡 12;四站資料共 44 張,全部 ¥+NT$)、 搜尋框 468 → 226px、banner 6 張高 250(真站 249)、第一張商品卡 792px (真站 498、Buyee 1,123、Doorzo 1,705、樂淘 2,299)、品牌牆 12。 ⚠️ 第一版狀態段寫「頁尾 5 → 9 條」是錯的——5 是真站的數字,改版稿本來就是 9 條,這一輪沒動頁尾。 C 級(SEO/無障礙/RWD)跟代標頁一樣等桌機版確認後再排。 刻意跟第四節那張表不同的一點:實作是「排行 → 品牌牆」不是「品牌牆 → 排行」, 因為真站 y498 是要保住的優點,品牌牆擺前面會把商品推到 1,060。

一、真站 /buy/ 這頁裝了什麼

整頁 4,075px,是代標頁(9,518px)的 43%。組成是這樣:

搜尋與 banner 10%
四塊人氣排行 40%
網站精選・流程・長文・頁尾 50%

整頁 46 張商品卡(10+7+11+18),四塊排行榜之後就沒有商品了。 2,467px(60.5%)不是商品。對手:Doorzo 96 張、樂淘 48 張、Buyee 18 張—— 比比昂在中段,只輸 Doorzo。

逐塊盤點(y 座標與高度為 1440 寬實測)

1Logo + 會員列 70px
2頻道列 6 個 + 右端公告跑馬燈 210px 43px
3搜尋列(輸入框 885×40 + 匯率 1日円=0.2167元) 50px
4banner 輪播 787×249(唯一 25 張,DOM 27 個含 2 個 loop 複製品)+ 四個固定教學入口 249px
5日本樂天 人氣排行(10 張) 402px
6JDirectItems Shopping 人氣排行(7 張) 402px
7日本Amazon 人氣排行(11 張) 402px
8價格.com 人氣排行(18 張) 402px
9日本必買網站精選(9 類、55 條連結) 425px
10代購 3 步驟 + 日本選物情報長文 950px
11頁尾(防詐騙提醒,只有 5 條連結) 476px

⚠️ 四張站名 logo(jplogo_rakuten.png/JDirectItemsShopping.png/ jplogo_amazon.png/jplogo_kakaku.png)全部連 alt 屬性都沒有 (不是 alt=""——讀屏會念檔名)。但只有 JDirectItems Shopping 那一塊在文字層沒有站名: 另外三塊的標題列是圖 + 文字錨點,只有那一塊是 <a><img></a>。 四塊的張數 10/7/11/18 也沒有規律,看起來像抓到多少放多少。

二、四家對照 Playwright 實測

⚠️ 對照組要挑對:/buy/ 是「代下單日本購物網站」, 所以四家取的是它們的樂天/購物代購頁,不是代標頁。 letao.com.tw/rakuten/ 會 404,正確是 /jpshopping/?domain=rakuten; buyee.jp/rakuten 少一個尾斜線也是 404。

站整頁高搜尋框 第一張卡商品卡標題語言卡上幣別
比比昂4,075pxy114 y49846 中文只有 NT
Buyee3,643pxy157 y1,12318 日文原文日元+台幣
樂淘 letao6,057pxy102 y2,29948 日文原文NT+円
Doorzo7,328pxy228 y1,70596 日文原文只有円
樂淘一番 2026-09-03 全站「系統維護中」,抓不到。不補推估值

四家全部把「吃網址」寫進搜尋框的 placeholder—— 比比昂「請貼上日本代買商品網址或輸入關鍵字」、樂淘「搜尋關鍵字、商品ID或商品網址」、 Buyee「輸入關鍵字或商品連結」、Doorzo「輸入品牌名稱、商品名稱、商品網址進行搜索…」。 這跟代標頻道的結論一樣,是 100% 交集。

改版稿 buy.html 現況——問題在這裡

項目改版稿真站四家
整頁高4,125px4,075px3,643–7,328px
商品卡0 張 46 張18/96/48 張
搜尋框位置y468 y114y102/y157/y228
主 banner沒有 787×249 ×25 張Buyee y221 h320/樂淘 y230 h675/Doorzo 館別頭 h330
品牌/店家入口沒有 沒有 Doorzo 熱門品牌/樂淘 獨家優惠賣家/Buyee 推薦店鋪

改版稿的「人氣排行」用的是 .rank 橫式列(縮圖 42×42),不是商品卡, 所以 .product 一張都沒有。代購頁不擺商品,等於把真站唯一贏對手的那一點也丟掉。

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

A 級 輸在代購站的核心機能

A1 · 改版稿一張商品卡都沒有

buy.html 實測 .product = 0。 真站 46 張、Doorzo 96 張、樂淘 48 張、Buyee 18 張。 而真站最強的一點正是第一張卡在 y498、四家最早——改版稿把它整個放掉了。

A2 · 卡上只有台幣,沒有日圓原價;而代標頁剛好相反

真站代購卡 170×292=名次+圖 170×150+中文標題+NT 153,沒有日圓 (46 張全部只有 NT、0 張有 ¥)。代標頁的卡則是 現在 ¥ 19,500、沒有台幣。 同一個站兩個頻道兩套規則,客人跨頻道比價時對不起來。 對手:樂淘 NT856 / 3,960円、Buyee 2,980日元 (629台幣),兩家都雙幣。

A3 · 沒有品牌/店家入口,而代購的搜尋起點常常是品牌名

真站只有「日本必買網站精選」55 條連結(54 個網站+「逛逛更多」),那是網站層級不是品牌層級。 對手三家都有:Doorzo「熱門品牌」(Miki House/FANCL/迪士尼/無印良品/Panasonic/尼康)、 樂淘「獨家優惠賣家」、Buyee「樂天推薦店鋪」(玩具/家電用品/名牌精品)。 Doorzo 的搜尋 placeholder 甚至把「品牌名稱」放在第一個。

A4 · JDirectItems Shopping 那一塊沒有文字站名、四張 logo 沒有 alt,張數也沒有規律

四張站名 logo 全部連 alt 屬性都沒有(讀屏會念檔名)。 但真正在文字層消失的只有一塊:JDirectItems Shopping 的標題列是 <a><img></a>, 另外三塊(日本樂天/日本Amazon/價格.com)都是圖 + 文字錨點。 張數 10/7/11/18——沒有一個是整數列,看起來像抓多少放多少。

⚠️ 第一版這條寫成「四塊站名全是圖片且 alt=""」,事實查核推翻。 照第一版去改,工程師會去找四張 alt="" 的圖(找不到,因為根本沒有 alt 屬性), 而三塊已經有文字站名的會被白做一次。要修的是:四張 logo 補 alt、 JDirectItems Shopping 那一塊補一個文字錨點。

A5 · 169 張圖零延遲載入,而 Buyee 已經在做

真站 /buy/:loading="lazy" 0 張、data-src 0 張。 Buyee 的代購頁 62 張圖雖然也沒有 loading="lazy",但用 data-src 做延遲載入(26 張)。 這條跟代標頁的 A6 是同一件事,兩個頻道一起改成本最低。

B 級 節奏與資訊架構

B1 · 改版稿的搜尋框在 y468,四家最深

真站 y114、樂淘 y102、Buyee y157、Doorzo y228——改版稿 y468。 跟改版前的代標頁一模一樣的毛病:前面壓了一個 380px 的館別頭。 代標頁已經用「搜尋帶獨立成一條」解掉(468→226px),這頁照抄即可。

B2 · 改版稿沒有 banner;真站有,但 25 張=1/25 的曝光

真站 .swiper-wrapper 27 個子元素,濾掉 2 個 swiper loop 複製品後 唯一 25 張、787×249,一次只看得到 1 張。25 張裡 12 張 alt=""。 代標頁是 19 張,這裡更稀釋。四家在搜尋框下面都有主視覺: Buyee y221 h320、樂淘 y230 h675、Doorzo 的館別頭本身就是 h330。 改版稿一張都沒有。

B3 · 真站 60% 的長度不是商品——但這不是輸給對手的地方

4,075px 裡 2,467px 不是商品區。四塊排行榜共 1,608px 放 46 張卡, 後面的「網站精選 425px + 代購 3 步驟與長文 950px + 頁尾 476px」佔掉 1,851px。

⚠️ 第一版寫「對手把同樣位置拿去放更多商品(樂淘 144 張)」,事實查核推翻: 樂淘的 144 是三重計數,唯一卡數 48;Buyee 只有 18。修正後 Doorzo 96 > 樂淘 48 ≈ 比比昂 46 > Buyee 18, 比比昂在中段。所以這一條的重點不是「真站貨太少」,而是改版稿一張都沒有(A1); 真站要補的是四塊排行榜之後的「你可能喜歡」,不是把長文砍掉。

B4 · 頁尾只有 5 條連結

全站 174 條連結,頁尾佔 476px 卻只有 5 條。 跟代標頁的 C3 是同一條,兩頁一起補。這一條是對真站說的——改版稿 buy.html 的頁尾本來就是 9 條。

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

四、建議的樣子

商品卡:4 欄位 → 8 欄位

現在(真站 170×292)
圖 170×150
1名次角標「╲ 1 位 ╱」
2中文標題
3NT 153
— 沒有日圓原價、沒有店家、沒有收藏、沒有運費訊號
建議
圖(1:1,補 lazy-load)
1名次角標/新上架/降價
2收藏 ♡(列表上就能按)
3中文標題
4日文原名(小字,方便對照原站)
5¥ 原價
6≈ NT$ 換算
7來源站徽章(樂天/Amazon/ZOZO…)
8卡腳:店家名 | 日本境內免運與否

改版稿 buy.html 直接用全站共用的 .product(代標頁那一輪已經補到 8 欄位), 只要換掉卡腳與角標的語意:拍賣是「出價數|倒數」,代購是「店家|境內免運」。 來源站徽章是這一館獨有的——四家對手都是一頁一個站,不需要它,比比昂是多站聚合才需要。

區塊順序

頂部廣告條 / 會員列 / 頻道列 + 公告跑馬燈沿用(真站 y68 h43,跑馬燈掛在右端)
搜尋列 + 匯率換算獨立成一條,照代標頁那一輪的做法。改版稿 y468 → 目標 y230 以內(四家 110–228)
館別識別列瘦成一條(代標頁已做到 30px),數據與說明搬到信任區
主 banner25 張收斂並去重;改版稿目前一張都沒有,要補
品牌牆新增。三家對手都有、比比昂沒有。日本代購的搜尋起點常常是品牌名
四塊人氣排行JDirectItems Shopping 那塊補文字站名、四張 logo 補 alt、張數統一;卡改用共用 .product
你可能喜歡新增。真站 46 張卡之後就沒有商品了,這裡補密度(原本寫「/最近瀏覽」,真站與四家的代購頁都沒有,刪)
日本必買網站精選沿用,這是多站聚合的優勢展示。真站 55 條連結=54 個網站+1 條「逛逛更多」;改版稿 SITES 算出來是 54 個
代購 3 步驟沿用(貼網址 → 加入購物車 → 結帳)。這一塊講得比代標頁清楚
購物保證放全頁 60%–90%,跟代標頁同一個判準(五家的信任模組都在這個區間)。原本多寫了「/代標特色」,那是代標頁的區塊,這一館沒有
日本選物情報沿用。這是真站有、四家對手都沒有的內容資產
頁尾補導航——這一列是對真站說的(真站 5 條);改版稿 buy.html 本來就是 9 條,這一輪沒動它

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

  1. 第一張商品卡在 y498,四家最早。 Buyee 1,123、Doorzo 1,705、樂淘 2,299。代購頁「馬上看到貨」這件事比比昂做得最好—— 而改版稿現在是 0 張,等於把這個優勢丟掉了。
  2. 商品標題是中文。Doorzo、Buyee、樂淘三家的代購卡全是日文原文未翻譯 (Buyee「《7年連続!楽天で1番売れたナースウォッチ》…」、 Doorzo「【五条悟】呪術廻戦懐玉・玉折Luminasta…」)。 ⚠️ 這跟代標頁剛好相反——那邊是比比昂 100% 日文未翻譯、Doorzo 有中日對照辭典。
  3. 搜尋框在 y114,placeholder 明說吃網址(「請貼上日本代買商品網址或輸入關鍵字」), 而且「貼商品網址」還被做成代購 3 步驟的第 1 步。四家裡只有樂淘(y102)比它淺 12px。
  4. 多站聚合。一頁同時放樂天/JDirectItems Shopping/Amazon/價格.com 四個來源的排行榜; 四家對手的代購頁都是一頁一個站。
  5. meta description 比對手完整,逐字列出可代購的網站名。 這一條反而是代標頁該抄的。

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

  1. 吃得下「關鍵字+商品網址」的搜尋框,而且明說它吃網址。 四站 100% 交集,跟代標頻道的結論一樣。
  2. 品牌與店家入口。代標的起點是「我看到一件東西」, 代購的起點常常是「我要買某個牌子」。三家對手都有,比比昂沒有。
  3. 雙幣別。客人要同時看得到日圓原價(才知道有沒有比原站貴)與台幣(才知道要付多少)。 比比昂兩個頻道各缺一半。
  4. 一頁看得到多個來源站。這是比比昂現在唯一領先的結構,別在改版時拆掉。
  5. 流程與費用要有數字。代購 3 步驟已經是對的方向,差的是把費率寫進去。

七、事實查核修正 2026-09-03,獨立 agent 重量一次

第一版寫完派了獨立的事實查核 agent 重量五站,抓到六個錯,全部已改在上面。 列在這裡是因為錯法比數字重要:

跨站數卡片的教訓:篩完要用該站自己的 class 反查一次,並做幾何檢查。 原始量測與修正紀錄:docs/bench-buy-2026-09-03.md 第六節。

調查於 2026-09-03,Playwright 實測 1440×900,尺寸來自 getBoundingClientRect()。 樂淘一番 letaofun 當天全站「系統維護中」,該欄一律標「抓不到」,未以印象補足。 日文原文一律寫成「中文(日文原文)」。原始量測:docs/bench-buy-2026-09-03.md。 · 改版稿・日本代購 · 日本拍賣網改版建議 · 全站導覽