スマホで横にスクロールするテーブル(比較表)見にくい説を検証してみた

こんにちは。「般若ビルダー」「般若ビルダーサーチ」制作・販売者のササメです。

般若ビルダーでは、スマホからサイトを見たときにテーブル(表組み、比較表)を左右にスクロールできる機能を実装しています。

[HB]スマホの設定>テーブル設定

これは、2015年6月に前作メシオプレス02で実装した機能をそのまま引き継いだものです。当時は「スマホのテーブル表示をどうするか問題」の最適解として「スクロールさせるのがベスト」的な風潮だったので実装した気がします。

ですが、このスマホでのテーブル横スクロール機能。私は自分のサイトでは一度も使ったことがありません。理由は、横にスクロールすると全体が見渡せなくて余計に見にくくなって、内容が頭に入ってこないと感じるからです。私だけですかね?

そこで、実装から6年以上が過ぎた今、スマホでの横スクロールテーブルはどれほどの人に支持されているのか、改めて調査検証してみました。

調査内容

  1. 横スクロールあり
  2. 横スクロールあり(1列目固定)
  3. 横スクロールなし

以上3パターンのテーブル(表組み、比較表)を「スマホで」見て、どのテーブルが「見やすい、わかりやすい」と感じたのか答えてもらう。

1.横スクロールあり

※スマホでご覧ください。

総合
評価
製品名保湿力成分使用感コメント
A
岸田 文雄
セラミドにビタミンC誘導体など成分バランスがよく浸透力も申し分ナシ
B
菅 義偉
大容量でコスパ抜群。セラミドやヒアルロン酸など浸透成分も豊富
C
安倍 晋三
保湿力が伸びず、最下位に。すぐにヘタる泡も使用感を下げた

2.横スクロールあり(1列目固定)

製品名総合
評価
保湿力成分使用感コメント

岸田 文雄
A
セラミドにビタミンC誘導体など成分バランスがよく浸透力も申し分ナシ

菅 義偉
B
大容量でコスパ抜群。セラミドやヒアルロン酸など浸透成分も豊富

安倍 晋三
C
保湿力が伸びず、最下位に。すぐにヘタる泡も使用感を下げた

3.横スクロールなし

総合
評価
製品名保湿力成分使用感コメント
A
岸田 文雄
セラミドにビタミンC誘導体など成分バランスがよく浸透力も申し分ナシ
B
菅 義偉
大容量でコスパ抜群。セラミドやヒアルロン酸など浸透成分も豊富
C
安倍 晋三
保湿力が伸びず、最下位に。すぐにヘタる泡も使用感を下げた

調査対象:10代~50代の男女その他100名
調査手法:クラウドソーシングを使ったアンケート調査(クラウドワークス+ランサーズ)
調査日時:2021年11月10日~2021年11月11日

回答者の属性データ

まずは回答者の属性データから公開します。

アンケート結果
左右スクロール=横スクロール

回答者の男女その他の比率

男女比

女性の回答が6割近くになりましたが、まずまずのバランスです。一応「その他」も設定していたのですが、0人でした。

回答者の年代別内訳

女性は30代前半、男性は40代後半から多く回答がありました。

調査結果

それでは、以上の回答者はどのテーブルデザインがスマホサイトで「見やすい、わかりやすい」と感じたのか。次のような明確な結果が出ました。

見やすい、わかりやすいと感じたテーブルレイアウトは?

横スクロールなし76%

「横スクロールなし」が圧勝の76%でした。次点が1列目を固定した横スクロール、最下位は通常の横スクロールテーブルでした。

見にくい、わかりにくいと感じたテーブルレイアウトは?

念のため、見にくいと感じるテーブルも回答してもらいました。

横スクロールあり67%

やはり、「横スクロールあり」が見にくいと回答した人が67%で圧倒的で、見やすいテーブルとは逆の結果になりました。

3つのテーブルそれぞれについて「見やすい、わかりやすい」と感じる理由を回答してもらいましたので、ズラズラと紹介していきます。意味不明な回答は除外しています。

横スクロール「なし」が見やすい、わかりやすい理由

まずは、横スクロール「なし」派の回答です。

10代

学生
18歳男性学生

全ての項目がひと目で比較できるから

20代前半

学生
23歳男性学生

一目で全体を見れるのが良い。文字が小さいなら拡大すればいいので。

学生
22歳男性学生

スクロールすることなく、一目で結果と理由がわかったから。

