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

スマホでどう見せる!?複数カラムテーブルのレイアウト
■ 店頭より得で、予約しやすいオンラインショップ。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE

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

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

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

image

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

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

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

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

004

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

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

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

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

002

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

裏技

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

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

009

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

■最新のiPhoneの購入・機種変更なら店頭より得で、予約しやすいオンラインショップ。
機種の頭金や使わないオプションパックをつけて年間何万円も損していませんか?
オンラインショップなら故障のサポートもしっかりしていて最低限の費用。待たされることもありません。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE
がお得です。