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

2017年2月14日

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

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

 

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

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

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

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

一般的なTableでの表

一般的なTableでの表

 

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

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

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

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

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

 

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

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

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

 

お問い合わせ

本記事(一覧表をスマホで表示するにはどうすべきか)にかかわること、 中小企業様さま向けの社内向け業務ウェブシステムにかかわることなど ご相談、ご質問などがありましたら何なりとお問い合わせください。





captcha

この記事の著者

イルカシステム(株) イルカシステム株式会社

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

1.中小企業さま向けの社内向け業務ウェブシステム(営業支援、顧客管理、受注管理、請求入金管理、在庫管理、経営数値管理など)

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

※業務ウェブシステムの開発を効率化するための自社サービス「イルカベーカリー」をご提供しております。
※医療業界向けに、臨床研究の無作為割付自動化のための自社サービス「ムジンワリ」をご提供しております。

お問合せはお気軽に、こちらからどうぞ! → イルカシステム株式会社へ問合せ

著者:イルカシステム株式会社