NEW OPEN!!

テクノロジとカルチャーのウェブメディア

  • ウェブ
  • カルチャー
  • スポット

Facebookの新アプリ“Paper”を、UIデザインの視点でレビューしてみる [GIFアニメあり]

  • 2014年2月18日
  • 田中 宏幸
image : Paper

image : Paper

Facebookの新しい公式アプリ、“Paper”が今年2月3日に公開されました。

まだ日本のiTunes App Storeではダウンロードできませんが、こちらの記事にある方法で日本でも今すぐダウンロードすることができます。

さっそく使ってみた感想をUIデザインの視点でまとめました。

すばらしいところ

Paperはすべての画面に、的確な“アニメーション効果”が作りこまれています。

例えばニュースの一覧。少し上に持ち上げる(スワイプする)と、ニュースの表示サイズも合わせて大きくなります。このまま上に持ち上げ続ければニュースをフルスクリーンで読めるようになるということが、的確なアニメーション効果によっておのずと分かります。

paper-1

image : Paper (GIF)

操作方法も直感的で、すぐに覚えることができます。よく見ると、現実にある物に似せた操作になっています。UIのデザイン自体はフラットですが、操作はスキューモーフィズム(現実の物に似せたデザイン)です。

最近のトレンドとして、フラットUIにスキューモーフィズムな操作性を取り入れるのがあるように思いますが、Paperはとてもモダンです。

例えば外部サイトへのリンクがある場合。リンクは“折り畳まれた新聞”のようになっていて、新聞を広げるかのように、リンクを“広げる”操作をしてリンク先を開きます。

もし写真を表示していたら、iPhoneを左右に傾けると写真の横の部分を見ることができます。iPhoneの向こう側に写真が置いてあるような演出です。

paper-2

image : Paper (GIF)

paper-3

image : Paper (GIF)

Paperには“セクション”という概念があります。

カテゴリのようなもので、Facebookがキュレーションするニュースを“Tech”や“Headline”という具合に分類分けしています。読者は自分の好きなセクションを登録しておくことで、そのセクションのニュースを読むことができます。

セクションの表現も現実に似せられています。書店で平積みされている雑誌から好きな雑誌を選んでカゴに入れるように、セクションを選んで登録できます。

paper-4

image : Paper (GIF)

以上のように、使い方が“すぐ伝わって”“すぐ覚えられる”ように工夫されているところが、Paperにはたくさんあります。

また操作方法には“暗黙のルール”があります。

“縦方向”のスクロールでモード切替、“横方向”のスクロールでコンテンツ切替というルールです。このルールがほとんどの画面で通用するため、はじめて見る画面でも安心して使えます。

ルールは仕組みです。シンプルで普遍的な仕組みがあれば、多機能になっても戸惑うことはありません。

もっと良くなりそうなところ

欠点という程ではないですが、もう少し改善の余地がありそうなポイントもあります。

ニュースの一覧画面です。

それはPaperのもっとも象徴的な画面です。しかしニュースの表示サイズが小さい分、可読性が悪くなっています。スクロールしながら文字を目で追うのが辛くなるサイズです。Facebookがニュース一覧画面を重要な画面と考えているなら、写真だけ見せる、もしくは文字を減らして文字サイズを大きくするなど、なんらかの改善ができそうです。

もうひとつ。

ニュース一覧画面の上半分には、“話題のニュース”が交互にフェードイン/フェードアウトしながら表示されます。ニュース一覧よりも話題のニュースのほうが気になるのですが(話題のニュースなので当然です)、気づいた時にはフェードアウトされて見逃したりします。

ここにひとつの矛盾があるように思います。

“話題のニュース”は面白いけれど見逃しやすく、“その他のニュース”は見逃すことはないけれど(比較的)面白くない、という矛盾です。Facebookが話題のニュースを見やすくさせたいと考えているなら、表示の仕方を考える必要がありそうです。

Paperはまだ公開されたばかりのアプリなので、これからブラッシュアップはされていくはずです。今後も期待ですね。

 

以上、UIデザインチームSensebahnの田中によるレビューでした。

もうほんとに惚れちゃうようなUIなので、ぜひ、興味のある方は試してみてください。

<日本でのダウンロード方法を説明した記事:Facebookが作った話題の新アプリ“Paper”を、日本でも今すぐ使う方法 [図解]>

Twitter Auto Publish Powered By : XYZScripts.com