ホームページに製品の仕様表を載せたら、スマートフォンでは右端の列が見えなくなった。画面を横へ動かすと、表だけでなく、その下のお問い合わせ案内も画面からはみ出す。あるいは、右端の値は読めるものの、左にあった型番が見えず、どの製品の値か分からない。いずれも「横に長い表が読みにくい」という連絡になりがちですが、必要な修正は異なります。
WordPressの公式フォーラムの相談には、製品の比較表で最初の列が画面から消え、横へ動かせることにも気付きにくいとあります。別の相談では、表の幅が大きいためかページ全体が縮んだように見えると報告されました。ここでは島田市の小規模事業者が、自社の仕様表を一つ選んで、どの部分を横へ動かし、行と列の対応をどう確かめるかを整理します。
どの値が読めなかったのかを先に決める
縦向きの端末で開き、たとえば「型番Mの対応する取付幅を読み取る」という質問を一つ用意します。仕様表の左端には型番、上端には項目名、右端付近には求める値があるとします。パソコンであらかじめ正しい値と単位を確認し、スマートフォンで同じ値を読めるか見ます。読めた数字の大きさだけでは、隣の行の値を拾っていても判別できません。答えを「型番M・取付幅・120 mm」のように、行、列、値、単位の組で記録します。ここでの製品と数値は説明用の架空例です。
次に、表を横へ動かす前と後で、表の下の文章が同じ位置にあるかを確認します。表の右端を読むときにページタイトルや本文まで左へ消えるなら、表の外側も横に動いています。表の内側だけを動かせる場合は、本文と見出しは画面の幅で折り返し、表の列だけが移ります。表に触れても何も動かず、右側だけ切れたままなら、必要な列まで届く経路がありません。三つの状態は、同じスマートフォンでも別々に起こり得ます。
表示をピンチで縮めると数字が見える場合でも、最初の状態で読めるかは別に試します。文字が小さくなって単位や小数点が読めないなら、一覧が画面に収まっただけです。読者が一行ずつ横へ追うとき、列名と型番のどちらを見失うかにも注意します。数字を読めても、たとえば取付幅と外形幅を取り違えると判断に使えません。画面全体と値の対応を分けて確かめるのはそのためです。
表だけを動かすときに保持する情報
この方法が合うのは、行と列の組み合わせが意味を持ち、並びを崩すと比較しにくい表です。仕様の数値、項目と型番の対応、時刻と運行区分のような表が候補になります。短い条件の説明を見た目のために表へ入れている場合は、普通の段落や箇条書きへ戻すと横移動の操作そのものを省けます。既存の表をどう直すかは、読み手が異なる行と列を往復する必要があるかで決めます。
W3Cのリフローの解説では、関係を理解するために二次元の配置が必要な表と、画面幅に合わせて折り返せる本文を区別しています。表を囲う領域で横移動できるようにする例は、ほかの文章を画面幅に収めながら列を読み進める考え方です。ここでいう領域とは、ページ全体とは別に、表を載せて左右に動かせる枠です。今回の確認は一つの表を読む手順の検収で、サイト全体の適合を判定するものではありません。
制作担当に頼むときは「右端まで横へ動かせるように」と伝えるだけでは、ページ全体を横に動かす対応になることがあります。「表の外の本文、見出し、問い合わせリンクは画面内で読める。幅が足りないときは表の領域だけを左右に動かし、最初と最後の列にたどり着く」と分けます。表を囲っても、外側の枠の幅が画面を超えていれば、ページ全体は横へはみ出します。どの枠が動くかまで確認できる依頼にします。
セルを色で塗り分けている表では、色のほかに「対応」「条件付き」など短い文字でも意味が分かると、画面上で列を追いやすくなります。左端が型番で、最初の一列を動かさず残す案もあります。ただし固定した列が長い場合、狭い画面では右側を見る余地が減ります。固定列を採用するなら、最も長い型番を表示した状態で、必要な値が隠れないかを試します。固定した列の背景から隣の値が透けると、重なった数字を一つの値と誤認することもあります。
行と列を対応付けるためには、見出しらしく太字にするだけでなく、表の見出しとしてマークアップすることも制作担当に確認します。W3Cの行・列見出しの例は、一つの値に対応する行見出しと列見出しを区別して記述しています。複数段の見出しや結合したセルがある場合、表示上の一行をそのまま当てはめるだけでは対応が曖昧になります。制作担当には、右端の値を読み取るときに、どの型番と項目名が対応するかを調べてもらいます。
横に動かせることを表の前から伝える
端末によって、スクロールバーが操作中しか表示されないことがあります。表が一見すると途中までしか用意されていないように見える場合は、表に入る前に「この表は横に動かすと右側の仕様を確認できます」のような案内を置きます。「右へ」の矢印だけではどの場所を操作すればよいか分かりづらいことがあるため、表自体を左右へ動かせると明記します。幅が足りる画面にも案内を出す場合は、全列が見えるときに不要な操作を強く求めない文にします。
案内を表の末尾へ置くと、そこへ移動できない人は説明も読めません。表の題名と一緒に置き、指を置く場所が分かる状態にします。背景に図を入れたり端に薄い影を付けたりする場合も、影が右端の値を読みにくくしないことを確認します。表にボタンを付ける方式なら、左右の操作の名前を分かるようにし、終端で押した後の挙動も試します。実際に選ぶ方法は表の使われ方と制作環境に合わせます。
タッチで横へ動く表が、キーボードだけでも同じように読めるとは限りません。パソコンで画面の幅を狭くするか、表示を拡大して横移動が必要な状態を作り、マウスを使わずに表の領域へ移れるかを試します。操作対象が見えること、左右へ動かして末尾の値に届くこと、その後に次のリンクへ進めることを一続きで見ます。Tabキーや矢印キーでの具体的な動きはブラウザーや実装で異なるため、機器ごとの実際の操作と結果を残します。
表の中に「仕様書」などのリンクが並ぶときは、値を読むために表を動かす操作と、リンクを開く操作を区別します。指で左右に動かしたつもりがリンクを開く、キーボードで次の列へ移動したいのに現在地が見えなくなる、といったことがあれば、制作担当に伝えます。端末で見えていないリンクへキーボードで進んだ場合に、表示が追従して現在の場所を見失わないことも大切です。
制作担当に頼むときは公開画面の一件を切り出す
「表がスマートフォンで見にくい」だけでは、列を減らすべきか、文字を拡大すべきか、表を囲う枠を直すべきかを決められません。公開ページのURL、表の題名、使った端末と向き、操作の手順、読めなかった値、周囲の文章がどう動いたかを一つにします。画面を録る場合は、表の前から操作し、右端へ移った後に本文を読むところまで撮ると、ページ全体と表の動きを比較できます。未公開の製品名や注文情報が映る試験画面は、そのまま外部へ送らず、確認用の情報へ置き換えます。
架空の依頼例です。「仕様一覧の『取付寸法』の表を端末Aの縦向きで開き、表の上に指を置いて横へ動かすと、下の注意書きも左に消えます。右端まで動くと型番MとNの区別がつきません。列の内容はそのまま残して、本文は画面内で折り返し、表の中だけを操作してMの取付幅120 mmを確認できるようにしたいです。案内の文と、マウスなしで最後の列を読めるかも確認してください」。これなら実装方法を制作担当に委ねながら、受入時に読む答えを共有できます。
編集画面で表の見出しが一つでも、公開側の横スクロール機能を使うと見出しが重複して見えたというフォーラムの相談もあります。修正で表を動かせるようになったら、見出しが同じ列の上にあり、二重表示で別の列名と取り違えないかを見ます。編集画面のプレビューだけでは、公開テーマの設定や追加の案内が反映されていないことがあるため、一般の来訪者として公開画面を開いて確認します。
最後の列まで行って、別の行を読むところまで試す
まず修正前に使った端末と向きで、表の手前の説明から読み始めます。案内を見て自力で操作できたら、最後の列の値を一つ読み、左端の型番か、画面内の補助表示でどの行の値か確かめます。その次に別の型番で同じ列を読み、値が異なる場合に正しい答えを出せるか確認します。一件目がたまたま見えていても、行を一段ずらした値まで確認すると、固定した見出しとセルがずれている場合に気付けます。
次に表を左へ戻し、表の下の文章とリンクを縦に読む操作を続けます。左右の移動ができても、その場から抜ける操作が分からなかったり、表が縦の動きを意図せず妨げたりすると、表の後ろの案内までたどり着けません。表の横移動、ページの縦移動、次のリンクを開く操作の順に試し、どこで止まるかを記録します。リンクが問い合わせ送信などの外部処理を始める場合は、確認環境と入力内容を責任者と決めます。
端末が変わると、同じ表でも隠れる列が変わります。横向きで三列見えたとしても、縦向きで単位の列が見えるとは限りません。縦向き、横向き、パソコンの狭いウィンドウ、文字や表示を拡大した状態から、来訪者が使う条件を選びます。行の折り返しが増えると、固定された左列と右側の値の高さがずれることがあります。最も長い品名の行や、脚注が付く行を選ぶと、簡単な行だけでは見えない問題を確認できます。
次は架空の試験記録です。正答は「M・取付幅・120 mm」と「N・取付幅・140 mm」です。端末Aの縦向きでは表の手前で横移動の案内を読め、MとNの値を正しく読みました。表を戻しても下の注意書きは画面の幅に収まりました。端末Bの拡大表示では横へ動いたものの、列名と数字がずれてNの値を誤読しました。端末Bだけを再調整し、次の確認では同じ二行で測り直します。いずれも説明のために作成した結果です。
合格とするのは、移動できたことに加え、見出しと数値の対応を説明でき、表の後ろへ進めた場合です。表示はできるが値を取り違えた、案内がなく横移動を始められなかった、キーボードで表まで届かなかった場合は、それぞれ別の要調整として残します。使える端末がない条件は「未試験」と記録します。確認者が後で交代しても、端末、操作、質問、実際に読んだ値、判定を見れば同じ作業から再開できます。
特定の行だけはみ出す場合は、その行を制作担当に伝える
横幅を押し広げているのが表全体とは限りません。ある型番のセルに空白のない長い文字列が入ったり、仕様書へのURLをそのまま表示したりすると、そのセルだけが狭い幅へ収まらないことがあります。短い型番の表では起きず、長い型番を追加した表だけで起きる場合は、制作担当へ該当の行と文字列を伝えます。画面端で見えなくするだけの変更では、はみ出しが消えても残りの列に移動できなくなるため、最後の値に届くかを再確認します。
URLが原因なら「仕様書を開く」のように内容が分かるリンク名へ変えて、リンク先を維持できる場合があります。製品型番が原因なら、検索や転記に必要な型番を途中で省略すると、末尾の似た二つを区別できません。制作担当と、型番を折り返して読める形にするか、必要な幅を表の中で確保するか決めます。型番や仕様そのものを書き換える作業とは分け、修正後も元の型番を一字ずつ確認します。
制作担当の記録には、表と前後の本文に同じ問題が出るかを分けて書きます。「表の右端だけが切れる」なら表を囲う領域の幅と操作、「表の外まで動く」ならページからはみ出す要素、「値だけ見えて行が分からない」なら固定列や補助表示を確認します。横移動する枠を作ったあとも、セル内の長い注記まで折り返さずに表示する必要はありません。注記が読めることと、行列を保つことを両方確かめます。
表示の試験と、読み上げの対応を別の行で記録する
端末Aのタッチ操作とパソコンのキーボード操作は別の試験として残します。端末Aなら向き、文字の拡大設定、使用したブラウザーを控え、パソコンならウィンドウ幅や表示倍率、実際に使ったキーを書きます。制作担当がW3Cの説明を参考に縦方向へ読むページを調べる場合、幅320 CSSピクセル相当の条件を使えます。CSSピクセルは表示のための単位で、端末の画素数とは別です。この条件を試しただけで、すべての実機や利用方法を確認できるわけではありません。
キーボードでは、表の前のリンクから進み、表または左右の操作へ移り、末尾のセルに届いてから次のリンクへ進めるかを見ます。逆方向にも表から離れられることを試します。読み上げを使う試験では、制作担当と、表の題名、対象の行名、項目名、値が対応して伝わるかを一つのセルで確認します。単純な表なら表題を caption、行と列の見出しを th と scope で示せる場合があります。見出しが多段の表では対応を別に確認し、読み上げられる順序がツールごとに違う場合は、語順より対応する情報を得られたかを見ます。
架空の表に「M-02」と「N-02」の二行があり、右端に「取付幅 120 mm」と脚注がある場合は、脚注が対象の行だけに適用されるのかも読んでもらいます。たとえば「M-02の120 mmは部品を含む。N-02は別の値」のように答えを控えます。固定した左列の表示だけを見ていて脚注に気付けなかったときは、脚注を表示する位置と、どの値に付くかの説明を制作担当へ返します。
修正後に必要な値へ届かなくなった場合は、制作担当と旧表示への戻し方、または利用できる暫定の案内を決めます。確認済みの仕様書が別にあるなら、適用型番と版が合うものを表の手前から案内できます。公開できる代替資料がない場合は、型番を指定して確認できる窓口を案内します。値が誤読される表を掲載したまま、表示の不具合だけを直した扱いにしないため、どの状態まで戻れば読み手が安全に判断できるかを決めてから公開します。
列の追加や表の更新後に同じ質問を使う
製品が増えたり仕様の説明が長くなったりすると、以前は同時に見えていた型番と値が離れます。表の更新をするときは、追加した列だけを確認せず、以前の代表となる値を一つと、新しく端に来た値を一つ読みます。仕様に改訂日がある場合は、行と列の対応を確認する表とは別に、その値の根拠となる版が追えるようにしておきます。古い説明書への案内を残す場合も、どの型番に対応するかが読み取れる必要があります。
複数のページで同じ種類の表を使っているなら、修正担当と対象範囲を決めます。一ページで成功した横移動の設定が、別の表にあるボタンや脚注を隠す可能性があります。まず問題が出た表で確認し、共通設定を使う場合は、種類が違う表を一つ選んで影響を確認します。表の内容を編集する担当には、列を追加した後に行名と単位の確認をする場所を伝えます。
仕様表を操作しても値の意味を取り違えないように整える場合は、LIFESEEDSのホームページ制作をご覧ください。お問い合わせでは、公開ページと、読み取りにくかった行と列をお知らせください。
コメント