網站設計知識

採購進到一個 B2B 官網，平均只給你 8 秒判斷要不要繼續看。如果這 7 件事中任何一個踩到，他會直接關掉換下一家：

1. 首頁看不懂你做什麼。放著「歡迎光臨」、「我們致力於提供最優質服務」這種空話。
2. 沒有產品分類。所有產品擠在一個列表，採購要找的規格找不到。
3. 沒有清楚的詢價路徑。聯絡頁只有一個 email，沒有表單、沒有電話、沒有 LINE。
4. 手機版破版。放大才能看內容，按鈕點不到。
5. 缺少英文／日文。對外銷企業是致命傷。
6. 沒有實機照片。只有渲染圖或股市照，採購懷疑你是貿易商不是製造商。
7. 多年沒更新。News 停在 2019，看起來像倒了的公司。

這 7 點中前 3 點是「導致採購不詢價」的最大主因。如果你不確定自己的官網哪一條中槍，可以從免費官網健診開始。

很多公司以為「我的網站是 RWD 響應式設計，手機版自動跑就好」。但採購用手機看你網站時，這 5 件事如果沒做好，依然會離開：

1. 觸控按鈕大小。手指比滑鼠粗，按鈕至少 44x44px，否則點不到。
2. 聯絡資訊一鍵直撥。電話 tel: link、地址 Google Maps link、LINE 一鍵加好友。
3. 圖片壓縮。PC 版用的高解析圖直接給手機，4G 載入要 8 秒，採購直接關掉。
4. 不要強迫改成 PC 版。很多舊站留「切換桌面版」連結，這是 2010 年的做法。
5. 表單不要超過 5 欄。手機填表很痛苦，欄位越少詢價率越高。

現在 60～70% 的 B2B 採購初次接觸是用手機，先用手機看你公司有沒有「值得在 PC 上認真評估」。手機版做不好，連評估的機會都沒有。

製造業官網最容易踩的雷：放股市圖庫照片。採購一眼就能看出來，會懷疑你是貿易商不是製造商。建議放這 6 種：

1. 實機產品照（白底）。規格清楚、可放大細節，採購能直接判斷是否符合需求。
2. 產線／工廠照。實體產線、設備、CNC、檢測室，建立「真的有在做」的信任感。
3. 製程進行中。切削屑、模具開模、烤漆中、組裝中。比靜態照更有說服力。
4. 檢測 / QC 照。三次元、光學量測、SGS／TUV 報告。對外銷客戶特別重要。
5. 包裝與出貨。木箱包裝、棧板出貨、貨櫃裝載。對國際客戶證明你能處理物流。
6. 團隊／辦公室。不要全是空的廠房，放一些員工工作照、會議照，讓客戶感覺有人。

不需要找專業攝影師。一台中階手機（iPhone 13 以上）+ 自然光 + 乾淨背景就夠用。重點是「真實」而不是「美」。

兩種定位差很多。選錯，網站做得再美也接不到單。

• 形象型官網適合：公司歷史 30 年以上、客戶都是老關係、不太需要新客戶詢價、主要功能是「讓老客戶不懷疑你還在」。內容重點是品牌故事、企業文化、CSR、媒體報導。
• 詢價型網站適合：仍在開發新客戶、希望透過官網接到詢價、外銷或拓點需要、業務想用網站當作初步篩選工具。內容重點是產品分類、規格表、案例、詢價表單、型錄下載。

映策智造服務 90% 是詢價型。如果你的官網有業績壓力（要接單、要拓客、要外銷），形象型網站會嚴重浪費預算。先想清楚你期望網站幫你解決什麼業務問題，再決定方向。

B2B 訪客不會在「第一次看到網站」就直接詢價。他們會經歷 3 個階段、需要 3 種 CTA：

1. 立即 CTA（軟）：「下載產品型錄」、「看 5 個改造案例」、「查看完整服務說明」 — 訪客沒準備好詢價、但願意給 email 換內容
2. 軟詢價 CTA（中）：「30 分鐘免費諮詢」、「免費官網健診」 — 訪客在比較階段、想先理解你能怎麼幫他
3. 強詢價 CTA（硬）：「上傳圖紙報價」、「索取正式報價單」、「預約現場勘查」 — 訪客已決定要買、要的是具體報價

很多 B2B 官網只放第 3 種、跳過前 2 種 — 結果只有「準備好買的人」會聯絡、轉換率低。

映策智造在改造時、會依你產業的決策路徑、設計這 3 層 CTA 的位置、文案、表單欄位數 — 同樣的訪客流量、轉換率可以差 3-5 倍。

每個案例要含 5 個必備區塊、寧可少而精、不要量多但空：

1. 改造前數字 vs 改造後數字：例「不良率 12% → 0.8%」、「外銷詢價 1 件/月 → 12 件/月」、「品質分數 4.2 → 7.8」。具體數字才有殺傷力。
2. 整合的關鍵技術或設備：FANUC 機械手臂、Cognex 視覺系統、Siemens PLC — 列具體品牌、不要寫「先進設備」。
3. 合作週期：「12 週設計 + 8 週建置 + 6 個月維運」— 透明就是專業。
4. 客戶產業 + 規模（即使匿名）：「某中部塑膠射出廠、45 員工、IATF 16949 認證」— 採購會自動對號入座「我們也是這規模」。
5. 引言或推薦（如有）：客戶一句話、含他職稱跟公司類型（不一定要實名）。

