YRCiou｜12 個網站，12 種風格

YRCiou · 作品入口

12 個網站，12 種樣子

運動研究、捷克旅行、長輩識字、社區藥局、親子遊戲。每個網站都先想清楚是給誰看的，再決定它該長什麼樣子。往下捲，整頁會變成那個網站的模樣。

開始逛直接看全部 12 個

01/ 12運動研究

YR 運動研究室

越野跑 × 巴西柔術 × 運動科學，用 PubMed 文獻與 GPX 賽道數據說話的研究型部落格。

深藍線稿
數據圖表
中英雙語

前往網站sports.yrciou.net

02/ 12運動研究

BJJ Map

把巴西柔術畫成一張互動關係圖：每個位置、可嘗試的招式，以及成功、失敗與被反制的機率。

純黑畫布
節點網絡
知識圖譜

前往網站bjjmap.submissionchain.net

03/ 12捷克旅行

捷克 · 波希米亞之心

百塔之城的千年故事：天文鐘、查理大橋、古典音樂與道館精神，讀完就懂為什麼值得去一趟。

電影感暗色
襯線大標
長篇敘事

前往網站czechgogo.yrciou.net

04/ 12捷克旅行

GEOMETRIE

YR 與 Ruth 的捷克 12 天，把布拉格的幾何、山區的霧做成一本可以翻、可以玩的電子書。

幾何海報
超粗字體
色塊拼貼

前往網站czech-memories.yrciou.net

05/ 12捷克旅行

OBJEV · 捷克 19 個發現

19 張照片、19 個查證過的在地發現。可以自己滑、投影成簡報，也能全場掃 QR 一起闖關。

編號圖鑑
國旗紅藍
多人闖關

前往網站czech-objev.pages.dev

06/ 12捷克旅行

捷克城堡巡禮

把十二天的旅程摺成一張捷克紙模型：布拉格、庫倫洛夫、庫特納霍拉、泰爾奇，逐站點開。

紙模型
票根拼貼
立體地圖

前往網站czech-island.yrciou.net

07/ 12捷克旅行

捷克語速成

每天 10 分鐘，3 個月學會旅遊捷克語：聽說讀寫練習、等級積分、複習統計，全部免費。

深色 App
遊戲化積分
每日任務

前往網站learning-czech.yrciou.net

08/ 12學習與生活

天天學字

給長輩的繁體中文識字網站：從ㄅㄆㄇ到生活常用字，每天學一點，好玩又有成就感。

大字高對比
溫暖紙黃
闖關地圖

前往網站tiantian-xuezi.pages.dev

09/ 12學習與生活

Y&R 的知識採集區

生活中查過、驗證過的知識紀錄：飲食保存、清潔收納、健康常識、3C 疑難排解。

手繪線稿
標籤分類
一問一頁

前往網站life-knowledge.yrciou.net

10/ 12店家官網

惠登藥局

台中北屯的社區藥局官網：慢箋領藥、保健諮詢、營業時間與交通，一頁看清楚。

親切可信
吉祥物
在地商家

前往網站wheadon-pharmacy.pages.dev

11/ 12家庭與遊戲

親子共遊皮克敏

帶孩子一起探索皮克敏的世界，邊玩邊學「段取り」思維，創造全家人的遊戲回憶。

草地綠
圓潤可愛
親子共讀

前往網站pikmin-family-blog.pages.dev

12/ 12家庭與遊戲

貓咪抓魚

點點魚兒、幫小貓抓魚的休閒小遊戲，輸入名字就能上排行榜挑戰。

童趣手寫
海天藍
即點即玩

前往網站cat-catch-fish.pages.dev

全部作品

點「風格 DNA」翻面，看每個網站的配色、字體與互動設計。

運動研究

YR 運動研究室

越野跑 × 巴西柔術 × 運動科學，用 PubMed 文獻與 GPX 賽道數據說話的研究型部落格。

風格 DNA

YR 運動研究室

#0b1424#e2e8f0#38bdf8#2563eb

字體: Georgia 襯線標題、系統黑體內文
版型: 全幅 Hero、文獻區塊、可捲動數據表
互動: 延伸閱讀推薦、深淺色切換、Chart.js 圖表

前往網站 →

運動研究

BJJ Map

把巴西柔術畫成一張互動關係圖：每個位置、可嘗試的招式，以及成功、失敗與被反制的機率。

風格 DNA

BJJ Map

#050505#ededed#f472b6#5eead4

