買い物・在庫リストの見やすい表デザイン（かわいい）No.030
お店ごとに並べ、金額の列にだけ濃淡をつけると、週末の買い物が回る順に片づきます。
よくある崩れ方タップで拡大
整えた状態（データは Before と同じ）タップで拡大
直したのはこの5点
-
01
お店ごとに行をまとめました。買い物リストは「何を買うか」ではなく「どこで買うか」で並べたほうが、回る順にそのまま使えます。
見出し設計の基本 -
02
金額の列にだけカラースケールをかけました。濃いところが今日の出費の中心なので、予算が厳しい週はそこから削る判断ができます。
条件付き書式の基本 -
03
お店ごとの色分けをやめました。色でお店を分けると、店が増えるたびに色が必要になり、そのうち自分でも見分けられなくなります。
配色の基本 -
04
金額をだいたいの数値で入れて合計を出しました。正確でなくても、レジに行く前に3,000円台か1万円台かが分かるだけで判断が変わります。
数字の見せ方の基本 -
05
丸ゴシックにそろえ、行高を27pxにしました。スマホを片手に売り場を歩きながら見る表なので、文字は大きめ・やわらかめが読みやすいです。
フォントの基本
なぜそう直すのか
買い物リストは、書く順番より使う順番で作ると失敗しません。売り場を歩きながら見る表なので、お店ごとにまとまっていることが最優先です。この見本ではお店の列を左端に置き、同じ店の行を続けて並べました。スーパーの3行を片づけたらドラッグストアへ、という具合に、上から順に消化するだけで買い物が終わります。品目のジャンル（食品・日用品）で並べる作り方もありますが、実際には店をまたぐので、動線には合いません。
お店ごとに色を塗り分けたくなりますが、これはやめておきます。店が3つのうちは機能しても、4つ5つと増えるたびに新しい色が必要になり、そのうちどの色がどの店だったか分からなくなります。この表で色を持たせたのは金額の列だけです。淡いカラースケールをかけると、濃いセルが今日の出費の中心になります。プレゼントと米びつで6,300円。予算が厳しい週は、その2行のどちらかを翌週に回せばいいと分かります。
金額は「だいたい」で構いません。正確な値段を調べてから書こうとすると、リストを作ること自体が面倒になって続きません。ざっくりでも合計が出れば、レジに行く前に3,000円台なのか1万円台なのかが分かり、その予想があるだけで買い物中の判断が変わります。数値で入れておけば、あとから実際の金額に打ち替えて「見積もりとの差」を見ることもできます。かわいい見た目でも、数字は数値で持つ。この原則だけは、どのテーマでも変わりません。
このデザインのレシピ
After シートに実際に設定している値です使っている色
- タイトルの文字
- 見出しの塗り
- 見出しの文字
- 行のストライプ
- カラースケールの最小
- カラースケールの最大
フォント
- 本文・数字：M PLUS Rounded 1c（10pt）
- タイトルは 13pt・太字
行の高さ・罫線・固定
- 行の高さ：タイトル 36px ／ 見出し 30px ／ 本文 27px
- 見出しの罫線：なし（塗りと書体で本文と区切る）
- 本文の罫線なし（ストライプと余白で行を区切る）
- グリッド線（セルの枠線）：非表示にする
- 行の固定：上から2行（タイトルと見出し）
- 表示形式：「数」列は 0、「だいたい」列は #,##0（数値のまま持ち、表示だけ整える）
条件付き書式
「だいたい」列にカラースケール。数値の大小が塗りの濃淡になり、色が1つの意味だけを運びます。
この設定はどこにある？（Excel / Google スプレッドシート対応表）
| 設定 | Excel | Google スプレッドシート |
|---|---|---|
| 行の高さ | ホーム → 書式 → 行の高さ | 行番号を右クリック → 行のサイズを変更 |
| 罫線・塗りつぶし | ホーム → 罫線／塗りつぶしの色 | ツールバー → 枠線／塗りつぶしの色 |
| 表示形式（桁区切り・%） | ホーム → 数値 | 表示形式 → 数字 |
| 条件付き書式 | ホーム → 条件付き書式 | 表示形式 → 条件付き書式 |
| 行の固定 | 表示 → ウィンドウ枠の固定 | 表示 → 固定 |
| グリッド線の非表示 | 表示 → 目盛線のチェックを外す | 表示 → グリッド線のチェックを外す |
このテンプレートを使う
Before と After の2シート入りです。無料・登録不要。Excel でも Google スプレッドシートでも開けます。
