【読書】成功事例から考えるこれからのUIとUX
見出し画像

【読書】成功事例から考えるこれからのUIとUX

西川 美和

デザイナーとして体系的に成長するために始めた「デザイン読書要約」。

今回は「UI GRAPHICS」をまとめます!

この本で学べること

新規サービスであれ、リニューアルであれ、全く0からデザインを生み出すことはない。デザイナーは既に持ち合わせているデザインの知識やリサーチからまた新しいデザインを生み出す。本書は「直感的」「動きのデザイン」などテーマ毎にこれまでのアプリやウェブの成功事例と思想、またそれに対する考察が収載されている。成功事例となっているデザインの変遷を知ることがインターフェイスデザインとUX向上の一助となることだろう。

Appleが目指す未来

2007年に登場したiPhoneのインターフェイスが人々を魅了できたのは、画面の中の世界に直接触れているような感覚をユーザーに与えたからだ。

スクリーンショット 2021-08-08 15.54.50


iPhone初期に現実に存在するコンパスやメモ帳を見立てたメタファーに始まり、ユーザーがインターフェイスに十分慣れ親しんだ2013年リリースのiPhone7ではフラットデザインが採用された。
フラットデザインは現実世界に物質として存在しないものも含むコンテンツやアプリそのものにフォーカスをシフトするために、極力UIとしての装飾が取り払われている。

2017年に登場したiPhone Xでは人間の流れるような意識の変化に対応するFluid Interfaceが採用された。これは半モーダルなどを使用して画面と画面の状態変化を自由に行き来することができるデザインで、これまでよりさらに高いレベルの自己帰属感をもたらすことを目指している。

スクリーンショット 2021-08-08 16.08.14


Fluid Interfaceを採り入れるには、デザイナーは動かしながらデザインをし、デザインの最中にも新たな発見を得ていくプロトタイピングしながらのデザインが求められる。また、エンジニアはアプリ挙動のレイテンシに注意した実装を求められる。デザインとエンジニアリングのさらに高いレベルでの融合が実現されることにより、UIは身体の延長として発展していくことを期待したい。

マテリアルデザインとその可能性

2014年、Googleの開発者カンファレンスでマテリアルデザインの発表があった。マテリアルデザインの最大の特徴は、フレームワークである。トーンや文字サイズ、グリッド設計などの開発工数が減らすことで、デザイナーがコンセプトや構造、サービス設計といった高レイヤーにリソースを集中できるようになった。

スクリーンショット 2021-08-08 16.25.04

またガイドラインとしてのマテリアルデザインの大きな特徴は、従来はセンスや「そういうもの」としてされていた様々なロジックが、エンジニアリング分野まで分解され言語化されていることである。「こうあるべき」というコンセプト、「なぜこうなのか」というロジック、そして「実際にどう実装するのか」というコードと数値的なパラメータ、この3つが高いレベルで融合していることがポイントである。

ただここで注意する必要がある。マテリアルデザインの普及の仕方次第ではモバイル市場全体の多様性が失われる可能性がある。フレームワークに乗りつつも、必要に応じてフレームワークから外れることが今後のデザイナーの課題となる。

目指す世界観を実現するデザイン

GoogleのマテリアルデザインやAppleのフラットデザインなど、OSが提供するUIを利用することがアプリケーションデザインでは多い。しかし、ユーザーの心を動かすようなデザインをフレームワークだけで創りだすことが難しいのは明白だ。

本書では、「直感的」「ミニマム&クリーン」「楽しさとわかりやすさ」「動きのデザイン」「オンボーディング画面」「IoTが作る体験」という7つのパートに分けて、55のサービス事例が紹介されている。同時にこの領域に携わる研究者及び実践者の方々の多様な可能性についての知見が書き下ろされている。

55の各サービス事例は、いかにして目指す世界観を実現するデザインを創り出しているかについて豊富なグラフィックと短い解説文で紹介されている。GROWTH POINTという形で、プライシングモデルなどについて言及されているものもあり、KPIに紐づくUIを自身で考える上でも役に立ちうるだろう。

スクリーンショット 2021-08-08 18.58.25

デザインに携わる研究者及び実践者の方々の知見は、デザインを考える上での深い洞察とこれから開発する上で考慮すべきことやヒントを示唆している。

一例として、多摩美術大学講師の菅俊一さんの文よりこちらの話を紹介したい。菅さんの研究室の助手さんが、実家から送られてきたというシャインマスカットを、房から切り離し一人分ずつ紙コップに入れて、冷蔵庫に冷やしてくれていたことがあった。この工夫によって各々のタイミングでなんのストレスもなく美味しく食べることができた。おそらくシャインマスカットをそのまま冷蔵庫に入れていたとしても、自分がどれだけ食べていいのか分からず、誰も手にすることはなかった可能性がある。この話は、行動にあえて制限をかけることで、導線を作りだし、自然とストレスの存在自体を消失させて価値を作り出すことができるかもしれないことを伝えている。
このように体験を解像度高く丁寧に捉えていくことは、誰もが心地よく適切な体験を促せる可能性を秘めている。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
嬉しいです♡
西川 美和
プロダクトデザイナー・医師 | 仕事や勉強していることなどについて書いています