グリッドビューはEC系のアプリでよく使われる手法ですが、これには何か理由があるのでしょうか？ シンプルなリストビューよりグリッドビューの方が成果が上がるのは、どのような場合でしょうか？ この記事では、グリッドビューについて細かく見ていきつつ、双方の問いに対しての答えも探っていきたいと思います。
グリッドビューとは
グリッドビューとは、標準のリストビューに代わる、コンテンツの表示手法です。グリッドビューは水平方向と垂直方向の両方に、２つ以上のセルを配列することで成立します。
グリッドリストは垂直、水平の両方向に配列されたセルの繰り返しで構成されます
タイルの中身
グリッドビューは多くの情報を入れるように作られておらず、多くの場合ユーザーが目にするのは商品のイメージや名前、価格のみです。
上記はグリッドのセルとタイルの一例です。写真はセルの大半を占めており、文字は極力折り返さなくてもいいように短くします
グリッドビューにおける閲覧傾向
グリッドビューではユーザーが読み飛ばしやすくなるので、似たようなデータを見分けやすくすることができます。ユーザーは各グリッドのセルを均等に閲覧する傾向にあります。つまり、ユーザーは順序を気にせず、連続してコンテンツを閲覧することができるのです。
画像をメインにすることによってユーザーは飛ばして読むことができます
下記の「ゲイズプロット」分析では、ソファーのECサイトに訪れたユーザーがどこを閲覧しているかがわかります。
水色の丸は凝視している点を表し、より大きな丸ほど閲覧時間が長いことを示します。
出典：nngroup
この画像から言えることはたったひとつ、言わずもがな、一番見て欲しいものはファーストビューに表示すべきということです。ユーザーはそれ以下も閲覧しはしますが、ファーストビューほどではありません。
ここでもう一つ興味深い点としては、人は商品のみの画像よりも、人と一緒に写っている商品の画像を注視する傾向にあります。
グリッドビュー内で、人が座っているソファの画像は、ソファのみの画像よりも人の注意をひきつけます（出典：Fact-finder）
グリッドビューにおける意思決定
ユーザーは大抵の場合、商品を選択する際に画像を頼りにします。似たような商品を見かけで判断する場合、グリッドビューレイアウトは最適です。
例えば、ユーザーが靴を購入したい場合、特定の種類を念頭において探します。ユーザーは靴を検索して、簡単に探している特定の詳細のものの目星をつけることができます。
グリッドビューはより視覚に訴えかけます（出典：MR Porter）
グリッドの恩恵を最も受けるのは画像表示です。画像は文章などで説明できない雰囲気を伝えることができます。もしユーザーが低品質な商品画像を見れば、購入意欲は薄れてしまうでしょう。それゆえ、写真を掲載する際には、適切な画質と大きさであるか、そして商品の魅力が余すところなく含まれているか確認する必要があります。
出典：Material Design
スクロールする方向
一般的にグリッドビューは縦のスクロールのみできるようになっています。縦スクロールがスタンダードとなっており、ユーザーもそれに慣れてしまっているので、横のスクロールを使用したグリッドビューは推奨されません。
スクロールの初期位置では画面の端のグリッドのタイルを敢えて途切れるようにすると、スクロールする方向を示すことができます。
左：初期スクロール位置で画面の下端にグリッドのタイルが沿ってしまうと、下部にさらなるコンテンツがあることが示せません
グリッドの画像の大きさ
ユーザーはリストにある商品の見分けをつけたいので、グリッドビューの画像は出来る限り大きい方が好ましいです。ユーザーは個別の商品ページとリストを行ったり来たりするよりも、一つの長い商品ページをスクロールして選べたほうがよいと考えます。
グリッドレイアウトを作成する際には、商品を認識するのに十分な画像のサイズであり且つ、一度に複数の商品が見れるような適切なサイズを探るべきです。
大抵のユーザーは一度に４〜６つ程度の商品しか見ません
グリッドビュー vs リストビュー
モバイルで商品を陳列する際、何を基準にレイアウトを選べばよいのでしょうか？ リストビュー、またはグリッドビュー、どちらがより最適なのでしょうか？ この判断はユーザーの商品の探しやすさに大きく影響します。
グリッドビューとリストビューは掲載するデータの種類によって、異なる役割を果たします。グリッドビューは文字よりも画像を優先し、リストビューは画像より文字を優先させるからです。
グリッドビューとリストビュー（出典：MaterialUp）
スクリーンの大きさに制限があるモバイルでは、一度に閲覧できるコンテンツが限られ、スクロールを強いられます。
グリッドビューはより長いページとなるので、ユーザーのスクロール量は増えます。下記の例は、リストビューとグリッドビューのスクロール量の違いです。
ワンスクリーンの範囲を赤線で示しています（出典：nngroup）
どちらの表示方法にするか悩むとき、ポイントとなるのは「ユーザーが商品を選ぶにはどれくらいの情報が必要なのか？」ということです。
基本に立ち返りましょう。「コンテンツは王様」なのです。その商品がどんな仕様かによって変わってきますので、表示するコンテンツの種類に合わせてレイアウトを考えましょう。
家電などの場合
モデル番号、スペック、そしてユーザーの評価などが選定の過程で重要な要素となってきますので、詳細を記載できるリストビューのほうが向いています。
iOSのWalmartアプリ
衣服などの場合
商品を選ぶにあたって、それほど商品情報は必要ありませんので、グリッドビューを選ぶほうが良いでしょう。
出典：MR Porter
もし自分の店にとってどちらのレイアウトが良いのが分からなければ、あとはA/Bテストをするなどをして、どちらの結果が良かったかコンバージョンを見て判断するしか無いでしょう。
まとめ
・レイアウトの一覧性が高く、最後まで見る価値があると判断すれば、ユーザーは長いページでもスクロールしてくれます。
・百聞は一見にしかず。グリッドビューを使用する際には、高品質の画像が必要不可欠です。またスクロールする度に、まだ他の商品画像があることを見せるように心がけましょう。
・リストビューとグリッドビューのどちらかを選択する際は、単純に「詳細を見て判断するものはリスト」、「写真を見て判断するものはグリッド」です。どちらを使用するかの最終決定は、ユーザーが何に一番価値を置いているのかを考え、ユーザーの足並みに揃えましょう。
・・・
ユーザーは商品を選ぶ際に役立つ情報を見たいのですから、購入の決め手となる情報を見やすくするレイアウトを選ぶようにしましょう。
