Takafumi Horiuchi

Practice Log n Share

2026年9月

概要

練習中はワンタップで記録し、レッスンではその画面をそのまま先生に見せる。サックスを習う自分のために、iPhoneアプリを企画・デザインし、AIと協働して実装した。

記録画面。上に実績の格子、その下に今日のバー（合計54分）とカテゴリのカード。「曲の練習」が27分を超えて計測中になり、明るい色と白い輪郭で示されている。 共有画面。9月17日のレッスン日から24日までを集計し、合計4時間38分、カテゴリ別の棒グラフ、全カテゴリを横スクロールなしで見渡せる日別表を表示。
左が記録、右が共有。カテゴリをタップして計測し、レッスンではその間の練習をまとめて見せる。画面は説明用の架空データ。
役割
企画、UX/UIデザイン、実装（Claude Code・Codexと協働）
期間
2026年9月
技術
React・TypeScript、Swift（WKWebView、Live Activity、StoreKit、iCloud）

Webデモで操作する（2026年9月20日時点の自身の練習記録を収録）

きっかけ —— 「練習はどんな感じ？」に、答えられない

隔週のレッスンで「スケールを多めに」と答えても、何をどれだけ練習したかまでは伝わらない。紙の日誌は楽器を首から下げたままでは書きにくく、試した時間記録のアプリは、自分で見返すための道具だった。

2つのレッスン日の間に、練習した日の棒と休みの日が並ぶ。日々のカテゴリ別の時間を下の一本の棒にまとめると、合計10時間06分になる。
上の棒が日々の練習、赤い枠がレッスン日。レッスンでは、その間の練習をまとめて見せる。日付と時間は説明用の架空データで、上下の棒の時間の合計は同じ。

記録 —— 楽器を持ったまま、ワンタップで

練習中に触るのは、カテゴリのカードだけ。タップで計測が始まり、別のカードで切り替わり、同じカードをもう一度タップすると止まる。

記録画面。上に実績の格子、その下に今日のバー（合計54分）とカテゴリのカード。「曲の練習」が27分を超えて計測中になり、明るい色と白い輪郭で示されている。
1 実績
これまでの練習。開くと最初に目に入る。
2 今日
取り組んだ順と配分。1時間で満杯。
3 計測中
このカードだけ明るくし、白い輪郭で示す。
4 カード
タップで切り替え。今日の時間を大きく。

一日 —— 満たしたバーは、満たされたまま

今日のバーは1時間で満杯になる。1時間を超えたら、その時点の合計を右端にして、一度満たしたバーに空白が戻らないようにした。

今日の練習 —— 1時間05分

採用

没案

65分練習したときの比較。上は合計を右端にする採用案（最低1時間）、下は目盛りを60→90→120分と広げる没案。1時間を超えた瞬間、下のバーにだけ空白が戻る。

積み重ね —— 始めた日から、すべて見える

練習した日を緑の濃さで、レッスン日を赤い枠で示し、記録を始めた日まで横にたどれる。表示の軽さより、何年分でも見渡せることを優先した。

実績の格子。6月から9月までの練習量を緑の濃さで表し、隔週のレッスン日に赤い枠が付いている。
0分、30分未満、60分未満、90分未満、90分以上の5段階。アプリを開くと、この積み重ねが最初に目に入る。

共有 —— レッスンの冒頭、ひと目で伝わる一画面

前回のレッスン日から今日までを、カテゴリ別の合計と日ごとの内訳でまとめ、そのまま先生に見せる。日別の表は、文字を小さくしてでも全カテゴリを一画面に収め、横スクロールをなくした。

変遷 —— カードを、練習の操作盤に

AIとの対話でまとめた仕様書から画面を組み立て、自分で触って直すことを繰り返した。初期のWeb版で記録と共有の形を探り、iPhoneで使うアプリとして実装した。

9月9日の初期版。6つの小さなカテゴリカードと今日の合計40分が別の領域に置かれた記録画面。

9月9日
初期版

9月21日のWeb版。カテゴリと今日の時間を一つの大きなカードにまとめ、計測中の譜読み10分を明るく示した記録画面。

9月21日
Web版

記録画面。上に実績の格子、その下に今日のバー（合計54分）とカテゴリのカード。「曲の練習」が27分を超えて計測中になり、明るい色と白い輪郭で示されている。

9月24日
iOS 1.0

初期版とWeb版は同じ架空データ（6カテゴリ、今日の合計40分）。iOS 1.0は別の架空データ。
名前と時間を、一緒に
カードに今日の時間を大きく置き、何をどれだけ練習したかを結びつけた。
今の状態を、ひと目で
計測中のカードだけを明るくし、ほかを沈めた。
操作する範囲を、画面の中に
カードの並びが画面に収まる位置で、スクロールが止まるようにした。

終盤は、Claude Codeが問題の候補を挙げ、Codexが検証して直し、自分が採否を決める工程を約15回繰り返した。

