実例一覧家計簿シック

家計簿の見やすい表デザイン(シック)No.011

黒地に金文字の「高級感」をやめ、濃い見出し帯と広い行間に置き換えると、半年の収支が落ち着いて読めます。

BEFORE

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

AFTER

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

直したのはこの5点

  1. 01

    黒地に金文字の帯をやめ、見出し行だけを濃いグレージュで敷きました。黒は画面でも紙でもいちばん強い面になり、そこに黄色を載せると、見出しばかりが目に入って肝心の金額が沈みます。

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

    タイトルと見出しだけを明朝にして、数字と本文はゴシックのまま残しました。明朝の数字は縦線の太さがそろわないため、桁の比較がわずかに鈍ります。落ち着きは見出しで出し、数字は読みやすさを優先します。

    フォントの基本
  3. 03

    行高を28pxに広げ、格子罫線は行と行のあいだの極細な横罫1本だけにしました。落ち着いた印象は色ではなく余白で作れます。6行しかない表ほど、詰めて並べると安っぽく見えます。

    余白の基本
  4. 04

    差引がマイナスの月は「△」で表示する書式にしました。マイナス記号は行末で見落としやすく、赤字にすると色の意味が増えてしまいます。

    数字の見せ方の基本
  5. 05

    金額の見出しを右寄せにして、下に並ぶ数字の右端とそろえました。見出しだけ左寄せのままだと、列の中で文字と数字が別々の場所から始まって見えます。

    見出し設計の基本

なぜそう直すのか

「シックにしたい」と思ったとき、多くの表がまず黒を敷きます。黒地に金色の文字、あるいは濃紺に白抜き。ところが表の中で最も面積の大きい部分を黒にすると、画面で最初に目に入るのは見出しの帯になり、本来読ませたい金額が後ろに下がります。印刷すればインクを大量に使い、コピーすれば潰れます。この見本では黒地をやめ、見出し行だけを濃いグレージュ(黒に少しだけ茶を混ぜた色)にしました。同じ「濃い帯」でも、真っ黒より一段やわらかく、下の数字と喧嘩しません。

落ち着きは、色ではなく余白と書体で作れます。行高を28ピクセルに広げ、タイトル行は38ピクセル。6行しかない表を詰めて並べると、情報量の少なさがそのまま安っぽさに見えてしまいます。書体はタイトルと見出しだけを明朝にしました。明朝は縦線と横線の太さの差が大きく、少ない文字数で品を出せる一方、数字を並べると桁の比較がしづらくなります。だから数字と本文はゴシックのまま残しています。書体を混ぜるときは「見出しは明朝、数字はゴシック」と役割で分けるのが安全です。

数字の見せ方も1か所だけ工夫しました。差引がマイナスの月を「△12,300」と表示する書式です。マイナス記号は行の左端に小さく付くだけなので、金額をざっと眺めているときに見落とします。赤字にする方法もありますが、それをやると「色=マイナス」という意味が増え、後から条件付き書式を足したくなったときに色が足りなくなります。記号で解決できるものは記号で解決しておくと、色の予算を残せます。この表で色を持っているのは見出し帯の一段だけです。

このデザインのレシピ

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 に保存する

ほかの実例

家計簿の実例をまとめて見る →