TBL-007 公開  更新

数値表型 テーブル

年度ごとの件数や調査の結果など、数字を行と列で比べる表の設計です。
数字を右にそろえて桁を比べやすくし、単位は表の見出しにまとめます。
合計の行は tfoot に分けて線と背景で区別し、増減の計算の基準は表の下に書きます。

ワイヤーフレーム(PC)

数値表型 テーブル PC版ワイヤーフレーム

ワイヤーフレーム(SP)

数値表型 テーブル SP版ワイヤーフレーム

SP版の特徴

  1. 先頭の列を固定する:横にスクロールしても、どの項目の数字かが分かるようにしています。
  2. 横スクロールの案内を出す:画面の外に年度の列があることに気づけるようにしています。
  3. 数字を少し小さくする:1画面に見える列を増やし、隣の年度と比べやすくしています。

採用前の判断ポイント

向いているケース

  • 数字の大小や増減を、行と列で比べてもらいたい
  • 実績の件数・年度ごとの推移・調査の結果など
  • 行が10前後、列が5前後まで

向かないケース

  • 増減の傾向を、ひと目で見せたい(グラフのほうが伝わりやすい場合があります。グラフと表を併記します)
  • 比べる数字が1つか2つだけ(本文で書けば足ります)
  • 数字ではなく、対応の有無を比べたい(○×比較型 テーブルが向きます)

このワイヤーの特徴

数字を右にそろえ、桁が比べやすい

数字を中央や左にそろえると、桁の違いが目で比べにくくなります。数字の列を右寄せにし、数字の幅がそろう設定にして、桁が縦にそろうようにしています。

単位を見出しにまとめ、数字が読みやすい

すべてのセルに「件」「円」を書くと、数字が埋もれます。単位は表の見出しにまとめ、セルには数字だけを書いています。

合計の行を、ほかの行と分ける

合計が普通の行と同じ見た目だと、項目の1つと取り違えられます。合計の行を tfoot に置き、上に線を引いて背景を変えています。

増減の計算の基準を、表の下に書く

「前年度比」だけでは、どの年度とどの年度を比べたのかが分かりません。計算の基準と年度の区切りを表の下に書き、数字の読み違いを防いでいます。

制作時のよくある失敗

数字を中央寄せや左寄せにする

桁の違う数字が縦にそろわず、大小を見比べにくくなります。
数字は右寄せにします。

単位がない、またはセルごとに違う

単位がないと、件数なのか金額なのかが分かりません。
単位は表の見出しにまとめ、1つの列の中でそろえます。

小数点以下の桁数がそろっていない

「6.2%」と「25%」が混ざると、桁の位置がずれ、比べにくくなります。
列の中で桁数をそろえます。

合計が、項目の数字と合わない

四捨五入や集計の時点の違いで、合計が合わないことがあります。
合計は元の数字から計算し直し、合わない場合はその理由を注記します。

増減の計算の基準を書かない

何と何を比べた数字かが書かれていないと、読み手が誤って受け取ります。
計算の基準を表の下に書きます。

よくある質問

グラフと表は、どちらがよいですか?

増減の傾向を伝えたいならグラフ、正確な数字を確かめてもらいたいなら表が向くと考えられます。
グラフを載せる場合も、同じ数字を表で併記すると、読み上げや拡大で確かめやすくなります。

桁区切りのカンマは、付けたほうがよいですか?

4桁以上の数字には、カンマを付けると桁を読み取りやすくなります。
付ける場合は、表の中ですべての数字をそろえます。

減少やマイナスの数字は、どう書けばよいですか?

「−」の記号を付けて書き、色だけで増減を示さないようにします。
色を使う場合も、記号や「減少」の文字を添えます。

関連ページ

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。

レビュー・修正の履歴

  1. 公開 アバター画像岡野 優太 この型を公開