フリーター
21歳男性フリーター

スライドしなくても全体を一気に見れるから

学生
21歳女性学生

一画面で全ての項目を見られるので、あの項目の評価はなんだったかなと、いちいち戻したり進めたりする必要がなかったからです。総合的な評価がしやすいと感じました。

学生
21歳女性学生

スクロールする必要がないから。

学生
20歳女性学生

ひと目で全ての情報が目に入るので、混乱することがなかったから。

学生
22歳女性学生

スクロールせずに、情報を一気に取得できるから。

学生
20歳女性学生

一目で全体が見られるのが分かりやすいと感じたから。

専業主婦
22歳女性専業主婦

一目でパッと何を伝えたいのかがわかるから。

20代後半

フリーター
28歳男性フリーター

スクロールする必要がなく、一番見やすかったから

会社員
28歳男性会社員

大した情報量でないのでいっぺんに見えたほうがいい

専業主婦
26歳女性専業主婦

内容がぱっと見、全部見れるから。

専業主婦
28歳女性専業主婦

一目で全体が見れるから。

在宅ワーカー
27歳女性在宅ワーカー

スクロールをすることがなく、一目見て内容が分かるから

会社員
27歳女性会社員

全部の項目が一目で確認できて分かりやすかったため。最初は1列目固定も良いなと思いましたが、コメントが読みにくかったのでスクロールなしにしました。ただ、項目数がこれより増えるなら1列目固定のスクロールのほうが見やすそうです。

会社員
27歳女性会社員

スクロールしなくても全体が全て見えるので、わかりやすい。

パート
25歳女性パート

表を見るときは全体を比較したいから。スクロールなどせず、全部見れるほうが分かりやすいです。

30代前半

専業主婦
33歳女性専業主婦

スクロールするのが面倒なので。スクロールなしが良かった

パート
31歳女性パート

細かく見たいところは自分で拡大する。全体が見えるほうが一目で必要な情報が見つけられてわかりやすいと感じた。

会社員
32歳女性会社員

スクロールする手間が省けるし、内容がしっかり目に入るからです。

専業主婦
30歳女性専業主婦

全部が見えるのでスクロールして戻らなくても比較できるから。

自営業
30歳女性自営業

一目で全体の情報が見れて、それぞれの製品の特長やコメントを比較しやすいから。

会社員
31歳男性会社員

横スクロールがなくて一目で理解できるから

会社員
32歳男性会社員

スクロール無しですぐに比較表の内容を理解できたから

家事手伝い
34歳女性家事手伝い

スクロールしなくても目に入るので

会社員
33歳男性会社員

スクロールしなくてもすべての情報を一目で見れるのが良い。シンプルで見やすい。人によってはスクロールが必要になると面倒で見ない人もいるかもしれない。

保育士
30歳女性保育士

スクロールすることなく全てが見れるので一番わかりやすかったです。

会社員
34歳女性会社員

スクロールなしで見れるほうが見やすい。

30代後半

会社員
35歳男性会社員

左右スクロールすると間違えて前のページに戻ってしまうことがあるから。

会社員
39歳男性会社員

全体が映っているほうが見やすいから。

無職
35歳女性無職

一目でパッと見ればすぐ分かるので見やすいと思いました。

専業主婦
35歳女性専業主婦

ぱっとみただけで全ての情報が目にはいってくるから。

無職
39歳女性無職

一目で全体を見れるほうが、情報が混乱せず、比較しやすいと思ったので。

会社員
37歳男性会社員

スクロールする手間がないので比較しやすい

パート
37歳女性パート

一番見やすくわかりやすかったです。

会社員
35歳男性会社員

表を動かさなくても一目で情報が分かるから

主婦
39歳女性主婦

私の場合はスクロールしているうちに項目を忘れてしまうので、全部一気に見れるのが一番頭に入りました。

パート
36歳女性パート

すべてが見えていないと分かりにくい。

会社員
36歳男性会社員

動いていってしまうと確認したい部分が隠れてしまう。

医療従事者
38歳男性医療従事者

スクロールするとコメントを読んでいる間に人物画像が見えないので、2人目以降誰か忘れてしまう。列固定は右にスクロールしても人物画像は見えるが、コメントが見切れてしまい読みずらいので。

自営業
37歳男性自営業

この文字サイズであればスクロールなしでも十分認識できるから。

無職
39歳女性無職

スクロールする手間がない

