実例一覧サブスク管理かわいい

サブスク管理の見やすい表デザイン(かわいい)No.033

使った回数から1回あたりの単価を出し、「解約」と入れた行にだけ色が付く形にすると、迷わず決められます。

BEFORE

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

AFTER

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

直したのはこの5点

  1. 01

    「解約」と入力した行だけ色が付く条件付き書式にしました。手でセルを塗ると、翌月ぶんにコピーして中身を消したときに色だけが残り、決めた気になっている表ができあがります。

    条件付き書式の基本
  2. 02

    1回あたりの単価を数値で出しました。980円は安く見えますが、先月2回しか読んでいないなら1回490円です。続けるかどうかを気分ではなく数字で決められるようになります。

    数字の見せ方の基本
  3. 03

    ピンク・紫・黄緑の3色使いをやめ、ピンク1色の濃淡にしました。判定の3種類にそれぞれ色を割り当てたくなりますが、色を持たせたのは「解約」の1つだけです。色の意味は1つに絞るほど強く効きます。

    配色の基本
  4. 04

    丸ゴシック(M PLUS Rounded 1c)に統一し、行高を27pxに広げました。お金を減らす相談をする表なので、書体で角を取っておくと開くのが億劫になりません。

    フォントの基本
  5. 05

    見出しを「備考」ではなく「どうする」「ひとこと」にしました。見出しはその列に何を書くかの宣言です。「どうする」と書いてあれば、判断を先送りにしたまま閉じにくくなります。

    見出し設計の基本

なぜそう直すのか

サブスクを見直そうと思って一覧を作っても、たいてい決められずに終わります。どれも月に千円前後で、止める理由が金額からは出てこないからです。この見本では、先月使った回数と1回あたりの単価を足しました。マンガ読み放題は月980円ですが、先月読んだのは2回なので1回490円。単行本を買ったほうが安いと分かります。音楽配信は同じ980円でも28回聴いていて1回39円。同じ金額でも扱いはまったく変わります。判断の材料は金額ではなく、金額と使用回数の組み合わせにありました。

判定の列は、手で色を塗らずに条件付き書式にしました。「解約」と入力した行だけ淡いピンクが付きます。手で塗った色は中身と無関係にセルへ残るので、翌月ぶんとしてコピーして中身を消すと、色だけが残った「決めた気になっている表」ができあがります。中身から色が決まる形にしておけば、値を消した瞬間に色も消えます。そして色を持たせたのは「解約」の1つだけにしました。つづける・見直し・解約の3つにそれぞれ色を割り当てると、3色が同じ強さで並び、いちばん行動が必要な「解約」が埋もれます。

かわいさは色数ではなく書体と余白で作ります。丸ゴシックに統一して行高を27ピクセルに広げると、罫線を1本も引かなくてもやわらかい表になります。格子罫線は外しました。丸い書体に直線の格子を重ねると、書体の柔らかさが線に打ち消されてしまうためです。見出しの言葉も少し変えました。「備考」ではなく「どうする」。広い見出しは何を書くか迷って空欄になりますが、判断を書く場所だと分かっていれば、迷ったまま閉じるということが起きにくくなります。表の役割は記録することではなく、決めることのほうにあります。

このデザインのレシピ

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

使っている色

  • タイトルの文字
  • 見出しの塗り
  • 見出しの文字
  • 行のストライプ
  • 「解約」の塗り
  • 「解約」の文字

フォント

  • 本文・数字:M PLUS Rounded 1c(10pt)
  • タイトルは 13pt・太字

行の高さ・罫線・固定

  • 行の高さ:タイトル 36px / 見出し 30px / 本文 27px
  • 見出しの罫線:なし(塗りと書体で本文と区切る)
  • 本文の罫線なし(ストライプと余白で行を区切る)
  • グリッド線(セルの枠線):非表示にする
  • 行の固定:上から2行(タイトルと見出し)
  • 表示形式:「月あたり」列は #,##0、「使った回数」列は 0、「1回あたり」列は #,##0(数値のまま持ち、表示だけ整える)

条件付き書式

「どうする」列の入力値(「解約」)に応じて塗りと文字色が自動で切り替わります。手では塗りません。

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

このテンプレートを使う

Before と After の2シート入りです。無料・登録不要。Excel でも Google スプレッドシートでも開けます。

この実例を Pinterest に保存する

ほかの実例

サブスク管理の実例をまとめて見る →