Blog スタッフブログ

こんにちは、Webデザイナーのそいです。

年末も近づき、バタバタと忙しくされているデザイナーさん、コーダーさんもいらっしゃるのではないでしょうか？年末まであともう少し、頑張っていきましょう！

と、冒頭のごあいさつはここまでにして、本日のお題は表組デザインについてをご紹介していきたいと思います。

バナーやキービジュアルなど「THE・デザイン」という程のことでもないですが、どのWEBサイトにも存在する表組（リスト）。会社概要やお問い合わせフォームなどで必ず見かけるのが表組です。

表組のデザインが少し違うだけでも見やすさが変わったりと結構全体感のイメージに関わる部分でもあります。

案外この表組のデザインに惑わされがちなのも事実、シンプルだからこそ悩まされがちな要素の一つでもあります。

今回は、デザイナーの方はもちろん、コーディングに特化したコーダーの方にもぜひ引き出しとして持ってもらいたい表組デザインパターンを用意してみましたのでご参考いただければと思います！

パターン1:一般的な表組デザイン

一般的な表組デザインから発展して、デザインを起こしてみます。

まずは“いつもの”“よくある”表組から紹介します。

ベーシックなパターンの表組です。重たい印象・エクセル感漂うイメージでデザイン性になんとなく欠けます。

項目の欄をメインカラーに合わせることもありますが、上の画像のような青であればしっくりくるものの赤色や黄色をベースとしたビビット配色のサイトの場合、目がチカチカして読みにくい印象になるでしょう。。

パターン2:“いつも”の表組の色を変える

白をベースカラーとするなら、メインカラーがどんな色でも合うのがグレー系統の表組デザイン。

個人的に鉄板の配色だと思ってます。主張が激しくないグレーだからこそ馴染むわけですね。

この表組は項目の色変更のほか、もう1か所工夫しているポイントがあります。

…それは項目の文字の太さ。この部分を太くするだけでもだいぶ読みやすくなるのでおすすめです。

パターン3:パターン2をもう少し読みやすくする

項目の文字の太さはそのままに、文字を右に寄せたデザインです。

これも読みやすいレイアウトの一つです。文字の太さだけでなく、文章量や表組の数にあわせて項目を「左揃え」「右揃え」「中央揃え」を検討してみることも見やすい表組デザインを考えるうえで重要な要素です。

パターン4:パターン2にスタイリッシュ性をもたせる

間違い探しではなく、表組を囲っている線を無くすパターンです。

線の色にもよりますが輪郭って結構印象に残りやすいんですよね。。区切り線を入れるだけでもエクセル感から逸れたデザインにすることができます。

文字は太字にすることで、シンプルながらも読みやすい表組になっているのではないでしょうか。

パターン5:表組の項目が多い時におすすめのデザイン

項目の右側の色を、交互に変えたパターンです。1項目ごとがはっきりと見やすいデザインになっています。

例に挙げている項目数程度であれば、さほど読みづらさは感じませんが製品の仕様表など情報量が多くなるものに関しては上の表組デザインが読みやすくなります。

パターン6:ポップな表組デザイン

この表組もたまに見かけるデザインです。「メインカラーを使いたいけど、主張も激しくしたくない」「オリジナル性も持たせたい」そんなサイトにぴったりなのがこのデザイン。

上のデザインでは下線と項目の文字の色を同じにしていますが、文字を黒にしても印象を変えられます。

パターン7:シンプルイズベスト!スタイリッシュなサイトに合うデザイン

線のみの表組デザインです。コーポレートサイトではあまり採用されないものの、制作会社・美容院・サービス系サイトでは王道になりつつあるパターンなのではないでしょうか。

ただし、このパターンの表組での注意点が一つあります。オシャレに見せるには余白が重要!ゆとりを持って上下に余白をつけてレイアウトすることが重要です。

パターン8:他にもオシャレな表組ってないの？という方におすすめのデザイン

タイトルのようなお悩みのあるデザイナー・コーダーさんにはこちらをおすすめします。

モノトーン調というルールさえ外さなければ、どんなサイトも格好良い感じで収まります！

サイトの全体感はオシャレなのに、表組だけしっくりこない…という方はまずはこちらを実装してみてください！

パターン9:タイル風デザイン

囲うなどのダイレクトな線は設けず、帯をつけたような表組デザインです。

「白浮きするのも抵抗がある」「スタイリッシュ性を求めてないが質感は出したい」こんな場合にはこのデザインを採用してみてはいかがでしょうか。

左側も右側も、グレーの濃度に気を付ける必要がありますが、薄すぎて区切りが見えにくいかも…といった場合には上のデザインのように区切りに薄っすら下線を引くと良いでしょう。

パターン10:親しみやすさを持たせるデザイン

柔らかい印象のサイト、ポップな印象のサイトの場合には上のデザインもおすすめです。

表組は四角で囲われた形状をしているので、どうしても堅い印象になりがちです。

項目を見出しのような扱いにして、あしらいを入れることで色の配分が増え、オリジナル感と親しみやすさが演出できるのではないでしょうか。

このあしらいを角丸にすることでも印象が変わりますよ！

まとめ

いかがでしたか？色一つ、線一つでイメージが変わる表組デザイン。

こういった細かい部分の一工夫が全体感が左右されたりします。逆にいえば配色・太さを変えるだけでもデザイン性を持たせることが出来るのがこの表組デザインの特徴ではないでしょうか。

表のデザインにお悩みのデザイナー・コーダーの方に少しでも参考になればと思います。

今回もご一読いただきありがとうございました！