いろいろなウェブサイトで使える汎用的なテーブルデザイン集
最終更新日: Update!!
前回の記事では見出しについてのデザインをまとめてみましたが、引き続き今回はテーブルのデザインについてまとめていきたいと思います。このテーブルも見出しと同じく、ウェブサイトのデザインでよく登場する要素であります。
テーブルのような表組みで大切なのは、見やすく整理されている点と、情報との関連性が伝えられる点だと思います。表組みの中に入った情報が一目でユーザーが理解できるかがポイントです。そこでデザインでうまく表現できるかが重要になります。
格子状の細い罫線で区切られたシンプルなテーブルです。最低限にくっきりとデータが区切られており、デザイン上の装飾も少ないので、情報量が多い場合でも疲れずに見ることができます。
2.行の下線で区切り文字と線にアクセントをつける
下線だけのシンプルなデザインながら、見出しとデータが行ごとにわかりやすく区切られており、視認性も確保しつつサイトデザインを選ばず汎用性の高いデザインです。
背景色のついた帯が行ごとで交互に入ることにより、行単位でしっかりと確認することができます。列より行が多い場合や行単位の区分けが重要な場合に有効な見せ方です。
4.見出しにアクセントをつけて行にも交互に背景色のついた帯を入れる
見出し部分には目立つ背景色がついた帯を入れ、データ部分には行単位で交互に背景色のついた帯が入ったデザインです。視認性とデザインバランスの良いテーブルで多くのサイトで良く見かけるデザインです。
列の先頭には見出しを、行の先頭には項目が入った、複数軸の関連性を持ったデータ整理を異なる背景色を使って整理しました。複雑なデータ構成でも各情報がわかりやすく確認することができます。
6.時系列ごとの関連性を持ったデータが入ったテーブル
フローチャートなど情報が時系列で変化するケースで効果的なデザインです。縦の列で時系列を区分し、データ部分を罫線で区切ります。そしてグラデーション状に背景色を変化させています。
7.料金プランをまとめたテーブル
サービス業のウェブサイトで良く見かける料金表ですが、少し工夫をすることでユーザーの認識度も高まります。ポイントで強弱をつけたり、プランごとにテーマカラーを変えて情報を伝えやすくしています。
いかがでしょうか、デザインがマンネリになりがちなテーブルですが、少しの工夫でより見やすくかっこいいデザインに仕上げることができます。サイトデザインに合わせて是非参考していただければと思います。
また今回のデザインも全てCSSで再現することが出来ます。サンプルコードは【こちら】のページをご覧下さい。
線で構成されたシンプルなテーブル
罫線などで区切った最もシンプルな形で、見た目のインパクトは弱いですが、わかりやすくサイトに馴染むデザインになっています。 1.細い罫線で区切る

帯で構成された見やすいデーブル
背景色が加わることで視認性が高まり、テーブルの存在感もアップします。情報の整理もしやすいですが、サイトデザインに合わせることも重要になってきます。 3.行に対して交互に背景色のついた帯を入れる

特殊なケースで使うテーブル
テーブルはデータを整理するときにとても便利なので、いろいろなケースで用いられます。そのケースに合わせたデザインを幾つかご紹介します。 5.複数の項目が関係するデータを整理したテーブル


sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories