品牌官網＋線上商店案例 · 精品咖啡
一包 1,800 元的豆子， 要先讓人看懂它憑什麼
REKAT ROASTERY 日卡地自然農莊在台東鹿野，烘豆師王龍有三十年資歷，用的是藝伎、藍山、厭氧發酵這一級的生豆。這種商品的線上難題不在把品項列出來，而在於：客人憑什麼相信這一包值這個價？我們把烘豆師平常說得出口、但寫在網頁上就消失的判斷——風味的座標、處理法的差別、火要停在哪一秒——做成可以點、可以比對的圖解，讓專業自己說話，再把下單這件事接在它後面。
0 張照片
插畫與圖解全部程式生成
3 組互動
風味輪・處理法・烘焙曲線
15 支
豆單品項，店家自助上下架
線上下單
匯款與貨到付款，不經手金流
怎麼運作
從「看不懂」到「下單」的三步
精品咖啡的轉換障礙不是價格，是資訊不對稱。客人看到「厭氧日曬・葡萄乾・可可」不知道那是什麼意思，就不會為它付一千二。所以整個動線是先給判斷依據，再給購買按鈕。
1→
用風味輪找方向
點內圈的九大家族，展開第二層描述詞，再直接跳到「本期有幾支這個調性」
2→
在單品頁確認
批次卡式的規格表、風味輪廓圖、烘焙度刻度與該支的沖煮參數，一頁看完
3
加入購物車結帳
半磅裝原豆，匯款或貨到付款，轉帳後可線上回報帳號末五碼供核帳
資料架構
三種變動節奏，三個地方管
設計
豆單目錄
品名、售價、風味家族、插畫母題、產區背景與文案。一季才動一次，屬於設計與編輯資產，走版控與部署
↓
營運
本期供應
哪支售完、哪支下架、一句官網公告。隨時會變，住在資料庫，烘豆師用手機自助維護
↓
交易
訂單
下單當下的品項與金額快照。豆單日後改價，舊訂單仍然對得起帳
設計與技術
把專業知識做成看得懂的圖
可點選的 SCA 風味輪
依 SCA 與 World Coffee Research 2016 年版的九大家族自繪，點內圈展開第二層描述詞，並直接連到該調性的豆子。不用官方圖：那是版權素材，而且點不了。
處理法的果實剖面
咖啡果實剖成六層，切換處理法時把「乾燥前已經去掉的層」淡掉。濕剝法只剩銀皮與生豆兩層——一眼就看得出曼特寧為什麼跟其他豆子不是同一件事。
會畫出來的烘焙曲線
標出回溫點、轉黃、一爆與發展期比例，每一段點得動、有解說。這是對懂的人的暗號，對不懂的人的一堂三十秒的課。
程式生成的豆子插畫
客戶沒有商品照。15 支豆子不是 15 張圖檔，是同一個元件依風味家族與母題生成的向量落款印。新增一支只要填一個母題。
研磨粗細對照
「中細研磨，砂糖顆粒大小」對沒磨過豆子的人沒有畫面。改成五塊同面積、同密度、只有顆粒大小在變的取樣圖，差距用眼睛就量得出來。
手繪的咖啡帶地圖
視野裁在西經 162° 到東經 115°，剛好裝下從夏威夷可娜到蘇門答臘林東的九個產地。不嵌第三方地圖，避免在頁面上戳出一塊別人的視覺。
金額只有一個真實來源
計價是前後台共用的同一支純函式，購物車只存品項與數量、不存價格。前端送來的任何金額欄位一律忽略，伺服器重算——「改 devtools 拿便宜」在結構上不成立。
售完的豆子擋在伺服器
店家標為售完之後，前台不只是把按鈕變灰——後端收單時會再擋一次並回報是哪一支。客人的購物車可能是幾天前加的，那時候還有貨。
資料誠實性有測試在守
豆單的品名與售價逐列釘在測試裡，改錯會在 CI 紅起來；產區背景標明是公開資料整理、非批次卡；風味輪廓圖明講不是杯測分數。
為什麼這樣做
高單價商品的線上化，賣的是判斷依據
01
先建立信任
客人不是不願意花錢，是不知道花得對不對。把判斷依據交出去，價格才站得住。
02
維護權在店家
賣完了就自己標售完，補到貨再改回來。網站不會因為沒人更新而停在過期的資訊上。
03
不誇大、不編造
沒拿到的批次資料就留空，推導出來的圖表就標示是示意。長期做生意，這比多寫幾個形容詞值錢。
你的專業，值得被看懂
不論是精品食材、職人工藝還是任何「需要先講清楚才賣得動」的商品，我們都能把專業做成客人看得懂的東西，再把生意接在後面。先看看 REKAT 的實際成果。