テーブル(表)のデザインパターン

縦横カラー見出し

商品名1 商品名2 商品名3 商品名4
商品画像
◯×
特徴 商品名1の特徴 商品名2の特徴 商品名3の特徴 商品名4の特徴
星評価 星3個 星2個 星5個 星4個

縦見出し、横見出しともにカラーのテーブル

横カラー見出し+縦ホワイト見出し

商品名1 商品名2 商品名3 商品名4
商品画像
◯×
特徴 商品名1の特徴 商品名2の特徴 商品名3の特徴 商品名4の特徴
星評価 星3個 星2個 星5個 星4個

横見出しをカラーにして、縦見出しは白い見出し(左から右にかけて薄くグラデーション入り)のテーブル

縦カラー見だし+横ホワイト見出し

商品名1 商品名2 商品名3 商品名4
商品画像
マルバツ
特徴 商品名1の特徴 商品名2の特徴 商品名3の特徴 商品名4の特徴
星評価 星3個 星2個 星5個 星4個

縦見出しはカラーで、横見出しは白(上から下にかけて薄くグラデーション)のテーブル

横見出しのみ

商品名1 商品名2 商品名3 商品名4
商品名1の特徴 商品名2の特徴 商品名3の特徴 商品名4の特徴
星3個 星2個 星5個 星4個

横見出しのみカラーのテーブル

縦見出しのみ

商品名1 商品名2 商品名3 商品名4
商品画像
マルバツ
特徴 商品名1の特徴 商品名2の特徴 商品名3の特徴 商品名4の特徴
星評価 星3個 星2個 星5個 星4個

縦見出しのみカラーのテーブル

スマホでも本文と文字サイズを同じにする

商品名1 商品名2 商品名3 商品名4
商品画像
◯×
特徴 商品名1の特徴 商品名2の特徴 商品名3の特徴 商品名4の特徴
星評価 星3個 星2個 星5個 星4個

スマホでは、一覧性を高めるために通常本文よりも2回り小さい文字サイズになりますが、通常本文と同じ文字サイズも可能です。

横線のみ

商品名1 商品名2 商品名3 商品名4
商品画像
◯×
特徴 商品名1の特徴 商品名2の特徴 商品名3の特徴 商品名4の特徴
星評価 星3個 星2個 星5個 星4個

横線のみのテーブル

縦線のみ

商品名1 商品名2 商品名3 商品名4
商品画像
◯×
特徴 商品名1の特徴 商品名2の特徴 商品名3の特徴 商品名4の特徴
星評価 星3個 星2個 星5個 星4個

縦線のみのテーブル

外枠のみ

商品名1 商品名2 商品名3 商品名4
商品画像
◯×
特徴 商品名1の特徴 商品名2の特徴 商品名3の特徴 商品名4の特徴
星評価 星3個 星2個 星5個 星4個

外枠のみのテーブル

枠線なし

商品名1 商品名2 商品名3 商品名4
商品画像
◯×
特徴 商品名1の特徴 商品名2の特徴 商品名3の特徴 商品名4の特徴
星評価 星3個 星2個 星5個 星4個

枠線のないテーブル

左揃え

会社名 トヨタ自動車株式会社
(TOYOTA MOTOR CORPORATION)
代表取締役社長 豊田 章男
本社所在地 〒471-8571 愛知県豊田市トヨタ町1番地
TEL(0565)28-2121(代)
創立 1937年(昭和12年)8月28日

左揃えのテーブル

スクロール


スマホ閲覧時のみスクロールするテーブル

これは何?

サイト用(特にサイトアフィリエイト)のテーマなので、比較訴求に必須のテーブルデザインのパターンを充実させました。

  • 横の見出しだけカラー
  • 縦の見出しだけカラー
  • 縦横ともにカラーの見出し
  • スマホ閲覧時の文字サイズ変更
  • 横線のみ
  • 縦線のみ
  • 外枠のみ
  • 枠線なし
  • 左揃え
  • スマホ閲覧時はスクロール型

など、比較対象物や閲覧環境に応じてテーブルの見た目をカスタマイズすることができます。スクロール型以外は、各テーブルごとに個別にデザインを適用できます。

効果

  • わかりやすい比較コンテンツを提示して、ユーザーの理解を助ける
  • テーブルデザインを個別に変更できるので、比較対象物に合った訴求ができる