場面に合ったモバイルUIデザインを!リストビューとグリッドビューの違いとは?

anthony

anthonyはUX Movementの執筆者、チーフエディターです。素敵なWeb体験をこよなく愛し、ユーザのために日々奮闘しています。

この記事はUX Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。

List vs. Grid View: When to Use Which on Mobile

モバイル端末でコンテンツのレイアウトをどうするかというのは意外と厄介な課題です。デスクトップは広々とした画面がありますが、モバイルでは限られたスペースしかありません。ユーザーはモバイル端末を使う時、一度にコンテンツのわずかな一部分だけしか見られず、それ以上見るにはスクロールする必要があります。

結局、モバイル端末で最も効果的なレイアウトとは何か悩むことになるでしょう。リストビューとグリッドビュー、どちらを使うべきでしょうか。ユーザーがいかに早く簡単に情報を見つけられるかは、この決定で変わってくるかもしれません。

リストビューか、グリッドビューか

リストビューとは、コンテンツを一列に並べて表示したものです。文字が中心で画像はなく、もしあったとしても、文字の横に小さなアイコンやサムネールといった小さなもので、大きい画像の表示には向いていません。なので、ユーザーは文字を読んでコンテンツを選択することになります。

一方グリッドビューは、複数列で画像とともにコンテンツを表示します。画面のほとんどを画像が占め、文字情報はできるだけ短く用事されます。こちらでは、ユーザーは画像を見てコンテンツを選択することになります。では、それぞれのメリット、デメリットは何なのでしょうか?

list-vs-grid (1)

リストビューはスクロールの手間を軽減する

多くのデザイナーは、目を引きやすいグリッドビューを使います。しかしグリッドビューは、スクロールの手間を増やしてしまうという問題があります。

グリッドビューは画像を含むため、その分ページが長くなってしまいます。ユーザーが全ての項目を見るのに何度もスクロールすることになり、指への負担となります。 

リストビューのメリットは、ページを短くしてスクロールの手間を減らすところです。画像がないため、一画面により多くの項目を表示することができるのです。また、同じ画面上に副項目を追加するアコーディオン型メニューを作ることもできます。ユーザーは文字に目を通すことで、欲しい情報を見つけられます。

名称未設定7

リストビューは落ち着いて選択しやすい

グリッドビューの問題点は、スクロールの手間だけでなく、ユーザーに選択を早まらせがちだということもあります。ユーザーは画像に刺激され、見た目で気に入った項目を選択してしまいがちです。

このため、グリッドビューはユーザーが求めていなかったセクションに誘導してしまうことも多くあります。求めていた内容と違った場合、ユーザーは元の選択画面に戻ってさらにスクロールしなければなりません。画像がたくさんあると、ユーザーは気が散りやすくなり、惑わされてしまいます。

リストビューは、ユーザーのこうした短絡的な選択を防ぎます。文字は正確で十分な情報を与えてくれるため、実際にユーザーが欲しているコンテンツを見つけやすくなります。ユーザーは全項目を読んでベストな選択ができるのです。 

名称未設定8

グリッドビューは具体的なものの選択をしやすい

グリッドビューは、見た目でのアピール以外にも、具体的なものの選択に向いています。例えば、ユーザーがシャツを買う場合はすでに頭の中に具体的なイメージがあります。ユーザーが全体のコンテンツからカテゴリーにまでたどり着いた時、初めてグリッドビューが効果的になるのです。

「洋服」という大きなカテゴリーがグリッドビュー表示だと、シャツ以外の洋服の画像も含まれてしまうので、シャツを探しているうちに気が散ってしまいます。ユーザーは、自分に関係のない画像をいくつもスクロールしていかなければなりません。

しかし、ユーザーが探している「シャツ」カテゴリーにたどり着きさえすれば、画像はもっとユーザーの興味と関連性が高いものになります。グリッドビューで表示されていれば、シャツの画像に目を通して、自分の欲しい具体的な商品を簡単に見つけやすくなります。

名称未設定9

最後に

モバイル端末でサイトを見ている時、大抵のユーザーは移動中で、あまり時間もありません。欲しいコンテンツはすぐに見つけられる必要があります。なので、レイアウトの決定がその鍵になるのです。

デスクトップ用のレイアウトはもっと融通が利きますが、モバイルではこの決定が重要です。より少ない手間でより多くのコンテンツが見られるビューを選択することが成功への道です。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて