🔥UIUXデザイン学習者が感動したプロダクト＆50以上のプロダクト分析より得たデザイン知見

2023年12月23日 17:41

ポートフォリオを作り、キャリアの棚卸しを行い、転職活動を始めたわけですが、その間もUIデザインのスキル向上を続けておりました。

具体的には有名プロダクトをダウンロードして使用し、UXを実現するためにどのようなUIが使われているか、どのようなデザインなのかといったUIUX分析を行いました。その中で、こんなUIあるの？とか、これを実現するのにこういうデザインにしたのかー‼︎と感動したプロダクトやデザインの知見がいくつかあったのでまとめてみようと思います。

感動したプロダクトランキング

これはプロダクトがどうのこうのではなく、私がプロダクトを使ってみて感動したランキングという自由奔放なランキングです。そこんとこ、ご了承ください。

1位　asana

1番心が踊ったのは、・・・
asanaの使い始めるまでのチュートリアル画面‼︎‼︎‼︎✨

使い方を説明する画面にて、左側のプロジェクト名を入れてねーというところに文字を入力すると、なんと右側にリアルタイムで反映されるんです。

え、そんなことできるの？天才じゃない？となりました。

なんたって、こうやって使うんだーがかなりイメージしやすくなったからです。
文字だけのTooltipsを活用する方法は把握してましたが、リアルタイム表示は初めての体験でした。すごいぞ、asana！

2位　Uber Eats

Uberはなんたって、シンプル‼︎シンプルだけど、考えられまくっているデザインに心揺さぶられました。

例えば、Uberは基本オーバーレイで画面が出てきます。下からニョキっと出て、違うってなったら下にすんっとすると画面が閉じます。

これは横の動きより縦の動きの方が動かしやすいのか⁇という仮説を立て、Woltやmenuのアプリも見てみました。これら2つは横の動きを採用していて、横でも問題ないけど確かに下すんっの方が早くできる気がしてます。（個人の感覚にもよりますが）

『いろんな店舗を見て、食べたいものを注文してもらう』という体験を、いかに負荷なく体験してもらえるか、を考え抜いたインターフェースだなと思いました。

他にも、小さなこだわりを見つけました。
ボタンに白背景を敷いて、ここがボタンだぞというのをわかりやすくしていたのですが、なんと加えてシャドウ入り‼︎‼︎

いろんな画面を見ていて、背景が白だと、シャドウが入っていることに気づきますが、背景が白じゃないとシャドウに気づかないくらいの色加減のシャドウでした。

ボタンの下に何色の写真がくるかわからないからこそ（ガイドラインで規定があるのかもしれないけど）、何色が来てもボタンだとわかるデザイン。

小さなこだわり、素敵です。

3位　Google Map

3位に何を選ぶか悩みましたが、じんわり感動したアプリ！Google Mapを紹介します。

いつも愛用しているGoogleマップ。愛用だけを見てると、どういう点で好きなのか言えないので、今回はAppleの純正MAPアプリを比べて、考えてみました。

比較した結果、GoogleはGoogle検索と連携して、”移動”だけでなく、”探す”ことに特化したアプリだなと、感動しました。

例えば、”コーヒー”と検索すると、AppleのMAPは、地点だけピンが止められます。それがGoogleだと、Googleに登録されている店の口コミ評価の星が表示されます。一覧画面の時点で、ある程度比較検討ができるのです。

検索後、クリックして検討するか、クリックせずともある程度比較できるのか。ほんのちょっとの差ですが、一覧に口コミ評価数を掲載するUI良いなと思いました。

あともう一つ。お店を選んでタップすると、タップした箇所が目立つようになります。そこにも差がありました。

AppleのMAPは、タップすると色は変わらず、ピンのサイズが大きくなります。ニョキって。
それに比べて、Google Mapは選択地点が赤色のピンになります。

強調させる方法は複数あるけど、見慣れているからか、赤の方がわかりやすかったです。
サイズだけ変わるUIだと、現時点の近くに複数ピンが立っているときは、オレンジピンが多い中でサイズが大きいオレンジピンを探せ！という状態になるので、カラーが変わるUIは目立っていいなと感じました。

スクショを貼ると、結局メリクリ仕様になるので、今回は貼らずにいきますね。

そんなこんなで、いろんなプロダクトを触る中で、これいいね‼︎と思うポイントにたくさん出会いましたし、プロダクトを通じてどう体験を提供するかという観点に改めて興味を感じました。今まで使っているアプリだとしても、デザインの勉強を始めてから今まで気づかなかったことに気づけるので、楽しいです。

まだ解明できていない謎

様々なプロダクトを見てきましたが、まだ解明できていない謎があります。

なぜ音楽系のプロダクトは全て背景が黒なんでしょうか？

YouTube music、Spotify、Amazon music…
みんな黒。うん、、、なぜ？

これだけは色々考えましたが、まだ解明できていない謎です。
これは謎のまま心にそっと置いて、長い目で付き合いたいと思います。

UIUX分析から得た知見

さてさて、UIデザインのスキルを向上させるため、プロダクトのUIを分析して知見をインプットすることと、実際に手を動かしてトレースすることを続けてます。

その中でデザインの知見を沢山得たので、忘れぬうちに記録しておきたいと思います。画像を丁寧に〜という時間がなく、テキストだけですいやせん。

いいなと思ったデザイン

【手間が省けて楽だなと思った編】

