はじめに
この記事は、and factory.inc Advent Calendar 2021の 17日目 の記事です。
昨日は、@yasukotelinさんの「LiveDataをFlowにリプレースしてみて得た知見（StateFlow、SharedFlow、Channel）」でした。
なにを書くのか
UIデザインの教科書［新版］ マルチデバイス時代のインターフェース設計の内容を自分なりにまとめます。
当然ですが、Amazonのリンクを貼っていますが、本作とはなんの利害関係もございません
なぜやるのか
本書は私がアプリ開発者になって1年くらいたったタイミングで読み始めた書籍で、以下のモチベーションで読み始めました。
- UIUXの知識についてざっくりと体系的に（浅く広く）学びたい
- いいデザインとはなんなのかを学びたい
- なぜデザインガイドラインにしたがっていればわかりやすいのか、なぜiPhoneのインターフェースが直感的にわかりやすいと言われているのか、わかりやすさの正体をなんとなく知りたい
本書はこのような浅く広くデザインについての知識を
デザイナー以外にもわかりやすいようにまとめてあると思いました。
この内容を自分なりにまとめることで、自分の理解度を高めるとともに、
同じようなニーズを持つ方たちに興味を持っていただければよいかなと思って本記事を書いています。
また、本書はたっぷりの図と明快な説明でわかりやすく書かれているので、
興味を持たれた方は手にとって見るといいのではないでしょうか
どう書くのか
本書は7章で構成されています。
本記事では各章ごとに、
- 概要
- モチベーション（これを知ると何が嬉しいのか）
- 内容
を書いていきます。完全に主観で抜粋します。
各章の概要とモチベーションを流し読みして、
適宜興味のある章から見ていただければいいかなと思います。
まとめ内容
1章 デザインの目的とUI/UX
概要
- デザインを学ぶ上で前提となるデザインの目的について書かれています
- デザインとはなんなのか？必ずしも必要なものなのか？
- 一口にUIUXと言うが、それらの定義はなにか？
モチベーション
- 「デザインがいい」という言葉からは、絵画のように直感的でセンスによって構築されるものという印象を持ちがちですが、実際にはもっと体系的なものだと言うことがわかります
- UIUXという言葉に対しての理解度が上がると思います
内容
UIとは？ UXとは？ UIとUXの関連詳細はこちら
2章 物理的な制約
概要
- デバイスごとの物理的な制約を知ることで適したUIがある、ということが書かれています
- PC・スマホ・タブレット・TVについて
- 入力方法と画面の違いから得られる体験について
モチベーション
- サービスの開発者として知っておくべき、デバイスが与える体験について学ぶことができます
- インターフェースの違いがどのように体験に作用するかを知ることができます
内容
各デバイスの画面の違い 画面やキョリの違いは以下のようになる 視覚（目の移動範囲）👀 向き🔼詳細はこちら
TV
PC
タブレット
スマホ
キョリ
遠
やや遠
近
至近
パーツ
大
やや大
中
小
アスペクト比
16:9
任意のサイズに調整可能
3:4
9:16
3章 ソフトウェアの影響
概要
- ソフトウェアの動作がインターフェースにどのように影響を与えるか書かれています
- Webとアプリでどのような差異が生まれるのか
- テキスト・画像・動画など、それぞれが与える体験にどのような差異があり、それぞれどのようなことに留意する必要があるか
- パフォーマンスがどのような影響を与えるか
モチベーション
- サービスを提供する上でWebとアプリのメリット・デメリットを知ることができます
- テキスト・画像・動画など、無意識的に「この要素はこのフォーマットを使おう」と考えがちですが、なぜこのフォーマットを使ったほうがいいのか？を言語化できるようになります
内容
Webとアプリ Webとアプリには以下のような差異がある Webのメリット アプリのメリット どちらのアプローチが良いかは、サービスの目的・届けたい体験によりけり テキスト・画像・動画 画像データのバリエーション 動画の強み⏯ パフォーマンス詳細はこちら
Web
アプリ
操作
-
軽快で豊富なインタラクションがある
通信量の制御も可能
同時起動数
同時に複数可能
（基本）単数
マルチデバイス対応
しやすい
しにくい
OS差異
小さい
大きい
インストール要否
不要
必要
操作の中断・再開
難しい
容易
ラスターデータ
ベクターデータ
フォーマット
PNG / GIF / JPEG / WEBP
PDF / SVG
画像の表現方法
1pxごとに情報を持ち、集まることで表現
幾何学的な計算で描画される
複数解像度への対応
必要
不要
適した画像内容
写真
ロゴ・単純な図形・アイコン
適したデバイス
-
スマホ・タブレット
（デバイス別の解像度の差異も吸収可能）
4章 人間の認知特性
概要
- 人間の認知がなにに影響をうけているかに書かれています
- アニメーションの役割や、ナビゲーションアニメーションについても説明されています
モチベーション
- 色・形状・動きなど強調表現のバリエーションとそれぞれの向き不向きについて知ることができます
- 一口にアニメーションと言っても、動きの役割・目的があることを知ることができます
内容
色の変化に対する認知 人間は特徴のない羅列に対しては順序的処理をするが、特徴のあるものに対してはあるものに対しては瞬間的な処理を行うことができる 瞬間的な要素の把握が求められるシチュエーションやカテゴリーの分類には特に効果を発揮する 形の変化に対する認知 動きに対する認知 インタラクションコスト詳細はこちら
5章 階層と構造
概要
- Webやアプリの構造を作る上で必要な階層について書かれています
- どのように視覚化すればユーザーに理解しやすい階層関係になるか
- どのようなインタラクションならユーザーに階層上の動きをわかりやすく伝えられるか
モチベーション
- ページの関連性である階層をより良くすることが良いインターフェースを作るために非常に重要であることを理解できます
- iOSの動きは直感的と言われますが、なにがそうさせているのかを少し理解することができるかもしれません
内容
ビジュアルによる階層関係の表現 現在どこにいるのかを明確に示すことと、移動による変化を段階的に示すことによって、ページの関連性を間接的に示すことができる インタラクションによる階層関係の表現 階層の広さと深さ トップ、一覧、詳細 「わからない🤷♂️」とはなにか詳細はこちら
6章 ナビゲーションとインタラクション
概要
- ユーザーがより容易に目的に到達するための手段としてナビゲーションによる表現がバリエーション別に紹介されています
- システムの動きや変化によるフィードバック（=インタラクション）が目的別に紹介されています
モチベーション
- ヘッダー、フッター、パンくずリストなど、日常的によく見るパターンですがなぜ有効なのかを理解することができます。
- サービスを使うときに機能にフォーカスしがちですが、それを違和感なく使うために使われているパターンの有効性を理解することができます。
- インタラクションを検討する上で、目的を考えて導入することの重要性を知ることができます。
内容
詳細はこちら
7章 デザインを形にする
概要
- 今までの知識を踏まえデザインを形にするために知っておくと役にたつノウハウを記載されています
- デザインの一貫性を保つための手法としてのミニマルデザインについて
- デザインガイドラインのメリットと各社の対応について
モチベーション
- AppleのフラットデザインやGoogleのマテリアルデザインなど、現在のスタンダードとなっているミニマルデザインが普及してきた経緯と背景を知ることができます
- シンプルとミニマルの違いを理解し、ミニマルデザインを適応する上でのメリデメ、注意点を理解することができます
内容
ミニマルデザイン ミニマルデザインのメリット・デメリット ミニマルデザインを適応する上でのポイント デザインガイドライン詳細はこちら
メリット
デメリット
・コンテンツが引き立つ
・読み込みが高速化される
・画面サイズの互換性
・マルチデバイス対応のしやすさ・デザインにごまかしが効かない
・没個性化しがち
・過度に適応しすぎるとかえってリンクやボタンが認識しづらくなる
本書を読んで
本書を読むことで、当初私が理解したかったことにある程度自分なりに解釈することができました。
いいデザインとはなんなのかを学びたい
本書ではより良いインターフェースがいいデザインとしている、と解釈しました。
より良いインターフェースは、ユーザーの目的地に迷うことなく容易に到達できるものであり、ユーザーに認知的負荷をかけずに機能を提供する事が重要なのだと思います。
ユーザーに魅力を訴求するビジュアルも大事であるが、上記の点を損なってしまっては作りての独りよがりでいいデザインとは言えないのだと思いました。
なぜデザインガイドラインにしたがっていればわかりやすいのか
学習する前は、デザインガイドラインに従うことに対して、デザインの統一感を出すため程度にしか捉えていませんでした。
ただ、人間の認知的特性やデバイスの制約によって発生する体験の違いを学ぶ過程で、ガイドラインとして定義されているものがそれ相応の理由でガイドラインとなっていることを理解できました。
また、Appleのスキューモフィズムからフラットデザインへ移行した流れからもわかるように、当時の時代背景などによってもユーザーに受け入れられるデザインが異なることもわかりました。
デザインの日本語訳が「設計」であるように、ガイドラインには従いながらその背景になぜそのガイドラインがあるのか、を意識することが重要であると理解しました。
なぜiPhoneのインターフェースが直感的にわかりやすいと言われているのか
以下、自分がiOSエンジニアであることからiPhoneに着目して記載しておりますが、Androidやブラウザでも共通する部分があると思います。
本書を読んでいく過程で、ナビゲーションが大きくUIUXに寄与することがわかりました。
中でも「ユーザーのアクションに対してインタラクティブにフィードバックが返ってくること」と「ユーザーの現在地が分かる構成になっていること」でユーザーは迷いなく目的地までたどり着けることがわかりました。
iPhoneは操作感の統一がされているのと同時に、ナビゲーションや階層関係を理解するための仕組みが充実していることがわかりました。
最後に
大変長くなりましたが、自分としても理解度を深めることができると思いました。
ぜひ興味のある項目があれば読んでみていただけると嬉しいです。