share&doのUI設計｜TODOの追加・編集・完了を迷いにくくする4つの工夫

share&doのスマートフォン画面で優先したのは、未完了のTODOを見つけ、チェックすることです。一覧に編集・削除・並べ替えのボタンをすべて並べると、項目が増えるほど押せる場所ばかりになります。そこで、一覧で見る操作、タイトルから詳細を開く操作、チェックで状態を変える操作、長押しで順序を変える操作を分けました。以下の2枚は現在の一覧と詳細モーダルです。

1. 一覧では「今やること」だけを目立たせる

現在の一覧には、TODOのタイトル、備考、完了チェックを表示します。編集と削除のボタンは常時表示しません。スマートフォンで1項目あたりの高さを抑え、指でチェックするときに隣の削除ボタンを誤って押す経路を作らないためです。完了済みは別の折りたたみ欄へ移り、未完了の一覧と残り件数を同じ画面で確認できます。

2. 詳細はモーダルへまとめる

チェック以外のタイトル部分を押すと、最初は読み取り状態の詳細モーダルが開きます。「編集」を押したときだけ入力欄へ切り替わり、保存またはキャンセルで一覧へ戻ります。削除も詳細側へ置き、確認を挟みます。一覧を読むだけの場面と、内容を変える場面を同じボタン列にしない構成です。モーダルではEscで閉じる、フォーカスを外へ逃がさない、閉じたあと元の項目へ戻す処理も入れています。

3. 完了の変化を、動きで伝える

未完了のチェックを入れると、項目は完了済みの欄へ移り、残り件数も更新されます。完了欄は0件でも見出しを残し、通常は折りたたんで未完了を先に見せます。間違えて完了にした場合は、完了欄から未完了へ戻せます。動きが苦手な端末ではprefers-reduced-motionに合わせてアニメーションを抑えるため、移動だけに頼らず、チェック・件数・欄の位置でも状態を示します。

4. 並べ替えのための部品を増やさない

並べ替えはTODOカード全体の長押し後に上下へ動かします。専用ハンドルや上下ボタンを各項目へ常設しないため、狭い画面でもチェックとタイトルを優先できます。長押し成立前は少し指が動いてもスクロールを邪魔せず、並べ替えが始まった後だけページスクロールを止めます。マウス操作に加え、キーボードではタイトルへフォーカスしてAlt＋↑／↓でも移動できます。

現在も残っているUI上の制約

現在も制約は残っています。長押しは画面を見ただけでは気付きにくく、初回利用時の説明が必要です。また、共有相手の変更は常時接続で即時反映する方式ではなく、15秒ごとの更新と画面へ戻ったときの再取得で反映します。同じTODOを同時に編集した場合は、古い版の保存を競合として扱い、最新データを読み直します。ボタンを減らした代わりに、発見しやすさと更新の待ち時間は引き続き確認すべき点です。