2019年12月5日スマホサイトで横長のテーブルをどう扱うかPCサイトでよくみる横長のテーブルですが、同じ情報をスマホサイトに組込む場合、その限られた表示幅ゆえに見せ方を工夫する必要があります。(PCサイトによくある横長のテーブル)今回は弊社が構築したサイトの中から、複雑なテーブルをスマホ用に組み替えた変換例をご紹介します。項目名のみをページ上部に固定表示し、値を下スクロールで表示する。金融系サイトやWeb明細画面など、項目数が多く情報の簡略化が許されないサイトに有効。見出しと値の照らし合わせがしやすく、視認性が高い。内容にそってカラムを配置し直す必要があるため、実装面・運用面での難易度が高い。あらゆるテーブルに汎用的にルールを展開できるので、実装も容易でユーザーも規則性を理解しやすい。大きくなり、コンテンツボリュームが膨らみがち。情報をソートECサイトなどの商品詳細ページで有効。機能別でテーブルをソートし、ユーザーが見たい情報のみを表示する。特徴コンテンツボリュームを最小限し、見たい情報のみをスマートに表示できる。懸念点ユーザーのアクションが必須となる。見出しカラムのみを固定させ、はみ出したテーブルをスクロール形式で表示する。左カラムに見出しがある場合に有効。馴染みがなく、横スクロールの存在に気づきにくい。まとめ一昔前のイメージが強いテーブル表現ですが、膨大な情報を一覧配置する場合はまだまだ有効で、代替案も乏しいのが現状です。スマホ変換においては、すべてのテーブルに有効な変換方法は確立されていないため、最も難易度の高いレイアウトといっても過言ではありません。スマホサイトで情報過多のテーブルを扱う際は、表の組み換えや情報の簡略化が必須になります。以下のことに注意し、本来のテーブルの目的を壊さない表現方法を検討しましょう。必要な情報の絞り込み簡略化できる項目はあるか見出しが無くても値のみで情報が伝わるか※性別などの記載は、値のみでも意味が伝わるため見出しを省略することができます。見出しor値をアイコン化することは可能か日頃から表現のバリエーションをストックし、そのテーブル応じたベストな変換方法を提案できるようにしたいですね。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)検索:最近の投稿レスポンシブデザインのレイアウトパターンと実装方法レスポンシブ対応するためのCSSの書き方レスポンシブサイト用ブレイクポイント考察!時代に適するサイズとは?レスポンシブデザインがSEOに有利な理由レスポンシブデザインの確認が簡単に出来るChromeのデベロッパーツールの使い方レスポンシブ対応ページの簡単な作り方!導入部分を解説します。modernthemes.net。