比較表をスマホで読みやすくする方法

1. 一つの表で何を比較したいか決める

契約期間、料金、機能、サポート、注意点を一枚に詰めると、横幅だけでなく判断する負担も増えます。まず読者がこの表で決めることを一つに絞ります。費用を比較するなら契約期間や支払総額を揃え、導入方法の比較なら費用の細かな内訳は別の表へ分ける方法があります。

列を削るときは、結論に都合の悪い条件まで隠さないようにします。短い説明へ置き換える場合も、比較に必要な条件は本文や注記から確認できる状態を残してください。表を短くすることと、重要な情報を省くことは違います。

改善前の記録は「端末幅／切れている列／読めない文字／必要な操作」の四項目で十分です。画面の見た目だけを記録するより、読み手がどの比較を完了できなかったかを残すと、修正の目的がはっきりします。

2. 横スクロールさせる場所を表の内側に限定する

列の関係を保ちたい表では、表を囲む要素だけを横スクロールにする方法があります。ページ全体が横へ動く状態とは区別してください。このサイトでも表の上に案内を出し、表の領域内で残りの列を確認できる形にしています。

スマホでは表を横にスクロールできます。

文字を極端に縮小して収める方法は避けます。読める文字サイズで必要な列に到達できる方が、画面全体には収まっていても読めない表より実用的です。

3. 見た目だけでなく見出しの意味を付ける

HTMLの表では、見出しをth、値をtdとして区別します。単純な行・列の見出しにはscope="row"やscope="col"、表の題名にはcaptionを使えます。色や太字だけに頼らず、支援技術にも関係を伝えるためです。

参考: W3C WAI・表の構造。確認日: 2026年9月10日。結合セルの多い複雑な表には追加の関連付けが必要になるため、簡単な表の書式をそのまま万能な方法として使わないでください。

表を画像へ置き換えると、文字の拡大、値のコピー、更新などが扱いにくくなります。元がスプレッドシートでも、公開する情報はHTMLの表として整理する方法を検討します。画像に長い説明を付けるだけで表と同じ操作性になるわけではありません。

4. キーボードと文字拡大でも試す

スクロール領域へキーボードで移動できること、移動した位置が見えること、矢印キーなどで隠れた列へ到達できることを確認します。このサイトの表の囲みにはフォーカス用の指定と領域名を付けていますが、実際のブラウザで操作を試すことが必要です。

1. スマホ相当の幅で、ページ全体に横はみ出しがないか確認する。
2. 表の右端と最下行まで移動し、欠けた内容がないか調べる。
3. キーボードだけで表へ移動し、スクロールを試す。
4. 文字を拡大して、注記やリンクが隠れないか確認する。
5. 読み上げでも行・列の関係を追えるか確かめる。

PCの画面幅を狭くする確認は役立ちますが、実機のタッチ操作とすべて同じではありません。重要な比較表は実際のスマホでも確認対象にします。

5. 修正前後は同じ質問で比較する

「右端の注意事項を読めるか」「支払総額がどちらにあるか分かるか」のように、確認する質問を固定して比較します。単に見た目が整ったことと、比較しやすくなったことを分けて記録してください。

公開後に行を追加した際も点検が必要です。新しいセルだけ長いURLや改行しない文字列が入ると、以前は問題がなかった表でも幅が変わります。表の更新作業には、条件と値の照合に加えてスマホ幅での再確認を含めましょう。

表以外の余白やボタンもまとめて見直すならスマホ表示の確認、出典や比較条件の記録は比較記事の出典台帳を使うと、内容と表示を別々に点検できます。

6. コピーして試せる最小構成

以下は当サイトで作成した配布方法の例の比較です。料金や製品の推薦ではありません。HTMLファイルへ保存すれば、外部ライブラリやJavaScriptを使わずに表だけをスクロールできます。HTMLとCSSの例をテキストで保存できます。

<p id="comparison-help">表の中を左右にスクロールできます。</p>
<div class="comparison-scroll" tabindex="0" role="region"
     aria-label="配布方法の例の比較" aria-describedby="comparison-help">
  <table>
    <caption>例：公開資料と契約者向け資料</caption>
    <thead><tr><th scope="col">配布方法</th><th scope="col">読む人</th>
      <th scope="col">公開前に確認すること</th></tr></thead>
    <tbody>
      <tr><th scope="row">一般公開</th><td>すべての訪問者</td>
        <td>ログアウト状態でも正しい版が開く</td></tr>
      <tr><th scope="row">認証付き配布</th><td>権限のある利用者</td>
        <td>権限のない利用者が本文を取得できない</td></tr>
    </tbody>
  </table>
</div>
<style>
.comparison-scroll { max-width:100%; overflow-x:auto; }
.comparison-scroll table { width:100%; min-width:36rem; border-collapse:collapse; }
.comparison-scroll th, .comparison-scroll td {
  padding:0.75rem; text-align:left; vertical-align:top;
  border:1px solid #ccd3dc; overflow-wrap:anywhere;
}
.comparison-scroll:focus-visible { outline:3px solid #145da0; outline-offset:4px; }
</style>

この例のmin-width:36remは3列を読むための出発点です。列の数や文字の長さに合わせて変え、数字を固定の正解と扱わないでください。サイトへ組み込む場合はCSSをスタイルシートへ移し、同じページに複数置くときはcomparison-helpと参照先のIDを別々の値に変更します。

tabindex="0"は通常のTab順へスクロール領域を入れるための指定です。正の数を割り当ててページ全体の操作順を変えないようにします。領域名、案内文、表の題名は、それぞれ役割が違うため、読み上げたときにも意味が通じる文言にしてください。

このページで動きを試す場合は、次の表で右端の「公開前に確認すること」まで進みます。一般公開と認証付き配布で確認対象が違うことを読み取れれば、この表の比較作業は完了です。

表の中を左右にスクロールできます。

この記事内の表はサイト共通CSSで最低幅600px、配布例は独立して使えるよう36remとしています。外観や折り返す位置は一致しない場合があります。確認するのは、ページ全体を横に動かさず、表の最後まで読めるという動作です。

7. 組み込んだあとに失敗を切り分ける

• ページ全体が横へ動く場合：表を包む要素に幅の制約があるかを確認する。GridやFlexの子要素が縮まない場合は、対象の子要素へmin-width:0を指定して再確認する。
• Tabで表に入れない場合：囲みのtabindexと、先に開いているモーダル等のフォーカス制御を確認する。
• 操作位置が見えない場合：outline:none等でフォーカス表示を消していないかを確認する。
• 右端の値だけ読めない場合：囲みやセルにoverflow:hidden、固定高、絶対配置が重なっていないかを確認する。

表が横スクロールできたことと、スクリーンリーダーで意味が伝わることは別の検査です。複数段の見出しや結合セルへ拡張する前に、W3C WAIの単純な見出しを持つ表の説明を確認し、可能なら単純な表へ分割してください。資料確認日：2026-09-29。