実例一覧家計簿かわいい

家計簿の見やすい表デザイン(かわいい)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」にしました。淡い色でも、周りが落ち着いていれば十分に目立ちます。装飾を減らすほど、小さな変化が効くようになる——これはかわいい表でもシックな表でも変わりません。予算と使った額を隣に置き、残りをその右に出す並びも、左から右に読むだけで週のやりくりが分かるようにするための順番です。

このデザインのレシピ

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

使っている色

  • タイトルの文字
  • 見出しの塗り
  • 見出しの文字
  • 行のストライプ
  • マイナス値の文字
  • プラス値の文字

フォント

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

行の高さ・罫線・固定

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

条件付き書式

「残り」列の数値の正負で文字色を切り替え。増減が数字を読む前に伝わります。

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

このテンプレートを使う

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

この実例を Pinterest に保存する

ほかの実例

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