スマホアプリを
ビジネスに活かすブログ

アプリUI スマホアプリ制作 スマホアプリ開発
2015年12月21日
  • このエントリーをはてなブックマークに追加

記事配信系アプリにみる”今”使いやすいアプリUIについて考える

記事配信アプリ

使いやすいアプリUIとはどのようなものでしょうか。

2015年12月現在においてよく使われているアプリUIと1年前や1年後におけるそれは違っているでしょう。
それはOSが規定するデザイン方針の変化、スマホユーザーのアプリ利用の成熟度、そして何よりどんなジャンルにもある「流行」と「飽き」というものが大きく影響しています。
これらの変化によって「使いやすい」と感じるUIも年々変化していると言えるでしょう。

ということで今回はニュースアプリ、キュレーションアプリのような記事配信系のアプリに注目して“今”使いやすいアプリUIについて考えてみたいと思います。

最近のニュースアプリ、キュレーションアプリのUIは…

SmartNews
出典:SmartNews

最近の記事配信系アプリはもっぱらSmartNewsやグノシーのようなUIです。
上部にスクロールできるカテゴリメニューが設置され、カテゴリメニューをタップするか画面自体を左右にスワイプすることで画面遷移させるものです。
特に記事配信系に絞るとほぼこの形をベースに作られている気がします。

Yahoo!ニュース、LINE NEWS、NAVERまとめ、NewsPicks、4meee!、Presso など挙げるときりがないほど多くの有名アプリがこのUIを採用しています。
SmartNews風メニューについて検証する前に逆に上記アプリとは異なるUIを採用しているアプリをいくつか紹介したいと思います。

独自UI採用アプリ

Siori

Sioriアプリ
出典:Siori

Wantedlyが出しているキュレーションアプリです。
画像の見せ方に工夫がありスタイリッシュでかなり独自のUI/UXとなっています。

Antena

Antenaアプリ
出典:Antena

雑誌感覚でコンテンツを楽しめるキュレーションマガジンのアプリです。
最近大幅にUIをリニューアルして、以前設置されていたハンバーガーアイコンによるドロワーメニューをなくしタブUIが採用されていますが、Antenaの特徴である画像で魅せるフィードや凝ったUIはとてもスタイリッシュです。

ハンバーガーアイコンは本当にダメなのか

ここでハンバーガーアイコンによるドロワーメニューについて少し触れておきたいと思います。
かつてはFacebook風メニューと言われたドロワーメニューも最近はだいぶ見なくなりましたが、Google系のアプリではたいてい使われています。これはGoogleの提唱するマテリアルデザインで「Navigation drawer」として標準UIとなっているためです。
ちなみにタブUIに変更したFacebookアプリにもドロワーメニューは今も残っています。
右上のハンバーガーアイコンをタップするとFacebookメッセンジャー用のユーザを検索するためのドロワーメニューが設置されています。
これは設置するコンテンツ的にドロワーメニューが向いているという判断だったのではないでしょうか。FacebookメッセンジャーをFacebookアプリと一緒によく使うユーザにとってはとても便利な場所に設置されていると思います。そしてメッセンジャーを使わないユーザにとっては特に邪魔にならない場所にありますし、たとえこのハンバーガーアイコンに気づかなかったとしてもタブにメッセンジャーアプリが起動するものが設置されているのでさほど困りはしないでしょう。
Facebookアプリにとってこのハンバーガーアイコンは、どうしても押してもらって中をみてもらいたいものではなく、特定の機能を使うユーザにとって知っていると便利な導線になるというものなのです。

Facebook
出典:Facebook

ハンバーガーアイコンのデメリットとしてよく挙げられるのは、クリックすると多くのコンテンツが隠れていることが多いのにアイコンタップ前に何ができるのかわからない、そもそも気づかないなどです。
隠れているコンテンツが「設定」であったり、「カテゴリ一覧」であったりとアプリによって様々である点も「何ができるのかわからない」という感情を引き起こす一つの要因であると考えられます。
また、三本線のアイコンがそこまで一般的ではなくまだまだアプリ独自のものという感じがあり、同じように三本線で表される「並び替え」アイコンもあまり認知されていない気がします。ただ、Appleの電話帳のよく使う項目やSafariブックマークの並び替えアイコンとして使われているのでAppleの標準アイコンではあるようですが。
どちらも「リスト」を抽象化したアイコンだと思いますが、抽象化しすぎてるのかイメージが沸かず、アクションに結びつききにくくなっているという印象です。
ただ、ドロワーメニューが標準のAndroidユーザにとってはデメリットに挙げた点もデメリットではないことが多いかもしれませんし、1年後にはその認知度も上がり今より一般的になっているかもしれません。

