タスク管理画面
「今日／予定／いつか」の3リストを持つタスク画面。丸をチェックすると取り消し線が引かれ、少し置いてから完了へ移る。下の入力欄で今日のタスクを追加できる（Things 型）。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 完了は即座に消さず、線を引いて 0.8 秒置いてから移す。取り消しの猶予と達成感を同時に作る
- リストは「今日／予定／いつか」の 3 つに固定し、期限ではなく決意の強さで分ける
- 追加は最下段の 1 行入力。Enter だけで足せる。項目の詳細は後から開いて書く
- 左のリスト名には残り件数を添える。数字が減るのを見せることが継続の燃料になる
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="tm-app">
<nav class="tm-side" aria-label="リスト">
<button type="button" class="tm-side-item is-on" data-list="today"><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>
<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>