シンプルで美しい作業時間記録ウェブアプリ「Time Tracker」を作りました

仕事やプライベートの作業時間を手軽に記録できるWebアプリを作りました。ウェブ上で動作するので、ブラウザさえあればすぐに使えます。

こんな人におすすめ

  • フリーランスで作業時間を記録したい
  • 勉強や副業の時間を可視化したい
  • シンプルなツールが好き
  • オフラインでも使いたい

主な機能

⏱️ タイマー機能

タスク名を入力してスタートボタンを押すだけ。Enterキーでもスタートできます。

  • リアルタイムで経過時間を表示
  • 今日の合計作業時間を自動計算
  • 日別にグループ化して履歴表示

📊 タスク機能

期間を切り替えて【タスク別】の作業時間を確認できます。

  • 今日 / 今週 / 今月 / 全期間
  • タスク別ランキング表示
  • 実行回数もカウント
  • プログレスバーで視覚的に比較

📈 週間サマリー

1週間の作業状況をグラフで確認。

  • 日別の棒グラフ
  • 週の合計時間・日平均
  • 最も作業した曜日
  • タスク別TOP5

📅 カレンダービュー

月間の作業状況を一目で把握。

  • 作業した日にドット表示
  • 日付をタップで詳細表示
  • 月の切り替え対応

技術的な特徴

  • HTML/CSS/JavaScript のみ – フレームワーク不要
  • localStorage保存 – データはブラウザに自動保存
  • レスポンシブ対応 – スマホでも快適に使える
  • オフライン動作 – ネット接続不要
  • ダークモード – 目に優しいデザイン

使い方

  • ブラウザで開く
  • タスク名を入力して「スタート」

これだけです!

スマホで使う場合

  • ブラウザで開く
  • 「ホーム画面に追加」でアプリのように使える

デザインのこだわり

– グラデーションを使った美しい配色
– グラスモーフィズム風のカード
– 滑らかなアニメーション
– 直感的に使えるUI

今後の予定

  • CSV/JSONエクスポート機能
  • 目標時間の設定
  • タスクのカテゴリ分け

要望があればコメントで教えてください!

作業時間の見える化で、日々の生産性を上げていきましょう!