果核概念 coreplay

果核概念 coreplay 果核概念｜企業網站設計，把現在做對、把未來算進去。
我們是雙人設計團隊 Kidult + Chara，專做企業網站：直接對接、不轉手，會動、能多語系、上線後還持續演進。從活動頁、品牌官網到 CMS 系統，需要時也延伸平面與識別，把整體做一致。

我們在臉書上分享生活和工作上的發現，網站行銷的小小心得，值得品味的設計作品，歡迎追蹤並和我們交換想法！

官網 ➜ [ https://www.coreplay.com.tw/ ]
FB粉絲團 ➜ [ https://www.facebook.com/coreplay.tw/ ]
Medium ➜ [ https://medium.com/coreplay-tw ]

【 接洽窗口 】
Kidult Lee
02-29090117
[email protected]

我們在網站校稿的時候，常常出現這種對話：「這個行距很奇怪」、「你是在手機看還是電腦看呢？」其實要改什麼東西都很快，主要是網站上面太多細節，加上 RWD 有時候很複雜，搞清楚對方在說什麼地方才是最花時間的部分。我們自己使用過 Impeccab...
21/08/2026

我們在網站校稿的時候，常常出現這種對話：「這個行距很奇怪」、「你是在手機看還是電腦看呢？」

其實要改什麼東西都很快，主要是網站上面太多細節，加上 RWD 有時候很複雜，搞清楚對方在說什麼地方才是最花時間的部分。

我們自己使用過 Impeccable Live / Figma 之後，想了一套校稿工具，而且把它開源了，叫 Markoff。

設計師或客戶打開預覽網址，點畫面、打字送出，就可以完成一則標註了：
• 點哪裡標哪裡，被標的元素會有紅框和編號
• 記下當時的裝置、視窗寬度（就 RWD 而言，這是非常好的 debug 資訊）
• 連那個元素現在的字級、顏色都一起收好

前端拿來跟 Figma 校稿，一目瞭然。

它的特點：
• 一個檔案、零依賴，不需要後端
• 網頁裡面加一行 就可以裝好了
• 留言可以隨時匯出 JSON，也可以接你自己的 Google Sheets 或 Notion
• 在測試網站上帶特定參數才會出現（記得上正式站時要把這個工具移除喔，不然就變成公開的 debug 了）

如果你的團隊也有自己的校稿方式，歡迎留言聊聊你們是怎麼做的；或者你也可以把 Markoff 拿過去改，再回頭來幫我們強化這個工具，讓我們參考一下更好的做法！

#網頁設計 #開源工具

手上的東西還沒做完的時候，設計是最難做的。沒有成果數據，沒有案例，活動列表也是空的，但版型偏偏是為了完整內容而設計，結果就是每一區看起來都稀稀落落。這種狀況在政府標案或活動前導頁幾乎都會遇到。大阪的「ほとりで」則換了個方式。不假裝是完成品，...
20/08/2026

手上的東西還沒做完的時候，設計是最難做的。

沒有成果數據，沒有案例，活動列表也是空的，但版型偏偏是為了完整內容而設計，結果就是每一區看起來都稀稀落落。這種狀況在政府標案或活動前導頁幾乎都會遇到。

大阪的「ほとりで」則換了個方式。

不假裝是完成品，換一種形式

這是 UR 都市機構和大阪公立大學合作的實驗場域。因為他們什麼都還在假設階段、什麼都還沒做出來，所以網站並沒有硬把自己包裝成一個完整品，而是換了一種形式，把整個網站做成像是一本工作筆記：滿滿的方格子、照片，並用拍立得的風格呈現，再用紅色手繪箭頭把概念串起來，告訴你「我們正在想什麼」、「我們正在嘗試什麼」。

當內容還在變動、還沒有成果的時候，與其硬撐著做出一個完成品，不如找一個本來就「容許未完成」的容器。我想這就是為什麼他們會選擇筆記本、白板、工作臺、草稿夾這類意象。

這樣一來，東西還不多就不再是缺點，反而成了理所當然的理由。

連名字都是同一件事

「ほとり」在日文中是岸邊的意思，也就是陸地與水面的交界、森林與草原的交界。在生態學上，這種兩種環境之間的過渡帶被稱為「エコトーン」（生態過渡帶），正因為是交界，生物種類才特別豐富。

這表示這個地方想要成為生活的エコトーン。從名字、方格子上面未完成的筆記到結語，其實都在傳達同一件事情。

📄 探索和閱讀，是兩種模式

他們在瀏覽模式上也特別注意：

・掃視、偶遇還有建立整體印象，需要的是空間感
・可是要讀 4,000 字的話，需要的是穩定的行寬與可預期的捲動，讀到一半離開再回來還可以繼續閱讀

所以 5 篇深度長文沒有塞進畫布，而是連到獨立頁面。很多案子會為了風格一致堅持全部塞進去，這個站沒有，而是隱喻服務於閱讀，而不是反過來。

他們連轉場都特別講究：長文頁做成一張藍色的紙插進牛皮紙夾裡，右邊可以闔上回到畫布。雖然互動模式不一樣，可是世界觀是一致的。

還有一個很小的細節

進站 modal 的那張預覽縮圖，每次顯示的位置都不一樣，它其實是在預告「這張畫布很大，你每次來的起點可能不同」。成本幾乎是零，但把「探索」先兌現了一次。

代價也很明顯

6.3MB、158 張圖沒有一張 lazy load，load 事件 9.87 秒。因為你可以往任何方向拖，它預測不了你下一秒要看哪裡。不過前面先以 modal 進行教學，同時其實也蓋住了這段載入時間。

---

你有沒有一個案子是因為東西還沒生出來就卡住的呢？我覺得你可以參考這個網站的做法。

留言聊聊你遇過哪個「內容還沒長齊，但版型硬要撐場面」的網站 👇

#日本網站設計 #果核觀察

12/08/2026

滑鼠碰到啤酒罐，畫面閃過一層細小的水珠，像剛從冰箱拿出來、罐身結露的那種。放大一看才發現不是水珠——是一座一座的小山。

AFURI BREWING，東京拉麵品牌AFURI開的精釀啤酒廠。「阿夫利」是神奈川一座山的名字，拉麵湯頭的水從那裡來，現在釀酒廠就蓋在山腳下，由一對兄弟負責釀。所以罐子上閃過的不是裝飾，是他們的水源。連商品的 hover 都有山的細節。

首頁打開是藍天，一罐啤酒和一杯倒好的酒擺在山景前，光線是夏天下午的那種。往下捲，背景的山會慢慢往後傾，像人躺下來看天空。它不急著介紹產品——整個網站在做的是「在AFURI喝酒是什麼氣氛」，照片裡有山、有風、有逆光，規格反而排得像雜誌內頁，安安靜靜。

我們最喜歡的一招藏在商品列表。每支酒都拍了兩套照片：一套是罐子，一套是倒進杯子裡的樣子。畫面右下角有一顆圓鈕，按下去，全站的商品照一起切換。賣一支你沒喝過的酒，最難的是讓你想像味道——罐照給你看設計，杯照給你看濁度、泡沫、顏色。你還沒買，就已經先看到它倒進杯子裡的樣子。文字也在做同一件事：每支酒標了香氣、苦味、酒體三條量表，格子畫成小啤酒杯的形狀；香氣不寫形容詞，直接列水果——芒果、百香果、葡萄柚、白桃。字讀完，嘴裡好像已經有味道了。

功能擺的位置也反過來。商品分類不在頁面頂端，是一條浮在畫面底部的選單；下單時6罐、12罐、24罐三種數量直接並排成三個價格，也固定在最下面。大家習慣把這些放上面，但手指和滑鼠本來就停在畫面下半部，放下面反而順手得多。

他們甚至在賣一個還不存在的地方。2027年山腳下要開一間啤酒屋，網站用手繪插畫先把「大家在山谷裡喝酒」的場景畫出來——還沒蓋好的東西不用擬真的完工圖，用插畫，就不會變成過度承諾。

然後，啤酒是開放評價的，每支酒下面掛著公開的星等和評論數。把液體放大給你看、把苦味標成格子、再讓喝過的人打分數——這一整套其實是同一句話：我們對自己的酒有自信。

賣一個別人沒體驗過的東西，與其解釋它的味道，不如把「喝到它的那個下午」先給人看。你的產品開箱之後的樣子，有拍給客人看過嗎？

#果核觀察

未成年請勿飲酒

三位穿白袍的研究者，圍著一座桌上的迷你城市打牌。翻開的卡牌上寫著「遠隔手術機器人：費用100萬円、療效四顆星」。看起來像桌遊宣傳動畫，其實是日本三所大學（立命館、京都、北海道）合開的博士課程官網hta-program.jp，果核最近在看的案...
31/07/2026

三位穿白袍的研究者，圍著一座桌上的迷你城市打牌。翻開的卡牌上寫著「遠隔手術機器人：費用100萬円、療效四顆星」。看起來像桌遊宣傳動畫，其實是日本三所大學（立命館、京都、北海道）合開的博士課程官網hta-program.jp，果核最近在看的案例。

它要介紹的，大概是官網界最難講的題目之一：醫療技術評價（HTA）。白話說，就是評估一種新藥或新醫材「值不值得納入給付」的方法，要算成本、算療效、算安全性。更特別的是，這個學程一年收的學生可能就個位數，照理說做個課程表加申請表單就夠了。但HTA影響的是國家怎麼分配醫療資源，大眾卻幾乎沒聽過它。所以這個網站背了兩個任務：收那幾位學生，以及當這門學科的公共門面。

門面怎麼做？把整門學科裝進一場桌遊。城市是醫療制度，卡牌是醫療技術，打牌的人是做評估的專家。卡牌上的欄位——費用、療效星等、安全性——正好就是HTA實際分析的三個維度。一張畫面看懂一門學科，而且沒有為了好懂犧牲正確。

兩種讀者也被分開照顧。對大眾的科普頁是一部片，全螢幕、有開場有結尾，看完就懂這門學科在做什麼；對學生的申請頁是一份說明書，七個步驟照著走就好。看故事的人和辦手續的人，各自拿到適合的節奏。

生硬的主題，不必在「專業」和「好懂」之間二選一。這是設計師的新挑戰：面對專業內容，不只是設計畫面，還要作為兩種閱讀對象的翻譯——把同一門專業，翻成各自讀得下去的樣子。hta-program.jp 做法值得參考。

你看過把硬主題講得最好懂的網站是哪個？

#果核觀察

AI 導入工作，很麻煩嗎？其實可以從一些小動作開始。不用大刀闊斧改動本來的流程，而是讓那些一直在重複的事，變簡單一點、更有系統一點。以下是幾個我們已經做過、你也可以試看看的範例 👇① 讓客人「用問的」就找到東西 老員工厲害在客人說「送長輩、...
27/07/2026

AI 導入工作，很麻煩嗎？

其實可以從一些小動作開始。

不用大刀闊斧改動本來的流程，而是讓那些一直在重複的事，變簡單一點、更有系統一點。

以下是幾個我們已經做過、你也可以試看看的範例 👇

① 讓客人「用問的」就找到東西 老員工厲害在客人說「送長輩、日式一點的」就秒懂。現在網站也能——客人用白話問，系統就懂，不用他自己一頁頁翻。

② 你的網站，自己就能改 改個營業時間、換張菜單照，不用再傳 LINE 拜託人、然後等。後台自己點一點就好。

③ 上線前，先讓 AI 幫你「試用」一遍 就像開店前自己先走一遍動線。AI 扮成你的客人走完流程，回報哪裡會卡——一個不會累也不會客氣的測試員。

④ 掃個 QR，現場就收得到資料 客人手寫報名單、回去一張張打電腦？現在掃碼直接填，資料馬上進你手上，能匯出、能設名額上限。那疊紙，省了。

⑤ 收報名、管出席，一次搞定 不用再在群組數「+1」數到頭痛。填完直接進系統，自動提醒、自動統計，不用抱著 Excel 對到半夜。

⑥ 堆成山的紙本，也能變成資料 抽屜那疊發票、表單，讓 AI 幫你讀出來、分好類、整理進電腦，你只要核對。

⑦ 你的空間，能讓訪客真的「看懂」 掃個 QR 就有 AI 語音導覽，分區介紹一路帶著走——店面、展館、景點，訪客不用站在原地猜這是什麼。

⑧ 以上這些，都能放進你最熟的 LINE 這件事我們現在還在試。老闆們早就在用 LINE 回客人、收訂單——不用學一個新後台，而是讓後台變得更聰明。

上面沒有一件事需要你先搞懂 AI 是什麼。也沒有一件動到原本的流程：就是把一件本來就要做的事，換一個比較省力的做法。

這段時間跑下來，客戶真正卡住的地方幾乎都長這樣。先不要想「我想導入 AI」，我們來思考「這件事每個月吃掉我兩天，有辦法解決嗎？」。

從那個痛點回推，通常就找得到工具。反過來從工具找用途，多半會買一堆用不到的東西。

所以不用一次到位。挑一件最煩的先試就好。

告訴我們，你最想讓哪件麻煩事消失？留言聊聊，我們陪你一起想。

也歡迎先追蹤我們，之後會挑一些案例，分享我們是怎麼做的。

澀谷街頭出現一隻巨大史萊姆。路過的人對著它唸一句咒文，AI 當場生成一張圖：他化身勇者，正對眼前的怪物施放剛剛唸出的魔法。全世界只有這一張。這是《勇者鬥惡龍》× Google 的實境活動「Gemini Quest」，7月30日起在東京澀谷、...
22/07/2026

澀谷街頭出現一隻巨大史萊姆。

路過的人對著它唸一句咒文，AI 當場生成一張圖：他化身勇者，正對眼前的怪物施放剛剛唸出的魔法。全世界只有這一張。這是《勇者鬥惡龍》× Google 的實境活動「Gemini Quest」，7月30日起在東京澀谷、原宿展開。

這種玩法我們叫它「Prompt 行銷」：使用者出一句話，品牌出世界觀，產出由 AI 當場長出來。它跟傳統 UGC 活動最大的差別在門檻：參加者不用會拍、會剪、會做圖，出一句話就好，品質下限由品牌的生成規則把持。

在台灣，這套公式到處都能落地：觀光景點的神獸傳說、飲料品牌的風味角色、展覽出口的個人海報。它不需要大預算，需要的是三樣東西：一個實體錨點、一個輸入入口、一套世界觀濾鏡。

這類活動怎麼設計真的很值得研究。果核最近也開始實驗，手上有活動案、想讓參加者「輸入一點什麼」的品牌，歡迎聊聊。

螢光綠的拉霸在轉，底下一顆 stop 鈕，問你：「支撐大家美好未來的網路公司是？」按下去。沒中。再按。還是沒中。第三次，三個滾輪停成「い・い・じゃん」，整個螢幕炸成一朵漫畫爆炸話框。這台拉霸是作弊的。我們把 script.js 拆開，裡面寫...
17/07/2026

螢光綠的拉霸在轉，底下一顆 stop 鈕，問你：「支撐大家美好未來的網路公司是？」

按下去。沒中。再按。還是沒中。第三次，三個滾輪停成「い・い・じゃん」，整個螢幕炸成一朵漫畫爆炸話框。

這台拉霸是作弊的。

我們把 script.js 拆開，裡面寫著一行 WIN_BY = 3，註解是「最晚第三次必中」。前兩次隨機——可能中、可能不中，第三次保證你中。前兩次的不確定，是為了讓第三次的必然嘗起來像運氣。

「いいじゃん」是關東腔的「不錯嘛」，帶點隨口稱讚的鬆弛感。IIJ 把自己的縮寫拆成三個音節，剛好三個滾輪。中獎那一刻你不是贏了什麼獎品，你是拼出了這間公司的名字。

這個站從頭到尾都是這種調調。

員工介紹那一區有 16 張卡，沒有一張寫職稱。寫的是「貪心的話癆怪獸」「職涯用硬闖的就好」，還有一張寫「進公司的決定因素是『看起來很好玩』」。螢光綠配黑白線稿漫畫，整個站像一本印在螢光紙上的舊漫畫。

這是一間做骨幹網路、資料中心、資安的 B2B 基礎設施公司，官網卻在裝傻，而且裝得很開心。

滑到最後，這個站的收尾是一句「請看看 IIJ 認真的樣子」，然後給你一個連結。點過去，是同一間公司的正規招募站——夕陽下的東京晴空塔、網路連線的光點、藍色大字寫著 The Initiative Is In Your Hands。

一模一樣的公司，兩張完全不同的臉。

正規站有 121 個連結、24 條選單，公司介紹、員工座談、環境制度、募集要項全部在這裡。拉霸那邊只有兩個外連，整個站就一件事：讓你記得有這間公司。

一間日本大企業，最穩的賣點明明是安定，為什麼把整個特設站拿去講「好玩」？

因為對現在應徵的這批學生來說，安定已經不是賣點了。終身雇用還在，變的是它從「賣點」退位成「背景」——這批學生預設進大公司本來就穩，新的問題是：除了穩，你還給我什麼。

所以這兩個站的分工，其實是兩種賣點的分工。「安定、完整、可信」放正規站；「參與、好玩、想加入」獨立成一個可以玩的站。要被記住，得極端；要被信任，得完整。這兩件事塞在同一個頁面，只會顯得公司精神錯亂。

舊賣點「安定、完整、可信」放正規站，該有的都在、但不吵。新賣點「參與、好玩、想加入」獨立成一個可以玩的站。

要被記住，得極端。要被信任，得完整。

這兩件事塞在同一個頁面，只會顯得公司精神錯亂——「The Initiative Is In Your Hands」和「貪心的話癆怪獸」很難是同一個人講的。

所以它讓極端獨立出去，代價由正規站承接。拉霸可以作弊、員工可以自稱怪獸、B2B 公司可以用螢光綠，因為隔壁隨時可以證明我們是認真的。

還有個細節說明了這個方向：拉霸站有連結送你去正規站，正規站 121 個連結裡，沒有一個連回拉霸。

溝通單向的。它只負責把人推過去，玩過就算了，記得就好。

從一個必勝的拉霸，延伸到溝通的順序和細節，真的很有意思。

你看過把「關於我們」做得最有趣的官網是哪個呢？

#果核觀察

14/07/2026

我們利用「果核觀察」把自己官網的三個毛病攤了出來：沒有麥克風、沒人點的 mailto、AI 時代的 SEO。今天，我們調整後整裝上線了。一條一條看看我們怎麼修的：

① 重新梳理了溝通流程。 縮短溝通內容，理念、作品、服務、FAQ，最後留下讓你和我們說話的地方：直接說你卡在哪就好，不用先準備完整規格書，有個大概想法就能開始。

② mailto 拿掉了。 換成站內表單，你打的字透過 OA 小幫手，直接傳到我們的 LINE 手上。

③ SEO 這條，我們幫客戶做，這次輪到自己。 以前是讓 Google 找到你，現在是讓 AI 讀懂你。這件事我們一直在幫客戶做——所以這次新站，我們也替自己針對 AI 爬蟲重整了資料架構：把「果核是誰、做什麼、有哪些作品」用結構化的方式標記清楚，讓 AI 在別人提問時，能正確地認出我們、引用我們。

架構是地基，內容才是長出來的東西。所以我們會把「果核觀察」認真做下去，持續拆網站、寫我們怎麼看設計。慢，但這是唯一老實的辦法。

你的官網，會不會也有哪邊覺得怪怪的呢？把那個卡住的地方說給我們聽吧！

#拆解自己官網

我們有一套自己看網站的方法，叫「果核觀察」。平常拿它拆日本網站來學習，也用來拆解客戶的案子，找出可以優化的地方。那如果，拿這雙眼睛來拆我們自己的官網呢？冷血地講，我們的網站，也有不少改善空間：我們的站像一座「講台」。理念、作品、價格，都講得...
13/07/2026

我們有一套自己看網站的方法，叫「果核觀察」。平常拿它拆日本網站來學習，也用來拆解客戶的案子，找出可以優化的地方。

那如果，拿這雙眼睛來拆我們自己的官網呢？冷血地講，我們的網站，也有不少改善空間：

我們的站像一座「講台」。理念、作品、價格，都講得很清楚。但台下有人想舉手發問，卻發現我們沒準備麥克風。

FAQ 寫著「傳訊息就好」。然後全站唯一能傳訊息的地方，是一個沒人想點的 mailto 連結。

最需要調整的是 SEO。我們常幫客戶檢查「當客人問 AI 要推薦時，誰替你回答」自己搜「台灣 網站設計 推薦」，名單上沒有果核。而這已經不只是 SEO 了。以前是讓 Google 找到你，現在是讓 AI 讀懂你。這件事我們早就在幫客戶做，只是輪到自己的官網，一直沒跟上。

天天幫客戶把關，自己的官網也得站得住腳才行。所以我們把官網重蓋了。明天正式上線，看看我們怎麼一條一條，把過去的問題修回來。

#網站設計 #品牌設計 #拆解自己官網

一間公司的50年歷史，被做成一台拉霸機。按下START，四位數字開始滾，停在某一年，彈出當年的一張老照片配兩三句小故事。我抽到1978，講的是他們那年怎麼把溫熱、可以選的餐點送到醫院病床邊；再轉一次抽到2007，居然是監獄——日本第一個官民...
09/07/2026

一間公司的50年歷史，被做成一台拉霸機。

按下START，四位數字開始滾，停在某一年，彈出當年的一張老照片配兩三句小故事。我抽到1978，講的是他們那年怎麼把溫熱、可以選的餐點送到醫院病床邊；再轉一次抽到2007，居然是監獄——日本第一個官民合作案，把伙食做進刑事設施，連收容人的職業訓練都一起顧。轉盤裡只有十個年份，抽到哪一年看運氣，但能被抽到的那十個，是有人先挑好的。

這是日本團膳公司エームサービス的50週年網站。三井物產旗下，1976年開始做員工餐廳，現在醫院、學校、球場都有他們，連運動員的營養都在顧。做這一行做了半世紀。

我做網站這麼多年，客戶要做週年頁，十之八九會說「把這些年的大事都放進去」，結果就是一條長長的年表，做完沒什麼人會認真看完。這個站選了另一條路：完整年表留在官網給要查資料的人，紀念站只留這台拉霸給路過的人一年一年抽。同一段歷史，準備了兩種讀法。

還有兩個地方我很喜歡。一個是他們的slogan「未来は、毎日の中にある」（未來，就在每一天裡）被拆成了一套填空題——首頁八位真員工，點開每一位都是這句話的不同版本：廚師那格是「未來，在支撐學生今天的那盤飯裡」，托兒所那格是「未來，在孩子那聲『好吃』裡」。往下的三個未來願景、甚至接下來一整年要發的內容，全都能套這個句型。一句slogan，被他們當成一台可以一直填下去的機器在用。

另一個藏在頁尾。首頁的主視覺是八位員工朝同一個方向奔跑，滑到網站最底下，同一支隊伍卻多了幾個人：扛相機的攝影師、拿板夾的工作人員，混在制服隊伍裡一起跑。做這個網站的人，跟被拍的員工，一起跑進了頁尾。文案一個字都沒提，就留給滑到最後的人。順帶一提，50週年logo那一撇紅色筆刷，被拉出來當了全站的線索——開場動畫結尾它像終點線一樣掃過人群，點開員工卡它又在背景繞一圈。一個從logo長出來的圖形，走到哪都認得。

週年網站最怕的，是慶祝完就沒人再打開。這個站給的答案是：別把50年做成一份要看完的資料，做成一個會讓人想再回來玩一次的東西。做網站的人被這種細節打到，大概是一種職業病。

你看過把「50週年」做得最有記憶點的官網是哪一個？

#果核觀察

Address

新北市泰山區辭修路22號
Xinbei

Opening Hours

Monday 10:00 - 18:00
Tuesday 10:00 - 18:00
Wednesday 10:00 - 18:00
Thursday 10:00 - 18:00
Friday 10:00 - 18:00

Telephone

+886229090117

Website

Alerts

Be the first to know and let us send you an email when 果核概念 coreplay posts news and promotions. Your email address will not be used for any other purpose, and you can unsubscribe at any time.

Shortcuts

Share