UI GRAPHICSの学びまとめと個人的な解釈
本noteは、自身の学びを再認識できるようにUI GRAPHICSの読書の学びをまとめました。また副次的にこの記事を読んだ方にも何かしらの学びを届けられたらと思い、公開しました。
本noteでは、UI GRAPHICSの網羅的な要約ではなく、個人的に学びがあったところだけをpickupし、個人的な解釈を中心に書いています。そしてその解釈には、「デザインが綺麗」や「体験が向上しそう」といった曖昧な解釈をせずに、顧客やサービス運営者のどんな課題を解決し、何の指標につながるかをなるべく意識してまとめました。
UIデザインを学習中の方と、UIデザイナーを育成中の方で未経験者がどのように考えているか解像度を上げたい方にお役に立てられたらうれしいです。
本記事で扱わないこと
- UI GRAPHICSの網羅的な要約
- ツールの使い方
- 具体的なアウトプット・サンプルまで公開（著作権的に）
TEXT
01 Appleが目指す「流れるインターフェイス」
iPhoneXになってから画面サイズが大きくなり、没入感が生まれた。
また（iPhoneXになってから）Fluid Interfaceの登場。Fluid Interfaceは流動性という意味で、ほかのアプリを立ち上げながらほかの作業をすることができるようになった。
例えばハーフモーダル（仮名？）で、あるアクションをしたときに、元の画面を残しつつ、新たなページが見れるもの。マップアプリの地名をクリックすると、その地名の情報がハーフモーダルで現れる。
ハーフモーダルは操作性の役割もある。iPhoneXは画面サイズが大きいので、上部には届きにくい。そのためハーフモーダルで画面下部に抑えている。
Intuitive 直感的
06 シングルスクリーンでスムーズな手続き
一つの画面で作業プロセスがすべて進行できるようになっている。書籍の例は引っ越し手配アプリ。
個人的な解釈）
確かに画面遷移を行わないことで、何かそのプロセスで変更があったときでも変更しやすそう。ゆえに離脱率も低くなりそう。
07 カート内を可視化する
ECサイトの例で、カートにいれたものを右サイドバーにアイコン的に表示している。
個人的な解釈）
確かにカートにあるものがページ遷移せずに見れることで、顧客にとって何をカートにいれたか、いれてないかわかりやすく（何をカートに追加すしたかの不安を解消）、CVするまでの時間が短くなりそう。ゆえに商品ページtoサンクスページまでのCVRが高くなりそう。
10 生活に合わせてリマインド
ニュースアプリで、Googleカレンダーと同期し、起床・就寝時や会議の空き時間にプッシュ通知を送り、ユーザーは空き時間にニュースを読むことができる。
個人的な解釈）
ダイエットや学習系など習慣化させたい系サービスでは、カレンダーとの同期により、ユーザー目線、ひいてはサービス側も双方良いベクトルに向く内容である。これによってpush通知のブロック率の低下やDAUなどのアクティブを測る指標が高まりそう。
11 対話型UI
いくつかの選択肢に回答することで、情報がレコメンドされる。
個人的な解釈）
多様なプロダクトを持つD2Cなどで、パーソナライズが必要なものは相性よさそう。レコメンド精度が上がることでCVRが高くなりそう。また回答が集まることによってレコメンドの質もより高くなり、ネットワーク効果が働き競合優位性を築き、サービスの強みにもなりうる。
Minimal & Clean 最小のデザイン
22 装飾などが一切できない執筆画面
ドキュメントサービスの例であえて機能を制限することで、ユーザー感で差がなくなり未完成でも恥ずかしいと思わないようにしているデザイン。
個人的な解釈）
（毎日使わせたいや小さなアウトプットでも良しとする場合）機能がリッチだから必ずしもよいわけではない。制限することも価値。もし未完成でもアウトプットが恥ずかしいと思わなければ、プロダクトの利用ハードルが下がり、アクティブの指標（MAUや記事数）などが高まりそう。
Text
35 導線としての制約
制約はネガティブなイメージを持ちやすいがそうではないときもある。制約があることで、利用者に余計な判断・思考をさせずに、能動的に行動できるようになる。
例えば、折りたたみ傘を毎日かばんにいれておくことで、天気予報を見ずに外出できるというメリットをもたらす。
個人的な解釈）
p98の視線のデザインの話もGoodだった。LP作成とかに役立ちそうな内容だった。
Illustration & Infographic 楽しさとわかりやすさ
40 ゲームのような楽しいグラフィックが、学習促進する
学習サービスの例で、ポイントやバッジなど実績・進捗が可視化されるデザイン。
個人的な解釈）
ゲーミフィケーションの効果で、アクティブレートが高まりそう。
Micro Interaction 動きのデザイン
52 レコードのメタファーで、音楽再生の操作性を高める
音楽アプリの例で、アルバムやプレイリストをレコードのような円盤に落とし込んでいる。
個人的な解釈）
レコードをメタファーにしているようだが、対象物をメタファー化すれば、UIにこういうグラフィカルなデザインを加えられるのかな。
Onboarding Illustration 価値提示のプロセス
57 エンプティステート画面を利用して、訴求する
表示する情報・コンテンツがないときに見る画面のデザイン。その画面で、このアプリでは何ができて、どのように便利かを伝えている。
個人的な解釈）
コンテンツがないときの離脱を防ぐ役割がありそう。また書籍の中でもあったように、キャッチーに訴求することで（ゆくゆく・これがすべてではないが）ファン化やエンゲージメントが高くなりそう。※先行指標としてUGCが増えるのでは？
振り返り
次読むときは、上記の番号以外の理解度を高める。
あと、この書籍はロジカルもエモーショナルなデザインも含まれていたが、今回の自分のピックアップ箇所を見ると、私はエモーショナルなデザインの方に弱い傾向がある。
書籍でいうと40のゲームのような楽しいグラフィックが、学習促進する箇所で、共感はできるが、どこまでの成果に結びつくか見込みとのブレ幅が大きそうで、どこまでのコストを投下できるのか迷う部分がある。
とはいえ、エモーショナルなデザインをおろそかにしてもよいわけではないので、個人としてはまたこの書籍を読んだり、日々触れるものから養ったりしてきたい。
-------
ここまで記事を読んでいただきありがとうございました。
もし詳細が気になった方は書籍のリンクを貼っておきます。（not アフィリエイト）
そしてUI GRAPHICSの出版・執筆関係者の皆様、素敵な知見を共有していただきありがとうございました。とても感謝しております。
※もしこの記事に何か問題がありましたら、noteのコメントやTwitterでご連絡いただけますと幸いです。
この記事が気に入ったらサポートをしてみませんか？