持ち物・旅行計画の見やすい表デザイン(かわいい)No.026
つめた物のセルだけを色づけると、準備リストが出発前に上からなぞるだけの表になります。
よくある崩れ方タップで拡大
整えた状態(データは Before と同じ)タップで拡大
直したのはこの5点
-
01
区分ごとの塗り分けをやめ、色は「つめた」の列だけにしました。色が1つの意味しか持たないので、残りの支度が白い行として自然に浮きます。
配色の基本 -
02
区分ごとの結合セルを使わず、全ての行に区分名を入れました。結合があると、出発直前にいちばんやりたい「まだ入れていない物だけ表示」ができません。
結合セル回避の基本 -
03
○を入れた瞬間にセルが色づく条件付き書式にしました。次の旅行用にコピーして○を消せば、色も一緒に消えます。
条件付き書式の基本 -
04
行高を27pxに広げ、チェックの列を先頭近くに置きました。指で上からなぞるとき、視線と指が同じ列を進みます。
余白の基本 -
05
丸ゴシックにそろえました。旅行前のリストは眺める時間が長いので、書体のやわらかさがそのまま気分になります。
フォントの基本
なぜそう直すのか
持ち物リストは、出発前夜に上から順になぞる表です。だから評価すべきは見た目より「なぞりやすさ」になります。この見本では色の意味を1つに決めました。「つめた」です。○を入れた行のセルだけが淡いピンクになるので、まだ入れていない物が白い行として残ります。区分ごとに色を塗り分ける作り方もありますが、それをやると準備が進むほど画面が賑やかになり、残りの支度が色に埋もれます。
区分の列は、結合セルを使わずに全ての行へ書きました。結合すると見た目は整理されて見えますが、出発直前にいちばんやりたい操作——「まだ入れていない物だけ表示」——が使えなくなります。フィルタが効くことのほうが、見た目のまとまりよりずっと価値があります。まとまりを見せたいだけなら、区分名を淡い文字色にするだけでも十分に伝わります。
色は手で塗らず、条件付き書式に任せました。次の旅行のためにこの表をコピーし、○だけを消せば色も消えて、まっさらな準備リストに戻ります。手で塗った色はセルに残るので、コピーした表が「もう準備できている風」に見えてしまいます。数の列を数値で持っているのも同じ発想で、「3枚」ではなく 3 と入れておけば、あとから合計して荷物の量を見積もれます。かわいい表でも、中身は普通の表と同じルールで作っておくと、次の旅行でもそのまま使えます。
このデザインのレシピ
After シートに実際に設定している値です使っている色
- タイトルの文字
- 見出しの塗り/「○」の塗り
- 見出しの文字/「○」の文字
- 行のストライプ
フォント
- 本文・数字:M PLUS Rounded 1c(10pt)
- タイトルは 13pt・太字
行の高さ・罫線・固定
- 行の高さ:タイトル 36px / 見出し 30px / 本文 27px
- 見出しの罫線:なし(塗りと書体で本文と区切る)
- 本文の罫線なし(ストライプと余白で行を区切る)
- グリッド線(セルの枠線):非表示にする
- 行の固定:上から2行(タイトルと見出し)
- 表示形式:「数」列は 0(数値のまま持ち、表示だけ整える)
条件付き書式
「つめた」列の入力値(「○」)に応じて塗りと文字色が自動で切り替わります。手では塗りません。
この設定はどこにある?(Excel / Google スプレッドシート対応表)
| 設定 | Excel | Google スプレッドシート |
|---|---|---|
| 行の高さ | ホーム → 書式 → 行の高さ | 行番号を右クリック → 行のサイズを変更 |
| 罫線・塗りつぶし | ホーム → 罫線/塗りつぶしの色 | ツールバー → 枠線/塗りつぶしの色 |
| 表示形式(桁区切り・%) | ホーム → 数値 | 表示形式 → 数字 |
| 条件付き書式 | ホーム → 条件付き書式 | 表示形式 → 条件付き書式 |
| 行の固定 | 表示 → ウィンドウ枠の固定 | 表示 → 固定 |
| グリッド線の非表示 | 表示 → 目盛線のチェックを外す | 表示 → グリッド線のチェックを外す |
このテンプレートを使う
Before と After の2シート入りです。無料・登録不要。Excel でも Google スプレッドシートでも開けます。