手触り —— 止まり方は、触って選ぶ

「すっと動いて、ストンと止まる」感触は、言葉で頼むだけでは作れなかった。方式と値をその場で切り替える調整ツールをAIとつくり、5つの方式を実機で触り比べて、ブラウザ標準のスナップを選んだ。

ハンプ型

ハンプ型の実機操作5本。横軸は指を離してから0–1200ミリ秒、縦軸は吸着位置からの距離。点線の0が吸着位置、各線の端の点が最後の計測位置。

着地点予測型

着地点予測型の実機操作5本。横軸は指を離してから0–1200ミリ秒、縦軸は吸着位置からの距離。点線の0が吸着位置、各線の端の点が最後の計測位置。

ブラウザ標準 proximity
採用

ブラウザ標準 proximityの実機操作5本。横軸は指を離してから0–1200ミリ秒、縦軸は吸着位置からの距離。点線の0が吸着位置、各線の端の点が最後の計測位置。

ブラウザ標準 mandatory

ブラウザ標準 mandatoryの実機操作5本。横軸は指を離してから0–1200ミリ秒、縦軸は吸着位置からの距離。点線の0が吸着位置、各線の端の点が最後の計測位置。

スナップなし

スナップなしの実機操作5本。横軸は指を離してから0–1200ミリ秒、縦軸は吸着位置からの距離。点線の0が吸着位置、各線の端の点が最後の計測位置。
指を離してからの位置を、同じ縮尺で比較。点線の0が吸着位置。実機ログから、直前60 msの位置で求めた速さが0.6–1.8 px/msの操作を、1.2 px/msに近い順に各5本選んだ。各操作の設定・開始位置・方向は異なる。
スクロール調整ツール。5つの吸着方式を切り替える項目とパラメータ、操作感を試すスマートフォン画面が並ぶ。
スクロールの距離と速度を記録しながら、実機で止まり方を比べた。画像を開くと拡大できます。

製品として —— 練習の外側まで

外観は端末の設定に合わせて切り替わる。練習の記録は端末内に保存し、iCloudへ自動でバックアップする。

ライトモードの記録画面。上に実績の格子、その下に今日のバー（合計54分）とカテゴリのカード。「曲の練習」が27分を超えて計測中になり、明るい色と白い輪郭で示されている。ダークモードの記録画面。上に実績の格子、その下に今日のバー（合計54分）とカテゴリのカード。「曲の練習」が27分を超えて計測中になり、明るい色と白い輪郭で示されている。
同じ記録画面のライトモードとダークモード。
練習するものに合わせて選べる109点のテーマアイコン。楽器、運動、学習、絵画、手仕事、表現活動の順に並んでいる。
練習するものに合わせ、アプリのヘッダーに置くアイコンを選べる。音楽47点、運動15点、語学・学習15点、美術11点、ものづくり・暮らし14点、表現7点。サックスはQlementine Icons（MIT License）を元にした。

使ってみて —— 次の問いは、どこまで細かく残すか

毎朝の練習で使い、レッスンで先生に画面を見せたところ、練習の中身がひと目でわかるという反応と、スケールの種類まで残せるとさらに役立つという意見をもらった（要旨）。手軽さを保ちながら詳しく残せるよう、カテゴリの下にもう一段を設けることを検討している。

資料

Webデモでは、記録と共有を操作できる。2026年9月20日時点の自身の練習記録を収録し、操作した結果は閲覧中のブラウザ内にだけ保存される。

  1. 1ページ目。表紙：レッスンの先生に練習状況を共有するための記録アプリの開発。堀内貴文。
  2. 2ページ目。概要：練習を記録するLogと、先生に状況を共有するShare。担当範囲、制作期間、使用ツール。
  3. 3ページ目。背景：サックスの練習状況を先生に的確に伝えたい。紙の練習日誌と既存アプリで感じた課題。
  4. 4ページ目。アプローチ：ワンタップでの記録と瞬時に伝わる可視化。一日と月・年の二つの時間軸で練習の積み重ねを見せる。
  5. 5ページ目。AIを活用した四つの場面：リサーチ、基本実装、操作感を調整する補助ツールの開発、実装の最適化。
  6. 6ページ目。AIとの協働：既存アプリのリサーチと、対話によるコンセプトの具体化。
  7. 7ページ目。基本実装：AIが生成した初版V0と、レイアウトや色彩へのフィードバックを重ねた調整版V1の比較。
  8. 8ページ目。操作感の調整：スクロールの速度や止まり方を自分で比較するため、AIと補助ツールを開発。
  9. 9ページ目。実装の最適化：Claude Codeによる問題候補の提示と、Codexによる検証・修正を反復し、人が判断する工程。
  10. 10ページ目。成果と今後：自身の練習での利用、レッスンの先生からのフィードバック、より細かな記録に向けたサブカテゴリの検討。
横スクロールでページ送り。クリック・タップで拡大。

制作資料をPDFで開く（4.4 MB）