実例一覧サブスク管理シック

サブスク管理の見やすい表デザイン(シック)No.032

明細を区分ごとに畳み、構成比と前年差を隣に並べると、年に一度の棚卸しが1枚で終わります。

BEFORE

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

AFTER

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

直したのはこの5点

  1. 01

    黒地に金文字の帯をやめ、見出し行だけを濃いグレージュにしました。棚卸しの表は年に数回しか開かないぶん、開いたときにいちばん強い面が見出しだと、肝心の金額が後ろに下がります。

    ダークテーマの基本
  2. 02

    契約1本ずつの明細をやめ、区分ごとに畳みました。年に一度の棚卸しで判断したいのは「どのサービスか」ではなく「どの分野に払いすぎているか」です。本数・年額・構成比・前年差の順に、左から読むだけで結論が積み上がります。

    見出し設計の基本
  3. 03

    構成比は0.209という数値をパーセント書式で表示し、前年差は減った区分を「△2,400」と記号で表しました。赤字にすると色の意味が増えるので、記号で済むものは記号で解決します。

    数字の見せ方の基本
  4. 04

    行高を28pxに広げ、罫線は行間の極細な横罫だけにしました。6行しかない表を詰めて並べると、情報量の少なさがそのまま安っぽさに見えます。落ち着きは色ではなく余白で作ります。

    余白の基本
  5. 05

    列幅の合計をA4縦の印刷可能幅(およそ18センチ)に収めました。棚卸しは紙に出して赤を入れながら考える表なので、印刷ボタンを押した時点で1枚に収まる幅で作っておきます。

    印刷対応の基本

なぜそう直すのか

サブスクの棚卸しは、契約を1本ずつ眺めても結論が出ません。10本の明細を上から順に見ていくと、どれも「まあ使っている」で終わってしまうからです。この見本では明細を区分ごとに畳み、6行にまとめました。娯楽に56,760円、健康に93,600円、情報に52,800円。この粒度になって初めて、「今年いちばん払っているのは健康の分野で、全体の34%を占めている」という事実が見えます。判断は、明細ではなく分野の単位で下すほうが速く決まります。

構成比と前年差を隣に置いたのは、金額だけでは判断の基準にならないからです。93,600円が高いか安いかは、それ単体では決められません。全体の3分の1を占めていると分かって初めて、他を削るか、これを見直すかという選択になります。前年差は増減の方向を示します。娯楽と学習が同じだけ増えているのは、今年から2本の契約を足したためで、来年も同じペースで増やすかどうかがそこで話題になります。数値は必ず数値で持ち、構成比は0.209という値をパーセント書式で表示しています。手で「20.9%」と書いた表は、金額を打ち替えた瞬間に嘘になります。

見た目は、黒地に金文字の「高級感」をやめ、見出し行だけを濃いグレージュにしました。タイトルと見出しは明朝、数字と本文はゴシックのまま。明朝は少ない文字数で品を出せる一方、数字を並べると桁の比較がわずかに鈍るので、書体は役割で分けます。行高は28ピクセル、罫線は行と行のあいだの極細な横罫だけ。そして列幅の合計をA4縦に収まる範囲にしてあります。棚卸しは画面で完結せず、紙に出して赤を入れながら考える種類の表です。印刷して1枚に収まるかどうかは、装飾より先に決めておく設計事項になります。

このデザインのレシピ

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

使っている色

  • タイトルの文字
  • 見出しの塗り
  • 見出しの文字
  • 行間の罫線

フォント

  • 本文・数字:Noto Sans JP(10pt)
  • タイトル・見出し:Noto Serif JP(見出しだけ書体を変えて雰囲気を作る)
  • タイトルは 13pt・太字

行の高さ・罫線・固定

  • 行の高さ:タイトル 38px / 見出し 30px / 本文 28px
  • 見出しの罫線:なし(塗りと書体で本文と区切る)
  • 行間に極細の横罫のみ(縦罫は引かない)
  • グリッド線(セルの枠線):非表示にする
  • 行の固定:上から2行(タイトルと見出し)
  • 表示形式:「本数」列は 0、「年額」列は #,##0、「構成比」列は 0.0%、「前年差」列は #,##0;△#,##0(数値のまま持ち、表示だけ整える)
この設定はどこにある?(Excel / Google スプレッドシート対応表)
設定ExcelGoogle スプレッドシート
行の高さホーム → 書式 → 行の高さ行番号を右クリック → 行のサイズを変更
罫線・塗りつぶしホーム → 罫線/塗りつぶしの色ツールバー → 枠線/塗りつぶしの色
表示形式(桁区切り・%)ホーム → 数値表示形式 → 数字
条件付き書式ホーム → 条件付き書式表示形式 → 条件付き書式
行の固定表示 → ウィンドウ枠の固定表示 → 固定
グリッド線の非表示表示 → 目盛線のチェックを外す表示 → グリッド線のチェックを外す

このテンプレートを使う

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

この実例を Pinterest に保存する

ほかの実例

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