日文基礎診斷表問卷頁：由「太花太黑」到可讀可轉化
呢次唔係「重做一個新頁」，而係喺現有 LP 上做最小可行調整：先解決閱讀阻力，再聚焦行動區。
技術面主要係 HTML/CSS 版面層級、背景圖裁切策略同 CTA 視覺優先序調整；頁面最終部署喺 Cloudflare Pages，方便做版本核對同快取驗證。
起點問題（Before）
- 背景圖規格唔清楚，桌面與手機焦點跑位。
- 遮罩偏重，主標與次要說明要「用力睇」先睇到。
- CTA 區同背景元素互搶視線，下一步唔夠明確。
客戶原本預期係「小改就好」，但實際阻塞位係視覺層級未排序，先做層級比先換設計更有效。
決策與做法（Why + How）
- 先定素材規格，再微調樣式：用 16:9 +
cover思路鎖定安全構圖，避免反覆試圖。 - 分裝置對焦：桌面／手機分開
background-position，處理「同一張圖唔同裁切」問題。 - 先降干擾，再談美觀：降低遮罩 alpha，確保標題與正文對比足夠。
- CTA 先可見先算：移除 CTA 背景圖，只保留純漸層，令行動按鈕做回第一視覺層。
結果對比（After）
閱讀阻力下降
主標、段落同按鈕層級更清晰，訪客唔使先解畫面先行動。
對焦一致
桌面同手機都能維持主體位置，唔再因裁切失焦。
可複製流程
整理成「圖檔規格 → 對焦 → 遮罩 → CTA」四步檢查清單。
註：此案以可讀性與行動聚焦為主，未包含 A/B 測試流量驗證；若要量化轉換率，需再配合追蹤事件與實際流量週期。
範圍與限制（Scope）
今次有做
- Hero 視覺可讀性與焦點修正
- CTA 區視線導向優化
- 可重用檢查流程整理
今次未做
- 完整文案重寫與多版本測試
- 追蹤碼事件規劃與報表
- 後續自動化名單跟進
可複製條件（適合邊類頁）
- 單頁型 LP／問卷頁，主要問題係「睇唔清重點」。
- 已有頁面想先做最小改動，而唔係整站重做。
- 團隊需要一套固定排查順序，避免每次靠感覺微調。
想把你現有頁面由「有設計」變成「有轉換」？
我可以按你現況拆出最小可行修改清單，先做最影響結果嗰一步。
預約 30 分鐘診斷：幫你定邊啲值得自建、邊啲可以遲啲先換。