字體: Montserrat 幾何無襯線
版型: 滿版畫布、浮動資訊面板
互動: 可縮放拖曳的節點圖、位置之間的路徑查詢

前往網站 →

捷克旅行

捷克 · 波希米亞之心

百塔之城的千年故事：天文鐘、查理大橋、古典音樂與道館精神，讀完就懂為什麼值得去一趟。

風格 DNA

捷克 · 波希米亞之心

#141012#f7f3ee#ff6b75#cf1f2e

字體: Noto Serif 宋體大標、細字距英文副標
版型: 全幅照片段落、側邊章節點
互動: 捲動敘事、章節導覽、12 日行程表

前往網站 →

捷克旅行

GEOMETRIE

YR 與 Ruth 的捷克 12 天，把布拉格的幾何、山區的霧做成一本可以翻、可以玩的電子書。

風格 DNA

GEOMETRIE

#f5f1e8#111111#6d4aff#f2a516

字體: Unbounded 超粗展示字
版型: 雜誌跨頁、斜切色塊
互動: 翻頁電子書、小遊戲、音效切換

前往網站 →

捷克旅行

OBJEV · 捷克 19 個發現

19 張照片、19 個查證過的在地發現。可以自己滑、投影成簡報，也能全場掃 QR 一起闖關。

風格 DNA

OBJEV · 捷克 19 個發現

#f5f0e6#1c1b1a#c8102e#11457e

字體: 粗黑體加 Nº 編號
版型: 照片卡、進度關卡列
互動: QR 加入房間、即時闖關、簡報模式

前往網站 →

捷克旅行

捷克城堡巡禮

把十二天的旅程摺成一張捷克紙模型：布拉格、庫倫洛夫、庫特納霍拉、泰爾奇，逐站點開。

風格 DNA

捷克城堡巡禮

#f7f3ec#1c1a19#d0262f#2f5d8a

字體: 票根式粗襯線
版型: 紙張質感、單張大地圖
互動: 可逛可點的紙模型城鎮、分享卡

前往網站 →

捷克旅行

捷克語速成

每天 10 分鐘，3 個月學會旅遊捷克語：聽說讀寫練習、等級積分、複習統計，全部免費。

風格 DNA

捷克語速成

#121a2c#e8edf7#5b8cff#3ecf8e

字體: Segoe UI 介面字
版型: App 儀表板、底部分頁
互動: 等級經驗值、連續天數、間隔複習

前往網站 →

學習與生活

天天學字

給長輩的繁體中文識字網站：從ㄅㄆㄇ到生活常用字，每天學一點，好玩又有成就感。

風格 DNA

天天學字

#fff4dc#3b2a1c#c46a24#1f7a6c

字體: 圓體大字、行距加寬
版型: 單欄大按鈕、任務卡
互動: 語音朗讀、星星獎勵、學習路線圖

前往網站 →

學習與生活

Y&R 的知識採集區

生活中查過、驗證過的知識紀錄：飲食保存、清潔收納、健康常識、3C 疑難排解。

風格 DNA

Y&R 的知識採集區

#faf9f5#1f1e1c#1d6f5c#9fd8c4

字體: Noto Sans 黑體、留白多
版型: 搜尋框、標籤雲、條目清單
互動: 即時搜尋、標籤篩選（Astro 靜態生成）

前往網站 →

店家官網

惠登藥局

台中北屯的社區藥局官網：慢箋領藥、保健諮詢、營業時間與交通，一頁看清楚。

風格 DNA

惠登藥局

#f6f9fb#1f2a37#1f6fb2#3aa36b

字體: 寬字距宋體招牌字
版型: 服務卡片、商品搜尋
互動: LINE 一對一諮詢、商品目錄搜尋

前往網站 →

家庭與遊戲

親子共遊皮克敏

帶孩子一起探索皮克敏的世界，邊玩邊學「段取り」思維，創造全家人的遊戲回憶。

風格 DNA

親子共遊皮克敏

#eef8ea#1a2f1a#2e7d32#f5c400

字體: 圓體標題、膠囊標籤
版型: 全幅草地 Hero、分類色點
互動: 瀏覽計數、遊戲攻略分類

前往網站 →

家庭與遊戲

貓咪抓魚

點點魚兒、幫小貓抓魚的休閒小遊戲，輸入名字就能上排行榜挑戰。

風格 DNA

貓咪抓魚

#1f6fa8#ffffff#ff8a00#ffd166

字體: Comic Sans 手寫感
版型: 置中遊戲卡、海平面背景
互動: 點擊抓魚、計分、Supabase 排行榜

前往網站 →