スマホでどう見せる!?複数カラムテーブルのレイアウト

スマホでどう見せる!?複数カラムテーブルのレイアウト

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

こんにちは。スマホ壊れiQOSを店に忘れた郎です。
4月1日で1人暮らしの要といえるスマホとiQOSを同時に失うという事件が発生しました。厄年ではありません。

複数カラムテーブルのレイアウトとは

複数カラムテーブルと書きましたが、はっきりいって3カラム以上は全部同じです。
スマホ表示には向いていません。複数カラムのテーブルとはこういうものです。

image

つまり、上の行と下の行になんらかの関係があるテーブル組みです。
上に項目名などのタイトルがあり、下に詳細があるのはとても見やすいレイアウトで一目で内容が理解できます。

ただそれはPCではの話です。

デバイスによる見え方の違い

画面が広い(特に横に)PCでは横に広がる複数カラムのレイアウトは表示に適しているといえます。
ただ時代の寵児であるスマホには適していません。実際にスマホで見るとこんな感じになります。

004

画面の横幅が狭いため幅がきゅっと凝縮されてしまい、かなり窮屈に見えます。
文字も小さく、領域確保のために余白も取れないので見づらいことこの上ありません。

ではスマホに適したレイアウトとは一体どんなものでしょうか。次章でその話をします。

スマホに適したレイアウト

スマホに適したレイアウトとは横方向よりも縦方向に長いことが挙げられます。
1カラムだったら美しくスマホ向きにレイアウトの変更ができます。

002

こんな感じです。あな美しや。
文字が大きく余白も取れるため大変見やすく、スマホっぽいですね。

裏技

ただ、やはりどうしても複数カラムテーブルにしなきゃいけない場合もあると思います。
そんな時は奥の手としてスライドという見せ方もあります。

画面全体をスライドさせるのではなく、その部分(行)だけをスライドさせることもできます。
こうすれば文字を大きくでき、余白もとることができます。

009

弱点としてはスライドさせるため常に全体を表示させることができなくなります。
それさえ気にしなければ使える技ですね。

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

この記事を書いた人
アバター
カオツ
コーディング戦隊・スパイク笹塚、人呼んで「カオツ」。アニメをこよなく愛す、元バンドマン。そのベビーフェイスで、社内の癒し系No1を欲しいがままにするド天然男。戦隊の中で一番若いが、リアクションは結構古目。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