貯金・資産管理の見やすい表デザイン（シック）No.013
預け先ごとの残高に構成比の列を1本足すと、金額の大きさではなく「偏り」が見える資産表になります。
よくある崩れ方タップで拡大
整えた状態（データは Before と同じ）タップで拡大
直したのはこの5点
-
01
構成比の列を追加し、パーセント書式で表示しました。資産表で本当に見たいのは合計額ではなく偏りです。「投資信託が45%」と分かって初めて、次に何を増やすかを決められます。
数字の見せ方の基本 -
02
前月比だけに条件付き書式を入れ、増えた行を深緑、減った行を赤茶にしました。淡い2色に絞ると、毎月見返しても目が疲れません。
条件付き書式の基本 -
03
金額の見出しを右寄せにして、下の数字と右端をそろえました。預け先・種別という文字の列は左、金額の列は右。列の性格で配置を変えると、境界線を引かなくても列が分かれて見えます。
見出し設計の基本 -
04
黒地に金文字の見出しをやめ、濃いグレージュの帯1本にしました。資産の表は人に見せるものではないので、飾るより毎月10秒で読めることを優先します。
配色の基本 -
05
行高を28pxに、タイトル行を38pxに広げました。6行しかない表は余白を取るほど落ち着いて見えます。
余白の基本
なぜそう直すのか
資産の表を作ると、多くの人が残高を並べて合計を出したところで終わります。ところが合計額は、見ても行動が変わらない数字です。翌月に何を増やすか、どこを取り崩すかを決められるのは、残高ではなく構成比のほうです。この見本では構成比の列を1本足しました。パーセント書式で表示すれば、投資信託が45%を占めていること、生活口座に1か月分の生活費だけを置いていることが、金額を読まずに分かります。
前月比の列には条件付き書式を入れ、増えた行を深緑、減った行を赤茶にしました。赤と緑の原色を使わないのは、資産表が「毎月開く表」だからです。原色は最初の数回こそ効きますが、すぐ目が慣れ、そのうち色があること自体がノイズになります。彩度を落とした2色なら、半年後に開いても同じ強さで機能します。
見出しの配置にも役割を持たせました。預け先や種別のような文字の列は左寄せ、金額や比率のような数値の列は右寄せ。見出しも本文にそろえて右に寄せると、列の境界に線を引かなくても、文字の列と数字の列が視覚的に分かれます。罫線を減らしたいときは、まず配置でどこまで説明できるかを試すのが順番です。黒地の帯をやめ、濃いグレージュ一段だけに絞ったのも同じ考え方で、装飾で分けるのではなく、情報の性格で分けています。
このデザインのレシピ
After シートに実際に設定している値です使っている色
- タイトルの文字
- 見出しの塗り
- 見出しの文字
- 行間の罫線
- マイナス値の文字
- プラス値の文字
フォント
- 本文・数字：Noto Sans JP（10pt）
- タイトル・見出し：Noto Serif JP（見出しだけ書体を変えて雰囲気を作る）
- タイトルは 13pt・太字
行の高さ・罫線・固定
- 行の高さ：タイトル 38px ／ 見出し 30px ／ 本文 28px
- 見出しの罫線：なし（塗りと書体で本文と区切る）
- 行間に極細の横罫のみ（縦罫は引かない）
- グリッド線（セルの枠線）：非表示にする
- 行の固定：上から2行（タイトルと見出し）
- 表示形式：「残高」列は #,##0、「構成比」列は 0.0%、「前月比」列は #,##0;△#,##0（数値のまま持ち、表示だけ整える）
条件付き書式
「前月比」列の数値の正負で文字色を切り替え。増減が数字を読む前に伝わります。
この設定はどこにある？（Excel / Google スプレッドシート対応表）
| 設定 | Excel | Google スプレッドシート |
|---|---|---|
| 行の高さ | ホーム → 書式 → 行の高さ | 行番号を右クリック → 行のサイズを変更 |
| 罫線・塗りつぶし | ホーム → 罫線／塗りつぶしの色 | ツールバー → 枠線／塗りつぶしの色 |
| 表示形式（桁区切り・%） | ホーム → 数値 | 表示形式 → 数字 |
| 条件付き書式 | ホーム → 条件付き書式 | 表示形式 → 条件付き書式 |
| 行の固定 | 表示 → ウィンドウ枠の固定 | 表示 → 固定 |
| グリッド線の非表示 | 表示 → 目盛線のチェックを外す | 表示 → グリッド線のチェックを外す |
このテンプレートを使う
Before と After の2シート入りです。無料・登録不要。Excel でも Google スプレッドシートでも開けます。
