スマホで表が見づらいときは？横スクロール・列の整理・比較の見せ方

最初に、読者が何を比べて決める表かを絞る

表を直す前に、「誰が、どの項目を比べて、何を決めるか」を一文にします。掲載できる情報を全て詰めるより、その判断に必要な対象・値・条件をそろえることが先です。

例のページでは、設備の気になる状態について相談したい人が、「写真を送って相談」と「訪問について相談」のどちらで説明を始めるかを考えます。読者が知りたいのは、対象になる相談、最初に何を確認するか、用意する資料です。費用や返答時期は未確定なので、安い方・早い方を選べる表にはできません。

制作担当へは、「スマホで小さい」だけでなく、「必要な資料の違いを二案で比べたいのに、案ごとの説明を往復しないと分からない」と伝えます。この読み取り課題が決まると、残す列と補足の置き場所を判断しやすくなります。

一件の詳しい仕様を順番に読む資料なら、見出し付きの説明が合う場合もあります。一方、同じ項目の違いを選ぶ表を、一案ずつの長い説明へ機械的に変えると、比較する位置が離れます。まず読む目的を分けてください。

同じ項目の二案を、同じ行で読む

比較では、項目名と二案の値を同じ行に置きます。表題で何の比較かを示し、列には案の名前、行には対象・確認内容・資料などの項目名を付けます。スマホでも案ごとの長いカードへ分断しません。

次の表は、同じ二案の下書きを項目ごとに並べたものです。文字を極端に縮めず、各セルを折り返して表示する案にしています。元の文章を短い別の約束へ書き換えてはいません。

「必要な資料」の行では、写真相談は設備の写真と気になる場所の説明、訪問相談は設備の場所と気になる症状の説明を並べて読めます。「最初の確認」は、前者が資料から確認できる範囲を返答する案、後者が訪問の可否を検討する案です。訪問が確定した、写真だけで解決する、という意味ではありません。

同じ項目の違いと、まだ決まっていない条件は、どこを対応させて読めばよいでしょうか。図では、案の名前と資料の位置、未確認の条件を結び付けます。

原寸画像を開く

読むときは、先に項目名を決め、その行の二案を照らします。訪問・費用・回答時期が未確認なら、無料・不可・即時や数値の0へ置き換えず、確認が必要な条件として残します。

列を減らす前に、重複と長い補足を整理する

必要な比較条件を隠す前に、重複する列、別々の意味が混ざったセル、長い補足を見直します。項目を移す場合も、どの案・値に関する条件かが分かる位置へ置きます。

例えば、各案の名前を全てのセルで繰り返すと、幅を使い、本文も長くなります。案の名前は列見出しに置き、値を読む間もその対応が分かるようにします。ただし、列名を省略し過ぎて「案1」「案2」だけにすると、何の相談かを覚え直すことになります。

一つのセルに別々の比較項目がある

対象と必要資料が一つの長文に混ざっていれば、行を分けて同じ項目同士を並べます。改行だけで擬似的な行を作ると、文字を大きくしたときに位置がずれやすくなります。

全ての案に共通の長い条件がある

表の直前や直後に共通条件を示す案を検討します。特定の案だけの条件を共通にしたり、どの値の注記か分からない末尾へ離したりしません。

列数が多く、一つの表に別の話題がある

料金、日程、対象地域など、読む用事が分かれるなら、題を付けて表を分ける案があります。分割しても、単位・対象・適用期間などの比較条件を失わないようにします。

元の下書きでは、二案とも訪問の扱いと費用・回答時期が未確認です。ここを「写真相談は無料」「訪問相談は有料」と埋めれば、表示は簡潔でも事実が変わります。文章を整理する作業と、会社が提供条件を決める作業は別です。

見た目だけでなく、表の見出しとして組む

制作担当は、表題をHTMLのcaption、見出しをth、値をtdとして組みます。行と列の両方に見出しがある単純な表では、scope="row"とscope="col"で方向を示す方法があります。色や太字だけを変えた通常セルで、見出しを代用しないでください。

CMSに見出し行・見出し列を指定する機能がある場合も、公開後のHTMLで関係を確かめます。複雑な結合や入れ子が必要なら、先に構成を単純にできないか検討します。サイト全体の見出しや共通部品の管理は、部品のルールの作り方と分けて整理できます。

