スマホサイトで横長のテーブルをどう扱うか

PCサイトでよくみる横長のテーブルですが、同じ情報をスマホサイトに組込む場合、その限られた表示幅ゆえに見せ方を工夫する必要があります。

（PCサイトによくある横長のテーブル）

今回は弊社が構築したサイトの中から、複雑なテーブルをスマホ用に組み替えた変換例をご紹介します。

テーブルの見出しを固定し、ページ上部に追従

項目名のみをページ上部に固定表示し、値を下スクロールで表示する。
金融系サイトやWeb明細画面など、項目数が多く情報の簡略化が許されないサイトに有効。

特徴	見出しと値の照らし合わせがしやすく、視認性が高い。
懸念点	内容にそってカラムを配置し直す必要があるため、実装面・運用面での難易度が高い。
ユーザビリティ	★★★★★
実装の難易度	★★★★★

最もシンプルな変換例。
あらゆるテーブルに汎用的にルールを展開できるので、実装も容易でユーザーも規則性を理解しやすい。

ECサイトなどの商品詳細ページで有効。
機能別でテーブルをソートし、ユーザーが見たい情報のみを表示する。

特徴	コンテンツボリュームを最小限し、見たい情報のみをスマートに表示できる。
懸念点	ユーザーのアクションが必須となる。一覧性が低い。
ユーザビリティ	★★★☆☆
実装の難易度	★★★☆☆

見出しカラムのみを固定させ、はみ出したテーブルをスクロール形式で表示する。
左カラムに見出しがある場合に有効。

特徴	PCサイトの表組を流用する形で実装可能。
懸念点	日本ではまだ馴染みがなく、横スクロールの存在に気づきにくい。
ユーザビリティ	★★☆☆☆
実装の難易度	★★☆☆☆

一昔前のイメージが強いテーブル表現ですが、膨大な情報を一覧配置する場合はまだまだ有効で、代替案も乏しいのが現状です。特にスマホ変換においては、すべてのテーブルに有効な変換方法は確立されていないため、最も難易度の高いレイアウトといっても過言ではありません。

スマホサイトで情報過多のテーブルを扱う際は、表の組み換えや情報の簡略化が必須になります。
以下のことに注意し、本来のテーブルの目的を壊さない表現方法を検討しましょう。

日頃から表現のバリエーションをストックし、そのテーブル応じたベストな変換方法を提案できるようにしたいですね。