スマホ1タップで作業時間を記録！Notion × Vercel × Claude Code で作った時間管理システム
TL;DR
- 課題: 研究と仕事のバランスを可視化したい。Toggl は続かなかった
- 解決策: スマホ1タップで Notion に記録できる仕組みを自作
- 開発: 要件定義書を書いて Claude Code に渡したら1.5時間で完成
- 設計:
Last Event Timeで休憩時間を累積計算、状態遷移でバリデーション - 運用: カレンダービューと Weekly Chart で可視化、目標管理
実際にスマホアプリから打刻する様子
はじめに
今回は、研究時間を可視化するために開発した時間管理システムについてご紹介します。スマホのウィジェットからボタンを1タップするだけで Notion に研究時間が記録される仕組みで、開発時間は 約1.5時間、運用コストは 0円 です。
完成品はこちらで公開しています。
タイトルに「スマホ1タップ」と書きましたが、Apple Watch からも使えます。私は Apple Watch を持っていないのでスマホで使っています笑
背景と課題
研究時間を可視化したい理由
研究を進める中で、私には一つの悩みがありました。それは 研究と仕事の時間配分 です。
研究以外にもやることがあると、放っておくとそちらの割合がどんどん増えてしまい、気づいたら研究時間が削られている...という状況に陥りがちでした。
「このままだとまずい」と思い、ちゃんと時間を計測して、バランスを意識しよう と考えたのがきっかけです。
既存ツールの検討
時間管理ツールといえば Toggl Track があります。仕事ではこちらを使っているので、研究でも使っていこうと思っていましたが、あまりうまくいきませんでした。
課題①：毎回サイトを開くのが面倒
研究を始めるたびにブラウザを開いて、ログインして、ボタンを押して...という作業が地味にストレスでした。
課題②：「何をしていたか」を記録する UI が重い
Toggl は「どのプロジェクトで何をしていたか」を細かく記録できるのですが、これが逆に負担になりました。研究中はマルチタスクが多く（AI が実装している間にサーベイを読むなど）、「今何をしているか」を意識すること自体が難しかったのです。
課題③：情報が分散する
私は普段から Notion に情報を集約しています。時間管理だけ別のツールに分かれてしまうと、後から振り返るときに不便でした。
結局のところ、私が欲しかったのは 「研究を始めた」「終わった」だけを記録できるシンプルな仕組み でした。
Notion への情報集約については、以前こちらの記事で紹介しています。
（今は Gemini のスライド生成が優秀なのであまり使ってはいませんが）
解決策：WristOff × Notion × Vercel
WristOff との出会い
「ボタン1つで API を叩けるアプリはないかな」と探していたところ、WristOff というアプリを見つけました。 WristOff は、Apple Watch やスマホから任意の HTTP リクエストを送信できるアプリです。500円の買い切りで、カスタムボタンを自由に作成できます。シンプルなデザインで、ウィジェットにも対応しているのが決め手でした。
システムの全体像
4つのボタンを用意しました：
- 🚀 研究開始 - 新しいセッションを作成
- ☕ 休憩開始 - 休憩に入る
- 💪 休憩終了 - 休憩から戻る
- 🏁 研究終了 - セッションを完了
1回の打刻にかかる時間は 約2秒 です。スマホのウィジェットをタップするだけなので、記録のハードルが劇的に下がりました。
使用ツール
| ツール | 用途 | 選定理由 |
|---|---|---|
| WristOff | 打刻 | UIボタン1つでAPIを叩ける |
| Vercel | APIホスティング（サーバーレス） | 無料枠が大きい |
| Notion API | データ保存 | 既存の情報基盤と統合できる |
| Claude Code | 実装 | 要件定義書を渡せば実装してくれる |
運用コストは 完全に0円 です。Vercel の無料枠は月100万リクエストなので、個人利用なら余裕で収まります。
開発プロセス：Claude Code の活用
技術スタックの決定
技術スタック（Vercel + TypeScript）は LLM に相談して決めました。TypeScript は正直あまり使ったことがなかったのですが、「Claude Code なら大丈夫だろう」と思い、あえて挑戦してみることにしました。
要件定義書を書く → 実装は Claude Code に任せる
開発の流れはこんな感じです。
- Claude（チャット）と壁打ちしながら要件を固める
- 要件定義書を作成する
- Claude Code に要件定義書を渡す
- 実装・デバッグは Claude Code が担当
実際、コードの中身は自分ではほとんど見ていません。デバッグも Claude Code がやってくれました。開発時間は約1.5時間 で完成しました。
ただし、設計の方針 は自分で考えて指示しました。特に後述する Last Event Time を使った休憩時間の計算ロジックなど、より簡易な実装で済むように考えるところは自分自身で行っています。
Claude Code を使った開発では、「何を作りたいか」を明確にすることが重要です。要件定義書さえしっかり書けば、（個人で使うアプリケーションに関して、）実装は AI に任せられる時代になったと感じています。
設計のポイント
Notion DB の構成
1セッション = 1レコード という設計にしました。研究を始めてから終わるまでが1つのレコードになります。
| プロパティ名 | タイプ | 説明 |
|---|---|---|
| SessionTitle | Title | セッション名（@2026年01月06日 23:00 形式） |
| Status | Select | 🔄 進行中 / ☕ 休憩中 / ✅ 完了 |
| Start Time | Date | 研究開始時刻 |
| End Time | Date | 研究終了時刻 |
| Last Event Time | Date | 最後のイベント発生時刻 |
| Total Break (min) | Number | 休憩時間の累積（分） |
| Total Research Hour | Formula | 正味研究時間（時間） |
Last Event Time を使った休憩時間の計算
設計で工夫したのは、Last Event Time を使って休憩時間を累積計算する仕組みです。
23:00 研究開始 → Last Event = 23:00, Total Break = 0
23:45 休憩開始 → Last Event = 23:45
00:00 休憩終了 → Total Break = 0 + 15 = 15分, Last Event = 00:00
00:30 休憩開始 → Last Event = 00:30
00:45 休憩終了 → Total Break = 15 + 15 = 30分, Last Event = 00:45
02:00 研究終了 → End Time = 02:00
→ 総時間 = 180分, 正味研究時間 = 150分
この設計により、何回休憩を挟んでも正確に計算 できます。また、深夜に日付を跨ぐセッションにも対応しています。
状態遷移のバリデーション
誤操作を防ぐため、正しい順序でのみ打刻できる ようにしました。
例えば、研究を開始していないのに「休憩開始」を押すとエラーになります。スマホで誤ってボタンを押しても、不正なデータが登録されることはありません。
実際の運用
カレンダービューで「いつ・どこで」を可視化
Notion のカレンダービューを追加して、いつ、どこで研究したかが一目でわかるようにしました。Lab や Home などのタグをつけることで、場所ごとの傾向も把握できます。
カレンダービューで時間と場所を表示しています
Chart View で目標管理
Notion のチャート機能を使って、日・週・月ごとの研究時間を可視化していきます。目標ライン と 死守ライン を設定することで、ヘルスチェックができるようになりました。
目標ラインと死守ラインが描画されたチャートビュー
（年末年始は時間が取れているが、その後はなかなか時間が取れていないことが一目でわかります）
数字で見えるようになると、「今週は目標に届いていないから、週末に頑張ろう」といった判断ができるようになります。
まとめ
本記事では、研究時間の可視化という課題に対し、WristOff × Notion × Vercel でシンプルな時間管理システムを構築した事例を紹介しました。
開発時間は1.5時間、運用コストは0円。大げさなシステムではありませんが、日々の研究生活が少し快適になりました。Claude Code のようなツールが登場したことで、「設計さえできれば実装できる」 時代になったと感じています。コードを書いたことがない人でも、要件を言語化できれば、自分だけのツールを作れるようになりました。
自分の生活を自分のエンジニアリングで豊かにしていく。そんな楽しさを、この記事を通じて少しでも伝えられたら嬉しいです！読んでいただきありがとうございました！
参考リンク
Discussion