案例頁不要 logo 牆 + 「服務全球 500+ 家客戶」 — B2B 採購知道這是空話。要的是「我做過跟你類似的、我用了什麼方法、結果如何」。

多數企業官網的證照區是這樣：一排 ISO / IATF / UL 圖標放在 footer 上方、訪客掃過去 0.5 秒就過。等於完全沒用。

改成 4 個動作、認證瞬間變信任資產：

1. 認證範圍寫清楚：「ISO 13485:2016 — 適用於本廠醫療裝置塑膠射出與後加工」、不是只寫「ISO 13485」
2. 認證單位 + 有效期：「TÜV Rheinland 簽發、有效期 2025-09 至 2028-09」 — 顯示是有公信力機構發、且還在效期內
3. 認證對應的能力對照：「IATF 16949 = 我們能做汽車零件 OEM」、「ISO 13485 = 我們能做醫療器材外殼」 — 翻譯給沒讀過認證內文的採購聽
4. 可附驗證連結（如有）：BSI Directory、TÜV 認證查詢 — 採購會驗、做給他看

映策智造改造時、會幫你把證照頁從「圖標牆」變成「認證 → 能力 → 客戶產業」的清楚對應、增加採購信任度。

CTA = Call To Action、行動呼籲。白話：「叫訪客做某件事」的按鈕或連結。例如：「免費官網健診」、「下載型錄」、「立即詢價」、「加 LINE 好友」、「預約 30 分鐘諮詢」。

用老闆語言講：你蓋了一座漂亮的展場、客人逛完不知道要去哪買單 = 沒 CTA 的網站。有再多流量、沒 CTA 都白費。

好的 CTA 三個必備條件：

1. 動詞開頭、具體：「索取 PDF 型錄」> 「了解更多」。「了解更多」是 CTA 死亡用語、訪客不知道點下去會發生什麼。
2. 講清楚會得到什麼：「免費官網健診（30 秒）」比「點我」好 10 倍 — 把對方換來的好處 + 成本（時間）寫清楚。
3. 視覺上跳出來：用品牌主色或對比色、按鈕要夠大（手機 ≥44px 高、桌機 ≥48px）、文字要白底深色或深底白色 — 不要灰底灰字弱化。

一頁該有幾個 CTA？不是越多越好。標準配置：

• 主 CTA（最想要訪客做的、整頁出現 2-4 次、相同文字）：例如「申請免費健診」
• 次 CTA（備案、給還沒準備好的人）：例如「先約 30 分鐘聊聊」、「下載型錄」

B2B 工廠 CTA 標準組合：

• 主 CTA：詢價表單 / 預約諮詢
• 次 CTA：下載 PDF 型錄 / 加 LINE 官方帳號
• 緊急聯絡（sticky 在手機下方）：手機 click-to-call

CTA 該放在哪幾個位置？

1. Hero 首屏（訪客一進來就看到）
2. 每一個內容段落結束時（介紹完一個重點馬上給機會行動）
3. 頁面最底（給看完整頁、最有意願的人）
4. Sticky 固定條（手機版尤其重要、訪客滾到哪都能 1 秒詢價）

實際數據：把「了解更多」改成「申請免費健診」、同樣流量、表單轉化率通常從 0.5% 拉到 2-3%、詢價量翻 4-6 倍 — 完全沒花廣告錢。

映策智造改造客戶時、CTA 永遠是 day-1 就修的事、因為它 ROI 最高、最快看到效果。

工程實例頁（消防、機電、太陽能 EPC、防水、廠房裝修、機房等）面對的對象是：業主、PM、設施經理、監造、總包採購。他們不是看「美感」、是看「你會不會準時、合法、安全完工」。

一個好工程實例頁的 8 個必備區塊：

1. 案場標籤：產業類別（半導體廠 / 飯店 / 醫院 / 學校 / 辦公大樓）、地區（中部 / 南部）、規模（廠房 X 萬呎 / 房間 X 間 / 容量 X kW）。讓 PM 一眼判斷「跟我手上的案像不像」。
2. 實際施工照片：施工中 + 完工 + 細部、3 種都要。不要只放完工美照、要放能說明施工複雜度的（高空作業、機房、配管、特殊環境）。
3. 工程範疇明細：屬於統包 / 分包？涵蓋哪幾項（消防警報 + 撒水 + 滅火 + 排煙、或機電 + 弱電 + 不斷電）？讓對方知道你能不能接他要的範圍。
4. 規模與時程：合約規模給範圍即可（如 3,000-5,000 萬等級）、工期、現場人數高峰。讓 PM 知道你能不能負荷他的案。
5. 技術細節：用了哪些設備品牌（西門子 / 三菱 / 漢威 / Honeywell）、符合哪些規範（NFPA / CNS / IBC）、有沒有特殊難點克服。這些是同業看得懂的「真功夫指標」。
6. 業主露出：能露就露 logo / 名稱；不能露用匿名 + 規模描述（「某中部半導體封裝廠」、「北部某 5 星級飯店、150 房改修」）。
7. 業主 / 建築師 / 監造評語（可選）：有的話放、會幫助同類業主下決定。沒有可省略、不要捏造。
8. 本案啟用的證照與保險：消防設備師證照、甲級電匠、工程險投保額度、第三人責任險。展示「合法 + 出事有人扛」。

