Takafumi Horiuchi

Practice Log n Share

2026年9月

概覽

練習時輕點一下就能記錄，上課時直接把同一個畫面展示給老師。為了自己的薩克斯風學習，我規劃並設計了這款 iPhone App，並與 AI 協作完成開發。

記錄頁。上方是練習紀錄網格，下方是今日進度條（共54分鐘）和分類卡片。「樂曲練習」已計時超過27分鐘，以亮色和白色外框標示。 分享頁。彙整9月17日上課當天至24日的練習，共4小時38分鐘，並顯示分類長條圖和不需水平捲動即可查看所有分類的每日明細表。
左側記錄，右側分享。輕點分類開始計時，上課時展示兩堂課之間的練習彙整。畫面使用說明用的虛構資料。 截圖保留原 App 的日文介面。
角色
規劃、UX/UI 設計、開發（與 Claude Code、Codex 協作）
期間
2026年9月
技術
React · TypeScript; Swift (WKWebView, Live Activity, StoreKit, iCloud)

試用網頁示範版（收錄截至2026年9月20日的本人練習紀錄）

起點——面對「最近練得怎麼樣？」，我答不上來

每兩週上一次課，即使回答「主要練音階」，也無法說明具體練了什麼、練了多久。薩克斯風掛在脖子上時很難寫紙本日誌，而試過的計時 App 都是供自己回顧紀錄的工具。

兩次上課日期之間，排列著練習日的長條與休息日。將每天各分類的時數彙整成下方的一根長條，總計10小時06分鐘。
上方長條表示每日練習，紅框標記上課日期。上課時展示這段期間的練習彙整。日期與時數皆為說明用虛構資料，上下長條的總時數相同。

記錄——手持樂器，輕點一下

練習時只需操作分類卡片。輕點開始計時，點另一張切換，再點同一張停止。

記錄頁。上方是練習紀錄網格，下方是今日進度條（共54分鐘）和分類卡片。「樂曲練習」已計時超過27分鐘，以亮色和白色外框標示。
1 累積
至今的練習。開啟 App 最先看到的內容。
2 今日
練習順序與時間分配。滿一小時填滿。
3 計時中
僅此卡片變亮，並以白色外框標示。
4 卡片
輕點切換。突出顯示今日時數。

一天——填滿的進度條，始終保持填滿

今日進度條在一小時處填滿。超過一小時後，以當下總時數作為右端，避免已經填滿的長條再次出現空白。

今日練習 — 1小時05分鐘

採用

未採用

練習65分鐘時的比較。上方為採用方案，以總時數作為右端（最少一小時）；下方為未採用方案，將刻度從60擴展到90、120分鐘。超過一小時的瞬間，只有下方長條重新出現空白。

累積——從第一天起，全部看得見

以綠色深淺表示練習日，以紅框標記上課日期，水平捲動可追溯到開始記錄的那一天。比起減輕繪製負擔，我更重視能夠查看多年的練習。

練習紀錄網格。綠色深淺表示6月至9月的練習量，紅框標記每兩週一次的上課日期。
分為五級：0分鐘、未滿30分鐘、未滿60分鐘、未滿90分鐘、90分鐘以上。開啟 App 時，最先看到的就是這些累積。

分享——課程開始時，一個畫面就能說明

把上次上課至今的練習彙整為各分類總時數與每日明細，直接展示給老師。每日表格即使縮小文字，也要在一個畫面內放下所有分類，免去水平捲動。

演變——讓卡片成為練習的操作面板

根據與 AI 對話整理出的規格文件建構畫面，反覆親自操作並修改。先在早期網頁版中探索記錄與分享的形式，再實作為 iPhone App。

9月9日的初版。六張小型分類卡片與今日總計40分鐘分別放在記錄頁的不同區域。

9月9日
初版

9月21日的網頁版。分類與今日時數整合為大卡片，正在計時的讀譜練習10分鐘以亮色顯示。

9月21日
網頁版

記錄頁。上方是練習紀錄網格，下方是今日進度條（共54分鐘）和分類卡片。「樂曲練習」已計時超過27分鐘，以亮色和白色外框標示。

9月24日
iOS 1.0

初版與網頁版使用相同的虛構資料（六個分類，今日共40分鐘）。iOS 1.0 使用另一組虛構資料。
名稱與時數放在一起
在卡片上突出顯示今日時數，將練了什麼與練了多久連結起來。
當前狀態，一目了然
只讓計時中的卡片變亮，其餘卡片調暗。
操作範圍留在畫面內
讓捲動停在整排卡片能完整顯示於畫面內的位置。

