実例一覧余白と行高・列幅

余白と行高・列幅

読みやすさの大半は余白で決まります。行高と列幅は装飾ではなく、情報設計の一部です。

既定のままの表が窮屈に見えるのは、行高が文字の高さぎりぎりに設定されているからです。行高を数ピクセル広げるだけで、罫線も色も足さずに読みやすくなります。画面で使う表なら24〜28ピクセル程度が扱いやすく、タイトル行はさらに広く取ると、表の始まりがはっきりします。

列幅は、その列に入る文字の量から決めます。タスク名や書名のように長い文字列が入る列は広く、日付や数量のような短い列は狭く。すべての列を同じ幅にそろえた表は、一見整って見えますが、長い文字が切れて隣に流れ、短い列は無駄に空きます。列幅は「そろえる」ものではなく「必要な量に合わせる」ものです。

ただし、数値の列だけは幅をそろえる価値があります。同じ性格の数字が並ぶ列(第1週〜第4週、1月〜12月など)は幅を統一すると、数字の位置が縦にそろい、行をまたいだ比較がしやすくなります。

余白は「落ち着き」も作ります。行数の少ない表ほど、詰めて並べると安っぽく見えます。5行や6行しかないサマリー表は、行高を広めに取り、周囲に余裕を持たせるだけで、印刷した書類のような佇まいになります。装飾を足したくなったら、まず余白を増やしてみてください。たいていはそれで足ります。

この原則を使っている実例

全23件のうち6件
タスク管理(ミニマル)の整えた表のサンプル
No.003 タスク管理(ミニマル)
習慣トラッカー(ミニマル)の整えた表のサンプル
No.004 習慣トラッカー(ミニマル)
予定表(ミニマル)の整えた表のサンプル
No.005 予定表(ミニマル)
献立表(ミニマル)の整えた表のサンプル
No.006 献立表(ミニマル)
読書・学習記録(ミニマル)の整えた表のサンプル
No.007 読書・学習記録(ミニマル)
家計簿(シック)の整えた表のサンプル
No.011 家計簿(シック)

実例一覧をすべて見る(30件)→

よくある質問

行の高さはどのくらいが読みやすいですか?
画面で使う表なら24〜28ピクセル程度が扱いやすい範囲です。文字サイズを上げるより行高を広げるほうが、1画面に入る情報量を保ったまま読みやすくできます。印刷する表では、行が増えるほどページ数に響くので、24ピクセル前後から調整します。
列幅は全部そろえたほうがきれいですか?
文字が入る列は内容の量に合わせ、数値の列だけをそろえるのが実用的です。すべてを同じ幅にすると、長い文字列が切れて短い列が空くという、いちばん読みにくい形になります。
セル内の文字が切れるときはどうすればよいですか?
まず列幅を広げます。それでも入らない長文は、折り返して行高を上げるより、メモ用の列を別に用意するほうが表として扱いやすくなります。1つのセルに何行も入る表は、並べ替えたときに読みづらくなります。

ほかの原則