tableを使った価格表のデザインをまとめたページを見つけました。表のデザインというのはついシンプルになりがちですが、これだけバリエーションがあると見ていて楽しいですね。

• Web Design – Pricing Tables | Abduzeedo | Graphic Design Inspiration and Photoshop Tutorials

↑テーブルの角が角丸になっているデザイン。cssのradiusなどを使っているのでしょうか？角丸にするだけでも随分印象が違いますね。

↑縞模様は動的に付けているんでしょうか？あと、90ドルの列の両脇のシャドウはいったいどうやって作っているのでしょうか・これも要チェックです。

↑これはtdの背景にグラデの画像を入れているんでしょうね。列ごとに色が変わって綺麗ですね。参考になります。

よく日本は「罫線表の国」だなんて言われることがありますが、Webの場合、画面上の罫線は思っている以上に目に付いてしまうので、面で表現したり、目立たない線の配色を心がけるだけでも印象が変わりそうですね。

世の中の情報は、箇条書きや表で分かりやすくまとめることができる事が多いので、理解しやすさも考えたいですよね。最近はSEOのために文章で表現することが割とあるので、こういった発想も忘れないようにしたいものです。

• Web Design – Pricing Tables | Abduzeedo | Graphic Design Inspiration and Photoshop Tutorials