👍絞り込みメニューをはじめから表示する

絞り込みの選択肢をドリルダウンで選択させるか、予め選択肢を表示してワンタップで絞り込みを可能にするか。

なるべくワンタッチで絞り込みを実施できる方が良さそうですね。とても楽でした。
数が多いと難しそうだけれど、4つくらいならはじめから表示してあるのが良さそうです。

例えば：Google MAPの「レストラン」「コーヒー」といった絞り込み機能

👍スマートフォンではクイックアクセスを用意する

PCと比べて、スマートフォンは表示領域が圧倒的に狭くなるため、閲覧履歴をクイックアクセスとして用意しているプロダクトが便利だなと感じました。

例えば：notionのスマートフォンUI

【安心を与えてくれる編】

👍全体像をインジケーターやステップ数で示してあげる

チュートリアルやフォーム、複数画像を用いるときは、インジケーターや「STEP 1/2」「1/20」といった表記があると、先の見えない不安を払拭できますね。

例えば：UNIQLOアプリの写真右下のUI、todoListのチュートリアル右上

【見やすい編】

👍どんな背景でもボタンが目立つ工夫がある

写真の上にボタンがある場合は、ボタン背景をつけたり、さらにボタンにシャドウをつけることで、「これはボタンだよー」と目立たせているのが良いと思いました。

例えば：Uber Eatsの写真上のボタン

👍一般的に用いられているアイコンを使用する

アイコンだけで意味が伝わるのであれば、テキストいらずのアイコンのみでアクションを伝えることができるようですね。逆にアイコンが一般的でないと何のアクションかがわからないなと思いました。

例えば：notionの編集画面

気をつけるべきデザインから学ぶ教訓

⚠️メニュー数が多い
→スマートフォンのメニューは多くても4つくらいが良さそう。

スマートフォンアプリのボトムナビの数が6つのプロダクトと出会いました。6つは多すぎに感じます。

他サービスを見ると、メニュー数は最大でも4つくらいに収めた方が良さそうだと思いました。

⚠️前の画面に戻れない
→キャンセルボタンや戻るアクションを用意する。

意外と有名サービスでも、モーダルが開きフォーム入力モードになるが、閉じるボタンが用意されていないものがありました。お願いです、戻らせてくださいという気持ちになるので、戻るアクションは用意してあげたいです。

⚠️プロダクトの中でルールが一貫していない
→タイトルなどのルールは一貫させる。

ページタイトルの見せ方に揺らぎがあるプロダクトがありました。
あれ、こんなんだっけ？と変に頭を使うので、コンポーネントを定義して、一貫させた方が良さそうです。

⚠️意味のない背景色の使い方
→背景色は意図して使う。

プロダクトの中には、プロフィール欄の背景が縞々模様のものがありました。項目ごとに白、グレー、白、グレー、パワポの表デザインみたいなイメージです。

背景色は意図して使うべし、ブロックを示すために使う、表のタイトルに使うなど、どう使うかは考えた方が良さそうです。

⚠️してほしい行動とUIが異なる
→してほしい行動に適したUIを使用する。

フォームのテキスト入力欄なのにプルダウンのUIを使っている。プルダウンで選択肢が出るのに、テキスト入力のUIを使っているなど、見た目とできる行動にギャップのあるプロダクトがありました。

ユーザーにしてほしい行動をしてもらえるために適切なコンポーネントを使う、基礎に忠実に従いたいです。

⚠️メニュー名が似ている
→区別しやすいラベリングを使用する。

これは仕方ないかもしれませんが、海外アプリの日本版を使用した際に、単なる翻訳となっており、ほぼそっくりなメニュー名がありました。

「このリストにある全てのカードを移動する」「このリストにある全てのカードをアーカイブ」「このリストをアーカイブ」

ラベリングは内容が正しく伝わるものにした方が良さそうです。

トレースからも学ぶ

その他、ビジュアルデザイン、コンポーネントに対する知見は、トレースをしながら、ちょびちょびとまとめてます。今回はキャプチャだけで紹介します、あしからず、、

まとめ

まだまだUIUXデザイナーへジョブチェンジを実現するべく転職活動中ですが、日々プロダクトデザインに触れることで、デザイナーとしてのインプットとアウトプットを続けようと思います。とりあえず、今年1年間お疲れ様でした！

ちなみに今年の私の目標は『動く』でした。UIUXデザイナーへのジョブチェンジを目指して勉強し始めたことや趣味のテニスを始めたこと、現職で初めてプロジェクトリーダーとしてプロジェクトを牽引したことなど、『動く』ことができた1年になりました。来年は何の漢字にしようか、今から考えます。（いつもほぼ直感で決めてますw）

💬余談

今年は「デフォルトを機嫌良く保つには」という研究テーマで、マインドフルネスや心理学を勉強してました。デザインの勉強や転職活動でまだまだアウトプットできておりませんが、いくつかポイントを得たので、転職活動が落ち着いたらまた発信しようと思います。

一つだけ、心が揺さぶられた言葉を紹介。まとめが1番長いじゃないかと思った方、失敬失敬。新鮮な発想なのです。

「私たちが所有しているものは、実は何一つない。この命でさえ、借り物なのだから。」

この発想を今までにしたことがなかった‼︎‼︎‼︎
この命、体は借りているものと考えると、これらを借りているうちに何をしようかという発想になります。

長々とお読みいただきありがとうございました。
では、良いお年を。