一覧表をスマホで表示するにはどうすべきか

公開日:2017/02/14

この記事は、書かれてから 4 年以上経過しており、内容が古い可能性があります。

昨日はレスポンシブについて触れましたが、
その中で「スマホ対応するには、レスポンシブ対応だけではたりない」と書きました。

日付け入力のフォームをスマホ用にするとか、
ドロップダウンリストはなるべく避けてラジオボタンにするとか、
いろいろあると思うのですが、とくに考慮したいのは一覧画面のテーブル、表の表示です。

 

ウェブでテーブル、表の表示に一般的に用いられるのは Html の Table タグです。

横に6列、縦に10行、といった表示の仕方が得意なTableは、パソコンでの表示ではとくに不便はありませんが、
これをスマホにそのまま表示すると、とても見づらくなります。

スマホでの表示は縦長になることが多く、
パソコンでは横長で表示することが多いので、
これだけでレイアウトの調整が必要なことがわかります。

そのうえ、スマホは画面が小さいので、なおさらです。

一般的なTableでの表

 

それではTableは、スマホではどのように表示するように調整したらよいでしょうか。

パソコンでは一覧性を確保するために、列を横に並べて、1行ごとに情報をまとめつつ、
縦方向に、各列ごとの比較も容易にしています。

画面サイズに余裕のないスマホでは、以下の図のように、1行内の各列も縦に表示したほうがみやすそうです。

スマホでの一覧表の表示例

 

もしかするとこのように対処されているケースは少ないかもしれません。

この理由は、レスポンシブ対応に用いる共通プログラム、代表的なものですと Twitter Bootstrap など、が、このような仕様に対応していないためです。

しかし、実際にスマホ対応の業務システムにする際には、このことも考慮してシステムを実現する必要があると考えています。

このページの著者

イルカシステム(株)は、以下のような業務用ウェブシステムのご提案、受託開発、運用を行っております。

  1. 中小企業さま向けの社内向け営業支援、顧客管理、経営数値管理システム

    経営数値をリアルタイムで見える化し、目標達成度を常に把握することができ、顧客へのフォローもスムースになります

  2. 中小企業さま向けの受発注管理、請求入金管理、在庫管理

    御社特有の受発注業務、出荷処理をシステム化することで業容拡大への大きなお手伝いとなります

  3. 医療業界向けの業務改善システム

    ※医療業界向けに、臨床研究の無作為割付自動化のための自社サービス「 ムジンワリ 」をご提供しております。

  4. IoTシステムの開発

詳しくは ご提供サービス を参照してください。

お読みいただきありがとうございました

詳細画面は単に全情報を表示するだけのものではない

業務用ウェブシステムとレスポンシブ対応

こちらもおすすめ

システム化の相談はしてみたけれど...

中小企業のシステム導入に心強い補助金

お客様とのつながりを点数化し分析する

お客様との接点を記録することのメリット

顧客管理システムの目的は名簿作成ではない

顧客との接点を増やし売上をあげるシステム

お客様とのやりとりの記録のススメ

遠くのシステム会社が安い金額の提案をしてきたら?

システム会社に社内システムの保守を依頼するには

社内システムはできたあと、利用期間のほうが長い