iPhone並び替え
出典:SoftBank

しかし、ハンバーガーアイコンを採用した結果、ドロワーメニュー内コンテンツへのアクセス数が激減し、後にタブUIへ移行するアプリが多かったのは事実です。
変更したアプリの中には70%もアクセス率が上がったというものもあるようです。
ドロワーメニューを使う場合はどんなコンテンツを設置するのかよく考える必要があるでしょう。

これらを踏まえた上でハンバーガーアイコンを採用する場合はどのような表示にするかもよく検討しましょう。Facebookアプリもただの三本線ではないように文字やアイコンが付随している方がいいのかもしれません。
アイコンのみ、文字付き、枠付きなどでのA/Bテストによると、「文字で表現し、枠線で囲うデザインが一番良い」という結果が出ています。直感的でない三本線アイコンはやはり行動を躊躇させるということでしょうか。
ハンバーガーメニューのデザインでクリック率は違う

SmartNews、グノシー風UIが流行っている理由

話を元に戻すとそもそもドロワーメニューとSmartNewsのような横スワイプ型メニューの決定的な違いは何でしょうか。

横スワイプ型は上部タブメニューが常に見えている事により1アクション少なくコンテンツに遷移できるというのは一つ言えると思います。横スワイプによる切り替え操作が頻繁になり各カテゴリ画面へのアクセス率も上がりやすいでしょう。
その他には、横スワイプ型メニューのアプリを他アプリで使ったことがあれば横スワイプ型UI=画面スワイプで左右に遷移できるという共通認識が標準となりつつある点であったり、横スワイプを知らなくても上部タブメニューのスクロール&タップによって同じように画面遷移が可能なので、どちらか一方の遷移方法しか知らないユーザーがいたとしても使いにくいとされる事はない気がします。

また、横スワイプメニューとドロワメニューを考えたときに無意識の中でユーザには下図のように見えているのではないでしょうか。
見えてないけど見えている部分が横スワイプ型メニューの強みだと言えるかもしれません。

smartnews
出典:SmartNewsSmartNews

yahoo
出典:Yahoo!ニュースYahoo!ニュース

上記のYahoo!ニュースアプリは横スワイプ型メニューを採用していますが、ハンバーガーアイコンも設置していて、実はタップすると出現するのはドロワーメニューではありません。画面下から全画面を覆うようにメニューが出現します。最近はこのタイプのアプリも多く見る気がします。また、これ以外にも上から画面が出現したりするアプリもあったりとハンバーガーアイコンは押したらどんなコンテンツが現れるかわからないだけでなく、どんな出方をするかもアプリによって様々な点も認知されにくい要因かもしれません。
つまり、両者の違いは見えてない部分が想像しやすいかしにくいかということです。

まとめ

記事配信系アプリもそうですが、アプリ内での回遊率を高めたい場合、ジャンル問わず目的が共通のアプリをたくさん見て、触ってみるのが一番勉強になります。
例えば最近流行ってきている音楽ストリーミング系アプリであったり、メルカリが爆走中と話題のフリマ系アプリ、ZOZOTOWNも大幅リニューアルしたファッション系アプリなど様々なジャンルのアプリを触って、使いやすい点、使いにくい点を考察してみるのも良いでしょう。
ターゲット層が絞られている場合は対象ターゲットのITリテラシー度合い、スマホ操作の成熟度なども影響しますが、幅広い層に向けたアプリであればわかりやすさ、シンプルさが何より優先されます。
流行っている=使いやすいUIとは限りません。
プロモーション力やサービス内容が支持されているケースもありますし、逆に認知度はそこまで無くても優れたUIのアプリもたくさんあります。
また冒頭でも述べたように流行と飽きによりアプリUIというのは常に変化していきます。
リリース後もアクセス分析、レビューなどを参考にUI検討を継続するようにしましょう。

2016年は一体どんなUIが流行るのでしょうか。

TOP