常見 NG：

• 只放完工美照、看不出施工難度
• 只寫「品質優良、值得信賴」這種空話、沒有規模 / 認證 / 數據
• 沒寫工期 / 時程、PM 看不出能不能準時
• 業主名稱蓋過頭（全部寫「客戶 A」）、看起來像假的
• 沒放 CTA、看完案場想詢價找不到入口

結構排版建議：

1. Hero：案場主圖 + 一句話標題（「某中部 12 萬呎半導體封裝廠機電統包」）
2. 規格表（左半）+ 主圖 / 影片（右半）
3. 施工照片 gallery（4-8 張、含說明）
4. 過程敘述（為什麼這案有挑戰、你怎麼解決）
5. 業主評語（如果有）
6. 類似案場推薦（cross-link 同類案）
7. CTA：「我們也接這類規模、申請場勘」

數量建議：工程業主推 6-12 個代表案場、不要塞 100 個。質感比數量重要。每個案場頁完整寫、比 100 個只有標題沒內容的好。

想看實際案例頁怎麼做、可以參考映策智造的 改造案例。

B2B 商品展示頁（工業零組件、機械設備、原料、耗材、商用設備）跟 e-commerce 的商品頁完全不一樣。電商頁是給「消費者衝動下單」、B2B 商品頁是給「採購 / RD 評估後內部簽呈」。

跟一般電商頁差在哪？

• 電商：加入購物車 / 立即購買 → B2B：詢價 / 索取規格書 / 預約測試樣品
• 電商：用戶評論最重要 → B2B：認證 / 規格 / 案例最重要
• 電商：促銷折扣 → B2B：MOQ / 交期 / 客製選項
• 電商：強調情感 / 風格 → B2B：強調 evidence / 量化數據

一個好的 B2B 商品頁、9 個必備區塊：

1. 多角度產品照片：實品照、不要全部用渲染圖。採購怕「貿易商照片」、要看到工廠真的有貨。3-6 張為佳。如有可能加 360° 旋轉或短影片。
2. 完整規格表：尺寸、材質、公差、重量、認證、可選配項目。表格化、不要塞在段落裡。讓採購可以直接複製貼到內部評估表。
3. 應用情境：這個產品用在哪些產業 / 系統 / 設備？配合什麼牌子的主設備？讓 RD 一眼知道相不相容。
4. 技術文件下載：規格書（PDF）、3D 圖（STEP / IGES）、CAD 圖（DWG）、Datasheet。這些是讓採購願意往下走的關鍵。下載前可以要 email（lead 收集）。
5. 認證 / 標準：CE / FDA / UL / RoHS / REACH / IATF / AS9100 — 列出哪些通過、附證書號或下載連結。
6. MOQ / 交期 / 客製化選項：起訂量是多少？標準品交期？可客製哪些（顏色 / 尺寸 / 包裝）？採購最在乎這幾個。
7. 詢價 / 索取樣品 CTA：表單預填產品型號、不要讓訪客還要打字。提供 3 個層級：詢價、索取規格書、預約樣品測試。
8. 相關產品交叉推薦：同系列、配套件、替代品。延長訪客停留、提高客單。
9. 產品專屬 FAQ：5-8 題、針對這個產品最常被問的。順便 GEO + SEO 加分。

常見 NG：

• 只有渲染圖、沒實品照（採購懷疑你是貿易商不是製造商）
• 規格寫在段落裡、無法快速比對
• 沒有 PDF 規格書下載（採購不能丟給技術主管評估）
• 沒寫 MOQ / 交期（採購打回去問老闆要這些、嫌麻煩直接換家）
• 用內部代號（如「A-2024-PR-01」）、不是業界通用詞（「PA66+GF30 螺絲」）
• 詢價表單欄位過多、產品名還要訪客打字

SEO / GEO 加分點：

• 每個產品頁加 Schema.org/Product 結構化資料（價格範圍 / 製造商 / MPN / GTIN）
• 產品 FAQ 加 FAQPage schema
• 產品標題寫「業界搜尋詞 + 規格」（「PA66+GF30 含玻纖塑膠射出 OEM」）、不是「我們的優質產品」
• 每頁 alt text 寫具體（「PA66+GF30 射出件、IATF 16949 認證」）

數量建議：把「核心 10-30 個產品」每個做完整商品頁、比把 500 個都做半成品強。採購要的是深度、不是 SKU 數量。剩下可用 PDF 型錄整本下載補齊。

想了解你商品頁哪裡可以改、可以從 免費官網健診 開始、或看 改造案例 中其他工廠怎麼做。