比較の表を読みやすくする、見出しの位置・列の幅・文字のそろえ方

ブログ
結論:比較の表は、見出しの行を中央・上そろえ・同じ幅にし、中身のセルをすべて左・上そろえにすると、読者は目を行き来させずに読めます。中央に置くのはボタンだけです。

比較の表は、読者が選ぶときにいちばん長く見る場所です。中身が正しくても、見出しと中身の位置がばらばらだと、読者は目を何度も行き来させることになります。ここでは、同じ中身の表を、決まりを当てる前と後で並べます。

決まりを当てる前の表

プラン 料金 内容 納期
A 10,000円 トップページの文章の見直し 5日
B 30,000円 5ページまでの文章の見直しと、見出しの組み直し 10日

(表の中の料金と納期は、説明のための例です)

見出しは左・右・中央と寄せ方がばらばらで、列の幅もそろっていません。中身も、中央寄せと左寄せが混ざり、行の高さが違うと、文字の位置が上下にずれます。

決まりを当てた後の表

プラン 料金 内容 納期
A 10,000円 トップページの文章の見直し 5日
B 30,000円 5ページまでの文章の見直しと、見出しの組み直し 10日

(表の中の料金と納期は、説明のための例です)

決まり1:見出しの行は、中央・上そろえ・同じ幅にする

見出しの行は、すべての列を中央そろえにし、上端をそろえます。列の幅も同じにします。見出しの行は「ここから表が始まる」という目印なので、1本の帯としてまとまって見えるほうが、読者は表の形をすぐにつかめます。

決まり2:中身のセルは、すべて左そろえ・上そろえにする

中身のセルは、文字も数字も、すべて左そろえにします。中央そろえにすると、文字の長さによって行の始まりの位置が変わり、目で追いにくくなります。上そろえにしておくと、ある行だけ文字が長くても、ほかの列の文字が上下にずれません。

決まり3:中央にするのは、ボタンの行だけ

表の最後に「詳しく見る」などのボタンを並べるときだけは、ボタンを中央に置きます。ボタンは文字として読むものではなく、押す場所なので、列の真ん中にあるほうが押しやすいからです。

決まり4:名前は、正式な名前のまま書く

表の中のサービス名や商品名は、略さずに正式な名前で書きます。表は、読者があとでその名前を検索したり、問い合わせで伝えたりするときの手がかりになるからです。

まとめ

比較の表では、見出しの行を中央・上そろえ・同じ幅にし、中身のセルをすべて左・上そろえにしています。中央に置くのはボタンだけで、名前は正式な名前のまま書きます。寄せ方をそろえると、読者は目を行き来させずに表を読めます。

特集記事

Webサイト改善診断 29,800円(税込) サービスの詳細
SOMEYA, M.

資格試験の予備校・書籍を比べる「ライブラリ」など、10を超えるWebサイトを作り、運営しています。Webサイトの改善診断と、記事・ページの制作をお受けしています。 【好きなもの】沖縄料理・ちゅらさん・Cocco・龍が如く3

  1. 敬体と常体は、誰に向けて書くかで選ぶ。同じ内容で書き比べた

  2. 【3000文字】文字数が変わると、読者体験はどう変わるのか

  3. 改行は、多すぎても少なすぎても読みにくい。3パターンで書き比べた

TOP
CLOSE