テーブルの型の選び方
テーブルの型は、「表で何をしてもらうか」「数字や時間など、何を読ませるか」「表が大きいとき、どう見せるか」の3つで変わります。問い1で基本の型を選び、問い2で中身に合わせた型を加え、問い3で行や列が多いときの見せ方を決めます。型を選んだら、各Patternのページでワイヤーフレームとプロンプト、動くデモを確認できます。料金プランの比較や価格の早見表は、料金表のパーツで扱っています。
問い1：表で、読み手に何をしてもらいますか？
表の目的を決める問いです。多くの表は、ここで型が決まります。
| してもらうこと | 向く型 |
|---|---|
| 1つの対象について、項目を探して確かめてもらう（基本） | 項目・値型 |
| いくつかの選択肢の、できること・できないことを見比べてもらう | ○×比較型 |
| 多くの項目の中から、違いのある項目を見つけてもらう | 差分強調型 |
| 2つの条件を掛け合わせて、自分に当てはまる答えを探してもらう | マトリクス型 |
問い2：数字や時間、並び順を読ませますか？
表の中身に合わせて選ぶ型です。問い1の型の代わりに使ったり、組み合わせたりします。
| 中身 | 向く型 |
|---|---|
| 曜日と時間帯で、受け付けている時間と休みを示したい | 時間割型 |
| 曜日の決まりではなく、日付ごとの営業時間や臨時休業を示したい | 営業日カレンダーを使う（週間表示型・臨時休業表示型） |
| 件数や金額などの数字を、行と列で比べてもらいたい | 数値表型 |
| 行が多く、読み手ごとに見たい順番が違う | 並び替え型 |
問い3：表が大きいとき、どう見せますか？
行が多くて見出しが画面の外に出る場合や、SPで横に収まらない場合の見せ方です。問い1・2で選んだ型に加えて使います。見比べるのか、1件ずつ読むのかで決めます。
| 表の大きさと読み方 | 向く見せ方 |
|---|---|
| 行が多く、スクロールすると列の見出しが見えなくなる | 見出し固定型 |
| SPでも行どうしを横に見比べたい | 先頭の列を固定して横にスクロールさせる（○×比較型・数値表型など） |
| SPでは1件ずつ上から読むことが多い | SPカード化型 |
| 列が2つだけで、項目と内容を読む | 項目名を内容の上に積む（項目・値型） |
| 列が多くても、各マスが1〜2文字で収まる | 表のまま収める（時間割型） |
テーブルの型の比較
| 型 | 役割 | 置く場所 | 向く状況 |
|---|---|---|---|
| 項目・値型 | 基本の見せ方 | 会社情報、商品の仕様、募集要項 | 1つの対象の情報を、項目ごとに探しやすく並べたい |
| ○×比較型 | 比べ方 | サービスページ、比較のページ | 選択肢ごとに、できること・できないことを見比べてもらいたい |
| 差分強調型 | 比べ方 | 製品・機種の比較のページ | 比べる項目が多く、違いのある項目を早く見つけてほしい |
| マトリクス型 | 掛け合わせの見せ方 | 対応範囲のページ、サービスページ | 業種×サービスのように、2つの条件で答えが変わる |
| 時間割型 | 時間の見せ方 | アクセスのページ、トップページ | 曜日や時間帯で、受け付けの有無が変わる |
| 並び替え型 | 探し方 | 資料・物件・実績の一覧 | 行が多く、読み手ごとに見たい順番が違う |
| 数値表型 | 数字の見せ方 | 実績のページ、調査の結果 | 数字の大小や増減を、行と列で比べてもらいたい |
| SPカード化型 | 大きな表の扱い | 店舗・拠点・担当者の一覧 | SPでは1件ずつ読むことが多い |
| 見出し固定型 | 大きな表の扱い | 対応エリアや数値の一覧 | 行が多く、スクロールしても列の見出しを残したい |
すべての型に共通する設計の原則
テーブルの型を作る中で、型が違っても繰り返し出てきた原則です。どの型を選んでも、次の点は同じように確かめます。
- 表はHTMLの表で組む。画像にしない。見た目をそろえるためだけに、関係のない情報を表に入れない
- 列の見出し（th scope="col"）と行の見出し（th scope="row"）を組み、表の見出し（caption）で何の表かを示す
- 記号だけで意味を伝えない。記号の意味は表の上に置き、セルにも「対応」「休診」などの文字を添える
- 色だけで区別しない。違い・休み・対象外は、文字や形、濃さでも示す
- 空欄を作らない。対象外や休みは、そう書く。空欄は未記入と区別できない
- 数字は右寄せにし、単位は見出しにまとめる。日付や数字の書き方を列の中でそろえる
- SPでは、見比べるなら先頭の列を固定して横にスクロール、1件ずつ読むならカード。列を細くして無理に収めない。横にスクロールする表には一言案内を添える。行が多く見出しが画面の外に出るなら、列の見出しを固定する
- 絞り込みや並び替えは、押している状態や並び順を aria-pressed・aria-sort と文字で示し、変わったことを読み上げでも知らせる
- 内容は実際の情報に合わせる。他社と比べる場合は、根拠となる情報と確認した時点を書く。決まっていない場合は「表示例」と明記する
組み合わせの例
- 会社や店舗のページ：項目・値型で基本情報を並べ、来院・来店の時間は時間割型で示す
- サービスの違いを伝えるページ：○×比較型で対応範囲を見比べてもらい、項目が多い場合は差分強調型に切り替える
- 対応業種やエリアを示すページ：マトリクス型で組み合わせごとの対応を示し、対応していない組み合わせも文字で書く
- 資料や実績の一覧：並び替え型で見たい順に並べてもらい、SPで1件ずつ読むことが多いならSPカード化型の組み替えを加える
- 実績の数字を伝えるページ：数値表型で正確な数字を示し、傾向を伝えたい場合は同じ数字のグラフを併記する
- 料金に関わる比較：料金プランの違いは機能比較表型 料金表、条件ごとの価格は早見表型 料金表を使い、料金以外の違いをこのページの型で補う
よくある質問
表とカードは、どう使い分ければよいですか?
行どうしを横に見比べることが目的なら表、1件ずつ読むことが多いならカードが向くと考えられます。PCでは表、SPではカードにする方法もあり、その場合はSPカード化型を参考にしてください。
SPで表が収まらない場合は、どうすればよいですか?
見比べることが目的なら、先頭の列を固定して横にスクロールさせ、表の上に一言案内を添えます。1件ずつ読むことが多い一覧なら、1行を1枚のカードに組み替えます。列を細くして無理に収めると、文字が読めなくなります。
表を画像で載せてもよいですか?
画像の表は、文字の拡大や読み上げ、検索ができず、内容を変えるたびに作り直しが必要になります。表はHTMLの表で組むのが望ましいと考えられます。
料金を比べる表は、どの型を使えばよいですか?
料金プランの比較や価格の早見表は、料金表のパーツにまとめています。料金以外の比較に、このページの型を使います。