公開 更新

guide · 実制作

比較表の作り方|同じ条件で比べられる表に直す

比較表は、同じ問いに答える項目を並べ、単位と条件をそろえてから見た目を整えます。架空の体験会を使った修正例で、行と列の向き、空欄とゼロの区別、長い説明の分け方、スマホで読むときの確認まで試せます。

実制作を学ぶ余白灯舎の場面
ミナ比較表にしたのに、結局、説明を全部読み直してしまいます。線を減らしたら見やすくなりますか?
アキラ線の前に、一つの項目を横に読んでみましょう。同じことを比べられているでしょうか。

比較表を作る前に、読む人の問いを決める

表のマスが埋まっていても、選ぶための情報がそろっているとは限りません。「魅力」「おすすめ」「特徴」のような広い項目には、時間、持ち物、雰囲気など、別々の情報が入り込みます。読む人は、その中から欲しい条件を拾い直すことになります。

たとえば、休日に参加する体験会を選ぶ人が「1時間で参加できて、予約はいらないもの」を探しているとします。この問いに答えるには、所要時間と予約の要否が必要です。主催者の紹介が詳しくても、この二つが分からなければ選べません。

まず、表の上に置くつもりで「何を決める表か」を一文にします。「体験会を比べる」より「使える時間と予約の条件で、参加する体験会を選ぶ」のほうが、必要な項目を絞れます。項目を減らすことだけを目標にせず、その選択に関わる条件は残してください。

一枚の資料に説明や写真も載せる場合、表の前後に何を置くかは情報の優先順位の決め方で整理できます。ここで扱うのは、表の中で複数の案を同じものさしに乗せる作業です。

同じ情報を、比較できる順番へ並べ直す

次の二案には、体験会の時間・予約・持ち物が載っています。情報を追加せず、説明を読む形から、同じ項目を見比べる形へ変えました。

説明の順番がばらばら

紙もの体験

所要時間:90分
予約:必要
持ち物:なし

色えらび体験

持ち物:エプロン
所要時間:60分
予約:不要

比べたい項目を同じ位置に

架空の体験会2案
項目紙もの
体験
色えらび
体験
所要時間90分60分
予約必要不要
持ち物なしエプロン
左右の情報は同じです。「1時間で参加でき、予約もいらないのは?」を探してみてください。色えらび体験の条件を、表では同じ列で確認できます。これは表示の教材であり、実在する催しの案内ではありません。

左の案内も、体験会を一つずつ紹介する用途には使えます。ただ、時間と予約の条件を続けて比べようとすると、それぞれのカードの違う場所を探す必要があります。右の表なら、所要時間の行、予約の行を順にたどれます。

この作り方は、読んだ内容を頭に覚えたまま次の説明へ移る負担を減らす工夫です。NN/gは、画面の情報を見える状態にし、思い出すことに頼りすぎない設計を説明しています。比較表への応用としては、候補ごとに項目の順番を変えず、判断に必要な情報を同時に見られるようにします。NN/g:再認と想起の違い

ただし、表へ変えるだけで選びやすくなるとは限りません。「充実した内容」と「60分」を同じ行に入れても、比べる問いが違います。次の順で中身をそろえます。

  1. 候補の名前を書き出す。
  2. 読む人が決めたいことに必要な項目を選ぶ。
  3. 全候補について、同じ項目の情報を集める。
  4. 単位、対象、条件を合わせる。
  5. 一つの項目を横に読んで、意味がつながるか確認する。

行と列の向きは、何を続けて読むかで選ぶ

行は横の並び、列は縦の並びです。比較項目を左に置き、候補を上に並べると、同じ項目の違いを横に追えます。一方、候補を左に置けば、一つの候補の内容を一行で読めます。

先ほどの体験会を、候補が縦に続く向きへ変えると、こうなります。

体験会 所要時間 予約 持ち物
紙もの体験 90分 必要 なし
色えらび体験 60分 不要 エプロン

候補が増えても下へ足せるため、一覧を縦に読みたい場面ではこの向きが使えます。ただし、項目が増えるほど横幅が必要になります。最初の向きが正解、逆向きが間違いというわけではありません。

迷ったら同じ内容で縦横を入れ替え、読者の問いを一つ当ててみます。「予約なしはどれ?」なら同じ条件をたどりやすいか。「紙もの体験には何が必要?」なら一つの候補を追いやすいか。何を続けて読む人なのかで判断してください。

