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

メシオプレス04のテーブルは、スマホでは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個

縦見出しのみ

商品名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日

左揃えのテーブル

1列目を左揃え、2列目を中央揃え

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

1列目を左揃え、2列目を中央揃えのテーブル

スクロール


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

テーブル専用ボタン付き

カード名 クレジット
機能
申込み
JCB/ETCスルーカードN
(ETC専用ICカード)
公式HP
オリコETCカード
公式HP
ライフETCカード
公式HP
法人ETCカード
(セディナカード)
詳細へ

セル全体リンク

カード名 クレジット
機能
申込み
法人ETCカード
(UCカード)

スマホで左右に余白

カード名 クレジット
機能
申込み
法人ETCカード
(UCカード)
会社名 トヨタ自動車株式会社
(TOYOTA MOTOR CORPORATION)
代表取締役社長 豊田 章男
本社所在地 〒471-8571 
愛知県豊田市トヨタ町1番地
TEL(0565)28-2121(代)
創立 1937年(昭和12年)8月28日

これは何?

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

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

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

効果

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

設定方法

テーブル(表)の応用デザイン | メシオプレス04購入者サイト
テーブル(表)「横カラー見出し+縦ホワイト見出し」 | メシオプレス04購入者サイト
テーブル(表)「縦横カラー見出し」 | メシオプレス04購入者サイト
テーブル(表)「縦カラー見出し+横ホワイト見出し」 | メシオプレス04購入者サイト
テーブル(表)「横カラー見出し」 | メシオプレス04購入者サイト
テーブル(表)「縦カラー見出し」 | メシオプレス04購入者サイト
テーブル(表)「薄い縦カラー見出し」 | メシオプレス04購入者サイト
テーブル専用パーツ(詳細へ・公式HPボタン、マルバツショートコード) | メシオプレス04購入者サイト

任意広告左
任意広告右
AdSense広告
AdSense広告

この記事を書いた人

めしおじさん
めしおじさん
めしおの叔父

これは記事下に表示するプロフィール情報です。

人気記事ランキング(手動)
ノーマル

アイキャッチ付きメニュー
カテゴリー表示(アイキャッチなし)

  1. メシオプレス01
  2. mesiopress02(親)
  3. メシオプレス03
  4. メシオプレス04
  5. 池袋のラーメン

わしのプロフィール
プロフィールの説明(前後の記事下)

大神様
大神様
WordPressの大神様

わしの説明文。とんでもねぇ。あたしゃ神様だよ。

関連記事
カード(長方形)+4記事+スマホ2列

  1. タグクラウドのカラー変更機能
  2. 改訂履歴(dlタグを使った記述・説明リスト)
  3. 段落調整クラス(段落間を狭くしたり、広くしたりする)
  4. スマホ検索結果のサムネイル画像の優先表示

関連記事
カード(長方形・大)+3記事

  1. 2019年10月19日
    タグクラウドのカラー変更機能
  2. 2019年6月29日
    改訂履歴(dlタグを使った記述・説明リスト)
  3. 2019年6月29日
    段落調整クラス(段落間を狭くしたり、広くしたりする)

関連記事
カード(正方形)+スマホ2列

  1. タグクラウドのカラー変更機能
  2. 改訂履歴(dlタグを使った記述・説明リスト)
  3. 段落調整クラス(段落間を狭くしたり、広くしたりする)
  4. スマホ検索結果のサムネイル画像の優先表示
  5. 投稿者一覧ページの自動生成(複数人でのサイト運営)
  6. 画像を横並びにするカラムショートコード拡張(ボタン型メニュー)
  7. 投稿者情報(この記事を書いた人)の表示
  8. サイトの好きな場所に投稿者一覧を表示する(【MP】投稿者一覧ウィジェット)

関連記事
カード(正方形・大)

  1. タグクラウドのカラー変更機能
  2. 改訂履歴(dlタグを使った記述・説明リスト)
  3. 段落調整クラス(段落間を狭くしたり、広くしたりする)

関連記事
リスト

  1. タグクラウドのカラー変更機能
  2. 改訂履歴(dlタグを使った記述・説明リスト)
  3. 段落調整クラス(段落間を狭くしたり、広くしたりする)
  4. スマホ検索結果のサムネイル画像の優先表示

関連記事
リスト2段

  1. 2019年10月19日
    タグクラウドのカラー変更機能
  2. 2019年6月29日
    改訂履歴(dlタグを使った記述・説明リスト)
  3. 2019年6月29日
    段落調整クラス(段落間を狭くしたり、広くしたりする)
  4. 2019年6月8日
    スマホ検索結果のサムネイル画像の優先表示