NOW LOADING... 0%

root inc

UIデザインがすごい!参考にしたいアプリ・ブラウザサービス5選!

今回はユーザーの実際の動きを参考にしたUIデザインやアニメーションをうまく使ったUIなど幅広く選びました。
rootメンバーが選ぶ参考にしたいアプリ、ブラウザサービスのUIデザインを5つ紹介します。

Must

Mustはこれから観たいもしく観ようと思っている映画やTVシリーズのコレクション及びレビュー専用のSNSです。保存した情報を元に、自分の好みと近い映画やTVシリーズをレコメンドしてくれる機能も備えています。

スマホのディスプレイが年々拡大し、画面操作において親指を伸ばしてタップしたり、両手で操作したりしなくてはいけないという場面がアプリを使う上で起こる中で、Mustは画面下半分でほとんどの操作が完結できるよう設計されています。

使い勝手もさることながらUIのモーションにもこだわりを感じます。例えば、ホーム画面で気になる映画のメインビジュアルをタッチすると、大きさが一回り小さくなり、手を離すと浮き上がるように拡大しながら前面に出てきます。この一連の動きによりユーザーは画像を押したことを認知できます。メインビジュアルが前面に出てくると、追随するように映画の詳細情報が画面下から出てきます。画面と画面の関係性やコンテンツの優先順位などをモーションによって上手く表現してします。小さなモーション1つ1つが、ユーザーの体験に大きな影響を与えているかもしれません。

Google lens

Google lensは、検索したい対象をカメラにかざすだけで、対象が何であるかを検索出来るアプリです。従来の検索エンジンを使うときのように「調査対象の言語化」が必要ありません。(iOSの場合はGoogleアプリに付属)。カメラに写る被写体を自動で認識、解析することで被写体の名前やそれに近い物を表示してくれます。

Google lensはカメラに写した被写体を認識、解析している時のUIに待ち時間を感じさせない工夫がされています。被写体を認識すると白い斑点が被写体近くに現れます。これは被写体に対してどれくらいの情報量を読み込んでいるのかを示しています。情報処理している時間の経過をあえてユーザー側に見せることで、自分が知りたいものが認識されていることをユーザー認知させています

Snapchat

ミレニアル世代を中心に人気を集めているメッセージ・チャットアプリ。
SNS機能メッセージ機能、写真・動画加工機能を持ち合わせています。大きな特徴としては作成したコンテンツ(スナップと呼ばれるもの)が指定した時間で消えることです。海外では企業のマーケティングやプロモーションツールとして注目されており、例えばマクドナルドでは、アルバイトの採用情報をミレニアル世代に効率的に届けるためSnapchatを活用しています。

SnapchatはあえてAppleやGoogleが提唱するデザインガイドラインに沿った画面設計を無視することで、ユーザーがアプリを使う上で一番求めている体験を一番最初にユーザーに提供しています。

 

例えば、画面を切り替える際、AppleやGoogleのデザインガイドラインに沿ったUIであればアイコンを置いたり階層メニューを設けて画面を切り替えるということをしますが、Snapchatでは画面を切り替える方法としてスワイプ操作多用されています。ユーザーは試行錯誤してアプリを利用し、徐々に使い方を理解していきます。

 
Snapchatのようなデザインガイドラインを無視したUIは最初、使いづらさや違和感をユーザーに与えるかもしれません。しかし、ユーザーに使い方を理解してもらい、アプリに慣れてもらうことさえできれば、デザインガイドラインに沿ったUIよりもスピーディーにユーザーの欲求に応えることができます。

時としてユーザーファーストなUIを作る上で、ガイドラインのような制約を一度取っ払って、考えることも重要なのかもしれません。

Pinterest

ss05-min

Pinterestはネット上のウェブサイトやPinterest上にある画像を集めることができる画像収集サービスです。おそらく多くの人が一度はDLしたことあるのではないでしょうか。


pin_nav
PinterestのUIは 作品を探す→ボードに保存までのフローがとてもシンプルに設計されています。
保存したい画像の上でロングタップするとナビが表示されます。
画像の上ならどこでもナビが表示され親指の位置に合わせてナビの表示位置も調整されるので手の利き手を問わないデザインになっています。


pin_select
また作品の表示切り替えもとてもスムーズです。
タップで作品表示、戻るときは指を下に向かってフリックすることで一つ前のページに戻れます。
こちらも手の利き手を問わないデザインになっています。ビヨンとなるページ遷移が面白いです。

アップデートのたびにUIが洗練されていっているので個人的にお気入りのアプリです。

Trello

ss04-min

ふせんを貼ったりはがしたりするような感覚でToDoやタスクの管理ができるアプリです。


trello_card
タスクが書かれたカードをロングタップすることでカードを持ち上げることができます。
カードをドラッグ&ドロップすることで簡単にタスクを移動することが可能です。
他のボードにもカードを移動することができますのでページ遷移をできるだけなくし、スムーズに管理ができるようになっています。


trello_board
ボードの並び替えも同様でボードをドラッグ&ドロップすることで順番を変えることができます。

斜めにするアニメーションを加えることでひょいっと持ち上げるような重さを感じれるUIが素晴らしいです。シンプルなデザインで使いやすいタスク管理アプリです。

ユーザーの行動や経験に合ったUIはユーザーにとって使い心地の良いUIになります。デザインを見ると同時にどんなユーザーがどんな流れで使うUIなのかを考えてみると新たな発見があるかもしれません。是非UIを意識してアプリを触ってみてくださいね。

Pocket

人気記事

お問い合わせ

新規事業立ち上げやWebサービスの改善でお困りの方は
お気軽にご相談ください。
課題に応じたデザイン手法をご提案させていただきます。

お問い合わせフォームへ