沒想到我做的網頁RhythmRider 受到熱烈歡迎。
這是個不用手寫 HTML 和 CSS、純軟體介面操作、所有文案和圖片動畫都用 AI 生成的 RWD 網頁。
https://rhythm-rider.akanelee.me
先說，我做的RhythmRider 還是需要人工拷貝貼上圖片文案、進行微調和設定動畫，不是打幾個關鍵字叫 AI 就生出一個網頁。
文案是 chatGPT、圖片產生是 Midjourney，這應該很好猜。
軟體我用 BLOCS，它不是 AI，是純視覺介面做 RWD 網站的軟體。
Blocs is fast, intuitive and powerful visual web design software, that lets you create responsive websites without writing code.
Blocs 很好用！但不適用完全不懂 HTML、CSS 的人。
起碼要有一點對 RWD 的基本認識，知道 Grid 系統、知道 HTML 和 CSS 的差別等，才能夠上手。
不用學到可以手寫碼的程度，Blocs 有很多樣板，套套樣板改改字，也能做出有模有樣的網頁。畢竟現在網頁版型大同小異，圖片、色彩選得好就能獲得不錯的評價。官方 Youtube 頻道的免費教學影片必看，有些操作藏的比較隱密不好懂。
最方便的部份是做「動畫」、做滾動視差，用滑鼠點一點就完成了，省很多寫碼的力氣。
以上是指「套樣板、點一點換圖換字」很方便的部份，真的想要微調細節、做出差異化、酷炫一點，還是需要一些 HTML、CSS 知識比較容易處理。
動畫我用Motionleap 在手機上製作。
對，就是把 Midjourney 產出的圖在手機裡用 Midjourney APP 加特效、輸出影片，傳回 MAC 放首頁底圖。
這個流程說穿了沒什麼，只是弄得很酷炫而已。
流程
畫 Wireframe
你不會以為啥草圖都沒有，直接開軟體就上了吧？怎麼可能。
網頁主題是什麼？有哪些文案要擺？需要產出幾張圖？這些規劃還是要自己想。
AI 可以減少想文案想破頭的痛苦，但沒辦法告訴你「客戶要求在這個網頁放上 6 個產品特色」。
不畫草圖不思考需求、腦子啥都不想動、只想直接叫 AI 產出，這叫賭人品通靈不叫科技。
手繪 Wireframe 非常非常重要，沒畫 Wirefame 你連「要不要副標題？」、「要不要畫 icon？要畫幾個 icon？」都答不出來。
BLOCS 裡再畫一次 Wireframe
手繪好 Wirefeame 後，我才開啟軟體。
BLOCS 有很多空白的樣板，照著手繪的 Wireframe 把畫面拼出來很簡單，這時候所有視覺元素（色彩、字型字體）都先不考慮，只考慮圖片（影片）、文字的擺放位置。
（暫時不用在意 LG、MD、SM、XS 的版型，等圖片套上去、字體字型色彩都設定好了，最後再來處理 RWD。）
文案
因為有畫 Wireframe，所以會知道需要幾個大標、幾個副標、幾個文案、幾個使用者見證…等文案。
把你需要的文案列出來扔進 chatGPT 裡叫它寫，再把 AI 產出的結果照樣 copy 去 BLOCS 貼上。
這個步驟沒啥難度。
圖片 Midjourney
因為有畫 Wireframe，所以會知道有幾張大底圖、幾張展示圖、幾顆 icon、幾張使用者人像要畫。
開 Midjourney，多算幾次，挑出風格適合的圖片，可以參考下列 Midjourney 教學文章。
Midjourney AI 繪圖教學系列
Photoshop AI
Midjourney 產出的圖通常無法完美符合我們想要的，比如首頁文字置左，底圖就希望人物靠右。
請參考這篇文Photoshop AI 試用（圖多） ，把底圖拉寬，用 Photoshop 的 AI 加上背景光暈線條。
首頁動畫 Motionleap
首頁動畫很酷炫吧！
我設定成 LG、MD 尺寸的螢幕才看得到首頁動畫，沒看到的可以再去看一次RhythmRider 。
其實說穿了人人都會做，不需要什麼專業設計軟體操作技巧。
Motionleap 免費版就能玩出很多花樣。把圖片套上特效，輸出影片。很多有在玩 IG 的人應該都玩過這個軟體，只是沒想到可以這樣幹…
把剛才修改過的底圖傳到手機裡，開 Motionleap 加特效。
建議動畫來個前、中、後景，配合圖片套 3 層不同特效。數值不要全滿、容易效果做過頭太誇張。
把動畫從手機傳回 MAC，塞進網頁裡。
動態效果
BLOCS 有現成的 UI 選單，滾動視差用滑鼠點幾下就好沒啥困難度，對不熟 CSS 的人非常友好。
麻煩的是 LG、MD、SM、XS 不同尺寸下看到的首頁動畫。版型歪了、圖片重心剛好被螢幕邊緣切掉、文字換行、動畫跑的方向不是自己要的…等等，這些微調比較麻煩。
我調得有點煩，不同螢幕尺寸下的動畫重心會偏移。乾脆做成兩種版型，SM、XS 首頁放靜態底圖，不搞影片了。
發佈上傳
這也沒啥難度，按下輸出，BLOCS 會直接產生一個資料夾，裡面有 HTML、CSS、JS 等等，整包扔到網路上就好。
我請老公看過原始碼，他說…
產出的碼能讓 RD 看懂、沒什麼雜七雜八的東西在裡面，沒有無用的元素、結構性處理得很好，不會看不懂它在寫什麼。
也就是說，BLOCS 產出的文件拿給 RD 們接手，設計師不會被蓋布袋。
之前試過幾種設計稿直出網頁檔的外掛/軟體，那個碼很可怕，再加上 RWD 和動畫…嘖嘖，我看了都害怕，怕被前端打。
結論
看到這裡不知道有多少人失望了呢？
AI 現在沒辦法打幾個 prompt 就給你做好網站啦！我試過幾個號稱 AI 做網站…預先做少量幾個樣版輪替，誆我咧。
文案的 AI ChatGPT 和圖片的 AI Midjourney 太多介紹，我來講講 Blocs 這套網頁製作軟體。
對於不熟 HTML 和 CSS 的人，我會大力推薦用 Blocs 來製作不怎麼需要套程式的靜態形象網站，但是電子商務類需要套程式的還是讓專業的工程師來處理。
一般民眾其實需要的大多也是靜態形象網頁，放個自己餐廳/店面/服務/產品的介紹，串 Google Map、粉絲團連結、偶爾換個菜單、加個簡單的表單意見回饋之類，Blocs 夠用了。
這套軟體非訂閱，一次付清買斷，還可以另外加購 Blocs Master ，更多更詳細的教學和更多樣板庫可以套用。
維護也很輕鬆，會操作 Keynote 就會用 Blocs 換圖打字，改完再輸出一包資料夾上傳替換。
圖片文案動畫 RWD 整套組合拳打下來，我覺得困難點不在 AI 產生的文案圖片不是自己要的，或是軟體操作不熟悉，而是偷懶不畫 Wireframe，基本框架都沒有，就想叫 AI 填內容進去。
對、我一開始也偷懶沒畫 Wireframe，2 週工時有 1 週半都因為沒畫 Wireframe 卡死自己（活該）。這個網站真要說只花了我 3天，還是窩在沙發上邊看別人打電動邊做的 3 天。
如果你想做好網頁設計，最基本的 Wireframe 這種工作絕對不能跳過。Wireframe 不只是份文件，它最重要的功用是幫自己把腦海中的漿糊思緒整理好，有個想清楚的依據能照著做事，而不是「憑感覺」。
如果大家有興趣想學 ChatGPT＋Midjourney＋Motionleap＋Blocs 綜合玩法的話，請跟我說，我再寫教學囉！
