横ストライプ

一覧の偶数行と奇数行を、2色の背景色で塗り分ける。
理由:行単位のレコードが操作対象であることを示すため。

図例
奇数行の横ストライプ

効能

  • 行単位で操作を行うべき箇所が明確となる。
  • 1レコードがやむを得ず複数行に渡っている場合でも、レコードの単位を把握しやすくなる。
  • 行数の多い一覧で、見るべき行を間違えにくくなる。
  • 乱視のユーザーが、行を区別しやすくなる。

用法

  • 一覧コントロールの1行(または複数行)を、1つの操作対象(1レコード)と捉えるべき場合、つまり、横方向の行という単位(1軸)が重要な場面に使用する。
  • 色は、色相・彩度・明度ともに類似した2色を選択し、行と行のコントラストが激しくならないようにする。
  • 2色のうち1色は、白または薄いグレーなどの無彩色に近い色とする。
  • 表の「セル」を、1つの操作対象と捉えるべき場合、つまり、縦横の行と列という単位(2軸)が重要な場面では、横縞の配色を行わない。

注意書き

  • 文字と背景色、および罫線の色彩的なバランスが保たれていなければ、一覧内の情報をかえって読み取りづらくなる。文字色と背景色については、十分なコントラストの確保が必要。