実例一覧家計簿かわいい

家計簿の見やすい表デザイン(かわいい)No.012

ピンク・紫・黄緑の3色使いをやめ、ピンク1色の濃淡と丸ゴシックにすると、かわいさは残したまま数字が読めます。

BEFORE 家計簿(かわいい)のよくある崩れ方の例

よくある崩れ方

AFTER 家計簿(かわいい)を整えた表のサンプル

整えた状態(データは Before と同じ)

直したのはこの5点

  1. 01

    ピンク・紫・黄緑の3色使いをやめ、ピンク1色の濃淡だけにしました。見出しは少し濃いピンク、行のストライプはほとんど白に近い淡さ。同じ色相でそろえると、色数が減ってもかわいさは落ちません。

    配色の基本
  2. 02

    丸ゴシック(M PLUS Rounded 1c)に統一しました。Google スプレッドシートの「その他のフォント」から追加できます。かわいさは色より書体で作るほうが、数字の読みやすさを損ないません(Excel で開いた場合は端末にあるフォントに置き換わります)。

    フォントの基本
  3. 03

    行高を27pxに広げました。丸みのある書体は文字の周りに余白があるほど表情が出ます。詰めて並べると、せっかくの丸ゴシックが団子に見えます。

    余白の基本
  4. 04

    残りの列だけ、プラスの週は落ち着いた緑、マイナスの週は淡い赤の文字色にして、表示も「△2,300」にしました。塗りつぶさないので、かわいい配色を壊さずに使いすぎだけが伝わります。

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

    格子罫線を全て外しました。丸い書体に直線の格子を重ねると、書体の柔らかさが線に打ち消されます。行の区切りは淡いストライプだけで足ります。

    罫線の基本

なぜそう直すのか

かわいい表を作ろうとすると、たいてい色が増えます。見出しは紫、タイトルはピンク、行の背景は黄緑。ところが色相の違う色を同じ強さで並べると、どれも主役になろうとして画面が騒がしくなり、いちばん読みたい金額が最後に見つかることになります。この見本では色を「ピンク1色」に決め、濃淡だけで作りました。見出しはやや濃いピンク、行のストライプはほとんど白に近い淡いピンク。色相をそろえると、色数を減らしても印象はかわいいまま、可読性だけが上がります。

かわいさは、色よりも書体で作るほうが安全です。丸ゴシックにするだけで表全体の角が取れ、罫線を足さなくてもやわらかい印象になります。Google スプレッドシートならフォント選択の「その他のフォント」から丸ゴシック系を追加できます(Excel で開いたときは端末にあるフォントへ置き換わるため、配布用のテンプレートでは書体に頼りすぎないほうが安全です)。丸い書体は文字の周囲に余白があるほど表情が出るので、行高も27ピクセルに広げました。

使いすぎた週の扱いも、かわいい表では悩みどころです。赤く塗りつぶすと、そこだけ配色から浮いて「怒られている」ような印象になります。この見本では塗らずに、残りの数字だけを淡い赤に変え、表示を「△2,300」にしました。淡い色でも、周りが落ち着いていれば十分に目立ちます。装飾を減らすほど、小さな変化が効くようになる——これはかわいい表でもシックな表でも変わりません。予算と使った額を隣に置き、残りをその右に出す並びも、左から右に読むだけで週のやりくりが分かるようにするための順番です。

このテンプレートを使う

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

この実例を Pinterest に保存する

ほかの実例

家計簿(ミニマル)の整えた表のサンプル
No.001 家計簿(ミニマル)
家計簿(シック)の整えた表のサンプル
No.011 家計簿(シック)
習慣トラッカー(ミニマル)の整えた表のサンプル
No.004 習慣トラッカー(ミニマル)
タスク管理(かわいい)の整えた表のサンプル
No.016 タスク管理(かわいい)
習慣トラッカー(かわいい)の整えた表のサンプル
No.018 習慣トラッカー(かわいい)
予定表(かわいい)の整えた表のサンプル
No.020 予定表(かわいい)

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