alter.js BLOG
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。

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

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

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

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

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

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

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

見出しを固定し、ページ上部に追従

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

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

全てのセルを1カラムで配置

全てのセルを1カラムで配置

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

特徴 シンプルなルールで汎用的に使用可能。
懸念点 縦幅が大きくなり、コンテンツボリュームが膨らみがち。
ユーザビリティ ★★★★☆
実装の難易度 ★★☆☆☆

機能別に情報をソート

機能別に情報をソート

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

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

はみだした部分を横スクロールで表示

はみだした部分を横スクロールで表示

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

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

まとめ

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

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

  • どんな内容を扱うテーブルなのか
    1. 価格表
    2. 機能一覧
    3. Web明細
    4. 複合的な情報等
  • そのテーブルを閲覧する際、どのような視点が重要になるか
    1. テーブル全体の一覧性
    2. 必要な情報の絞り込み
  • 簡略化できる項目はあるか
    1. 見出しが無くても値のみで情報が伝わるか
      ※性別などの記載は、値のみでも意味が伝わるため見出しを省略することができます。
    2. 見出しor値をアイコン化することは可能か

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

Page Top