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

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

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

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

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

image

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

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

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

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

004

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

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

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

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

002

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

裏技

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

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

009

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

あなたにおすすめ

横画面にしてビックリ! 縦横でデザインが異なるアプリ... こんにちは。M.Sです。 先日、初めて高尾山を訪れました。山頂で食べたお弁当は、日ごろ会社で食べるお弁当の味より、100倍美味しく感じました。やっぱり、自然の中で食べると美味しさが増しますね。 カロリー消費、足の筋肉を鍛えるのにも...
マルチクライアント対応でレスポンシブのHTMLメール作成ツール... HTMLメールのコーディングはとても大変! メールクライアントによってレンダリングは全然違うので、コツがたーくさんあります。 20年前の不思議なHTMLタグも書かないといけないですし。 英語出来る方が下記のPDFを読んだら、コーディング...
スマートフォン対応しないとGoogle検索で順位が下がる?【対策と対応方法】... こんにちは。bitwave編集部です。今回は編集部特別編として「スマートフォン対応しないとGoogle検索で順位が下がる?【対策と対応方法】」をお送りします。 はじめに もうご承知の方も多いと思いますが、Googleは「4月21日より、...
ドコモMNP引き止めポイント|151に電話でもらえたら機種変更がお得に... 世の中、知っている人だけが得をするなんてことは日常茶飯事にあるもの。 つまり知らない人だけが損をしているのです。 スマホの世界にも、そんな知っている人だけが得をすることがあり、ドコモのいわゆる「MNP引き止めポイント」もその1つ...