オシャレUIと新しい発想でFacebookをもっと面白く!『Gabi』 | CA Beat デザイナーブログ

CA Beat デザイナーブログ

CA Beatデザイナーがオシャレで使いやすい
注目の海外アプリを中心にレビューしています!


テーマ:

みなさま、こんにちは!
CA Beatデザイナーのニイヅマです。
忙しさにかまけて、久しぶりの投稿になってしまいました。。。
申し訳ありません!!!!!

実は最近、このブログに読者登録してくださる方も増えてきて
メッセージやコメントもちょくちょく頂けて、とっても喜んでいます♪w
ありがとうございます!(*´∀人)

*:;;;:*゚。+☆+。゚+*:;;;:*:;;;:*゚。+☆+。゚+*:;;;:*:;;;:*゚。+☆+。゚+*:;;;:**:;;;:*゚。+☆+。゚+*:;;;:*:;;;:*゚。+☆+。゚

今回レビューする「Gabi」はFacebookをランキング形式で楽しむ事が出来るアプリです。
「私の投稿した写真の中で、一番多くイイネがついたのはどれ?」とか
「友達が一番多くコメントした記事はどれ?」など、組み合わせによって
なんと100種類以上の質問をランキング形式で表示させることが出来ます。

ただただフィードを眺めるのに飽きた方、
人気のあるものだけをピックアップしてみたい方にオススメ!

では、デザインレビュー!させていただきます♪
___________________

アプリ名:Gabi
カテゴリ:ソーシャルネットワーキング
_______________________


1.100種類以上の質問から、迷わず目的の質問を選べる!

このアプリでは各項目の内容を選んでいくだけで自然と
気になる内容についてのランキングを作成してくれます。

 

 

この、いつ、どこで、だれが、なにをしたゲーム(小さい頃やりませんでした?)の
ような方法を使う事で、組み合わせ次第で色々な質問が用意されているという事も
分かりやすく、また「じゃあイイネじゃなくて、コメント数だとどうだろう?」と
次への展開もしやすくなります。

何よりも、100種類以上の質問をほぼ
スクロールなしで見れるというのが素晴らしい!


もし、これがリスト形式で質問がただバーッと並んでいたら
とてもじゃないけど、それを読む気はしないでしょう。


2.いまあなたが一番見たいものを大きく!


ランキング一覧のページは、3段のリスト形式になっています。

一番上をタップしている時は、こんな感じ↓


真ん中の列をタップするとこんな感じ↓

その時、自分が一番見たいものが大きくなって
テキストまではっきり見やすくなります。

リストごとの可変を使っているアプリは、あまり見ないですが
使い方によっては、アリですね♪


3.要素がいっぱい!でもなんでごちゃごちゃしないの?

 


このランキング詳細ページは、

・自分のアイコン
・自分のユーザーネーム
・写真タイトル
・写真
・イイネボタン
・コメントボタン
・ランキングの順位
・イイネ数、もしくはコメント数
・投稿日時
・イイネしてくれたユーザーのアイコン、もしくはコメント内容

という、多くの要素を表示しているにもかかわらず
スッキリとしていて、美しいUIに仕上がっています。

なぜでしょう?

それは要素の全てが計算して作られ、配置されているからだと感じました。

例えば写真は大きく表示させつつ、重なるタイトル部分には透過を使用して
テキストを読みやすくしていたり、イイネしてくれたユーザーの
アイコンやコメント内容の部分は、いくら数が増えてもページを圧迫しないよう、
スワイプで見れるようになっている点などが主なポイントです。

スワイプを使う場合はあえてアイコンなどの収まりを良くしない、
という事も分かりやすくするポイントですね。

4.色の統一感も重要!

Gabiではオレンジからブルーのグラデーションを多用しています。
ランキングのバーもこのように1~100までの間で色が変化しています。

  

リストのページも



質問を決めるページやボタンも同じく。



設定のページまで!



暖色と寒色の2色の組み合わせは、一歩間違うと
気持ちの悪い組み合わせになってしまいます。

しかし、微妙な色のバランスがとれれば、このように
美しく仕上げる事もでき、まは華やかさを足す事も出来ます。
アプリ内で、一貫して同じグラデーションを使う事で
統一感も出ていて、とても良いですね。


5.テキストの強弱で、装飾を極力減らす

GabiのUIの素晴らしさに、かなり影響していると思ったのが
フォントサイズです。



上の画像の下の方左側の「1」という数字と「21Comments」という文字は
フォントサイズにかなりの差があります。
このように強弱を付ける事で、メリハリが生まれ装飾をしなくても
要素ごとが分かりやすく、しかもスッキリとまとまります。

大きいものは大きく、小さいものは小さく。
差別化をする為に装飾を足す事で解決するのではなく、
逆に引き算をしてみると結果的に、綺麗にまとまったりするものですね。

とても参考になります。


まとめ

・極力装飾に頼らない引き算の上手いUI

・ややこしい事を簡単にする為のアイディア

・ある一定の色のルールを作って、ごちゃごちゃ感を防ぐ方法


などなど、今回紹介したGabiは触れば触る程、計算され考え抜かれた
完成度の高いアプリでした。

複雑な事を、複雑に見せない
ということは簡単ではありませんが、
そんな時こそデザイナーの腕の見せ所なんだとアプリを触っていて感じました。

マイナスポイントとしては、ランキングを消したい場合に
「長押し」「下フリック」のどちらでも消せるというのが
逆に分かりにくかった事です。ユーザビリティ向上の為に
そうしているのだとは思いますが、違う方法で同じ挙動というのは、
どちらが正しいのか分かりにくくユーザーの混乱を招く
ので、
極力、ひとつの動きに絞った方が良いと思いました。


アプリ全体の感想としては、過去に載せた写真のコメントを
見返すきっかけになったり、どんな投稿内容が人気なのか
一目で分かるので、とても面白いアプリだと思います!
(友達の中の、射手座の女の子だけをピックアップとかも出来ます。)

今回紹介しきれなかった機能もたくさんあるので
みなさん是非使ってみてくださいね♪

以上、お読みいただきありがとうございました!
では~♪チャオヽ(*´ω`*)


★宣伝★
CA BeatではTwitter、Facebookページの運営も行っております!
ブログの更新情報だけでなく、役立つスマホトピックニュースを
選りすぐって配信しております♪

ブログ右サイドバーからぜひフォロー、いいね!してくださいねヽ(´▽`)ノ


CA Beat デザイナーさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ

Amebaトピックス