Webに載せる表では、見出しを太字にするだけでなく、行や列の見出しとして設定することも必要です。W3Cの教材では、見出しセルと、その見出しがどの行・列に対応するかを示す方法を説明しています。編集画面に「見出し行」「見出し列」の設定があれば、見た目と併せて確認します。W3C:表の見出しの付け方

数字・単位・空欄をそろえるときの注意

同じ「時間」の行でも、「1時間」「90分」「半日」が混ざると、換算や条件の確認が必要です。元の案内が正確な時間を示しているなら、60分・90分のように単位をそろえます。「半日」しか分からないものを、推測で180分などと書き換えてはいけません。

また、体験そのものが60分なのか、受付や片付けを含めて60分なのかでも意味が変わります。数字の桁をそろえる前に、何を含む数字なのかを確認してください。揃え方は最後の仕上げです。

Aの1時間を60分に直し、Bの90分と単位をそろえた比較。時間の長さは変えていない。
時間の長さを変えず、単位だけをそろえた例です。「半日」のように正確な長さが分からない表現は、推測で数字へ変換しません。
元の状態 表ではどう書く? 避けたい読み違い
持ち物は不要と確認できた なし 情報がない状態と区別する
持ち物の記載が見つからない 未確認 不要とは決めつけない
予約について現在確認中 確認中 「不要」で仮埋めしない
その項目が候補に当てはまらない 対象外 0や不可と混同しない

「—」一つで、なし・不明・対象外のすべてを表すと、表を作った人にしか意味が分からなくなります。記号を使うなら、何を示すかを表の近くに書きます。短い表では、言葉のまま書いたほうが迷いにくいこともあります。

○・△・×も同様です。「△」が追加料金で利用可能なのか、一部の日だけ可能なのかを区別します。セルへ条件を短く添えられないときは、対応する説明へ案内してください。大切な例外を消して、きれいな表に見せる必要はありません。

線・色・余白は、読み違えた場所から直す

内容がそろったら、装飾を足す前に一行ずつ読んでみます。途中で隣の行へずれそうなら、行間や横罫線を見直します。見出しとデータの区別がつきにくければ、見出しの背景や太さに差をつけます。すべてのセルを強調するより、何を区別したいのかを決めてから変えるほうが、修正の理由を説明できます。

文字の説明は左にそろえると、各行の読み始めをそろえられます。数量は、単位や小数点以下の桁をそろえたうえで右寄せにした版も試せます。ただし、時刻・型番・日付のような情報まで、数字だからと一括で右へ寄せる必要はありません。

長い説明が一つのセルを埋めている場合は、「短くする」より先に、中に何種類の情報が入っているかを見ます。時間と持ち物が同居していれば、項目を分けます。一つの条件を詳しく説明する文章なら、短い条件名を表に残し、詳しい説明を表の直後へ置く方法があります。

余白の使い方は近接とグルーピングも参考になります。ただ、表では行と列の対応を失わないことが大切です。罫線を全部消す、セルの余白を一律に広げる、と決めず、名前とデータを迷わず対応づけられるかで確認します。

スマホでは、文字を縮める前に確認する

横に長い表をそのまま縮めると、全体は入っても文字が読めなくなります。実際に読まれる幅で見て、項目名と値の対応が残っているかを確認してください。大きな画面で整っているだけでは、表の確認は終わりません。

カード形式に変えると一つずつの内容は読みやすくても、遠く離れた候補の比較には戻る操作が必要になります。表とカードは万能な置き換えではありません。「同じ項目を比べる」のか「一件ずつ詳細を見る」のかへ戻って選びます。

表を画像にすると、細かな文字が縮小されたままになることもあります。Webで表を作れる環境なら、文字を選択でき、見出しを設定できる表を使う方法から検討してください。画像で掲載する場合は、表で伝える重要な条件を本文にも残します。

自分の比較表から、一つの項目を直してみる

今日のワーク:横に読んで、意味をそろえる

作りかけの比較表を複製し、時間・持ち物など、一つの項目だけを選びます。同じ意味の値が入っているか、単位がそろっているか、不明をゼロや「なし」にしていないかを確認してください。

元の案内へ戻っても分からないものは、未確認のまま残します。そのうえで「予約なしで1時間以内に参加できるのは?」のような問いを一つ作り、表だけで答えられるか試します。

答えられなければ、色を増やす前に足りない項目や曖昧な条件を直します。答えられたら、実際に使う画面幅や紙の大きさでも同じ確認をします。

比較表でそろえるのは、マスの形だけではありません。同じ問いに答える情報が、同じ場所にあること。そこまで整うと、線を減らす理由も、条件を残す理由も見えてきます。まず一つの項目を、左から右へ読んでみてください。