実例一覧／健康・体重記録／かわいい

健康・体重記録の見やすい表デザイン（かわいい）No.028

気分の列を3段階の言葉にして1色の濃淡で表すと、体調メモが毎日書ける表になります。

BEFORE

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

AFTER

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

直したのはこの5点

01

気分を「よい・ふつう・いまいち」の3語に決め、よい日だけ淡く塗り、いまいちの日は文字を薄くしました。同じピンクの濃淡だけで3段階を表しています。
条件付き書式の基本
02

ピンク・紫・黄緑の3色使いをやめました。体調の表で色を増やすと、悪い日ほど目立つ配色になりがちで、開くのが億劫になります。
配色の基本
03

体重を小数第1位に、睡眠を0.5時間刻みにそろえました。桁がそろうと、0.3kgの差や30分の差が縦の段差として見えます。
数字の見せ方の基本
04

メモ欄を268pxと広く取りました。数字だけの記録は続きません。ひとこと書ける余白があると、あとで読み返す表になります。
余白の基本
05

丸ゴシックにそろえ、行高を27pxにしました。毎日ひらく表なので、書体のやわらかさは続けやすさに直結します。
フォントの基本

なぜそう直すのか

体調の記録は、数字だけにすると続きません。体重と睡眠時間を並べただけの表は、入力の手間に対して読み返す楽しさが足りないからです。この見本では気分の列を1本足しました。ただし絵文字や5段階の顔マークではなく、「よい・ふつう・いまいち」の3語に固定しています。言葉を決めておくと、入力のたびに迷わず、あとから「いまいちの日だけ抽出」もできます。自由記述の気分欄は、書くのは楽しくても集計できません。

色は3語のうち2つだけに付けました。よい日は淡いピンクで塗り、いまいちの日は塗らずに文字を薄いピンクグレーに。ふつうの日は何もしません。悪い日を赤く塗る作りにすると、体調を崩した週ほど画面が真っ赤になり、開くのが億劫になります。よい日が積み上がって見えるほうが、記録を続ける気持ちが保てます。同じ色相の濃淡だけで3段階を表しているので、色数は増えていません。

数字の桁はそろえてください。体重は小数第1位、睡眠は0.5時間刻み。54.2 と 54 と 54.20 が混ざると、小数点の位置が縦にずれて0.3kgの差が伝わりません。そしてメモ欄は広く取りました。「寝つけなかった」「休みの日はよく眠れる」という一言が、あとから読み返したときに数字を意味に変えます。記録の表で最後まで残る価値は、たいてい数字ではなくこの一言のほうです。

このデザインのレシピ

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

使っている色

タイトルの文字
見出しの塗り／「よい」の塗り
見出しの文字／「よい」の文字
行のストライプ
「いまいち」の文字

フォント

本文・数字：M PLUS Rounded 1c（10pt）
タイトルは 13pt・太字

行の高さ・罫線・固定

行の高さ：タイトル 36px ／見出し 30px ／本文 27px
見出しの罫線：なし（塗りと書体で本文と区切る）
本文の罫線なし（ストライプと余白で行を区切る）
グリッド線（セルの枠線）：非表示にする
行の固定：上から2行（タイトルと見出し）
表示形式：「日付」列は m"/"d、「体重」列は 0.0、「睡眠」列は 0.0"h"（数値のまま持ち、表示だけ整える）

条件付き書式

「きぶん」列の入力値（「よい」・「いまいち」）に応じて塗りと文字色が自動で切り替わります。手では塗りません。

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

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