横移動が必要なら、表の枠内に収める

比較に必要な列が収まらない場合は、周辺の本文まで左右へ動かすのではなく、表の領域を分けて横スクロールする案があります。右に続くこと、どの案の列を読んでいるか、最後の条件まで到達できることを一組で確かめます。

上の二案比較は、列を整理して同じ項目の値を近くに置く表示案です。次の枠は、横移動の操作を説明するために、同じ「必要な資料」の一行だけを広い列で表示しています。別のデータや改善結果ではありません。スマホでは枠の右側へ移り、訪問相談の資料まで読んでください。

表の枠だけを横に動かす見本

右に続く列があります。タッチ操作ではこの枠を横へ動かします。キーボードでは枠へTabで移り、左右キーで列の続きまで確認します。左の項目名を残す指定は、この説明用の表示案です。

制作上は、表の外側に横方向のoverflowを持つ枠を設ける方法があります。例えばoverflow-x: autoは、必要な場合に横移動できる状態を作る指定です。それだけで案内や読みやすさが完成するわけではありません。実際のページへ組み込んだ幅、文字量、操作方法で確認します。

項目名を左に残す固定列は、横移動中の照合を助ける場合がありますが、狭い画面の大半を覆えば、値を読む場所がなくなります。背景が透けて重なる、枠外へ固定列が残る、といった問題も点検します。固定する列を増やすこと自体を解決策にしないでください。

表を左右に動かしている間も、周辺の説明は通常どおり折り返すようにします。WCAGのリフローの説明では、意味や利用に二次元の配置が必要なデータ表は例外として扱われますが、全てのセル内の文章や周辺の本文まで一律に例外になるわけではありません。この見本だけで適合を認定することもできません。

右端の条件と、文字を大きくした状態まで確かめる

確認では、表が枠に収まるかだけでなく、読者が必要な値と条件を取り違えずに読めるかを見ます。同じ原稿、同じ幅、同じ読み取り課題を、修正前後でそろえてください。

1. 一つの項目で、二案の値を読む。

   例では「必要な資料」を選び、写真相談と訪問相談で何を準備するかを読みます。案の名前と値を往復できる位置か、長い注記を見落とさないかを確認します。架空の二案そのものを修正前後と扱いません。

2. 表の右端と、注記の終わりまで移動する。

   横移動がある表では、最後列が途中で切れず、戻って項目名と照合できるかを見ます。表の外の本文まで横にはみ出していないかも別に確かめます。

3. 文字の拡大と、異なる操作方法で試す。

   画面全体の拡大、文字だけの拡大、キーボード、タッチ操作を混同せず、試した条件を残します。大きくした文字が固定高さで切れたり、見出しの固定部分がデータを覆ったりしていないかを確認します。

4. 保存後の実ページで、同じ箇所を読み直す。

   編集画面だけで終えず、公開先のスマホとPCで題、見出し、値、注記、右端と移動を確認します。提供条件の承認と、表の表示・操作確認、読者の理解や成果は別に扱います。

修正を頼むときは、「幅390pxの表示で、資料の行を読むと訪問相談の列名が見えず、どちらの値かを見失う」のように、項目・幅・操作・困る位置を伝えます。担当者は同じ条件で再現し、どの見出しや幅を変えたかと、未確認の環境を返します。記録を作ること自体より、表を読める状態へ直して確かめることが目的です。

キーボードや拡大を含むサイト全体の点検範囲は、企業サイトのアクセシビリティ確認で整理できます。文字の書体・サイズ・行間の選定は、表の行列関係とは別の調整です。

まとめ：同じ項目を読む一つの課題から直す

表を小さくして収める前に、読者が比べる対象と項目を決め、同じ項目の値・単位・条件を近くに並べてください。列と補足を整理し、見出しを残したうえで、必要な場合だけ表の枠内の横移動を使います。

案ごとの長いカードを覚えて比較したり、必要な列を黙って消したりする方法で済ませません。訪問・費用・回答時期のような未確定条件も残し、表示を直したことと、提供内容が確定したことを区別して判断してください。