表UIの行の高さはなぜ重要?
表(table)コンポーネントの行の高さは単なる余白の値ではなく、可読性と情報密度のバランスを決める重要な数値です。狭すぎるとテキストが窮屈に見え、広すぎると一画面に表示できる情報量が減ります。
行の高さを決める基本の計算式は行の高さ(line-height) × 行数 + パディング × 2です。行の高さはフォントサイズの1.4~1.6倍が一般的で、これにセル上下のパディングを加えると実際にレンダリングされる行の高さになります。
密度別の活用基準
管理画面やスプレッドシート型UIのように大量のデータを一覧する画面は、40px未満のコンパクトな密度が適しています。一般的なリストやダッシュボードは40~56px程度の標準密度で十分ですが、ユーザーが行をタップして選択するモバイルUIでは56px以上のゆったりした密度で最小タップ領域(44px)を確保する必要があります。
行数とパディングの調整
セルに副題やバッジが入って2行以上になる場合は、行数を増やして計算するとコンテンツが切れない高さをすぐに確認できます。パディングは視覚的な余白を左右するため、表全体のトーンや目的に合わせて調整するとよいでしょう。
よくある質問
表の行の高さはフォントサイズの何倍が適切ですか?
行の高さをフォントサイズの1.4~1.6倍にし、上下のパディングを加えます。14pxのフォントなら約36px前後が適切です。
データ密度が高い表は行の高さをどう決めるべきですか?
一画面に多くの行を表示する場合は40px未満のコンパクトな密度、じっくり読む表なら56px以上のゆったりした密度を使います。
モバイルでは行の高さを大きくすべきですか?
タップして選択する行なら最低44px以上を推奨します。読むだけの表ならデスクトップと同程度でも問題ありません。