スマホで見た時に、表が分かりづらいと感じたことがある人も多いと思います。PCだと見やすいのに、スマホだと表が見づらくなってしまうのは、PC・タブレット・スマホなどの画面サイズに応じて、ページのレイアウトやデザインが自動調整されてしまうからです。

料金やメリットデメリットなど、複数の情報を一覧表で比較することは、効率的に情報を選択していく上で重要です。しかし、列の数やコンテンツ量が多い表の場合は、どのような見せ方にするかが課題となります。

スマホで情報を得ている人がほとんどの現在、モバイルユーザーにとってユーザビリティの高いサイトを作成するために行っている実装例を解説します。

基本はPCと同じレイアウトでレスポンシブ対応

PCのレイアウト

PCのレイアウトでレスポンシブ表示

基本的には、PCと同じレイアウトで表示することがもっとも推奨とされています。当社でもすべてのサイトをレスポンシブデザインで制作しており、表の列またはコンテンツの量に問題なければ、PCのレイアウト表示のままで実装しています。レイアウトを変えるなどの作業を行うことなく、スマホの画面サイズに自動調整されます。

ただし、行の切り替えが早く、長文の場合や項目が多い表の場合は不向きのため、以下のような対応が必要となります。

横スクロールで表示

PCのレイアウトをそのまま使用し、スマホの画面に入りきらない部分を横スクロールさせて表示させる方法です。項目が多く表が大きい場合は、この方法で実装します。ユーザーにとっては、横スクロールのアクションが必要となりますが、テキストを改行させることなく閲覧することができます。デメリットとしては、全体を一覧表示できないため、比較がしにくくなってしまうという点です。また、スクロールできることに気づかれないという懸念もあります。

ユーザーに分かりやすく示すために、スクロールができる旨を表の枠外にテキストで表示し、表の下にはスクロールバーを入れるなどの対応で実装しています。

表の項目を固定して横スクロール

横スクロールを入れることで、逆に見えづらさを感じる場合もあります。スクロールしていくにつれ、表の一部が表示されなくなっていくため、閲覧しているのが何の項目についてだったのかが分からなくなってしまうためです。それを防ぐために、左側の項目を固定した状態で横スクロールできるように実装する方法があります。

この方法は、固定されている部分が画面の一部を占めてしまうため、スマホ画面の大きさと固定する項目の長さによっては別の見えづらさが出てしまうこともあります。

項目が短く且つ比較対象が多い表については、この方法で実装するのがおすすめです。

表の項目を縦並びにする

2分割のシンプルな表に有効な方法です。セルを左右ではなく、上下に分けて実装します。PCに比べ、画面の幅が狭いスマホでは、横並びよりも縦並びの方が相性が良いです。ただ、全体を通して情報を比較するのには不向きなのと、コンテンツ量が多いと縦幅にボリュームが出てしまうこともあるため、見せ方や使い所は見極める必要があります。

表ではない見せ方も検討する

そもそも表にする必要があるかを考えることも大切です。見出しや装飾を用いて、テキストで実装した方がひとつひとつの情報がしっかり伝わるという場合もあります。また、料金表などに関しては、レイアウトなどに大幅な変更があった場合、サイトと差異が出ないようバージョン管理する必要が出てきます。表で実装してない場合、テキストの修正だけで済むというメリットもあります。

どの方法でも、それぞれにメリットデメリットがあります。当社では、多くのモバイルユーザーにとってユーザビリティの高いサイトにするため、工数（時間）をいただいた上で、どの方法がベストなのかを考えてご提案をさせていただいております。ご不明な点はお気軽にご相談ください。