タスク管理画面

「今日／予定／いつか」の3リストを持つタスク画面。丸をチェックすると取り消し線が引かれ、少し置いてから完了へ移る。下の入力欄で今日のタスクを追加できる（Things 型）。

ENGLISH

Task Manager (Today / Upcoming / Someday)

約137行画面のかたち / 実用サンプル: アプリ画面の一覧 →

プレビュー

クリック

操作クリック／タップで動きます。

仕様書

向く場面: 今日／予定／いつかで分ける個人のタスク管理
完了に猶予と達成感を持たせたいチェック
1 行入力でタスクを足す軽い ToDo
避ける場面: 担当者・期限・優先度で管理するチーム用（カンバンへ）
サブタスクや詳細欄が必要な案件管理
構成要素: リスト一覧（色ドット／名前／件数）
見出しと日付
タスク行（丸／文字／タグ）
空表示
追加欄
持っている状態: 通常
ホバー
フォーカス
押下中
空
キーボード: Tab でリスト 4 つ→各タスクの丸→入力欄の順。丸は Enter/Space で完了（行が消えたら次の行の丸へ焦点が移る）、入力欄は Enter で追加
支援技術: 丸は role=checkbox＋aria-checked＋aria-label（完了にする／未完了に戻す）。移動は role=status で「〜を完了へ移しました」。現在のリストは aria-current。入力欄は隠した label
動き: 丸の塗り 150ms→取り消し線が 300ms で伸び→500ms 後に 300ms で右へ消え、800ms で完了リストへ移る

デザインの要点

完了は即座に消さず、線を引いて 0.8 秒置いてから移す。取り消しの猶予と達成感を同時に作る
リストは「今日／予定／いつか」の 3 つに固定し、期限ではなく決意の強さで分ける
追加は最下段の 1 行入力。Enter だけで足せる。項目の詳細は後から開いて書く
左のリスト名には残り件数を添える。数字が減るのを見せることが継続の燃料になる

プロのサイトでの実例

Things別サイト ↗「今日・これから・いつか」で分ける整理法とチェック時の演出で知られるタスク管理アプリ

実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。

コード（コピーして使えます）

<div class="tm-app">
  <nav class="tm-side" aria-label="リスト">
    <button type="button" class="tm-side-item is-on" data-list="today" aria-current="true"><span class="tm-side-dot" style="background:#f59e0b"></span>今日<span class="tm-side-n" data-n="today">3</span></button>
    <button type="button" class="tm-side-item" data-list="upcoming"><span class="tm-side-dot" style="background:#dc2626"></span>予定<span class="tm-side-n" data-n="upcoming">2</span></button>
    <button type="button" class="tm-side-item" data-list="someday"><span class="tm-side-dot" style="background:#a16207"></span>いつか<span class="tm-side-n" data-n="someday">2</span></button>
    <button type="button" class="tm-side-item" data-list="done"><span class="tm-side-dot" style="background:#15803d"></span>完了<span class="tm-side-n" data-n="done">1</span></button>
  </nav>
  <main class="tm-main">
    <header class="tm-head"><h1 class="tm-h1" id="tm-title">今日</h1><p class="tm-date" id="tm-sub">4月22日 水曜日</p></header>
    <ul class="tm-list" id="tm-list"></ul>
    <p class="tm-empty" id="tm-empty" hidden>すべて完了しました。おつかれさまです。</p>
    <p class="tm-sr" id="tm-status" role="status"></p>
    <form class="tm-add" id="tm-add">
      <span class="tm-add-plus" aria-hidden="true">＋</span>
      <label class="tm-sr" for="tm-input">新しいタスク</label>
      <input class="tm-input" id="tm-input" type="text" placeholder="新しいタスク… Enter で追加" autocomplete="off">
    </form>
  </main>
</div>