嗜好化するToDo管理(8) ポモドーロで集中を構造化する

これは心理学でいう行動活性化に近い発想です。人は「やる気があるから動く」のではなく、「動くことでやる気が生まれる」とされています。

また、人間は処理できる情報量に限界があり、判断が増えるほど行動は止まりやすくなります（認知負荷理論）。

「この仕事を終わらせなきゃ」と考えると億劫でも、「とりあえず25分だけやる」なら始められる。始めてしまえば案外続けられるものです。ポモドーロの本質は集中の強制ではなく、着手の促進にあります。

実装: タイマーとタスクの自動連動

HigherSelfでは、ポモドーロタイマーをタスク管理と密接に統合しました。pomodoro_timer.ts がその中核です。

画像はタスクの編集機能を試している開発中もので、情報量が多くて集中モードとしては違和感があるのは今後の課題です。（３月リライト時に追記）

SVGアークによる残り時間の可視化

タイマーはよく見るプログレスサークルとデジタル時計の組み合わせとして表現しました。

アークはSVGで生成し、進捗と残り時間を表現します。時間が経過すると色を変える機能（黄色→赤）も試験的に実装していますが、急がせることが目的ではないので今後の検討事項です。

DOM として直接操作でき、CSS アニメーションとの相性が良さからCanvas ではなく SVG を採用しています。シンプルな実装でも滑らかに進捗が動きます。

タイマーの開始と更新

25分でカウントダウンを開始し、1秒ごとに描画を更新しています。フォーカスが外れると、戻った瞬間にまとめて描画されますが許容範囲です。デフォルトは25分ですが、設定ファイルから読み込むためカスタマイズ可能です。ただ、現状は１つのToDoを30分と定義していること、またポモドーロ・テクニックに沿っていることから変えることはまずないでしょう。

タスク完了時の3分岐

ポモドーロ終了時には3つの選択肢があります。

1. 完了（✅）: タスクを完了し、感情を記録
2. 保留（⏸）: 中断して感情を記録し、リストに戻す
3. タイムアウト（⏰）: 時間切れ。5分後にタイマーを戻して再開。

タスク中断時や完了時は、簡単なコメントを残せるようにしました。このツールは本来、元の Obsidian や VS Code で編集することを前提としていますが、簡単なメモでアプリを切り替えるのは集中力から払うコストが高いと感じるので、このようにしています。

時間切れの場合は、いったん集中モードを解除し、5分後に再開します。この際、🍅マークがタスクに記録され、蓄積しています。もともと30分で終わるはずのタスクに🍅が並んでいたら、何かおかしいことのサインです。

振り返り

独立したポモドーロアプリは、良いものが世に溢れています。しかし「タスクを選んで → 別アプリでタイマーを押して → 終わったら戻る」というフロー自体が認知コストです。HigherSelfでは、タスクをピックアップした瞬間にタイマーが始まり、完了・保留・タイムアウトがそのままタスクの状態遷移に直結します。

次回は、タイマーが動いている間の「集中を守る」UI設計——フォーカスモードについてお話しします。

追記：デモ環境

下の埋め込みで、HigherSelfのデモをそのまま操作できます。タスクの追加や完了、ダッシュボードの切り替えなど、基本的なUI操作を試してみてください。データはインメモリなので、ページをリロードすると初期状態に戻ります。

HigherSelfはデスクトップ向けElectronアプリのため、PC・タブレットでの閲覧を推奨します。スマートフォンでは横スクロールが発生し、操作が困難です。

別タブで開く場合はこちら: HigherSelf デモ