実例一覧タスク管理かわいい

タスク管理の見やすい表デザイン(かわいい)No.016

済んだ行を淡いピンクで塗るのをやめ、チェック欄1列だけに色を持たせると、残りのやることが前に出ます。

BEFORE

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

AFTER

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

直したのはこの5点

  1. 01

    終わった行をまるごとピンクで塗るのをやめ、済の列のセルだけを塗りました。行を塗ると、終わったタスクほど目立つという逆転が起きます。

    配色の基本
  2. 02

    「できた」と入力した瞬間にセルが色づく条件付き書式にしました。手で塗ると、次の週にコピーしたとき色だけが残ります。

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

    所要時間を「15分」という文字ではなく数値で入れ、単位は表示書式で付けました。合計が出るので、その日に入る量かどうかを入れる前に判断できます。

    数字の見せ方の基本
  4. 04

    丸ゴシックにそろえ、行高を27pxにしました。やることリストは毎日開くものなので、書体のやわらかさがそのまま続けやすさになります。

    フォントの基本
  5. 05

    やること列を252pxに広げ、メモ列も224px確保しました。文字が切れてセルを開かないと読めないリストは、数日で見なくなります。

    余白の基本

なぜそう直すのか

やることリストで最初にやりたくなるのが、終わった行をピンクで塗ることです。達成感があるので気持ちは分かるのですが、表としては逆効果になります。塗られた行は目立つので、週の後半になるほど「終わったこと」が画面を占領し、残っているタスクが白い行として背景に沈みます。この見本では、色を済の列だけに閉じ込めました。1列ぶんの淡いピンクが並ぶだけで達成感は十分に伝わり、まだ何も入っていない行のほうが自然に前に出ます。

色は手で塗らず、条件付き書式に任せてください。手で塗った色はセルに固定されるので、この表を来週用にコピーしたときに、内容を消しても色だけが残ります。「できた」という文字が入ったら色が付く、という規則にしておけば、コピーしてテキストを消した瞬間に色も消えます。書式は手作業ではなく規則で持つ、というのは表づくり全体に効く原則です。

所要時間の列は、この表でいちばん実用的な工夫かもしれません。「15分」と文字で書くのではなく 15 という数値を入れ、単位は表示書式で付けています。こうしておくと合計が出るので、その日に詰め込んだ用事が2時間ぶんなのか5時間ぶんなのかが、やる前に分かります。やることリストが続かない原因の多くは、意志ではなく量の見積もり違いです。数値で持てば、そこは表が教えてくれます。

このデザインのレシピ

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

使っている色

  • タイトルの文字
  • 見出しの塗り/「できた」の塗り
  • 見出しの文字/「できた」の文字
  • 行のストライプ

フォント

  • 本文・数字:M PLUS Rounded 1c(10pt)
  • タイトルは 13pt・太字

行の高さ・罫線・固定

  • 行の高さ:タイトル 36px / 見出し 30px / 本文 27px
  • 見出しの罫線:なし(塗りと書体で本文と区切る)
  • 本文の罫線なし(ストライプと余白で行を区切る)
  • グリッド線(セルの枠線):非表示にする
  • 行の固定:上から2行(タイトルと見出し)
  • 表示形式:「目安」列は 0"分"(数値のまま持ち、表示だけ整える)

条件付き書式

「済」列の入力値(「できた」)に応じて塗りと文字色が自動で切り替わります。手では塗りません。

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

このテンプレートを使う

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

この実例を Pinterest に保存する

ほかの実例

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