見やすい表組みをデザインするコツ
商品の価格表や諸元表などのテーブル表組み、ゴチャゴチャして見づらくないですか？ 見やすい表組みをデザインする、ちょっとしたコツをご紹介します！
ここでは、例として洋服屋さんのジーンズ商品リストを作ってみましょう（お題に芸がなさすぎですが、お気になさらず・・・汗）
※このページでご紹介するテーブル表組みのソースコードはご自由にお使いください。
ステップ1：シンプルな表組みを作る
まず、HTMLでシンプルなテーブル表組みを組みます↓
表組み - ステップ1
この状態では強弱のメリハリもなく、実にのっぺりとしていますね。
ステップ2：文字情報を目立たせる
この表組みの中で「いちばん重要な要素」は何でしょうか？
そう、重要度は、枠線＜文字情報 ですね。
そこで、枠線の色を薄くすることで文字を際立たせます（→ステップ2の表組みHTMLファイル）
表組み - ステップ2
ステップ3： よりハッキリしたコントラストをつける
文字情報の意味と相互の関係を考えて、視覚的な強弱をよりハッキリさせます。
先頭の1行 "「メーカー」「商品名」・・・"は項目の説明であり、それより下の行とは意味が異なります。ここは、視覚的にも一目で分かるくらい明確に区別したほうが見やすくなります。
さらに、1行おきに薄い色をかぶせることで、目で追いやすくなります。（→ステップ3の表組みHTMLファイル）
表組み - ステップ3
大切なのは「なんとなくカッコいいから・・・」という理由でデザインするのではなく、掲載する情報の意味と相互の関係を考え、ハッキリと視覚的に表現することです。
備考：金額などの数量は右寄せで
（2005年2月14日 追記）：
メルマガ読者のパンダさんよりご指摘いただき、表組みを一部修正しました。
金額などの「数量」は、基本的に右寄せで揃えるのが標準。
ケタ数が大きくなったときに、そちらのほうが見やすい。
（パンダさん、アドバイスいただきありがとうございます！）
さらに突っ込んだデザインノウハウは、メルマガでお届けします！メルマガ読者限定の、サイト無料診断企画もたまにやってます。
>>バックナンバーを見る
Powered by
