買い物・在庫リストの見やすい表デザイン(ミニマル)No.010
在庫と最低在庫を隣り合わせに置き、不足だけを淡く塗ると、買い物メモを別に作らなくて済みます。
よくある崩れ方タップで拡大
整えた状態(データは Before と同じ)タップで拡大
直したのはこの4点
-
01
在庫が最低在庫を下回った行のセルだけを淡く塗る条件付き書式にしました。買い物メモを別に作らなくても、この表がそのままリストになります。
条件付き書式の基本 -
02
在庫と最低在庫を隣り合う2列に置きました。離れた列同士は比較できません。比べてほしい数字は必ず隣に置きます。
見出し設計の基本 -
03
「残り2個」といった文字列をやめ、数値だけを入れました。条件付き書式も合計も、数値でなければ働きません。
数字の見せ方の基本 -
04
品目ごとの色分けを廃止し、色は「不足している」という1つの意味にだけ使いました。色に意味を1つだけ持たせるのが、色を機能させる唯一の方法です。
配色の基本
なぜそう直すのか
在庫リストが続かない最大の理由は、買い物メモを別に作ってしまうことです。在庫表を見て、足りない物を別の紙に書き写し、その紙を持って出かける。この転記が1つ挟まるだけで、表は数週間で放置されます。在庫と最低在庫を隣り合う2列に置き、在庫が最低在庫を下回ったセルだけを淡く塗る条件付き書式を入れると、この表そのものが買い物リストになります。スマホで開いて、塗られている行だけ買えばいい。
比べてほしい数字を隣に置くというのは、表づくり全体に効く原則です。在庫がB列、最低在庫がF列のように離れていると、人は2つの数字を同時に見られず、頭の中で比較する負荷が生まれます。隣にあれば目の動きだけで済みます。
数値は必ず数値で入れます。「残り2個」と書いた時点で条件付き書式は動かず、合計も出せません。単位はセルに書かず、列の見出しか表示書式に持たせるのが原則です。そして色は1つの意味にだけ使いました。この表で色が意味するのは「不足している」だけです。品目のジャンルごとに色を塗り始めた瞬間、不足のシグナルは他の色に埋もれて見えなくなります。色数を増やすほど色は弱くなる、というのは装飾のすべてに当てはまります。
このデザインのレシピ
After シートに実際に設定している値です使っている色
- タイトルの文字/見出しの文字
- 行のストライプ
- 下回った行の塗り
- 下回った行の文字
フォント
- 本文・数字:Noto Sans JP(10pt)
- タイトルは 13pt・太字
行の高さ・罫線・固定
- 行の高さ:タイトル 34px / 見出し 26px / 本文 24px
- 見出しの下に中太の横罫を1本
- 本文の罫線なし(ストライプと余白で行を区切る)
- グリッド線(セルの枠線):非表示にする
- 行の固定:上から2行(タイトルと見出し)
- 表示形式:「在庫」列は 0、「最低在庫」列は 0(数値のまま持ち、表示だけ整える)
条件付き書式
「在庫」列が「最低在庫」列を下回った行だけ塗りで浮かせます。表がそのまま買い物リストになる仕掛けです。
この設定はどこにある?(Excel / Google スプレッドシート対応表)
| 設定 | Excel | Google スプレッドシート |
|---|---|---|
| 行の高さ | ホーム → 書式 → 行の高さ | 行番号を右クリック → 行のサイズを変更 |
| 罫線・塗りつぶし | ホーム → 罫線/塗りつぶしの色 | ツールバー → 枠線/塗りつぶしの色 |
| 表示形式(桁区切り・%) | ホーム → 数値 | 表示形式 → 数字 |
| 条件付き書式 | ホーム → 条件付き書式 | 表示形式 → 条件付き書式 |
| 行の固定 | 表示 → ウィンドウ枠の固定 | 表示 → 固定 |
| グリッド線の非表示 | 表示 → 目盛線のチェックを外す | 表示 → グリッド線のチェックを外す |
このテンプレートを使う
Before と After の2シート入りです。無料・登録不要。Excel でも Google スプレッドシートでも開けます。