デザイン

デザイン

モバイルサイトでの「リストビュー」と「グリッドビュー」の使い分け方【レイアウトの決定に】

3,262 views

読了時間 : 約1分54秒

レイアウトの決定は、モバイルでは一段と難しくなります。デスクトップでは広い領域を利用できますが、モバイルでは限られた大きさしか使えません。ユーザは一度に少数のコンテンツしか見えず、残りを見るのにスクロールが必要です。

 

そうした事情を考慮した、モバイルでの最適なレイアウトとは一体何なのでしょう?

リストビューとグリッドビュー、どちらが適しているのでしょうか?この2つを比較しながら、検討してみましょう。

 

 

リストビューとグリッドビューの違い

リストビューは、単一のカラムに項目を並べます。主にテキストが使われ、画像はないか、あっても小さなアイコンやサムネイル程度です。

一方グリッドビューは、2つ以上のカラムに、画像とともに項目を並べます。スペースの大部分を画像が占めており、テキストは小さく表示され、長いものは途中で省略されることもあります。

 

 

リストビューは余計なスクロールを防ぐ

多くのデザイナーはグリッドビューを選びます。これは、グリッドビューが視覚的にユーザーに訴えかけるからです。ただしグリッドビューは、スクロールが増えるという欠点を持っています。項目を大きな画像で表示するため、一画面あたりの項目数が減少してしまうのです。

リストビューは余計なスクロールをなくします。画像が小さいため、同じ画面により多くの項目を表示できます。ユーザーはテキストを眺めて、どんな項目があるかを判別します。

 

 

リストビューで早とちりを防ぐ

グリッドビューの画像に刺激を受けたユーザーは、内容をよく確認しないまま項目を選択してしまうことがあります。これにより間違った場所にたどり着いたユーザーは、前の画面に戻り、ふたたび元の場所まで画面をスクロールさせなくてはなりません。

リストビューはこうした早とちりを防ぎます。テキストが多くの情報を提供し、ユーザーはそれを読んでから項目を選択します。これにより、選択の正確性が高まるのです。

 

 

グリッドビューは詳細がわかる

グリッドビューを使えば、ユーザーは項目の詳細まで把握できます。たとえばシャツを買おうとしているとき、ユーザーは特定の形やデザインをイメージしています。グリッドビューでは項目の詳細が把握しやすいため、それらを見ながら候補を絞り込めます。

 

 

まとめ

ユーザーがモバイルサイトを使うのは、主に外出している時です。そのため、素早くコンテンツを見つけられることが重要です。デスクトップではあまり気にしない部分でも、モバイルでは多くの違いをもたらします。両者の長所と短所を把握し、慎重に検討しましょう。

 

 

▼グリッドレイアウトのデザイン方法はこちらの記事をご参照ください。

CSSで作るグリッド・レイアウト再入門!基本事項と役立ちリソースまとめ

 

 

モバイルにおけるUIデザインはこちらも参考になりますよ。

デザイナーが今年参考にしたい、Web & モバイルの無料UIデザイン30個まとめ

 

 

 

※本記事はList vs. Grid View: When to Use Which on Mobileを翻訳・再構成したものです。

【コンビニでも使える!メルペイ初回利用1000円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:1000円分
※さらにメルペイスマート払で2000円分ポイント!
 友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

期間中の金・土限定でd払い利用で最大20%のdポイント還元中!
■エントリー期間:2020/2/29(土)23:59 まで
■キャンペーン期間:2020/2/24/(月)23:59 まで

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【Uber taxi初回利用2000円オフクーポン】
JP20gd6nv7

 

以下のリンクから『プロモーション コードを追加する』で「JP20gd6nv7」を入れてください。初回利用が2000円オフになります!
※プロモコードは日本国内でのみ利用可能

 

2000円オフで登録» »当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber

Uber

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
ins6je2v

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