会社員
37歳男性会社員

一目見て全体の内容が分かるからです。

40代前半

自営業
43歳男性自営業

全体の画面が小さくなるデメリットはあるが、左右スクロールなしのほうが情報を忘れることなく比較しやすいから

会社員
43歳男性会社員

スクロールだと元となるものが画面から見えなくなり、何を比較しているのか分かりにくくなるからです。

フリーランス
43歳男性フリーランス

読みやすかったからです。圧倒的ですね。老眼の人はわかりませんが、通常の人には十分なサイズです。

契約社員
41歳女性契約社員

それほど小さい文字ではないので、一目でわかる方が見比べやすくて良いので。

会社員
43歳男性会社員

ひと目で表全体を見ることができるので、各製品を項目ごとに比較がしやすかったから。また、全体感も把握しやすかったから。

派遣社員
44歳女性派遣社員

全体像をまず捉えることができやすかったからです。

フリーター
44歳女性フリーター

スクロールをせずにパッと見てわかる仕様になっていた。他のものは、いちいちスクロールをするせいで目を動かす必要があり不便だった。

会社員
40歳男性会社員

この量の情報だとスクロールしないまま見たほうが見やすい。情報量が増えれば、1列目固定スクロールがいいかと思う。

会社員
41歳女性会社員

全体が目に入ったほうが見やすい。

40代後半

専業主婦
48歳女性専業主婦

左右にスクロールせずに一目で分かるほうがすごく分かりやすいです。

会社員
49歳男性会社員

スクロールする煩わしさがないこと、一目で全体像を把握できることが良いと感じた。

アルバイト
47歳女性アルバイト

一目で全て見れて判断できるから。

会社員
48歳男性会社員

一目で全てが分かるので。

会社員
45歳男性会社員

何もせずにすべてが見えるからです。

主婦
48歳女性主婦

スクールすると全体的に見えないので。

会社員
48歳男性会社員

スクロールせずに全体を見れたから。

派遣社員
47歳女性派遣社員

何もしなくても表がすべて見える

パート
49歳女性パート

何もしなくても全体が見られたからです。

会社員
48歳男性会社員

他のサイトでも左右スクロールなしのほうが個人的に慣れているから

無職
48歳男性無職

一目で全部見られるほうが分かりやすい

専業主婦
46歳女性専業主婦

私的に横スクロールは面倒くさいと思っているので、なしを選択しました。

会社員
42歳男性会社員

スクロールがないほうが、見やすかったので。

会社員
49歳男性会社員

全体が見えるのでわかりやすいから。

50代

専業主婦
52歳女性専業主婦

一目で全部見れるのがわかりやすかったため

在宅ワーカー
54歳女性在宅ワーカー

一目で全ての項目を比較できるから。

パート
51歳女性パート

スクロールなしのほうが全体が見れるので、比較する時に見やすいと思いました。

主夫
50歳男性主夫

項目数が多くなると1列目固定のスクロールに軍配が上がりますが、この例では項目数が少ないのでスクロールなしが見やすかったです。

自営業
52歳男性自営業

小さく見えますが、ぱっと見たときに分かりやすいです。

会社員
53歳男性会社員

スクロール無しのほうが情報が一目で入って来るので。字の大きさもこれくらいで充分。

1列目固定の横スクロールが見やすい、わかりやすい理由

続いて、横スクロール「あり」かつ「1列目固定」派の意見です。

20代

学生
23歳男性学生

固定されてるので、どのコメントかが見やすい。

専業主婦
25歳女性専業主婦

製品名が常に出ていて、詳細が動かせる(スクロール)できるのでわかりやすいと感じました。

自営業
21歳女性自営業

製品名が常に表示されていたほうが何の情報を見ているのかが分かりやすくて良いと思ったから。

30代

専業主婦
32歳女性専業主婦

1列目が固定されていると、なにを比較しているのかが分かりやすい。また文字も読みやすいから。

会社員
35歳女性会社員

誰の何を見ているのかが、固定されてるほうが分かりやすかったです。

専業主婦
34歳女性専業主婦

1列目が固定されているので、スクロールしてもどの製品か間違えることがないし、大きくて読みやすい。

40代

会社員
49歳男性会社員

左右のスクロールがあると大きく見やすい。また、1列目を固定していると何に対しての詳細かが分かりやすい。

会社員
43歳女性会社員

1列目が固定されることによって、右側に項目が増えても見やすいから。

