いきなりですが、フィード画面は大きな画像で２カラムがベストだと思うのです。
何のことかというと、ソーシャルコマースサイトやイメージキュレーションサービスのフィード画面（ホーム画面）のUIの話です。
photo credit: Pink Sherbet Photography via photopin cc
イメージキュレーションサービスで最も有名なのは、Pinterestだと思います。日本ではまだあまり流行っている感じはありませんが、アメリカではTwitterよりも多くのトラフィックをパブリッシャーサイトにもたらしています。
Facebook, Pinterest, Twitter, and YouTube referrals up 52%+ in past year [REPORT]
他には日本発のSumallyやOrigami、アメリカでソーシャルコマースの成功事例としてよく名前が出てきて、またビッグネームが出資していることでも有名なFancyや、後発のLuvocracyなどこのマーケットには続々と新しいサービスが出てきています。
同じようなサービスが出てくると、ユーザーは本当に利用する価値のあるサービス以外は使わなくなります。私は個人的には、次のアクションに繋がるキュレーションサービスを使いたいです。
例えば、
- 欲しいと思った靴が買える
- 行きたいと思った場所までの航空券が買える
- 作りたいと思った料理のレシピが見れる
- 見たいと思った映画のチケットが予約できる
などなど次のアクションにシームレスに繋がるサービスを利用したいです。でもこれはかなりハードルが高いです。自社サービスだけでは完結しないので、ECサイトや旅行サイトとアライアンスを組むなど戦略的にスキームを構築する必要があります。さらにそうしたとしても、ユーザーが自由にアップロードすること（Pin itやWant等）をやめさせる訳にはいかないので、次のアクションできるもの、できないものが混ざった状態になることはさけられないです。
このTシャツいいなーと思っても、リンク先は商品を紹介しているブログで、その商品を購入するためには結局Googleで商品名を検索してECサイトへ行って購入しないと行けません。これはとてもめんどくさい。ECサイトにたどり着いても売り切れていたりすることもあります。
PinterestのRich PinやSumallyのオフィシャルストアなどで少しずつ次のアクションができるようになってきています。
で、長くなりましたが、それ以外で、数ある類似サービスの中でユーザーに選んでもらうために重要なのは、UXUIだと思うのです。「いかに心地よく、快適に、ストレスなく見たいものを見ることができるか」につきると思います。
中でも最も多く見られるであろうフィード（ホーム）画面のUXUIは非常に大事だと思う訳なのです。
そこで以下にPinterest、Sumally、Origami、Fancy、Luvocracyのフィード画面を比較してみたいと思います。スマートフォンアプリのみピックアップしています。
いきなり真打ち登場ですが、最も心地よくストレスなく使えるUXUIではないかと思います。PinterestはUXUI、インタラクションに徹底的にこだわって、何度もテストして、ユーザーに最も心地よい体験をしてもらえるよう日々工夫しているのでしょう。きっと。
Pinterestのフィードの画像は、スマホ画面内でごちゃつかない適度なマージンを設けた上で、最大限大きくしています。無駄な隙間がないです。そして２カラム。
画像は大きい方が良いというのは、やはり見ていて画像が大きい方が分かりやすいし、何の画像なのかスッと頭の中に入ってきます。「これは何の画像だろう」と考えなくて済むのです。そんなのタップして詳細画面を見ればいいじゃん、と思うかもしれませんが、スマホは移動しながらやちょっとした時間に見ることが多く、ぱっと見て何か分からないものを更に１タップして詳細まで見ようとは誰も思わないのです。直感的に何か分かることがスマホのUIでは非常に重要だと思います。
では、最も画像を大きく表示できる１カラムではなくなぜ２カラムなのか。
それは１カラムでは網羅性を担保できないからです。２カラムであればiPhone5s（上記のキャプチャ）の画面サイズで１画面にだいたい４つの画像が入ります。（見切れることは多々ありますが）
それに対して１カラムだと、下のSumallyでキャプチャでてきますが、見れて２つです。
フィードというのは主にフォローした人、つまり自分が「この人のセンスいいな」「この人が集めるイメージ見たいな」と思う人がキュレートしたものが流れる場所なので基本的には自分が好きそうな物が並びます。しかし、いくら趣味やセンスが近いといってもまったく同じではないし、何十人、何百人とフォローすると全然興味のないものが自分のフィードに流れてくることも多々あります。なので網羅性が必要なのです。フィードをだーっと流してみて、気になったものがあればそこで止まって画像をタップし詳細ページへ遷移するのです。
この「だーっと流して見て気になる物を見つける」という行為をする場合に、１カラムだと本当にやっかいです。見たい物を見つけるまでに下手したらものすごくたくさんスクロールしないといけません。
なので、「１画面でたくさんの画像が一度に見れる」と「それが何の画像なのかがぱっと見て分かる」という２つをちょうど満たすUIがPinterestのフィードの形だと思うのです。
ちなみに他のサービスのUIざざっとも見てみます。
Sumally
こちらは１カラム。見たい商品を探すのにたくさんスクロールしないといけまてん。流し見するフィードでここまでの画像の大きさは必要ないのではと思うわけなのです。
Origami
Origamiは左にユーザーアイコンが入るためその下にデットスペースができてしまっています。空白が多いなーという印象です。2013年は空白をうまく生かしたデザインが流行りましたが、スマホはPCと比較して圧倒的に画面スペースが狭いので、PCとは別物としてデザインする必要があると思うのです。無駄のないミニマルなデザインを考える必要があると思います。
Fancy
こちらは１カラムで隙間なくみっちり画像です。画像のインパクトが一番大きいですね。
Luvocracy
Luvocracyは２カラムと１カラムを交互に繰り返すという少し珍しいパターンです。１カラムと比較すると網羅性があるのですが、Luvocracyがなんだか見づらいと感じてしまうのは、画像が小さいからなのです。なぜ画像が小さくなってしまっているのかというと、アイテム一つのユニットサイズを固定にしてしまっているため、長方形の画像を長編合わせで縮小しており空いたスペースが空白となっているからです。なので画像の上下や左右に不自然なスペースがあり、それによってがたがたと見づらいUIになってしまっています。
おそらくフィードを綺麗に見せるためにアイテムのユニットサイズを統一していると思うのですが、それによって画像が縮小され不自然な空白が出来、がたがたに見えてしまうのはとてももったいない気がします。
全然関係ないですが、LuvocracyのCollection機能はいい感じです。自分でタイトルを決めてそれに合った商品をまとめてコレクションとして公開することができる機能です。
これはアウトドアで遊ぶときのあったら楽しいグッズのコレクションですね。好きな部屋のインテリアコレクションやおすすめのガジェットコレクションやパーティメイク用おすすめのコスメコレクションなど、色々なコレクションをつくることができると思うのでそんなのがたくさんあったらおもしろいなーと思うのです。
まとめ
フィード画面では、
画像はごちゃつかない程度にできるだけ大きくしつつ、２カラムで網羅性を担保する
というのがベスト！という個人的見解でした。
ちなみに僕はディレクターなので、デザイナーの方の意見とか頂けたらうれしいです。
最後まで読んで頂きありがとうございました。