スマホ最強のtable（表）の考察

今さらな話題でもありますがスマートフォンのtable（表）の見せ方って悩みますよね。

で、これも今さらですがユーザーからの閲覧のほとんどがスマートフォンからです。 

アフィリエイトサイトを運営していると一番クリック率が高いのも商品の一覧表だったりします。それはもう、テキストを読むよりも先に「一覧表をクリック！」なんてことは日常茶飯事です。

なのでめちゃくちゃ重要度の高いtableの効果的な表示方法を改めて考えてみました。

※実装方法などに関するコードは参考リンクとして添えております

スマホのtable（表）の種類

width100%

レスポンシブに対応させようとして場合、一番簡単なのがtableの幅をwidth="100%"としてしまうことだと思います。

しかしながらPCで閲覧する場合は問題ないのですが、スマートフォンだと見づらい。

画像	名称	著者	価格	コメント
	進撃の巨人(24) (講談社コミックス)	諫山 創	463	しばらく進撃の巨人から離れていたが、機会に恵まれ最近読み返す事に。 これが思いっきりハマってしまった。16巻から読み返しをしたが巻を追うごとに面白くなる。そしてこの最新刊。読んでいてゾクゾクし切なくなりストーリーに引き込まれる。 最初の頃とは違った面白さがある。（引用）
	よつばと!(14) (電撃コミックス)	あずま きよひこ	702	お話やキャラクターのいきいきとした様子を、いつも噛みしめるように楽しみながら拝読しております。また背景の描写の緻密さにもいつも感動してしまいます。土砂降りの雨でも効果音は書き込まれず、絵だけでそれとわかる。温度や湿度まで伝わって来るようです。（引用）
	ONE PIECE 88 (ジャンプコミックス)	尾田 栄一郎	432	四皇ビッグマム海賊団との激しいバトルが繰り広げられるホールケーキアイランド編が続く第88巻。 物語の大きな柱となっているのはウェディングケーキを食べ損ね怒り心頭の中ナミたちを執拗に追うビッグ・マム、そのビッグ・マムに食べさせるウェディングケーキ作りを開始するサンジたち、ルフィvsカタクリ、この3つ。（引用）

ギュッとなって見づらいですね。

スクロールタイプ

そこで今、恐らく一番主流なのが「スクロール」タイプ。

スマートフォンで閲覧するとスクロールバーが表示されて閲覧できる見せかたですね。

画像	名称	著者	価格	コメント
	進撃の巨人(24) (講談社コミックス)	諫山 創	463	しばらく進撃の巨人から離れていたが、機会に恵まれ最近読み返す事に。 これが思いっきりハマってしまった。 16巻から読み返しをしたが巻を追うごとに面白くなる。 そしてこの最新刊。読んでいてゾクゾクし切なくなりストーリーに引き込まれる。 最初の頃とは違った面白さがある。（引用）
	よつばと!(14) (電撃コミックス)	あずま きよひこ	702	お話やキャラクターのいきいきとした様子を、 いつも噛みしめるように楽しみながら拝読しております。 また背景の描写の緻密さにもいつも感動してしまいます。 土砂降りの雨でも効果音は書き込まれず、絵だけでそれとわかる。 温度や湿度まで伝わって来るようです。（引用）
	ONE PIECE 88 (ジャンプコミックス)	尾田 栄一郎	432	四皇ビッグマム海賊団との激しいバトルが繰り広げられる ホールケーキアイランド編が続く第88巻。 物語の大きな柱となっているのはウェディングケーキを食べ損ね 怒り心頭の中ナミたちを執拗に追うビッグ・マム、 そのビッグ・マムに食べさせるウェディングケーキ作りを開始する サンジたち、ルフィvsカタクリ、この3つ。（引用）

列を固定する

position:stickyを使用して列や行を固定させる方法もあります。

