実例一覧／習慣トラッカー／シック

習慣トラッカーの見やすい表デザイン（シック）No.017

毎日の記号を週ごとの日数に集計すると、31マスを眺めなくても続いている習慣が分かります。

BEFORE

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

AFTER

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

直したのはこの5点

01

毎日の○×を、週ごとの達成日数という数値に集計しました。31個の記号を目で数えるのと、7点満点の数字を4つ見るのとでは、振り返りにかかる時間が違います。
数字の見せ方の基本
02

達成率の列だけに淡いカラースケールをかけました。4週ぶんの数字が並んだ表でも、色の濃さで「続いた習慣」と「途切れた習慣」が先に目に入ります。
条件付き書式の基本
03

週の見出しを右寄せにして、下の数字と右端をそろえました。数値の列は見出しも右に寄せると、桁と見出しが1本の線でつながって見えます。
見出し設計の基本
04

黒地に金文字の帯をやめ、濃いグレージュの見出し1本だけにしました。記録の表は数字が主役なので、器の色は数字より弱くしておきます。
配色の基本
05

習慣名の列を216pxに広げ、週の列は78pxにそろえました。数値の列は幅をそろえるだけで、比べやすさがはっきり上がります。
余白の基本

なぜそう直すのか

毎日チェックを付ける形の習慣トラッカーは、記録している最中は楽しいのですが、月末の振り返りには向きません。31個の記号を目で数えることになるからです。この見本では、日ごとの記録を週ごとの達成日数に集計しました。7点満点の数字が4つ並ぶだけで、「第3週に崩れた」「読書だけずっと低い」といったことが数秒で読めます。日々の記録シートを別に持ち、そこから COUNTIF で集計してくる形にすれば、入力の手軽さと振り返りやすさを両立できます。

色は達成率の1列だけに、淡いカラースケールで入れました。数字が7列も並ぶ表では、どこから読めばいいのかが分からなくなります。いちばん右の1列だけに濃淡があると、視線はまずそこへ行き、気になった行の左を辿ることになります。読む順番を色で設計する、という使い方です。強い色は要りません。濃淡の差が周囲の白より大きければ、視線はそちらへ動きます。

数値の列は幅をそろえ、見出しも右寄せにしました。第1週から第4週まで同じ78ピクセルにしておくと、数字の位置が縦にそろい、行をまたいだ比較がしやすくなります。見出しだけ左寄せのままだと、見出しと数字が別々の場所から始まって見え、列としてのまとまりが弱くなります。細かい話に見えますが、数字の列が5本も6本もある表では、この配置の統一が読みやすさのほとんどを決めます。

このデザインのレシピ

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

使っている色

タイトルの文字
見出しの塗り
見出しの文字
行間の罫線
カラースケールの最小
カラースケールの最大

フォント

本文・数字：Noto Sans JP（10pt）
タイトル・見出し：Noto Serif JP（見出しだけ書体を変えて雰囲気を作る）
タイトルは 13pt・太字

行の高さ・罫線・固定

行の高さ：タイトル 38px ／見出し 30px ／本文 28px
見出しの罫線：なし（塗りと書体で本文と区切る）
行間に極細の横罫のみ（縦罫は引かない）
グリッド線（セルの枠線）：非表示にする
行の固定：上から2行（タイトルと見出し）
表示形式：「第1週」列は 0、「第2週」列は 0、「第3週」列は 0、「第4週」列は 0、「達成日数」列は 0"日"、「達成率」列は 0%（数値のまま持ち、表示だけ整える）

条件付き書式

「達成率」列にカラースケール。数値の大小が塗りの濃淡になり、色が1つの意味だけを運びます。

この設定はどこにある？（Excel / Google スプレッドシート対応表）

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