買い物・在庫リストの見やすい表デザイン（シック）No.029
候補を行に、比べる項目を列に置き直すと、買い替えの検討表が最後に決めきれる表になります。
よくある崩れ方タップで拡大
整えた状態（データは Before と同じ）タップで拡大
直したのはこの5点
-
01
候補を行に、比べる項目を列に置き直しました。逆にすると候補を1つ足すたびに列が増え、横スクロールしないと比較できない表になります。
見出し設計の基本 -
02
価格・容量・設置幅を全て数値にして、単位は表示書式で付けました。「7kg」と文字で書くと並べ替えも絞り込みもできず、比較表の意味がなくなります。
数字の見せ方の基本 -
03
自分の点数の列にだけ淡いカラースケールをかけました。スペックが並ぶ表では、最後に効くのは自分の評価です。そこにだけ濃淡があると視線が戻ってきます。
条件付き書式の基本 -
04
黒地に金文字の帯をやめ、見出しだけを濃いグレージュにしました。比較表は数字を横に読む表なので、器の装飾は最小にします。
配色の基本 -
05
数値の列幅をそろえ、行高を28pxにしました。4行しかない表でも、余白があるほど1行ずつ丁寧に読めます。
余白の基本
なぜそう直すのか
買い替えの比較表を作るとき、最初に決めるべきは中身ではなく向きです。候補を列に置き、比べる項目を行に並べる作り方をよく見かけますが、これは候補を1つ足すたびに列が増える形になります。3つ目、4つ目の候補を足したあたりで横スクロールが必要になり、比較そのものができなくなります。候補を行に、項目を列に。この向きなら候補が10個に増えても縦に伸びるだけで、並べ替えも絞り込みもそのまま使えます。
数値は必ず数値で入れてください。「7kg」「幅60cm」と単位付きの文字で書いた瞬間、その列は並べ替えも「60cm以下だけ表示」もできなくなります。7 という数値を入れて、単位は表示書式で付ける。この形にしておけば、設置できる幅で絞り込んでから価格順に並べる、といった操作が数秒で終わります。比較表は「見る表」ではなく「操作する表」なので、操作を止める書き方をしないことがすべてです。
最後に効くのは、自分の点数の列です。スペックだけを並べても決め手にはなりません。実際には「洗面所の扉が閉まらない」「電気代が安いらしい」といった、自分の状況に紐づいた評価が結論を作ります。だから点数の列を1本置き、そこにだけ淡いカラースケールをかけました。数字が並ぶ表の中で唯一色を持つ列になるので、ひととおり読んだあと視線が自然にそこへ戻ります。決めるための表には、決め手を書く場所が要ります。
このデザインのレシピ
After シートに実際に設定している値です使っている色
- タイトルの文字
- 見出しの塗り
- 見出しの文字
- 行間の罫線
- カラースケールの最小
- カラースケールの最大
フォント
- 本文・数字：Noto Sans JP（10pt）
- タイトル・見出し：Noto Serif JP（見出しだけ書体を変えて雰囲気を作る）
- タイトルは 13pt・太字
行の高さ・罫線・固定
- 行の高さ：タイトル 38px ／ 見出し 30px ／ 本文 28px
- 見出しの罫線：なし（塗りと書体で本文と区切る）
- 行間に極細の横罫のみ（縦罫は引かない）
- グリッド線（セルの枠線）：非表示にする
- 行の固定：上から2行（タイトルと見出し）
- 表示形式：「価格」列は #,##0、「容量」列は 0.0"kg"、「設置幅」列は 0"cm"、「自分の点」列は 0（数値のまま持ち、表示だけ整える）
条件付き書式
「自分の点」列にカラースケール。数値の大小が塗りの濃淡になり、色が1つの意味だけを運びます。
この設定はどこにある？（Excel / Google スプレッドシート対応表）
| 設定 | Excel | Google スプレッドシート |
|---|---|---|
| 行の高さ | ホーム → 書式 → 行の高さ | 行番号を右クリック → 行のサイズを変更 |
| 罫線・塗りつぶし | ホーム → 罫線／塗りつぶしの色 | ツールバー → 枠線／塗りつぶしの色 |
| 表示形式（桁区切り・%） | ホーム → 数値 | 表示形式 → 数字 |
| 条件付き書式 | ホーム → 条件付き書式 | 表示形式 → 条件付き書式 |
| 行の固定 | 表示 → ウィンドウ枠の固定 | 表示 → 固定 |
| グリッド線の非表示 | 表示 → 目盛線のチェックを外す | 表示 → グリッド線のチェックを外す |
このテンプレートを使う
Before と After の2シート入りです。無料・登録不要。Excel でも Google スプレッドシートでも開けます。
