- Irvinglab 爾文實驗室
- Posts
- 🚀 行銷策略圖｜Shopify AI 助理｜CSS 轉成 Figma 設計圖｜沈浸在字體的美感設計｜實作 PageFly 頁面｜SEO 成效視覺化模板
🚀 行銷策略圖｜Shopify AI 助理｜CSS 轉成 Figma 設計圖｜沈浸在字體的美感設計｜實作 PageFly 頁面｜SEO 成效視覺化模板
科技工具每信一推：Looka。今天會分享滿多內容，真的要看完！
Irving Chen
March 04, 2024
Irvinglab 爾文實驗室
今天會分享滿多內容，真的要看完！可以輕鬆細讀以及分享給好朋友或公司團隊使用的 ^^ 包含目前最主流強大可用於國內外都適用的跨境電商架站平台 Shopify、網頁設計、SEO 相關資訊資源分享、每信一推數位工具等
資料來源：21 B2B Marketing Tactics for 2024 - Pierre Herubel
平常就在刷 LinkedIn 領英閱讀與蒐藏各領域專家的貼文，看到這張行銷策略圖 21 B2B Marketing Tactics 覺得整理得相當之好：水平線代表多快看到成果、垂直線代表要投資多少成本，例如 SEO 投資成本大概在中上、需要長時間執行才會看到成果。儘管其名為 B2B，但也可將其調整為 B2C 使用或改為符合自身現況，行銷人可以善用此圖為基礎進行規劃為適合團隊內部使用。
💎 若想快速建站線上販售產品，可參考這篇深度了解 Shopify：用兩個月打造 Shopify 電商網站（這幾年來越來越多台灣的個人或商家藉此架站平台開啟副業或自有品牌，賺取額外收入或擴大經營：個人創業或公司營運都適用）
💎 若想要進行線上協作 UIUX 網頁設計工具真心推薦首選：Figma（尤其是若你是網頁設計師，除了輔助使用原本的舊工具 Photoshop 之類的，也來嘗試看看 Figma 吧！想知道更多如何使用 Figma 整合在網站設計與開發專案中，尤其是如何搭配 Shopify 和 WordPress 架站平台建立網站，這完全是我的領域，接下來會在電子報的文章中陸續推出）
💎 若想用 WordPress 快速打造個人品牌網站或部落格深度經營 SEO，可以參考這篇：WordPress 外掛推薦精選（會需要已有 WordPress 基礎架站經驗的人服用，若想知道如何從零開始，除了參考 Google 海量的教學外，若希望 Irving 爾文也分享 WordPress 架站教學，歡迎填寫表單，確認需求熱度後，我會排程思考如何執行）
前述內容可能已經有人或多或少看過或用過，近日開始構思長文主題，以下是精選以往與最近在其他社群分享過的貼文，陸續彙整在每一封信中，每次寄出就會同時發佈在電子報專屬的首頁，待大量累積後，可以直接用「搜尋」關鍵字的方式篩選內容以回顧，相當方便！
🍎 Shopify 在 2023 年推出的 Shopify Help Center Assistant 幫助中心 AI 助理
Shopify Help Center Assistant - 2023 年發布
Shopify Help Center Assistant 可以使用看看，用 AI 來回答各種 FAQ，可以為企業節省人力成本和時間成本。
Shopify 在 Help Center 網頁中新增這個 AI 客服助理，可以隨時回答使用者的任何問題，勢必能大大降低他們客服人員的負擔了吧 ^^ 然後精簡人員？！以後有問題可以狂問且回覆速度更加快速了？實測發現有些問題回覆的滿精準的，而且真的很快。儘管有些還是跟真人回覆的有些細節差異，但就兩者就同時使用，互補有無！目前只有英文版，中文版還未推出
🍎 如何複製網頁中的 CSS 樣式轉換成 Figma 的設計圖？
Chrome Dev 開發者工具可以複製程式碼中的各種選項
Figma Plugin：code to design playground
🍏 我竟然現在才發現，Chrome Dev 開發者工具可以直接快速複製 HTML 標籤元素、CSS Styles 等，這可以做什麼用？
🥕 網站開發：節省慢慢調整的時間，直接複製後進行微調即可
🥕 網頁設計：直接將網站上的 CSS 樣式貼回 Figma 快速建立在設計圖中使用
我想分享一款很棒的 Figma 外掛來解決這個需求，叫做 Code to Design Playground，這個外掛的主要用途是將在 Chrome 開發者工具中複製的 HTML 標籤和 CSS 樣式直接轉換成 Figma 的設計元素。我會在影片中示範如何使用這個外掛，讓你能夠更輕鬆地將網頁程式碼轉換成 Figma 設計。快來看看吧！
若你是 Figma 使用者、網頁設計師，那善用這些 Figma plugin大幅提升網頁視覺設計過程的執行效率、團隊協作的順暢、降低時間與跨部門的溝通成本，而且外掛的免費版本通常就夠用了！完全適用對象為網頁設計師、UIUX 設計師或本來就是用 Figma 來專案管理、腦力激盪發想、行銷工作等。
🥕 若你還沒有 Figma 帳號，可以註冊免費帳號，免費版就很好用了！
🥕 延伸閱讀：資深網頁設計師常用的 Figma Plugin 推薦
🍎 美感沈浸，沈浸在字體與媒介之間的排版應用，Fonts In Use 呈現多面貌字體組合
美感沈浸，沈浸在字體與媒介之間的排版應用，Fonts In Use 網站陳列各種英文字體與其應用的場景、產品等，不僅每項作品都有標示使用哪些英文字體與設計師或代理商，還有顯示應用在哪些媒體、分類主題、國家等。
有時在選用字體組合，想看一下實際的印刷結果如何，透過觀摩這些大量的輸出品和成品，也可以節省不少設計師測試與排版的時間。
🍎 Shopify APP：PageFly 建立頁面簡介實作影片
我快速錄製影片講解一下用 PageFly 在 Shopify 網站中建立頁面的方式，主要有二：
整個頁面：全部用 PageFly 建立
整個頁面：部分 Shopify + 部分 PageFly Section
🍉 此影片有嵌入到文章中 PageFly 初入門：快速建立 Shopify 網頁，有任何問題或想法可以留言或來信囉！
用 Shopify 打造品牌電商網站
PageFly 是一款 Shopify App，專門為 Shopify 網站建立高度客製化網頁視覺設計與排版的網頁編輯器。全名是 PageFly Landing Page Builder，官方中文翻譯為「PageFly 網頁生成器提供者」，其官方網站首頁開頭便直接說明：Make your Shopify website work and look just like your idea without coding 建立一個屬於你心目中的 Shopify 網站，不用寫程式也做得到。
下方投影片是我在 2022 年一場台灣 Shopify Meetup 小聚分享的內容，概要簡介建立電商網站為何選擇 Shopify 以及「Shopify 網站如何客製化設計」，我著重在「設計」而非只是「網站建立」而已，若想要另外了解如何更自由地進行網頁排版與配置，可以參考此篇：如何打造 Shopify 電商網站客製化設計排版
🍎 SEO 成效模板，基於 Google Search Console 資料建立的數據視覺化儀表板
近日看到一個滿好看的 SEO 成效模板，僅基於 Google Search Console 資料建立的數據視覺化 Looker Studio Dashboard Template，擁有者是 Niklas Buschner 公開分享給所有人使用，可以建立副本在自己的帳號中
🚀 簡化了 SEO 分析，即時了解 SEO 策略的有效性，快速查看搜尋狀態的趨勢變化。
☕️ 科技工具蒐藏 - 每信一推
Irving 爾文會在每次分享 Newsletter 時推一個我正在使用或精選蒐藏的軟體工具，包含各種領域類別如 UIUX 設計、網站、電商、行銷、社群、AI 等。
品牌標誌設計 Logo Design
Looka：用 AI 產生無數個品牌 LOGO，有夠方便至極！平面設計師的工作再度受到挑戰…… 我自己因為有數個新品牌正在建立中，先指定了某一品牌進行免費試用了一下，覺得有夠讚，後來我就選擇了付年費方案也不貴，直接取得整組 Brand Kit 素材，還可以隨時進後台編輯與修改！Design a Logo, make a website, and create a Brand Identity you’ll love with the power of Artificial Intelligence. 100% free to use.
若對電子報有任何想法或建議，可以填寫回饋表單，我會納入評估作為優化的方向，提供更優質的內容 ^^
Teamwork makes the team work
🎄 Line 學習社群
Shopify 網站設計與架站學習交流
分享主題從網站規劃、設計到建立等相關內容，透過學習交流與經驗分享，讓彼此成長更加快速，主要以 Shopify 建立電商網站為主。
WordPress 網站設計與架站學習
學習 WordPress 網站設計與架站，分享實作經驗與交流。
SEO 資源彙整與學習
閱讀 SEO 就像喝水一樣，習慣建立與自然地吸收。
成為網頁設計師
邁向網頁設計師之路，了解網頁設計的基本概念與實作經驗交流與分享，無論是行銷人、工程師、平面設計師等想要了解更多「網頁設計」都歡迎加入討論。
Learning by Reading → Learning by Doing → Learning by Sharing
Irving 爾文
熱衷設計與文字創作、社群分享，專注網頁設計與架站平台、SEO 搜尋引擎優化，深度研究品牌行銷、UX 策略與數位產品、電商經營等領域，學習各式各樣的科技軟體。
#藝術 #設計 #科技
★ Founder of Irvinglab 爾文實驗室
★ Senior Web Designer / SEO Manager
★ 專精 Shopify 電商網站設計與架站
★ 專精 WordPress 品牌網站和部落格建置
★ 工作經歷大小型公司（包含品牌方與代理商）、網頁設計接案公司、數位行銷公司、新創 Saas 軟體公司等
降低資訊落差，幫助所有人做出最佳判斷，符合現階段的需求與成本考量
若對電子報有任何想法或建議，可以填寫回饋表單，我會納入評估以作為優化的方向，提供更優質的內容 ^^
Reply