開發後期，反覆進行了約15輪流程：Claude Code 提出潛在問題，Codex 驗證並修正，由我決定是否採納。

手感——如何停下來，親手試過再選

僅靠文字要求，無法做出「流暢移動、俐落停穩」的手感。我與 AI 開發了可即時切換方式與數值的調整工具，在實機上比較五種方式後，選擇了瀏覽器原生的捲動吸附。

隆起曲線型

隆起曲線型的五次實機操作。橫軸為手指放開後0–1200毫秒，縱軸為距吸附位置的距離。虛線0為吸附位置，每條線末端的點為最後量測的位置。

落點預測型

落點預測型的五次實機操作。橫軸為手指放開後0–1200毫秒，縱軸為距吸附位置的距離。虛線0為吸附位置，每條線末端的點為最後量測的位置。

瀏覽器原生 proximity
採用

瀏覽器原生 proximity的五次實機操作。橫軸為手指放開後0–1200毫秒，縱軸為距吸附位置的距離。虛線0為吸附位置，每條線末端的點為最後量測的位置。

瀏覽器原生 mandatory

瀏覽器原生 mandatory的五次實機操作。橫軸為手指放開後0–1200毫秒，縱軸為距吸附位置的距離。虛線0為吸附位置，每條線末端的點為最後量測的位置。

無吸附

無吸附的五次實機操作。橫軸為手指放開後0–1200毫秒，縱軸為距吸附位置的距離。虛線0為吸附位置，每條線末端的點為最後量測的位置。
以相同比例比較放手後的位置，虛線0為吸附位置。根據實機紀錄中放手前60毫秒的位置計算速度，在0.6–1.8 px/ms範圍內，按接近1.2 px/ms的順序為每種方式選取五次操作。各次操作的設定、起點與方向不同。
捲動調整工具。切換五種吸附方式的選項與參數，旁邊是用於體驗操作手感的手機畫面。
記錄捲動距離與速度，在實機上比較停止方式。開啟圖片可放大。

作為產品——練習之外

外觀隨裝置設定切換。練習紀錄儲存在裝置內，並自動備份至 iCloud。

淺色模式。記錄頁。上方是練習紀錄網格，下方是今日進度條（共54分鐘）和分類卡片。「樂曲練習」已計時超過27分鐘，以亮色和白色外框標示。深色模式。記錄頁。上方是練習紀錄網格，下方是今日進度條（共54分鐘）和分類卡片。「樂曲練習」已計時超過27分鐘，以亮色和白色外框標示。
同一記錄頁的淺色與深色模式。
可依練習內容選擇的109個主題圖示，依序為樂器、運動、學習、繪畫、手作及表達活動。
可依練習內容選擇 App 頁首圖示：音樂47個、運動15個、語言與學習15個、美術11個、製作與生活14個、表達7個。薩克斯風圖示以 Qlementine Icons（MIT License）為基礎。

實際使用——下一個問題是，記錄要細到什麼程度

每天早晨練習時使用，並在課上向老師展示畫面後，得到的回饋是練習內容一目了然，如果連音階種類也能記錄就更有幫助（大意）。我正在考慮在分類下再加一層，在保持便利的同時記錄更多細節。

資料

網頁示範版可體驗記錄與分享功能。收錄截至2026年9月20日的本人練習紀錄，操作結果僅儲存在目前使用的瀏覽器中。

  1. 第1頁。封面：開發一款向授課老師分享練習狀況的記錄 App。堀內貴文。
  2. 第2頁。概覽：用於記錄練習的 Log 與向老師分享狀況的 Share。角色、製作期間與工具。
  3. 第3頁。背景：希望準確地向老師說明薩克斯風練習狀況。紙本日誌與現有 App 的問題。
  4. 第4頁。方法：一鍵記錄與即時傳達資訊的視覺化。在一天和月、年兩種時間尺度上展示練習累積。
  5. 第5頁。使用 AI 的四個環節：研究、基礎開發、操作手感調整工具開發、實作最佳化。
  6. 第6頁。與 AI 協作：研究現有 App，透過對話具體化概念。
  7. 第7頁。基礎開發：比較 AI 產生的初版 V0 與反覆回饋版面、配色後調整的 V1。
  8. 第8頁。調整操作手感：與 AI 開發輔助工具，親自比較捲動速度與停止方式。
  9. 第9頁。實作最佳化：反覆由 Claude Code 提出潛在問題、Codex 驗證修正，再由人做出判斷。
  10. 第10頁。成果與後續：用於自己的練習、老師的回饋，以及為更細緻的記錄考慮子分類。
水平捲動換頁，點擊或輕點放大。原投影片為日文。

以 PDF 開啟專案資料（日文，4.4 MB）