実例一覧タスク管理ミニマル

タスク管理の見やすい表デザイン(ミニマル)No.003

状態の色分けを1列に閉じ込め、期限を数値でそろえると、今日やることが最初の3行に集まります。

BEFORE

よくある崩れ方タップで拡大

AFTER

整えた状態(データは Before と同じ)タップで拡大

直したのはこの4点

  1. 01

    行全体を状態で塗り分けるのをやめ、状態列のセルだけを淡く塗りました。行を塗ると、隣のタスク名まで色に飲まれて読みにくくなります。

    配色の基本
  2. 02

    「完了」は塗りではなく文字を薄いグレーにして取り消し線をかけました。済んだ行が視覚的に後退し、残りのタスクが前に出ます。

    条件付き書式の基本
  3. 03

    タスク名の列幅を実際の文字数に合わせて広げ、メモ列も確保。列幅が足りずに文字が切れている表は、それだけで読む気を削ぎます。

    余白の基本
  4. 04

    期限を文字列ではなく日付値で持ち、月日だけを表示。期限順の並べ替えが正しく効くようになります。

    数字の見せ方の基本

なぜそう直すのか

タスク表がうまく機能しなくなる典型が、状態ごとの行の塗り分けです。未着手はピンク、着手中は黄、完了はグレー。一見わかりやすいのですが、行が5色に塗られた瞬間、いちばん読みたいタスク名の可読性が落ちます。しかも色は増え続けます。「保留」「差し戻し」と状態が増えるたびに新しい色が必要になり、最後は本人にも意味が思い出せない配色表になります。

この見本では、色を状態列の中だけに閉じ込めました。着手中だけを淡いベージュで塗り、完了は塗らずに文字をグレーにして取り消し線を引いています。完了行が後退することで、残っているタスクが自然に前に出ます。塗りではなく「弱くする」ことで優先順位を作るやり方です。

もう一つ効くのが列幅です。既定の幅のままだと、タスク名が途中で切れたり隣の列に流れたりして、結局セルをクリックしないと全文が読めません。タスク名は広く、期限や優先度のような短い値は狭く。列幅は装飾ではなく情報設計の一部です。期限は必ず日付値で持ってください。「2/9」という文字列にしてしまうと、並べ替えたときに 2/9 が 2/14 より後ろに来る、といった事故が起きます。

このデザインのレシピ

After シートに実際に設定している値です

使っている色

  • タイトルの文字/見出しの文字
  • 行のストライプ
  • 「着手中」の塗り
  • 「完了」の文字

フォント

  • 本文・数字:Noto Sans JP(10pt)
  • タイトルは 13pt・太字

行の高さ・罫線・固定

  • 行の高さ:タイトル 34px / 見出し 26px / 本文 24px
  • 見出しの下に中太の横罫を1本
  • 本文の罫線なし(ストライプと余白で行を区切る)
  • グリッド線(セルの枠線):非表示にする
  • 行の固定:上から2行(タイトルと見出し)
  • 表示形式:「期限」列は m"/"d(数値のまま持ち、表示だけ整える)

条件付き書式

「状態」列の入力値(「着手中」・「完了」)に応じて塗りと文字色が自動で切り替わります。手では塗りません。

この設定はどこにある?(Excel / Google スプレッドシート対応表)
設定ExcelGoogle スプレッドシート
行の高さホーム → 書式 → 行の高さ行番号を右クリック → 行のサイズを変更
罫線・塗りつぶしホーム → 罫線/塗りつぶしの色ツールバー → 枠線/塗りつぶしの色
表示形式(桁区切り・%)ホーム → 数値表示形式 → 数字
条件付き書式ホーム → 条件付き書式表示形式 → 条件付き書式
行の固定表示 → ウィンドウ枠の固定表示 → 固定
グリッド線の非表示表示 → 目盛線のチェックを外す表示 → グリッド線のチェックを外す

このテンプレートを使う

Before と After の2シート入りです。無料・登録不要。Excel でも Google スプレッドシートでも開けます。

この実例を Pinterest に保存する

ほかの実例

タスク管理の実例をまとめて見る →