作業時間記録アプリ「Time Tracker」を大幅アップデート!カテゴリ機能と明るい新デザインに

以前ご紹介した作業時間記録ウェブアプリ「Time Tracker」を大幅にアップデートしました。

前回の記事で「今後の予定」としていた 目標時間の設定 と タスクのカテゴリ分け を実装。さらにデザインも一新し、ダークモードから白を基調とした明るく爽やかなデザインに生まれ変わりました。

もちろん今回も、ブラウザさえあれば登録不要・無料ですぐに使えます。

こんな人におすすめ

  • 勉強・筋トレ・副業など、複数の取り組みを分けて記録したい
  • 「1日◯時間」と目標を決めて習慣化したい
  • 毎日の積み重ねをモチベーションにしたい
  • シンプルで気持ちのいいツールが好き

新機能① カテゴリ機能

今回の目玉機能です。「AI学習」「英語」「筋トレ」など、自分だけのカテゴリを自由に作成できます。

  • キーワード自動判定 — カテゴリに「AI, スクール, 講座」などのキーワードを登録しておくと、タスク名に含まれるだけで自動的にそのカテゴリに分類。手動で振り分ける手間がありません
  • 絵文字アイコン — 学習・仕事・運動・生活・趣味など6ジャンル・100種類以上の絵文字からワンタップで選択。自由入力にも対応しています
  • 連続記録(ストリーク) — 何日続いているかを大きく表示。「記録を途切れさせたくない」気持ちが継続の後押しに
  • 気づきメモ — タイマー停止時にひとことメモを残せます。カテゴリごとに振り返れるので、学習日誌としても使えます

新機能② 1日の目標時間の設定

カテゴリごとに「1日の目標時間」を設定できるようになりました。「1時間30分」のように分単位で細かく設定可能です。

  • 今日の進捗がプログレスバーでひと目でわかる
  • 「あと30分で目標達成」と残り時間を表示
  • 達成すると 🎉 のお祝いメッセージ

新機能③ カテゴリ別レポート

週間サマリーに、カテゴリ別の内訳を示すドーナツグラフを追加しました。「今週は何にどれだけ時間を使ったか」のバランスが直感的に把握できます。

新機能④ 💾 CSV/JSONエクスポート+バックアップ復元

前回の記事でご要望の多かったエクスポート機能を搭載しました。タイマー画面の下部「データのバックアップ」から、ワンクリックでダウンロードできます。

  • 📄 CSVエクスポート — 日付・開始/終了時刻・タスク名・カテゴリ・作業時間・メモを一覧で出力。Excelやスプレッドシートでそのまま開けるので、月次の稼働報告や請求書作成の集計にも使えます(日本語が文字化けしない形式で出力しています)
  • 🧾 JSONエクスポート — 記録とカテゴリ設定を丸ごと保存する完全バックアップ
  • 📥 バックアップ復元 — エクスポートしたJSONを読み込めば、スマホの機種変更やブラウザの引っ越しでもデータをそのまま移行できます。復元前に件数を確認するダイアログが出るので、うっかり上書きしてしまう心配もありません

Time Trackerのデータはブラウザ内にのみ保存され、サーバーには一切送信されません。その安心感はそのままに、「データを手元に残したい」「別の端末に移したい」に応えられるようになりました。

デザインを一新しました

これまでのダークトーンから、白を基調とした明るいデザインにリニューアル。ブルーのグラデーションをアクセントに、日中の作業でも目に馴染む、軽やかで清潔感のある画面になりました。もちろんスマホ対応もそのままです。

技術的な特徴(変わらないこだわり)

  • HTML/CSS/JavaScriptのみ — フレームワーク不要
  • localStorage保存 — データはブラウザに自動保存、サーバーには一切送信されません
  • オフライン動作 — ネット接続不要
  • レスポンシブ対応 — スマホでも快適

使い方

  1. ブラウザで開く
  2. タスク名を入力して「スタート」
  3. カテゴリタブで自分のカテゴリと目標を設定

これだけです!

カテゴリと目標で「なんとなく頑張る」から「見えるように積み上げる」へ。日々の時間をもっと味方につけていきましょう!

開発には、Claude Fable5を使いました。AI活用しながらの機能開発で、たくさんの方に喜んでいただけるようなサイトづくりを心がけてまいります。

これからもどうぞよろしくお願いいたします。