スマホサイトの機能比較表はどうデザインするか?

モバイルの画面に収まりきらない横にも縦にも長い製品スペック比較表 

▲モバイルの画面に収まりきらない横にも縦にも長い製品スペック比較表

家電メーカーサイトなどに多く見られる製品の性能比較表。
項目の多い比較表を狭いモバイルの画面でどう見せるか?について考えてみました。
 
table要素で構成された表組のデザインを採用する際にはモバイルサイトでも成立するかどうかを先に検討するべきでしょう。
しかしそうは言ってもこのような機能比較表は都合上どうしても横に長く、項目で割って列挙されるのでモバイルサイトでは非常に難しい見せ方の一つとされています。
フリックで横スライドしても狭い画面だとわかりにくい図
指でフリックして横スライドするUIもJavaScriptなどゴリゴリに書けばできないこともないのですが「対応/非対応」の場所などは、何が「対応/非対応」かわからなくなる場合があります。そうです、画面が狭いからです。
(矢印アイコン http://yajidesign.com/

ユーザは何を調べたいのか?を考え直す

priority_elements.jpg

▲ユーザが天秤にかけやすい項目を調査する

冗長なスペック表を並べられても、すべてを見たいユーザは少ないはずです。

「自分の気になる性能はカメラの画素数です」
という人にはカメラ画素数だけで比較させたほうが、ユーザが調べたい欲求を解決させる近道になる場合もあります。

PCサイトの慣習を一旦捨て、ユーザ行動の本質を根本から考え直す

sort.jpg
例えばカメラの項目で使われる「○○万画素」というものは、通常生活で馴染みが薄い「画素」という単語に対してはその基準がいまいちつかめません。
このような数字が並べられてもユーザは戸惑うことがあります。
それであればモバイルサイトで横に冗長な表より、製品比較フィルター機能にしてしまったほうが目的が達成されやすい場合もあります。
つまり「カメラ画素数」が気になる人には、まずカメラ画素数の高い順にソートができ、「スクリーンサイズ」が気になる人はスクリーンサイズの高い順にソートし直す機能を提供したほうが、少なくとも横や縦に長い比較表より「ユーザの目的を達成しやすい」という意味では有効かもしれません。

現実的な実装はどうするか?

JSONなどで商品スペック情報を管理してPC版とスマホ版で共通して使い回すための図解

ここではJSONなどで、商品スペック情報を管理して、PC版の比較表とスマホ版での並び替え機能を共通して使い回すと運用もある程度楽になるかもしれません。 
ここでは簡単なデモサンプルをつくってみました。PCで見られている方はブラウザサイズを狭くしてみてください、スマホ用に切り替わります。
ブレイクポイントは横幅767pxでPC用とモバイル用に切り替えています。(内容は簡略化しています)
【テスト用のデモ】(若干挙動がおかしい部分はご容赦を)
【デモのスクリーンショット】
demo.jpg
 

製品のサジェストまで考える

狭い画面なりに比較項目に絞ってソートさせて機能比較ができたとして、もう少しユーザの欲求というものを割って考えてみます。

主に3つの特徴に分類してみました。 
・数値で比較できる要素(並び替えが可能)
・はいorいいえの要素(順位付けが不可能) 
・ビジュアルで判断される要素(順位付けが不可能)
user.jpg
色、外観のデザインを比較したい場合、比較そのものがユーザの好みによるのでこちらで順位付けができません。
よって上図のように、それぞれの特徴でユーザが比較したいカテゴリに分類して、短い表やビジュアルにまとめることも場合によっては検討しなくてはいけません。
「あなたにぴったりの製品をおすすめしますよ!」という意志が込められた製品比較表であっても良いでしょう。 
わかりにくい機能比較表は、購買検討しているユーザにとっては非常に残念な存在です。
比較表は決して「サジェスト」を主な目的としているわけではないにせよ、購入を悩んでいる顧客に「あなたにお似合いです」と言われたほうが顧客も嬉しいと思われるケースがあります。 
ただ機能比較表をつくりたいのであれば、ただ横に長く列挙するのではなく、「ユーザは何を知りたいのか?」の本質を考えてモバイルを前提にしたデザインをその都度考えることが大事です。 
モバイルサイトのデザインは制約があるがゆえ、ユーザが求めている本質を考えさせられる良い勉強になります。
今回の例が必ずしも正しいパターンとなるかはわかりませんが、レイアウトや技術で解決するデザインより、ユーザの欲求を知るということの方が先決かもしれません。

人のデザインを私たちはどう評価し学ぶべきか

画像:ユニクロの電車内広告

先日ユニクロの電車内中吊り広告や新聞広告のデザインが話題になりました。
文字だらけのレイアウト、赤をベース、黒と黄色という昔のスーパーのチラシ風のテイストで、「不快感しか感じられない」「センスを疑う」といった、どちらかというと批判的な意見のほうが目立ったようにも思えます。
またそんな声の主が、デザイン関係あるいはライターなど、私と近い業界にいる人の声が多かったことも気になりました。
さらにNAVERにまでまとめられたようです。
どうしたユニクロ!?ひどすぎる新聞広告に心配の声まで!まとめ
今回は広告デザインをどの視点から自分なりに評価するべきかを考えてみたいと思います。

デザインの先には必ずユーザがいる

広告をつくる仕事に携わる広告業界の人だけでなければクライアントでもなく、私たちがデザインしてつくるものには必ずユーザがいます。
電車内広告デザイン、Webデザイン、プロダクトデザイン、種類は違えどその先にユーザがいることに例外はありません。

もしもデザインを勉強している人だったら、「なぜこうなった?」をまず自分なりに考察するチカラを養うために考えてみたいことです。

「あんたはウチのお客さんが見えてるのか?」と言われて…

私は過去にデザインの事例や潮流などが紹介されている書籍を見ては、流行のデザインや基礎などそれなりに研究したつもりですが、そのような書籍のほとんどは「この広告デザインによって得た成功効果」というデータまでは載っていません。
つまりデザインの潮流を学習するだけでその先のユーザがどう行動したかを理解するのは難しい、ということです。
20年ほど前、私が駆け出しの頃に海外の事例を学んでクライアントに見せた自分のデザインに対し「あんたはウチのお客さんが見えてるのか?」と言われたことを思い出しました。
私は当時、東急線の窓上ポスター(車額とも言われていた)を売っていて、自分で電話営業して契約を決めクライアントと折衝してデザインを仕上げ印刷入稿、電鉄会社に納品ということを一人で全部やっていたので、クライアントのそういった声を聞けたのです。
当時の社内ポスターは規格によって色々な料金設定がありますが、私が売っていたのは1車両に1枚、250車両分に付けられていたハーフ(半分サイズ)ポスターで月額30万円。
路線図のとなりに掲載されるため注目度の高さと網棚に隠れないというメリットはレギュラーポスターと比べると有利な特徴はありますが、当時はバブル崩壊して間もない時期、中小零細にとって月額30万円の交通広告費は必死ものです。
クライアントの社長さんや院長さん、学長さんが顧客にどう響かせるかを一緒に考えたものでした。
私も携わった電車内広告で、あえて文字だけの広告を「仕掛け」たことはあります。
ただしそういう「仕掛け」の場合、いつまでもそのままということはせず掲載期間を区切って意匠替えをしたり、特別なイベントの時期だけ数週間のみ掲載することが多かったように記憶しています。
このユニクロの場合もそれなりの予算を投じて行っただろうし、それなりの「仕掛け」があったのかもしれません。
少なくともユーザに向けて、どうアプローチしたかったのかを学ぶことができると思います。

■デザインとは表面上の視覚ではなく背景にいる人の行動を予測して設計するもの

色やレイアウト、メタファなどは私たちで確認できる表面的な要素に対し、それを見たユーザの動向は私たちに見えにくい位置にあります。
このユーザ動向を背面的な要素としたら、背面的な要素に存在するユーザにどうアプローチしているのかを考えることがデザインの本当の評価につながるのだと私は思っています。
画像:デザインにおける第三者が評価しやすい領域と見えにくい領域
表面的要素を見て「不快感」と思う人は思うし、そう感じないユーザもいないとは限りません。
大事なことは、その不快感と感じないユーザがクライアントの事業とどう関係性を持っているかを考えることが大事で、自分の考えばかりをデザインに取り入れるべきではないということです。
少なくとも表面上得られるヒントから「なんでこんなデザインにしたんだろう?」を考えることも必要なトレーニングだと思っています。

自分の経験でしか感想は語れないから正しいかどうかなんてわからない

この業界を経験している多くの人、そのほとんどの経歴なんて10〜20年程度です。
自分ができるモノに対する評価とは、自分が過ごしてきた時間の中で得た経験の中から初めて評価できます。
「好き」とか「嫌い」とか「カッコいい」とか「ダサい」とか、その多くは自分の経験でしか得られなかったことと言えるでしょう。
もっと多くの年齢層か感受するシチュエーションを考えてみると私にはとても難しい話です、しかし考えることをやめてはいけないように思えます。
もう表面的にしか見えない評価、それはデザインの評価ではないと思うんです。
「人のデザインには何らかの因果性がある」ということをもっと人から学ぶとするか。と。