縦横カラー見出し
| 商品名1 | 商品名2 | 商品名3 | 商品名4 | |
|---|---|---|---|---|
| 商品画像 | ![]() |
![]() |
![]() |
![]() |
| ◯× | ||||
| 特徴 | 商品名1の特徴 | 商品名2の特徴 | 商品名3の特徴 | 商品名4の特徴 |
| 星評価 |
縦見出し、横見出しともにカラーのテーブル
横カラー見出し+縦ホワイト見出し
| 商品名1 | 商品名2 | 商品名3 | 商品名4 | |
|---|---|---|---|---|
| 商品画像 | ![]() |
![]() |
![]() |
![]() |
| ◯× | ||||
| 特徴 | 商品名1の特徴 | 商品名2の特徴 | 商品名3の特徴 | 商品名4の特徴 |
| 星評価 |
横見出しをカラーにして、縦見出しは白い見出し(左から右にかけて薄くグラデーション入り)のテーブル
縦カラー見だし+横ホワイト見出し
| 商品名1 | 商品名2 | 商品名3 | 商品名4 | |
| 商品画像 | ![]() |
![]() |
![]() |
![]() |
| マルバツ | ||||
| 特徴 | 商品名1の特徴 | 商品名2の特徴 | 商品名3の特徴 | 商品名4の特徴 |
| 星評価 |
縦見出しはカラーで、横見出しは白(上から下にかけて薄くグラデーション)のテーブル
横見出しのみ
| 商品名1 | 商品名2 | 商品名3 | 商品名4 |
|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
| 商品名1の特徴 | 商品名2の特徴 | 商品名3の特徴 | 商品名4の特徴 |
横見出しのみカラーのテーブル
縦見出しのみ
| 商品名1 | 商品名2 | 商品名3 | 商品名4 | |
| 商品画像 | ![]() |
![]() |
![]() |
![]() |
| マルバツ | ||||
| 特徴 | 商品名1の特徴 | 商品名2の特徴 | 商品名3の特徴 | 商品名4の特徴 |
| 星評価 |
縦見出しのみカラーのテーブル
スマホでも本文と文字サイズを同じにする
| 商品名1 | 商品名2 | 商品名3 | 商品名4 | |
|---|---|---|---|---|
| 商品画像 | ![]() |
![]() |
![]() |
![]() |
| ◯× | ||||
| 特徴 | 商品名1の特徴 | 商品名2の特徴 | 商品名3の特徴 | 商品名4の特徴 |
| 星評価 |
スマホでは、一覧性を高めるために通常本文よりも2回り小さい文字サイズになりますが、通常本文と同じ文字サイズも可能です。
横線のみ
| 商品名1 | 商品名2 | 商品名3 | 商品名4 | |
|---|---|---|---|---|
| 商品画像 | ![]() |
![]() |
![]() |
![]() |
| ◯× | ||||
| 特徴 | 商品名1の特徴 | 商品名2の特徴 | 商品名3の特徴 | 商品名4の特徴 |
| 星評価 |
横線のみのテーブル
縦線のみ
| 商品名1 | 商品名2 | 商品名3 | 商品名4 | |
|---|---|---|---|---|
| 商品画像 | ![]() |
![]() |
![]() |
![]() |
| ◯× | ||||
| 特徴 | 商品名1の特徴 | 商品名2の特徴 | 商品名3の特徴 | 商品名4の特徴 |
| 星評価 |
縦線のみのテーブル
外枠のみ
| 商品名1 | 商品名2 | 商品名3 | 商品名4 | |
|---|---|---|---|---|
| 商品画像 | ![]() |
![]() |
![]() |
![]() |
| ◯× | ||||
| 特徴 | 商品名1の特徴 | 商品名2の特徴 | 商品名3の特徴 | 商品名4の特徴 |
| 星評価 |
外枠のみのテーブル
枠線なし
| 商品名1 | 商品名2 | 商品名3 | 商品名4 | |
|---|---|---|---|---|
| 商品画像 | ![]() |
![]() |
![]() |
![]() |
| ◯× | ||||
| 特徴 | 商品名1の特徴 | 商品名2の特徴 | 商品名3の特徴 | 商品名4の特徴 |
| 星評価 |
枠線のないテーブル
左揃え
| 会社名 | トヨタ自動車株式会社 (TOYOTA MOTOR CORPORATION) |
|---|---|
| 代表取締役社長 | 豊田 章男 |
| 本社所在地 | 〒471-8571 愛知県豊田市トヨタ町1番地 TEL(0565)28-2121(代) |
| 創立 | 1937年(昭和12年)8月28日 |
左揃えのテーブル
スクロール

スマホ閲覧時のみスクロールするテーブル
これは何?
サイト用(特にサイトアフィリエイト)のテーマなので、比較訴求に必須のテーブルデザインのパターンを充実させました。
- 横の見出しだけカラー
- 縦の見出しだけカラー
- 縦横ともにカラーの見出し
- スマホ閲覧時の文字サイズ変更
- 横線のみ
- 縦線のみ
- 外枠のみ
- 枠線なし
- 左揃え
- スマホ閲覧時はスクロール型
など、比較対象物や閲覧環境に応じてテーブルの見た目をカスタマイズすることができます。スクロール型以外は、各テーブルごとに個別にデザインを適用できます。
効果
- わかりやすい比較コンテンツを提示して、ユーザーの理解を助ける
- テーブルデザインを個別に変更できるので、比較対象物に合った訴求ができる




Related Article関連記事だよ!