嗜好化するToDo管理(9) フォーカスモード — 集中を守るUI設計

人間の注意は、入ってくる情報から必要なものを選択しながら処理されています。

公益社団法人日本心理学会心理学ワールド 88号 小特集 注意の向け方の発達と文化 先崎 沙和（ウィスコンシン大学） | 日本心理学会公益社団法人日本心理学会の公式ホームページpsych.or.jp

また、タスクを切り替えると前の作業の思考が残り続け（注意残余）、次の作業の集中力を下げることが知られています。

実装: 2つのモードの切替

HigherSelfではポモドーロタイマーに2つの表示モードを実装しています。

集中モード（フルビュー）

ToDoがクリックされると、まずは画面全体が現在のタスクに関する情報だけを映すよう、集中モードに切り替わります。タスクの詳細編集パネル、SVGタイマー、感情ボタン、優先度設定——すべてが1画面に収まります。

普段は利用できるチャット入力欄、送信ボタン、タスクピックアップボタンなど、タスク実行に不要な操作をすべて無効化します。（２０２６年３月時点、タスク詳細編集パネルはテスト中です）

ここでは基本的に、タスクを完了させる、または保留するという操作以外での画面切り替えは抑制します。

ポジティブな感情を選択し「完了」ボタンを押して爽快感を味わうか、正直にあまりやりたくない気持ちを記録し「保留」するか。操作時はコメントも入力可能ですがあくまでオプションで、感情も記録しないことも可能です。

ポジティブでもネガティブでも、自分の「感情の動き」を客観視することが目的で、後で振り返るために記録する行動を自分の習慣とする助けになります。

ミニモード

集中モードでも、他のタスクの情報や、AIとのチャットが必要な場合ももちろんあります。集中モードの右上のボタンを押してミニモードに切り替えると、タイマーとタスク名、操作ボタンだけのコンパクト表示に切り替わります。再度、右上のボタンを押すと集中モードに戻ります。

ミニモードはチャット画面の上部に残り続けますので、プログレスサークルの動きを視野で捉えつつ作業を続行できます。

２画面運用が本命？

現在、pareido.jpでは２画面以上の作業環境をメインにしているため、１画面はHigherSelfを表示したまま、別の画面で主な作業を行なうワークフローを想定したデザインとなっています。１画面でアプリを切り替えなが使うことももちろんできますが、専用の画面があった方が視野の周辺でタイマーを捉えながら作業を進めることができます。

タウレットやスマートフォンと併用できることが望ましいですが、現在はMacアプリとして実装しているためここは将来の課題です。

振り返り

フォーカスモードの本質は「制約による自由」です。選択肢を減らすことで、かえって集中という自由が生まれる。これは第2回で語った「ToDoの定義」——やることを決めるのではなく、やらないことを決める——と通じる考え方です。

次回は、集中する時間帯そのものを設計する「稼働時間の管理」についてお話しします。

追記：デモ環境

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

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

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