画像	名称	著者	価格	コメント
	進撃の巨人(24) (講談社コミックス)	諫山 創	463	しばらく進撃の巨人から離れていたが、機会に恵まれ最近読み返す事に。 これが思いっきりハマってしまった。 16巻から読み返しをしたが巻を追うごとに面白くなる。 そしてこの最新刊。読んでいてゾクゾクし切なくなりストーリーに引き込まれる。 最初の頃とは違った面白さがある。（引用）
	よつばと!(14) (電撃コミックス)	あずま きよひこ	702	お話やキャラクターのいきいきとした様子を、 いつも噛みしめるように楽しみながら拝読しております。 また背景の描写の緻密さにもいつも感動してしまいます。 土砂降りの雨でも効果音は書き込まれず、絵だけでそれとわかる。 温度や湿度まで伝わって来るようです。（引用）
	ONE PIECE 88 (ジャンプコミックス)	尾田 栄一郎	432	四皇ビッグマム海賊団との激しいバトルが繰り広げられる ホールケーキアイランド編が続く第88巻。 物語の大きな柱となっているのはウェディングケーキを食べ損ね 怒り心頭の中ナミたちを執拗に追うビッグ・マム、 そのビッグ・マムに食べさせるウェディングケーキ作りを開始する サンジたち、ルフィvsカタクリ、この3つ。（引用）

スマホ最強のtable（表）は？

ぶっちゃけ2列が一番見やすい

いろいろ検証してみても、結局2列が一番見やすいし反応が良い。

結局は縦スクロール閲覧の中で横スクロールってユーザーにとって不便だし、見づらいんですよね。なので、スマートフォンの表は2列または3列でスクロール不要にした方が一番効果が高いです。

でも・・・

画像	名称
	進撃の巨人(24) (講談社コミックス) 諫山 創 価格：463
	よつばと!(14) (電撃コミックス) あずま きよひこ 価格：702
	ONE PIECE 88 (ジャンプコミックス) 尾田 栄一郎 価格：432

可読性の高い2列の表ですが、いかんせん情報量が少ないというデメリットがあります。

特にアフィリエイトのランキングの表などでは成分や価格より、「何が違うのか？」なんてこともしっかり書いておきたいところです。

そこで、タブ式が一番良いのかなぁという結論に至っています。

基本情報コメント

画像	名称
	進撃の巨人(24) (講談社コミックス) 諫山 創 価格：463
	よつばと!(14) (電撃コミックス) あずま きよひこ 価格：702
	ONE PIECE 88 (ジャンプコミックス) 尾田 栄一郎 価格：432

画像	名称
	しばらく進撃の巨人から離れていたが、機会に恵まれ最近読み返す事に。 これが思いっきりハマってしまった。 16巻から読み返しをしたが巻を追うごとに面白くなる。 そしてこの最新刊。読んでいてゾクゾクし切なくなりストーリーに引き込まれる。 最初の頃とは違った面白さがある。（引用）
	お話やキャラクターのいきいきとした様子を、 いつも噛みしめるように楽しみながら拝読しております。 また背景の描写の緻密さにもいつも感動してしまいます。 土砂降りの雨でも効果音は書き込まれず、絵だけでそれとわかる。 温度や湿度まで伝わって来るようです。（引用）
	四皇ビッグマム海賊団との激しいバトルが繰り広げられる ホールケーキアイランド編が続く第88巻。 物語の大きな柱となっているのはウェディングケーキを食べ損ね 怒り心頭の中ナミたちを執拗に追うビッグ・マム、 そのビッグ・マムに食べさせるウェディングケーキ作りを開始する サンジたち、ルフィvsカタクリ、この3つ。（引用）

これなら必要最小限の情報を最初に見せておき、興味のあるユーザーもストレスなく補足を見ることができます。

長い表だと戻る手間がありますが情報の可読性は非常に高いなと。

ENJI

タブ1には商品情報、タブ2にはランキングなど色々な使い方もできそうですね。

というわけで本日公開のWING（AFFINGER5版）ver20181025にも実装致しました。

ステ子

タブの切替実装もAFFINGERなら1クリックよ

進化し続けるAFFINGER最新情報はコチラ