読書・学習記録の見やすい表デザイン(ミニマル)No.007
星の絵文字を数値の評価列に置き換えると、記録が「あとから探せる蔵書リスト」になります。
よくある崩れ方タップで拡大
整えた状態(データは Before と同じ)タップで拡大
直したのはこの4点
-
01
「★★★★☆」の絵文字を 4.5 という数値の評価列に置き換えました。平均が出せて、評価順の並べ替えも正しく効きます。
数字の見せ方の基本 -
02
ページ数を数値にして合計行を追加。年間で何ページ読んだかが、集計作業なしで分かります。
数字の見せ方の基本 -
03
書名列を252pxに広げました。読書記録で最も検索する列なので、いちばん広く取るのが理にかなっています。
余白の基本 -
04
格子罫線を外し、薄いストライプで行を追えるようにしました。書名の文字列が長いので、縦線は視線の邪魔になります。
罫線の基本
なぜそう直すのか
読書記録は「つけること」より「あとから引けること」に価値がある表です。ところが★の絵文字で評価を書いた瞬間、その列は文字列になり、平均が出せなくなります。並べ替えも文字どうしの比較に変わるため、「★★★★(再読)」のように注釈を足した行が混ざった時点で並び順が崩れます。4.5 という数値にして小数第1位まで表示する書式にしておけば、「4.0以上の本だけ抽出」も「今年の平均評価」も一瞬で出ます。
ページ数も同じです。数値で持っておけば合計行が効きます。年末に「今年は何ページ読んだか」が自動で出るというのは、記録を続ける動機として意外に強く働きます。
列幅は用途から逆算します。この表で最も頻繁に目で探すのは書名なので、書名がいちばん広い。著者やページ数は短くて済みます。装飾としては罫線をほぼ全て外し、薄いストライプだけを残しました。書名という長い文字列が並ぶ表では、縦の罫線が視線を何度も分断します。線を引くのではなく、行を薄く塗り分ける。長い文字列を扱う表に共通するコツです。
このデザインのレシピ
After シートに実際に設定している値です使っている色
- タイトルの文字/見出しの文字
- 行のストライプ
フォント
- 本文・数字:Noto Sans JP(10pt)
- タイトルは 13pt・太字
行の高さ・罫線・固定
- 行の高さ:タイトル 34px / 見出し 26px / 本文 24px
- 見出しの下に中太の横罫を1本
- 本文の罫線なし(ストライプと余白で行を区切る)
- グリッド線(セルの枠線):非表示にする
- 行の固定:上から2行(タイトルと見出し)
- 表示形式:「読了日」列は yyyy"/"m"/"d、「ページ」列は #,##0、「評価」列は 0.0(数値のまま持ち、表示だけ整える)
この設定はどこにある?(Excel / Google スプレッドシート対応表)
| 設定 | Excel | Google スプレッドシート |
|---|---|---|
| 行の高さ | ホーム → 書式 → 行の高さ | 行番号を右クリック → 行のサイズを変更 |
| 罫線・塗りつぶし | ホーム → 罫線/塗りつぶしの色 | ツールバー → 枠線/塗りつぶしの色 |
| 表示形式(桁区切り・%) | ホーム → 数値 | 表示形式 → 数字 |
| 条件付き書式 | ホーム → 条件付き書式 | 表示形式 → 条件付き書式 |
| 行の固定 | 表示 → ウィンドウ枠の固定 | 表示 → 固定 |
| グリッド線の非表示 | 表示 → 目盛線のチェックを外す | 表示 → グリッド線のチェックを外す |
このテンプレートを使う
Before と After の2シート入りです。無料・登録不要。Excel でも Google スプレッドシートでも開けます。