前回の記事では見出しについてのデザインをまとめてみましたが、引き続き今回はテーブルのデザインについてまとめていきたいと思います。このテーブルも見出しと同じく、ウェブサイトのデザインでよく登場する要素であります。   テーブルのような表組みで大切なのは、見やすく整理されている点と、情報との関連性が伝えられる点だと思います。表組みの中に入った情報が一目でユーザーが理解できるかがポイントです。そこでデザインでうまく表現できるかが重要になります。  

線で構成されたシンプルなテーブル

罫線などで区切った最もシンプルな形で、見た目のインパクトは弱いですが、わかりやすくサイトに馴染むデザインになっています。     1.細い罫線で区切る     格子状の細い罫線で区切られたシンプルなテーブルです。最低限にくっきりとデータが区切られており、デザイン上の装飾も少ないので、情報量が多い場合でも疲れずに見ることができます。       2.行の下線で区切り文字と線にアクセントをつける     下線だけのシンプルなデザインながら、見出しとデータが行ごとにわかりやすく区切られており、視認性も確保しつつサイトデザインを選ばず汎用性の高いデザインです。    

帯で構成された見やすいデーブル

背景色が加わることで視認性が高まり、テーブルの存在感もアップします。情報の整理もしやすいですが、サイトデザインに合わせることも重要になってきます。     3.行に対して交互に背景色のついた帯を入れる     背景色のついた帯が行ごとで交互に入ることにより、行単位でしっかりと確認することができます。列より行が多い場合や行単位の区分けが重要な場合に有効な見せ方です。       4.見出しにアクセントをつけて行にも交互に背景色のついた帯を入れる     見出し部分には目立つ背景色がついた帯を入れ、データ部分には行単位で交互に背景色のついた帯が入ったデザインです。視認性とデザインバランスの良いテーブルで多くのサイトで良く見かけるデザインです。    

特殊なケースで使うテーブル

テーブルはデータを整理するときにとても便利なので、いろいろなケースで用いられます。そのケースに合わせたデザインを幾つかご紹介します。     5.複数の項目が関係するデータを整理したテーブル     列の先頭には見出しを、行の先頭には項目が入った、複数軸の関連性を持ったデータ整理を異なる背景色を使って整理しました。複雑なデータ構成でも各情報がわかりやすく確認することができます。       6.時系列ごとの関連性を持ったデータが入ったテーブル     フローチャートなど情報が時系列で変化するケースで効果的なデザインです。縦の列で時系列を区分し、データ部分を罫線で区切ります。そしてグラデーション状に背景色を変化させています。       7.料金プランをまとめたテーブル     サービス業のウェブサイトで良く見かける料金表ですが、少し工夫をすることでユーザーの認識度も高まります。ポイントで強弱をつけたり、プランごとにテーマカラーを変えて情報を伝えやすくしています。     いかがでしょうか、デザインがマンネリになりがちなテーブルですが、少しの工夫でより見やすくかっこいいデザインに仕上げることができます。サイトデザインに合わせて是非参考していただければと思います。   また今回のデザインも全てCSSで再現することが出来ます。サンプルコードは【こちら】のページをご覧下さい。