ブログBLOG

【社内デザイン】レスポンシブテーブルのデザインの作り方【Photoshop】【独学デザイナー必見】【WEBデザイン】

更新日：2024/05/24

【社内デザイン】レスポンシブテーブルのデザインの作り方【Photoshop】【独学デザイナー必見】【WEBデザイン】
以前「もう悩まない。CSSでレスポンシブなtableデザイン＆コーディング」でテーブルのhtmlコーディングについては記事をまとめさせていただきましたが、
今回は社内のデザインデータをあさってテーブルデザインのパターンを見てみたいと思います。

1 その前に3年くらい前のデザインデータからテーブルをみてみよう
2 ということで最近のスタンダード
3 社内デザインで見た、テーブルデザイン6パターン
4 おまけ
- 4.1 落ちついた色味で色分けされた見やすいテーブル
- 4.2 ボーダーで3列のレスポンシブテーブル

その前に3年くらい前のデザインデータからテーブルをみてみよう

Photoshopもここ2,3年でかなり機能がアップデートされたので作り方も変わってきました。
選択しずらい1pxのボーダーとテキストの余白を均等にして…修正が入ったりしたらまたひと手間！だったころ(2015年ごろ)のデザインデータはこんな感じでした。

行間をうまい具合に設定してテキストは丸ごとひとつのデータでとっていたんですね。
コーディングでテキストを一行ずつコピーするのが煩雑だったり、
当時のPhotoshopの機能的にこれがベストのまとめ方だったように記憶しています。
td内のテキストが二行になった時にデータがやや綺麗にいかなくなるのと行間の設定にちょっと頭を使うので大変でした。笑

ということで最近のスタンダード

ボックスの中にテキストを入れて作成しています。
これなら高さもすぐにわかるし、デザインを作る時も中央揃えがし易い上まとめて位置を移動するのも簡単なのでこの作りが多くなっています。
レイヤーもコーディング時を想定したものに合わせられるので分かりやすく動かしやすいです！アップデートありがとう。

テキストだけでまとめられていたりするデザインは選択が手間になるのでなるべくやめたほうがよいですね。↓

社内デザインで見た、テーブルデザイン6パターン

ということで本題ですが、社内のデザインデータで見つけたデザインを6パターン紹介します。

01.下線のみタイプ

社内で最近増えている気がするのはこのタイプかなという所見です。
近頃はミニマルなデザインが主流なので、それにあわせてテーブルもよりシンプルに表現したいという意識の結果でしょうか。
thの下線の色をキーカラーにしたり、thをキーカラーにしてアクセントにしたりとバリエーションも豊富です。

お知らせの方は厳密にはテーブルではないですが、このデザインはホバーした時に色が着くので動かした甲斐を感じで好きですね。

02.ボーダーサンドイッチタイプ

こちらもシンプルなのに分かりやすくて良いデザインタイプです。現在流行りのフラットなデザインと相性がよいです。
このタイプが社内でも巷でも無難且つ合わせやすいデザインなので一番多いのではないでしょうか？

このタイプでも01と同じようにボックスに対してレイヤースタイルを2つ使うことで簡単に実現できるようになったので作りとしてもよいですね。

03.thに背景色タイプ

ベーシックなデザインですが、上下ボーダーのシンプルなところにth背景ですっきりとした印象のデザインです。
全て境界線をつければ本当に基本のベーシックなテーブルができあがります。

04.ボーダーボックスタイプ

全て四角で囲った間違いないタイプです。堅めのサイトデザインの場合はこれで色を調整するとマッチすると思います。
色使いが多めのサイトでも色の調整でうまくあわせることができます。
BRISKのサイトもこのタイプで作られていて、実績はthが英字なので差がついていて良デザインかなと思っています！
参照：会社概要ページ