専業主婦
49歳女性専業主婦

製品名が固定されているほうが理解しやすいです。

50代

会社員
50歳男性会社員

何の項目についてなのかが固定されてるので見やすい

会社員
58歳女性会社員

スクロールなしは必要な情報が全部載せられません。スクロールありだと、狭い画面でも必要な情報が載せられます。さらに1列目が固定されていると、たとえば比較対象が5以上あっても混乱しません。

専業主婦
50歳女性専業主婦

固定されていると、一列目の人が誰か忘れるともなく、見たいところが自由に動かせて便利です。

パート
56歳女性パート

1列目固定してあると、戻って見ることなく、画面も大きく分かりやすいです。

専業主婦
52歳女性専業主婦

スマホに表示して見れる情報が限られていますので、1だと右にスクロールした際に誰の情報だか分からなくなってしまいます。2だと左の製品名の列が固定されているので、情報を比べやすくて良かったです。

横スクロール「あり」が見やすい、わかりやすい理由

最後に、もっとも票が少なかった横スクロール「あり」派の意見をどうぞ。

20代

会社員
21歳女性会社員

自在に操作できるほうが見やすい。

30代

会社員
32歳男性会社員

全体のバランスが良く、見やすい

無職
38歳男性無職

スマホは狭いからスクロールのほうが良い

40代

専業主婦
45歳女性専業主婦

スクロールできて固定されていないものを、普段から自分が無意識に読みやすいと判断している。と、こちらのアンケートで改めて気づいたからです。

フリーランス
48歳男性フリーランス

スムーズに画面を見ることができるから

会社員
46歳男性会社員

スクロールの自由度が大きく、すぐに見やすい状態にできるので。

50代

専業主婦
53歳女性専業主婦

スクロールしても一番分かりやすくて読みやすかったです。

以上、各テーブルごとの見やすい、わかりやすいと感じる理由コメントでした。

スマホで横にスクロールするテーブル見にくい説の調査を終えて

多少好みの違いはありましたが、「スマホで横にスクロールするテーブル見にくい説」は圧倒的多数で立証できたかなと思います。

私は「見にくい、わかりにくい」という理由でスクロールは使っていませんでしたが、コメントを見ていて、

  • スクロールしなくて済む
  • スクロールが面倒
  • スクロールが煩わしい

というスクロールの「手間」もUXとしてマイナス要因になることに気づかされました。言われてみれば当たり前ですが、ユーザーに余計な手間をかけさせてはダメですね。

「項目数が多くなったら列固定スクロールのほうがいいかも」という意見もありましたが、見やすいテーブルのコツは「表示内容をいかに減らしてシンプルにするか」です。

下記の記事でもテーブルを多用していますが、

ConoHa WINGとエックスサーバー、ブログ初心者はどっちがおすすめなのか比較してみた

ロリポップハイスピードプランの評判を知りたい人へ。エックスサーバーやConoHa WINGと比較してみた結果

いずれも横スクロール不要な列数なので、パッと見で内容を把握できるはずです。スクロールしないと収まらくらいの列数なら、テーブル自体を分けたほうがいいです。一度に大量の比較項目を見せられても人はなかなか理解できません。

なお、今回は「比較表」をサンプルにしたアンケートです。比較検討しているユーザーが「わかる」「理解する」必要のあるテーブルです。ただ単に、データの見た目を整えて見せるだけのテーブルなら、スクロール表示もアリだと思います。

スクロール表示のテーブルを実装したいなら、ブロックエディタ用のテーブルプラグイン「Flexible Table Block」がおすすめです。テーブルごとにスクロールの有無を設定できます。下記の記事で使いかたを解説しています。

WordPress用テーブルプラグインFlexible Table Blockはブロックエディタでも背景色や列幅の変更、結合まで自由自在!

今回の調査で使ったテーブルもFlexible Table Blockでつくりました。

というわけで、スマホで見やすいテーブルはスクロール型ではなくて、スクロールなしで全体が見渡せるテーブルである、というお話でした。

この記事を書いた人

ササメ
般若ビルダーシリーズ制作

「般若ビルダー」「般若ビルダーサーチ」の制作・販売責任者。2008年8月からWordPressを使ったブログ・サイトの運営を開始。2009年から専業、2014年に法人化。読者の知りたい真実を読みやすく、わかりやすく、本音で伝えるサイト運営が得意。葉酸サプリの分析オタク。