▲モバイルの画面に収まりきらない横にも縦にも長い製品スペック比較表
家電メーカーサイトなどに多く見られる製品の性能比較表。
項目の多い比較表を狭いモバイルの画面でどう見せるか？について考えてみました。
table要素で構成された表組のデザインを採用する際にはモバイルサイトでも成立するかどうかを先に検討するべきでしょう。
しかしそうは言ってもこのような機能比較表は都合上どうしても横に長く、項目で割って列挙されるのでモバイルサイトでは非常に難しい見せ方の一つとされています。
指でフリックして横スライドするUIもJavaScriptなどゴリゴリに書けばできないこともないのですが「対応／非対応」の場所などは、何が「対応／非対応」かわからなくなる場合があります。そうです、画面が狭いからです。
ユーザは何を調べたいのか？を考え直す
▲ユーザが天秤にかけやすい項目を調査する
冗長なスペック表を並べられても、すべてを見たいユーザは少ないはずです。
「自分の気になる性能はカメラの画素数です」
という人にはカメラ画素数だけで比較させたほうが、ユーザが調べたい欲求を解決させる近道になる場合もあります。
PCサイトの慣習を一旦捨て、ユーザ行動の本質を根本から考え直す
例えばカメラの項目で使われる「○○万画素」というものは、通常生活で馴染みが薄い「画素」という単語に対してはその基準がいまいちつかめません。
このような数字が並べられてもユーザは戸惑うことがあります。
それであればモバイルサイトで横に冗長な表より、製品比較フィルター機能にしてしまったほうが目的が達成されやすい場合もあります。
つまり「カメラ画素数」が気になる人には、まずカメラ画素数の高い順にソートができ、「スクリーンサイズ」が気になる人はスクリーンサイズの高い順にソートし直す機能を提供したほうが、少なくとも横や縦に長い比較表より「ユーザの目的を達成しやすい」という意味では有効かもしれません。
現実的な実装はどうするか？
ここではJSONなどで、商品スペック情報を管理して、PC版の比較表とスマホ版での並び替え機能を共通して使い回すと運用もある程度楽になるかもしれません。
ここでは簡単なデモサンプルをつくってみました。PCで見られている方はブラウザサイズを狭くしてみてください、スマホ用に切り替わります。
ブレイクポイントは横幅767pxでPC用とモバイル用に切り替えています。（内容は簡略化しています）
【テスト用のデモ】（若干挙動がおかしい部分はご容赦を）
【デモのスクリーンショット】
製品のサジェストまで考える
狭い画面なりに比較項目に絞ってソートさせて機能比較ができたとして、もう少しユーザの欲求というものを割って考えてみます。
主に3つの特徴に分類してみました。
・数値で比較できる要素（並び替えが可能）
・はいorいいえの要素（順位付けが不可能）
・ビジュアルで判断される要素（順位付けが不可能）
色、外観のデザインを比較したい場合、比較そのものがユーザの好みによるのでこちらで順位付けができません。
よって上図のように、それぞれの特徴でユーザが比較したいカテゴリに分類して、短い表やビジュアルにまとめることも場合によっては検討しなくてはいけません。
「あなたにぴったりの製品をおすすめしますよ！」という意志が込められた製品比較表であっても良いでしょう。
わかりにくい機能比較表は、購買検討しているユーザにとっては非常に残念な存在です。
比較表は決して「サジェスト」を主な目的としているわけではないにせよ、購入を悩んでいる顧客に「あなたにお似合いです」と言われたほうが顧客も嬉しいと思われるケースがあります。
ただ機能比較表をつくりたいのであれば、ただ横に長く列挙するのではなく、「ユーザは何を知りたいのか？」の本質を考えてモバイルを前提にしたデザインをその都度考えることが大事です。
モバイルサイトのデザインは制約があるがゆえ、ユーザが求めている本質を考えさせられる良い勉強になります。
