サブスク管理の見やすい表デザイン(ミニマル)No.031
月あたりの金額の隣に年額換算を置くだけで、続けるか止めるかを金額で判断できる一覧になります。
よくある崩れ方タップで拡大
整えた状態(データは Before と同じ)タップで拡大
直したのはこの5点
-
01
「¥1,490/月」のような文字列をやめ、金額を数値で持って桁区切り書式で表示しました。文字列のままだと年額合計が出せず、高い順に並べ替えることもできません。
数字の見せ方の基本 -
02
月あたりの右隣に年額換算を置きました。比べてほしい数字は必ず隣に置きます。月額だけの一覧では「980円ならいいか」で終わり、年に11,760円という事実が最後まで出てきません。
見出し設計の基本 -
03
年額換算の列だけにカラースケールをかけました。濃いセルが年間支出の中心なので、見直す順番が上から決まります。手で色を塗らないので、金額を打ち替えれば色も追いつきます。
条件付き書式の基本 -
04
サービスごとの塗り分けを全て外しました。契約は増えるものなので、色で分類を始めると数か月で色が足りなくなり、どの色が何だったか本人にも分からなくなります。
配色の基本 -
05
全セルの格子罫線を消し、見出しの下に1本だけ残しました。行の区切りは淡いストライプに任せています。10行の表に格子を引くと、線の本数が文字の数を上回ります。
罫線の基本
なぜそう直すのか
サブスクの一覧表が判断に使えないのは、たいてい月額しか並んでいないからです。1,490円、980円、1,080円。ひとつずつは小さいので、眺めても「まあこのくらいか」で終わります。この見本では月あたりの右隣に年額換算の列を1本足しました。それだけで17,880円、11,760円、12,960円と桁がひとつ変わり、年額合計は271,920円になります。判断が変わるのは月額の大小を見たときではなく、年でいくら払っているかが見えたときです。列を1本足すだけの作業で、一覧が「棚卸しの道具」に変わります。
支払いサイクルが混ざる点も、この種の表がつまずくところです。月払いと年払いが1つの表に並ぶと、金額の列が何を表しているのか分からなくなります。ここでは月あたりの金額に単位をそろえ、年払いの契約は年額を12で割った値を入れました。そのうえで年額換算を別列に持たせています。どちらか一方に単位をそろえた列がないと、合計を出しても意味のない数字になります。
次回請求日は日付値で持ちます。「3/8」と文字で入れた表は、並べ替えると3/12より後ろに来ることがあり、「今月引き落とされるもの」を絞り込めません。日付値にしておけば請求が近い順に並べ替えられ、解約の判断期限がそのまま見えます。色は年額換算の1列だけに、カラースケールで持たせました。この表で色が意味するのは「年間支出が大きい」の一点だけです。区分ごとに塗り分けたくなりますが、契約は必ず増えるので、色での分類はいずれ破綻します。増えても壊れない形にしておくのが、長く使える表の条件です。
このデザインのレシピ
After シートに実際に設定している値です使っている色
- タイトルの文字/見出しの文字
- 行のストライプ
- カラースケールの最小
- カラースケールの最大
フォント
- 本文・数字:Noto Sans JP(10pt)
- タイトルは 13pt・太字
行の高さ・罫線・固定
- 行の高さ:タイトル 34px / 見出し 26px / 本文 24px
- 見出しの下に中太の横罫を1本
- 本文の罫線なし(ストライプと余白で行を区切る)
- グリッド線(セルの枠線):非表示にする
- 行の固定:上から2行(タイトルと見出し)
- 表示形式:「月あたり」列は #,##0、「年額換算」列は #,##0、「次回請求」列は m"/"d(数値のまま持ち、表示だけ整える)
条件付き書式
「年額換算」列にカラースケール。数値の大小が塗りの濃淡になり、色が1つの意味だけを運びます。
この設定はどこにある?(Excel / Google スプレッドシート対応表)
| 設定 | Excel | Google スプレッドシート |
|---|---|---|
| 行の高さ | ホーム → 書式 → 行の高さ | 行番号を右クリック → 行のサイズを変更 |
| 罫線・塗りつぶし | ホーム → 罫線/塗りつぶしの色 | ツールバー → 枠線/塗りつぶしの色 |
| 表示形式(桁区切り・%) | ホーム → 数値 | 表示形式 → 数字 |
| 条件付き書式 | ホーム → 条件付き書式 | 表示形式 → 条件付き書式 |
| 行の固定 | 表示 → ウィンドウ枠の固定 | 表示 → 固定 |
| グリッド線の非表示 | 表示 → 目盛線のチェックを外す | 表示 → グリッド線のチェックを外す |
このテンプレートを使う
Before と After の2シート入りです。無料・登録不要。Excel でも Google スプレッドシートでも開けます。