此篇分享我如何建立 Shopify 電商網站的時間規劃表，從需求確認、網站內容規劃、網頁視覺設計、Shopify 版型和 Shopify App 設定等，拆解每個階段的任務與細節
「實戰經驗分享，非只是網路資料整理」（更新時間： 2023.08.12）
嗨！我是爾文（Irving Chen），資深網頁設計師，先快速介紹一下自己的架站經驗，本人有多年使用 WordPress 架站與網頁設計的經驗，近年則專注 Shopify 電商網站設計與建置。對於這類架站平台的限制與可塑性有一定的了解，例如 Squarespace、Wix 後台真的限制超多，大部分的情況只能按照其版型去做編排，要做其他設定會相當困難而痛苦；WordPress 則是彈性度超高，可以在後台來去自如、修改頁面程式碼、使用海量的版型和外掛資源為網站打造全方位數位能力。若有網站相關問題，可以前往填寫表單留下訊息或需求給我，我會盡快回覆！
我一直在根據手上數個專案進行調整，找出一個順暢的 Shopify 網站「設計」執行的 SOP 與規劃，並能有效應用在線上協同的文件或檔案中。我打造了幾個模板文件與所使用的軟體，如下：
- Shopify 網站進度表範本（Google Sheet）
- Shopify 網站專案執行流程範本（Notion）：逐步優化中，敬請期待！
Shopify 網站排程表
我一直在根據手上數個專案進行調整，找出一個順暢的 Shopify 網站「設計」執行的 SOP 與規劃。下圖為基本的步驟與流程，但有些階段是可以同時並行的，例如 Shopify 基本設定在購買版型後就可以開始進行，金流設定的確認越早開始越好（通常金流從申請到完成大約費時一到一個半月左右），整個網站完成到上線的時間根據實際需求彈性調整。（小秘訣：若要加速網站建置過程，直接選用功能強大又有設計質感的 Shopify 版型可以提升相當的效率，例如使用 Minimog Shopify Theme，這個我已經使用至少在五個網站以上，相當易用上手！僅供參考）
Shopify 網站規劃與設計
- Brand Guideline：包含基本的元素如 Logo、字型設定、顏色等
- Resource (Materials)：包含網頁中所有會使用到的素材、圖片等
- Requirement (List)：客戶的需求要用最簡潔有力的「清單模式」列表出來，若需求都沒整理清楚，後面會寸步難行這是最最最最最重要的，因為太重要了，永遠不用擔心「過度溝通」。
- Wireframe：我的用法是分成兩個階段，第一個根據現有的資料快速排版內容，並且與客戶討論需求時邊更新。第二個才是所有的討論結果最終確認版，能的話最好能將「完整的文案」排版進去。
- Web Design：會分成提案階 (Proposal) 段和完稿 (Final) 檔案。
- Shopify Theme：所選擇版型要先測試能使用的功能限制，全部開出來攤在陽光下，讓彼此都知道強項與限制在哪。根據限制和需求再見去找解決需求的 Shopify App。
- Shopify App：將一些比較關鍵的測試與實際執行步驟的 Shopify App 紀錄下來，不僅可以幫助自己記憶，也可作為團隊協作與交接的重要檔案，不用怕說花太多時間，我們用 Figma 紀錄過程其實很有效率！
- SEO meta：基本的 SEO meta 設定與文案構思也是相當重要的，例如網頁標題、網頁敘述、網頁預覽等都可以根據關鍵字策略分析進行初步的設定。這是影響眾多 SEO Ranking 因素之一，例如在關鍵字在 SERP 的點擊率、在社群預覽時的品牌形象等，我發現很多人都會忽略或輕忽這個的重要性，應該要花心思投入。
- Web Analytics：網站分析工具設定，必備安裝的有 Google Analytics、Google Search Console，額外的可以有 Google Tag Manager，視需要可以使用付費的 Hotjar、CrazyEgg、Mixpanel 等。而也聽過有想測試網頁的 A/B Testing，Shopify App Store 也是有提供相關功能的可以訂閱使用，同樣視情況投資與否。
- Feedback (Test)：網站完成後需要測試回饋、網站上線正式曝光後也要測試回饋，確認消費者的瀏覽體驗、購物體驗是良好的。
網站專案執行
經過數年來為各種產業的客戶打造數十個網站，從彼此磨合、錯誤經驗的學習，淬煉出一套網站專案執行的工作流程，而且不斷優化與更新，讓剛接觸網站設計這個領域的人，無論是設計師、工程師或客戶等，初步了解每個可執行的步驟，降低溝通成本，提高工作效率。
無論是使用哪種平台，網站設計流程的規劃大同小異，唯一的差別就是使用不同的平台架站會有執行上的差異。下圖是 Shopify 電商網站設計的時間排程，每個階段規劃依實際需求和情況彈性調整，時程的長短可以當作一個參考值即可。我們有了「執行所需時間」與「工作事項」的概念，讓團隊、客戶或專案經理在初步規劃時不會毫無頭緒！
此檔案是建立 Figma 中，可以縮放瀏覽，我已設定公開，若你也有使用，歡迎蒐藏與分享，並且留言和拍手讓我知道這對你的工作很有幫助噢！因為我會不定時去更新檔案內容與流程編排，所以隨時可以回來閱讀文章囉！🍉 若你還沒有 Figma 帳號，可以前往註冊免費帳號，免費版就很好用了！
各階段工作內容概要
- 需求探索：確認需求（相當重要的階段，了解需求與目標，幫助客戶釐清與整理思緒）
- 概念發想：團隊內部腦力激盪（可以與客戶一同探索與討論，必要時進行 Workshop）
- 內容規劃：建立網站地圖（Sitemap），根據企劃需求規劃頁面內容概要，此階段的 Wireframe 是討論需求使用
- 圖片素材：通常是攝影圖、插圖、產品圖或情境圖，必要時需提出攝影計畫外包攝影工作室拍攝
- 文案內容：提供網頁文案、網站內容建議如標題和內文根據設計排版的設定最佳的字數等
- 網站原型：最終版頁面需選定 Shopify 版型（Theme），然後先試用了解版型基本設定，搭配可能使用的 Shopify App 建構出框線圖 Wireframe，並實際搭配文字
- 網頁視覺：順序是先進行主視覺設計提案，確認後再打造首頁設計，最後是進行網站其他頁面的設計
- Shopify 架站：主要階段有排版（使用版型設定與頁面編輯器 App 和 CSS 客製化）、設定網站功能 App、內容上架、RWD（mobile web）、物流和金流的串接、ERP 串接、基本 SEO 設定
- 網站測試：至少要讓內部團隊、客戶進行實機測試瀏覽網頁，給予回饋與修正，例如表單填寫、電子報訂閱、發票收據開立、使用者的購買流程、金流物流狀況等
- 網站分析：必要設定追蹤碼如 Search Console、Google Analytics，視需求而定的 Google Tag Manager、Facebook Pixels 等
- 網站上線：理想時間是選在週二或週三，意思是只要上線後隔天不是假日較佳，這樣網站若一出問題時確定有人在崗位上可以進行修正
- 持續優化：UI/UX、文案、SEO、網站速度
在執行專案的過程中，會遇到很多實作、溝通等問題，如何提升雙方在討論、協作時的效率，我會陸續分享我的經驗與常用的數位工具，針對不同情境運用不同的工具組合，讓專案事半功倍，尤其在遠端會議時相當重要！記得隨時回來瀏覽此頁，加入蒐藏！
專案執行小訣竅
如何一次輸入 PDF 檔所有頁面方便閱讀，並能快速做筆記與分享，甚至協作？
解法
- PDF 直接匯入 Miro（圖檔）
- PDF 直接匯入 FigJam（文字可編輯）
- PDF 透過外掛：PDF to Figma 匯入 Figma（圖檔）
使用工具（使用免費方案即可，畢竟是免費方案，有其限制，限制項目可直接瀏覽官網說明）
- Miro：線上協作白板工具
- Figjam：線上協作白板工具
- Figma：線上協作 UI 設計工具，搭配 Figma 外掛：PDF to Figma
使用情境
因為有時候客戶或需求方會給我很多他們自製的 PDF 檔參考用，可能是提出網站頁面說明、Wireframe 需求細節等，尤其頁面數量和文字量很多時，切換設計軟體和 PDF 檔案來回瀏覽頗麻煩，不如就直接將 PDF 全部丟進設計軟體中閱讀與編輯比較有效率。
但，以往我都是透過 Acrobat 匯出 PDF 檔案為圖片檔，參數解析度即使調到最高還是沒預期中好（多多少少還是被壓縮了?!），或丟入 Photoshop or Illustrator 再調整參數後匯出，流程瑣碎且費力。
後來使用這三種方法秒殺我長久以來的痛苦，移除了小碎步、直接一步解決！Miro、FigJam、Figma 都可以用 Google 帳號登入超快速，將以上流程每步驟都精簡到極致，不僅如此，還可以邊線上開會、分享畫面時同時做筆記，爽度一百。
備註：若對方給的是 PPT？可先將 PPT 使用內建匯出 PDF 檔即可
想要更全面學習強大的線上 UI 協作設計軟體 Figma？可以上這堂課：產品設計實戰：用 Figma 打造絕佳 UI/UX。除此之外，我自己有搭配 UX 使用者經驗設計和數位產品開發相關的精選課程推薦，例如 UX 新手入門：UX 設計/研究全攻略: 給新手的職場通識課、UX 扎實的學術研究理論：用戶x商業x數據 | UX‧三刀流產品體驗設計、產品數據分析：產品數據分析 – 打造網路產品的決策引擎、產品創新：產品 x 創新：從需求洞察到產品策略、產品經理 PM：產品經理職場學：PM 必修的職涯指南！，全部上完之後讓我大開眼界、豁然開朗，提升思考層次與思維方式，有興趣的人可以參考並選幾堂符合目前需求來學習與充實自己。
加入 Line 的學習社群
- 成為網頁設計師 | Irvinglab 爾文實驗室
- 簡介：邁向網頁設計師之路，了解網頁設計的基本概念與實作經驗交流與分享，無論是行銷人、工程師、平面設計師等想要了解更多「網頁設計」都歡迎加入討論。
- 網址：https://share.irvinglab.com/be-a-web-designer
- Shopify 網站設計與架站學習交流 | Irvinglab 爾文實驗室
- 簡介：分享主題從網站規劃、設計到建立等相關內容，透過學習交流與經驗分享，讓彼此成長更加快速，主要以 Shopify 建立電商網站為主。
- 網址：https://share.irvinglab.com/shopify-line-group
- WordPress 網站設計與架站學習｜Irvinglab 爾文實驗室
- 簡介：學習 WordPress 網站設計與架站，分享實作經驗與交流。
- 品牌網址：https://share.irvinglab.com/wordpress-line-group
- SEO 資源彙整與學習｜Irvinglab 爾文實驗室
- 簡介：閱讀 SEO 就像喝水一樣，習慣建立與自然地吸收。
- 網址：https://share.irvinglab.com/seo-line-group
AI、設計與行銷工具
- Figma：UIUX 設計師和網頁設計師首選必用的線上設計協作軟體，若你是行銷人、專案管理、團隊主管、遠端協作等也都非常適用！大幅提升執行效率、降低溝通成本。
- Framer AI：輸入文字，數秒內即可生成網站的 AI 工具！這對設計師來說值得研究研究！
- Relume：若是 Figma 設計師和 Webflow 架站的愛好者，可以玩玩看！Access the world’s largest library of Figma & Webflow components and build better websites in hours, not days.
- Siter.io：又一款免程式碼的網頁編輯器，介面有點類似 Figma，Online design tool with no coding to think about
- Untitled UI：The world’s largest and most popular Figma UI kit. Kickstart any project, save thousands of hours, and level up as a designer.
- Shulex：電商網站的競品分析工具很多，這款我試用了一下分析 Amazon 產品頁可以自動分析評論、產出該產品的人物誌、正面和負面評論的項目與比例等，讓我可以快速了解產品的使用者輪廓與痛點，滿推薦使用看看。
- PPSPY：Shopify Store Spy & Shopify Dropshipping Monitor Tool 發現這工具真是大開眼界，可以用 AI 尋找 10 倍利潤的熱賣產品，主要針對 Shopify 商店，包含快速監控對手、進行市場研究、熱銷產品研究找到利基市場、進行大量店舖主題設計參考等
- Rask.ai：領先的AI視頻本地化和配音工具，告別昂貴的翻譯員。我們的目標是用人工智能提供不亞於人類的配音和翻譯體驗
- Wincher：一款追蹤 SEO 成效的工具：算是超級簡易版的 Ahrefs，可以直接連接 Google Search Console 簡約地呈現數據，用一用也是清爽的，等未來功能越來越豐富時，或許可以考慮付費版
- Writesonic：快速創作部落格、廣告、電子郵件和網站所需的內容，並進行SEO優化，這是最令人期待的 AI 內容產生軟體！其中可以安裝 Chrome extension，然後快捷鍵可以直接呼叫輸入視窗，超級方便。即將推出 ChatSonic AI Bot for Businesses: Customer Support AI Chatbot，類似 Chatbase，這類線上客服 AI Chat 比以往的 Bot 還更人性化且反應不會過於機器人。
- CopyAI：行銷文案 AI 自動產生器 CopyAI is an AI-powered copywriter that generates high-quality copy for your business.
- Chatbase：利用您擁有的知識庫，打造一個AI聊天機器人，並輕鬆將其添加至您的網站中
- ActiveCampaign：Email 行銷、電子報系統（MailChimp 的替代方案之ㄧ）
- Canva：線上平面設計工具，若團隊沒有設計師，那 Canva 真的是神助攻！解決行銷、社群、平面設計、簡報等需求，版型一應俱全
- Envato Elements：無限下載的付費資源素材：包含圖片、影片、音樂、音效、平面設計、插圖、簡報模版等，這個也是我常常在用的素材平台
- GetResponse：All-in-one 行銷平台，包含電子郵件行銷 Email marketing、登陸頁建立 Landing pages、行銷自動化 Marketing automation 等功能，可以先註冊帳號使用免費版，覺得需要未來再升級！這軟體類似 Hubspot
- PickFu：PickFu 是美國消費者在線調研工具，可進行在線的測試、優化和即時消費者調研問卷，取代猜測。透過 PickFu，你可以立即獲取至多 500 條來自美國消費者的意見。通過尋求眾人的智慧，幫助你做出更好的商業決策
- SurveySparrow：全渠道顧客滿意度調查管理平台 Omnichannel Experience Management Platform
- Qwary：全渠道 CX 客戶體驗平台，可幫助企業獲取客戶反饋並通過設計精美的專業調查來衡量 NPS、CSAT 和 CES，以改善購物體驗和產品性能
- Opinion Stage：建立免費的測驗、投票、表單等工具，視覺質感和功能運作不錯！也有提供付費方案，提高每個月的回應數
- Typeform：質感優雅的線上表單
- NoteForms：專門整合 Notion 的表單建立，其官方網站首頁揭示使用者包含哈佛大學、耶魯大學、現代汽車等都有在用。因為我本身主要使用 Notion 管理專案，這大大方便多了，快速建立表單、蒐集回饋直接存到 Notion，節省不少切換軟體與資料轉移的人力
- UXPressia：快速創建專業的顧客旅程地圖 Customer Journey Map、人物誌 Persona 和影響地圖 Impact Map，還有各種模板可以直接套用。
- AlsoAsked：People Also Ask keyword research tool 若要撰寫 SEO 文章，這是一款可以考慮使用的工具，輸入關鍵字後會自動產生樹狀圖表呈現內容延伸標題
- Beehiiv：滿新穎的電子報訂閱工具，相當輕巧。時常被拿來跟 Substack 相比
- Surfer：SEO 工具，主要可用做 SEO 內容編輯者使用， AI 產生 SEO 文案、關鍵字推薦、SEO Audit 等功能，介面設計滿新穎的，賞心悅目！可以玩玩看，七天內可以退款。
- Plerdy：全方位的網站優化分析工具，目標為提供網站優化與轉換率，擁有如此多的功能費用也算平易近人，包含 Heatmap、Session Replay、NPS、Ecommerce Analytics、Event Tracking Tools、Funnel Analysis、SEO Checker、UX assistant、Ecommerce Analytics 等（但沒有 AB Testing）
- VWO：這款是我夢寐以求的 AB Testing 軟體，其功能的專業程度與順暢度相當高！可以先用免費試用三十天，有提供免費版和付費版，免費版可以當作小試身手，若專注在網站轉換率搭配大量測試各種設計與文案版本測試則可以考慮升級為付費版本。
- ABtesting AI：有用過 AB Testing 在優化網站嗎？來試試 AI 的 Testing，有免費方案可以測試
- ClickMagick：在找 AB Testing 工具時發現 ClickMagick，也看了其他 YouTuber 簡介，感覺相當易用，找時間實測
- Frase：彈指之間用 AI 協助搜尋、撰寫與優化 SEO 文章
- AppSumo：限時優惠的一次性付費數位軟體販售平台（大幅降低成本）
- Tidio：設計優質的線上交談工具 Online Chat
- Help Scout：線上客服（Zendesk 的替代方案）
- HeySummit：舉辦線上虛擬研討會
- SimplyBook：線上預約排程系統 及 App 預約軟體
- Liinks：一頁式多連結網頁，整合多個社群、官網的一頁式網站
- LearnWorlds：創建與銷售線上課程網站平台
- Teachable：創建與銷售線上課程網站平台
- Make：視覺化自動化工作流程，將數據串接等在各種軟體來回穿梭，提升工作效率
- Bardeen AI：結合 AI 的自動化工作流程，整合各種常見 App
- Piktochart：資訊圖表設計工具
- MotionElements：專業的影片素材、版型、外掛
- MotionVFX：專業的影片素材、版型、外掛
- Payoneer 派安盈：安全、快速，一站式跨境收款
- Wise：跨境帳戶，進行國際付款、收款
- Surfshark：Surfshark VPN 最近開始用，還滿好使用的！原本需求是想要瀏覽某些國外網站卻被強制自動轉址，所以用 VPN 解決此問題
- Firstory：平台上架、贊助訂閱 與廣告盈利 最完整強大的 Podcast Hosting 省去所有繁瑣上架流程，我們將你錄好的音檔自動發佈到 KKBOX、Apple Podcasts、Spotify 和 Google Podcasts 等收聽平台
- Descript：錄製 Podcast 線上工具，包含影音剪輯、Podcast 錄製、螢幕錄影等功能。There are simple podcast & video editors and there are powerful ones. Only Descript is both & it features magical AI, so you can skip the hard part of editing. Get started for free
- Podcastle：錄製 Podcast 的線上工具，包含影片和聲音剪輯、聲音轉文字等功能。Podcastle is the simplest way to create professional-quality podcasts. Record, edit, transcribe, and export your content with the power of AI, in an intuitive web-based platform.
- CSS Scan 3.0：在進行網站開發時，檢查、複製和編輯 CSS 的最快速、最簡單的方式，跟「檢查元素」說再見——透過滑鼠懸停於任何元素上，即可立即檢查其 CSS，並透過一個點擊複製其所有規則。
- 陸續蒐藏與研究…
有任何想問的問題，歡迎填寫表單留言或寄信給我 irving@irvinglab.com、FB 粉絲團或直接線上交談，我們一起交流、成長！附上我的網頁設計作品，可以來逛逛喔！歡迎加入 Shopify 網站設計與架站學習交流：Line 社群 一起交流與學習！但在美國的用戶無法加入台灣的 Line 社群，所以我也另外建立了 Telegram 社群，兩邊珍貴的經驗會同步分享與整理。若想進一步了解服務內容，可以加入 Irvinglab 爾文實驗室的 Line@ 官方帳號留下訊息給我們。
