ピンク・紫・黄緑の3色使いをやめ、ピンク1色の濃淡と丸ゴシックにすると、かわいさは残したまま数字が読めます。
よくある崩れ方
整えた状態(データは Before と同じ)
ピンク・紫・黄緑の3色使いをやめ、ピンク1色の濃淡だけにしました。見出しは少し濃いピンク、行のストライプはほとんど白に近い淡さ。同じ色相でそろえると、色数が減ってもかわいさは落ちません。
配色の基本丸ゴシック(M PLUS Rounded 1c)に統一しました。Google スプレッドシートの「その他のフォント」から追加できます。かわいさは色より書体で作るほうが、数字の読みやすさを損ないません(Excel で開いた場合は端末にあるフォントに置き換わります)。
フォントの基本行高を27pxに広げました。丸みのある書体は文字の周りに余白があるほど表情が出ます。詰めて並べると、せっかくの丸ゴシックが団子に見えます。
余白の基本残りの列だけ、プラスの週は落ち着いた緑、マイナスの週は淡い赤の文字色にして、表示も「△2,300」にしました。塗りつぶさないので、かわいい配色を壊さずに使いすぎだけが伝わります。
数字の見せ方の基本格子罫線を全て外しました。丸い書体に直線の格子を重ねると、書体の柔らかさが線に打ち消されます。行の区切りは淡いストライプだけで足ります。
罫線の基本かわいい表を作ろうとすると、たいてい色が増えます。見出しは紫、タイトルはピンク、行の背景は黄緑。ところが色相の違う色を同じ強さで並べると、どれも主役になろうとして画面が騒がしくなり、いちばん読みたい金額が最後に見つかることになります。この見本では色を「ピンク1色」に決め、濃淡だけで作りました。見出しはやや濃いピンク、行のストライプはほとんど白に近い淡いピンク。色相をそろえると、色数を減らしても印象はかわいいまま、可読性だけが上がります。
かわいさは、色よりも書体で作るほうが安全です。丸ゴシックにするだけで表全体の角が取れ、罫線を足さなくてもやわらかい印象になります。Google スプレッドシートならフォント選択の「その他のフォント」から丸ゴシック系を追加できます(Excel で開いたときは端末にあるフォントへ置き換わるため、配布用のテンプレートでは書体に頼りすぎないほうが安全です)。丸い書体は文字の周囲に余白があるほど表情が出るので、行高も27ピクセルに広げました。
使いすぎた週の扱いも、かわいい表では悩みどころです。赤く塗りつぶすと、そこだけ配色から浮いて「怒られている」ような印象になります。この見本では塗らずに、残りの数字だけを淡い赤に変え、表示を「△2,300」にしました。淡い色でも、周りが落ち着いていれば十分に目立ちます。装飾を減らすほど、小さな変化が効くようになる——これはかわいい表でもシックな表でも変わりません。予算と使った額を隣に置き、残りをその右に出す並びも、左から右に読むだけで週のやりくりが分かるようにするための順番です。
Before と After の2シート入りです。無料・登録不要。Excel でも Google スプレッドシートでも開けます。