スマートフォン最適化 ～表組み表現～
スマートフォンに対応する場合、お客さんの要望も含めてもっとも苦慮するのが表組みです。
未だ試行錯誤の中ですが、Webはトライアンドエラーです。
スマートフォンの表示領域はＰＣに比べて狭いので、表内容によって、表現方法を模索する必要があります。
お困りの方は是非ご相談ください！
試行錯誤の先に正解が！
私が手がている大学など学術系のWebサイトでは入試要項など表組みでの情報提供が多く、見やすさも重視されますので、常に大きな課題なります。
スマートフォンの場合、パソコンに比べると画面も表示エリアも小さく、特に横幅の長い表組みの場合、物理的に難しい状況になります。
そんな状況でも少しでも最適な方法を探そうと試行錯誤した方法をご紹介します。
横スクロールタイプ
～表組みをそのまま表現するシンプルな方法～
表組みという形を維持しながら、スマートフォンの特徴である縦横スクロールのし易さを活用した方法です。
メリット
どんなに横幅の長い表組みでも横スクロールを活用することによって、極端に文字を小さくすることなく、現実的な閲覧性を確保できます。
操作性の面でもスワイプ（指を横にスライドさせる）操作で横スクール出来ますので、スマートフォンの特性を生かした対応でなります。
スクロール時は表組みのみがスクロールされ、他の表前後のテキスト情報などはスクロールされないように配慮します。
デメリット
表組み以外は横スクロールを制限しているため、表組みの際に「横スクール可能」という表現（ユーザビリティ）に苦慮します。
透過で矢印を表示する方法を多様していますが、透過であっても情報自体が見難くなり、本末転倒な課題になってしまいます。
その他に表の上下にスクロール可能という一文やアイコンを表示する方法も試しましたが、視認性が悪い場合もあり、ユーザーへの誘導力という点で懸念点があります。
リスト形式タイプ
～表組みに拘らず、スマートフォンに最適化をめざす方法～
そもそも情報の閲覧性を向上させることが目的ですから、表組みに拘る必要はない。という発想から模索した方法です。
しかし、レスポンシブWebデザインを採用する場合、パソコン版の表組みから抽出して、リスト形式で表示させるロジックは表組みによって検討する必要があります。
メリット
リスト形式の表記にすることで、表組みを固辞するよりも格段に閲覧性が向上すると感じています。
表組み表現に拘った場合、罫線と文字の余白など見やすさの向上と枠内に収める必要性が相反する場合が多くあります。
リスト形式を採用した場合は表組みの制約よりもかなり自由度の高い閲覧性向上の施策が図れると思います。