2021.06.14
横長の表をスマホで見やすくする工夫？
こんにちは！Maromaroのディレクターoyucoです。
ようやく関東も梅雨入りしたようですね。
30℃以上の真夏日が続き、公園や道端の紫陽花がもくもく咲いていたのに陽ざしが強すぎて、きれいなブルーやピンクの花が焼けてしまっているのもちらほら見かけ、梅雨どこいったんだろ？って思っていました。今年もカタツムリが見られるかな？
さて、先日ある案件で、パソコンやタブレットなどある程度の画面幅デバイスでは普通に閲覧できる「横長の表」ですが、複数の列と行の表で項目や内容の文字量が多く一覧性も残したかったため、スマホで見る際に横スクロールで対応しました。
「横長の表」というといろいろありますが
- 番組表
- 電車やバスの運行表や運賃一覧表
- 製品やサービス比較表
- 製品のスペック
- イベントなどの開催スケジュールや進行表 などなど
このような「横長の表」は、画面幅がせまいスマホでは見やすいように工夫が必要です。
表の列数や行数、情報量にもよりますが以下のような対応が考えられます。
- スマホの縦方向のスクロールに合わせて縦並びの表にデザインを変更する
- 部分的に縦書きも併用して画面幅におさめる
- 文字サイズを小さくして表は拡大で閲覧できるようにする
- 表は横長のまま横スクロールにする
- 表ではなく箇条書きリストに変更する
- PDFファイルを掲載する
スマホでの横スクロールという操作について、多くのサイトのトップページのメインスライドなどで見られるため、横にスライドする動きも多く見慣れておりタップして横スクロールして先送りしたり、またYahoo！などのポータルサイトや楽天市場などのショッピングサイトでもメニューやバナーなど右側が見切れていて横スクロールでの閲覧も見慣れてきたように感じますが、スマホを使い慣れていない人や、スマホ特有の縦方向のスクロールや目線を考えると、表の横スクロールはどうなのだろうと思い、「横長の表」を横スクロールで掲載しているサイトはどう表示しているか、今後の参考にいろいろなサイトを調べてみました。
スマホで「横長の表」を横スクロールで掲載しているページ
▼価格.com：Macノート>MacBook Pro
価格.com：Macノート>MacBook Pro
製品のスペックの比較表ですね。
スマホでも1行目と1列目の項目が固定表示されていて、横スクロールバーが表示されています。
横スクロールしても各製品の内容がわかりやすいですね。
▼（公財）東京都公園協会 東京水辺ライン＞本日の運航ダイヤ
（公財）東京都公園協会 東京水辺ライン＞本日の運航ダイヤ
表の右や下が見切れていますが、「※スクロールで隠れている場合があります。」という注意書きが添えてあることで、縦横スクロールで見られる表ということがわかります。
操作がわかる人にとっては目に入らない添え書きかもしれませんが、スマホに慣れない世代の方などにも配慮して、一言添えてあげるおもてなしも必要ですね。
▼楽天市場：産経ネットショップ>支払・配送方法
表の右端に横スクロールで閲覧を促すスクロールヒントのアイコンが表示されています。タップや横スクロールでヒントが消えます。
ちなみに、テレワークですわりっぱなしのため、おすすめアイテムをポチっと購入しました。
▼徳力本店>過去の相場情報
こちらも表内に横スクロールで閲覧を促すスクロールヒントが表示されています。ヒントがより目立つため、一覧を見る前に操作がわかりやすいかもしれません。
▼千葉県>千葉県毎月常住人口調査月報
横スライドを促すアイコンが表の外に掲載されていて、横スライドで確認できますね。
横スクロールヒントの上に「画面サイズで表示」というボタンがあるのでタップしてみると、表が画面幅に変更されました。
この表の場合、画面内で一覧できて横スライドより見やすいです。
このように表によって、横スライドでも一覧でも見られるのはいいですね。
都道府県など行政のサイトには統計表など、いろいろな表が掲載されています。
情報量が多い細かい表はやはり、PDFやExcelファイルのダウンロードが多くみられます。詳しく見る際は後でパソコンで見ますが、スマホでアクセスしていて、PDFをダウンロードしてまで見るかというと・・・。概要だけでもパっと確認できる表になっているといいなと思います。
まとめ
LINEの〈調査報告〉インターネットの利用環境 定点調査（2020年下期）を見てもわかるように、スマホでのWebサイト閲覧は当たり前で、ある食品メーカーのサイトは数年前から6～7割以上がスマホによるアクセスのため、キャンペーンや新コンテンツページを制作する際は、スマホをメインに構成とデザイン制作を行い、スマホでの閲覧のしやすさ、使いやすさ、さらに他ページに回遊してもらうための工夫を考えたうえでPCページのデザインレイアウト制作、という流れになっています。
今回は「横長の表」スマホで見やすくする工夫について調べてみましたが、スマホなどのデバイス特有のUIが秀逸なサイトがたくさんありました。
そのようなサイトやコンテンツに刺激をうけながら、これからもスマホやタブレット、PCでの特性をいかした見せ方や工夫による作りこみ、ご提案をおこなっていきたいと思います。
以上、Maromaroのoyucoでした。
