スマホで料金表・比較表が見にくいときの組み替え方｜横スクロールで延命しない
スマホで料金表・比較表が見にくいときの組み替え方｜横スクロールで延命しない
スマホで料金表や比較表が見にくいとき、最初に思いつく対処は「表を横スクロールできるようにする」ことだと思います。しかし結論から言うと、横スクロールの表は読まれません。正解は、表そのものを組み替えることです。具体的には「列を削る」「表をやめてカードに組み替える」「表を分ける」の3パターンのどれかに落とし込みます。
graciautoでは制作の現場で、スマホ幅の表は実質2〜3列までと判断しています。2列（項目名＋内容）ならそのまま表示できます。3列は文字量を絞れば成立します。4列以上になったら、表のまま何とかしようとせず、組み替えを検討するラインです。
この記事では、クライアントから「横スクロールの表を見やすくしてほしい」という要望を実際に受けて、5列の比較表を組み替えた案件の判断過程と、そのとき確認した数値をそのまま公開します。
—
1. なぜ横スクロールの表は読まれないのか
横スクロールにすれば、表の情報は一応すべて画面に出せます。それでも読まれない理由は3つあります。
まず、スクロールしないと存在に気づけないからです。画面の右に続きがあることを示す視覚的な手がかりは薄く、多くの閲覧者は最初に見えている列だけで判断を終えます。比較表なら、比較対象が見えないまま離脱されるということです。
次に、行と列の対応が崩れるからです。横にスクロールすると左端の項目名が画面から消えるため、「いま見ている数字が何の項目なのか」が分からなくなります。料金表でこれが起きると、金額だけが並んで見える状態になります。
最後に、スクロール操作が縦と横で競合するからです。ページ全体は縦に読み進めるのに、表の上だけ横に動く。この操作の切り替えは想像以上にストレスで、表を飛ばして読む行動につながります。
実際、後述する案件ではクライアント自身が「横スクロールの表を見やすくしてほしい」と明確に要望として挙げてきました。作った側ではなく、運用してきた側が「読まれていない」と感じていたわけです。
—
2. 実例：5列の比較表を「PCは表・スマホはカード」に組み替えた
首都圏の学習塾のコース紹介LPを制作した際、元のページには自社と競合3タイプを並べた5列の比較表（項目名＋自社＋他塾3タイプ）があり、スマホでは横スクロールになっていました。
このとき採用した解決策は、横スクロールを見やすく調整することではなく、横スクロールそのものを廃止することでした。
- PC：5列の表を幅1,120pxのコンテンツ幅に収め、自社の列だけ背景色で強調する。PCなら5列を一望できるので、表形式の「並べて比べられる」強みがそのまま活きます
- スマホ（860px以下）：表を捨てて、比較項目ごとのカードに組み替える。カード1枚に「自社＝大きく」「他塾3タイプ＝小さく」を収め、横スクロールなしで全項目・全比較対象が読める形にしました
ポイントは、スマホ版でも情報を削っていないことです。5列×全行の情報量はそのままに、「1画面に横に並べる」形式から「項目単位で縦に読む」形式へ変換しただけです。比較表の目的は「自社が選ばれる理由を並べて見せる」ことなので、カード内で自社を大きく扱えば目的はむしろ果たしやすくなります。
組み替え後は、1440px・834px・390px・360pxの4つの画面幅で横方向のはみ出しがゼロであることを確認して納品しています。360pxまで確認するのは、幅の小さい端末で1〜2pxのはみ出しが残ることがあるためです。
—
3. 削る列・分ける表の決め方
組み替えの前に、そもそも列を減らせないかを検討します。判断基準は「その列は、読んだ人の意思決定を変えるか」です。
料金表でよくあるのが、社内の管理都合で存在している列です。品番、社内向けの区分、全行で同じ値が入っている列。これらは削っても意思決定に影響しません。全行同じ値なら、表の外に注記として1行書けば済みます。
もうひとつ重要なのが、性質の違うものを1つの表に混ぜないことです。住宅設備メンテナンスの専門店のサイト設計では、戸建て向けと小規模アパート向けで料金体系そのものが別（基本料金の考え方も、加算の単位も違う）でした。これを1つの表にまとめると、行ごとに前提条件の注記が増えていき、人にもAIにも要約できない表になります。体系が違うなら、対象読者ごとに表を分ける。1つの大きな表より、2つの小さな表のほうがスマホでは圧倒的に読みやすくなります。
整理すると、組み替えは次の3パターンです。
| パターン | 向いているケース |
|---|---|
| 列を削る | 意思決定に関係ない列がある。全行同じ値の列がある |
| カードに組み替える | 比較表。列（比較対象）ごとに主役・脇役の差をつけたい |
| 表を分ける | 料金体系や対象読者が異なる内容が1つの表に混在している |
—
4. 組み替えるときに起こりやすい問題と予防策
表の組み替えには、事前に知っておくと防げる落とし穴がいくつかあります。
同じ内容を2か所で管理することになる
「PCは表・スマホはカード」の方式は、同じ内容を2通りのマークアップで持つことを意味します。料金改定のとき片方だけ直すと、PCとスマホで金額が食い違う事故が起こり得ます。この方式を採用するときは、修正時は必ず両方を直すことを運用手順として明文化しておくべきです。制作を外注しているなら、納品時に「この表は2か所にあります」と引き継がれているかを確認してください。
追従ボタンが表に重なる
画面下部に固定表示する問い合わせボタン（追従CTA)を置いているサイトでは、ボタンが表の文字に重なって隠すことがあります。ある案件では、表の外側の余白を実測したところ、画面幅1,279px以下ではボタンを置くスペースが物理的に足りないことが分かり、1,440px以上では横長のボタン、それ未満では小さい角タブ＋半透明という2段構えに切り替えました。表を直したら、実際の画面のスクリーンショットでボタンとの重なりを確認することをおすすめします。CSSの数値だけ見ていても、この種の重なりは気づけません。
注記の文字が小さすぎて読めない
表を小さい画面に収めようとすると、注記のフォントサイズを削る誘惑に駆られます。実際の制作現場で、支給された原稿の表の注記が9.5pxに設定されていて、スマホでは実質読めない状態だったことがあります。読めない注記は無いのと同じで、料金の但し書きが読めないのはトラブルの元です。graciautoでは本文16px・注記14px・ラベル12pxの3段を基準にし、12px未満は使わないことにしています。
料金プランカードの高さと位置がズレる
表をやめて3枚のプランカードに組み替えた場合の話です。真ん中のカードに「一番人気」のようなタグを付けると、タグの分だけ中身が押し下げられ、3枚並べたときにプラン名や金額の縦位置がズレます。シニア向けサポートサービスのサイトの料金ページでこれが起き、タグを通常の流れから切り離した配置（CSSのabsolute指定）にし、3枚共通で上部の余白を確保することで、プラン名・月額・一括料金の縦位置を揃えました。並べたカードは、要素の縦位置が揃っているかまで確認して初めて「比較できる」状態になります。
—
5. よくある質問
Q. CSSやプラグインで表をスクロール可能にするだけではだめですか？
技術的には数行で実現できますが、この記事で述べたとおり「読まれない」という問題は解決しません。スクロールできることと読まれることは別です。応急処置としてスクロール化し、次の更新タイミングで組み替える、という段階的な進め方は現実的ですが、応急処置をゴールにしないことをおすすめします。
Q. 表を画像にして貼るのはどうですか？
おすすめしません。スマホでは画像全体が縮小されるため、結局ピンチ操作での拡大が必要になり、横スクロールより読みにくくなります。加えて、画像内の文字は検索エンジンに内容が伝わりにくく、料金改定のたびに画像の作り直しが発生します。表示・SEO・更新コストの3点すべてで不利です。
Q. 4列の表がどうしても必要な場合は？
「並べて見せることが目的の表」なのか「調べるための表」なのかで分かれます。比較して選ばせたいならカード化で主役を立てるのが有効です。一方、スペック一覧のように特定の行を探して読む表なら、列の見出しを固定した上で3列＋詳細ページへのリンクに絞るなど、スマホでは情報の階層を分ける設計にします。いずれにせよ「5列をそのまま縮めて表示する」が最も読まれない選択肢です。
—
6. まとめ：表を直す順番
スマホで表が見にくいときの手順を整理します。
- 列を数える。2〜3列ならレイアウト調整で対応。4列以上なら組み替えを検討する
- 削れる列を探す。意思決定に関係ない列、全行同じ値の列は削る
- 性質の違う内容が混ざっていないか確認する。料金体系や対象が違うなら表を分ける
- それでも4列以上残るなら、スマホは表をやめる。比較表ならカード化が有力。情報は削らず、形式だけ変える
- 組み替え後は実機幅で検証する。390pxと360pxではみ出しゼロ、追従ボタンとの重なりなし、注記が読めるサイズかまで確認する
横スクロールは「全部載せた」という作り手側の安心にしかなりません。読み手にとって読める形に組み替えることが、料金表・比較表の役割である「比べて、選んでもらう」ことにつながります。
自社のホームページの表がスマホでどう見えているか、まずはご自身のスマホで料金ページを開いて、親指だけで最後まで読めるかを試してみてください。読みにくいと感じたら、それはお客様も同じように感じているということです。