UIデザインの教科書 新版 の商品レビュー

原田秀司(著者)

2023/12/04

UI/UXのデザインに携わりたい人におすすめの１冊です。
人間の認知特性などを踏まえて学べるので「確かに！！」「なるほど…」と思うポイントが多くあります。
タイトルを見ると複雑で難しそうだと感じるかもしれませんが、読んで損はないと思います！
デザイン学科３年

2023/02/16

＜本のタイトル＞
UIデザインの教科書［新版］ マルチデバイス時代のインターフェース設計

＜本の紹介＞
2週間ぐらい前に「Web制作者のためのUXデザインをはじめる本」を読みましたが、
今日紹介する本は、UIデザイン部分の具体的な中身に踏み込んだ内容になります。

＜感想・気づき＞
・スティーブ・ジョブズが言うには
　「デザインはどう見えるか（how it looks）ではなく、どう機能するか（how it works）」

・デバイスごと入力手段の違い
　ーPC：マウスで操作。細かい操作が可能、縦スクロールに強い
　　　　最大の特徴はホバーが使えること
　　　　※ホバー＝マウスオーバー（クリックしなくてもカーソルを合わせると対象が変化する）

　ーSP：指で操作する為、各パーツがある程度の大きさが必要。細かいパーツの選択は神経を使う。
　　　　タッチパネルデザインではホバーが使えないので、目視で対象の選択可否を判別できることが重要なポイントになる

　ーTV：リモコンの十字キーで操作、もしくは音声入力が大半。
　　　　十字キー操作では、いまどこにフォーカスがあるのかパッとわかることが何より重要。
　　　　なぜならPCやSPのように、直接対象をクリックすることができないため。
　　　　またフォーカス移動も「縦方向だけ」「横方向だけ」のように1方向に限定すべき。

・デバイスごとの画面の違い
　ーPC：ブラウザのサイズを自由に変えられる
　ー他：すべてフルスクリーン表示。

・Webサイトと専用アプリの違い
　ーWebサイト：Webブラウザで利用。マルチデバイスの展開が容易。
　　　　　　　　OSの違いによる環境差異が小さい。同時に複数ブラウザを起動できる。
　　　　　　　　最も大きな特徴は「URLと不可分に結びついている」ため切り離せないこと。
　　　　　　　　また操作スピードは遅く、インタラクションも乏しい。

　ー専用アプリ：OSにインストールして利用。動作が早く、操作が軽快。
　　　　　　　　データ通信量がWebサイトの場合と比較して少量で済む
　　　　　　　　デメリットはサービス毎に都度インストールが必要であり、
　　　　　　　　OSごとに異なるプログラミング言語で開発する必要がある。
　　　　　　　　またハードウェアやOSの差異がUIのデザインに大きく影響を及ぼす。

　※なお最近はPWA（Progressive Web Apps）という技術を用いると「アプリのように動くWebサイト」を開発することもできるみたい。

・テキスト・画像の違い
　ーテキスト：基本となるデータ形式。原則どんなOSやデバイスにも最適化されて表示可能。
　　　　　　　テキストを画像で貼ると、検索もできないし、画質も粗いのでオススメしない。
　　　　　　　ただし下にも書くとおり、あえてテキストを画像で貼るほうがよいときもある。

　ー画像　　：解像度の影響を受けるが、それ以外については環境間の差異が無く同一に表示できる。
　　　　　　　テキストだとOSやデバイス毎に自動で（よかれと思って）最適化されてしまうので、
　　　　　　　あえて最適化されないように画像でテキストを用意するケースもある。
　　　　　　　ただわざわざそうまでしないといけない理由がある場合にのみやるべきである。

・HTTPとHTTP/2の違い
　ーHTTP　：1つのリクエストに対して1つのレスポンスを返す
　ーHTTP/2：複数のリクエストに対して複数のレスポンスを非同期で返す。HTTPSが必須。

・Webサイト内の現在地を理解するため、5つの方法で「表現の差別化」を行う
　ー太さ　：文字の太さで現在地を表現する。太字が現在地、細字がそれ以外の場所。
　ー色　　：文字の色で現在地を表現する。明度差、無彩色（白黒）/有彩色（カラー）など。
　ー大きさ：文字や対象の大きさで現在地を表現する。TVと相性がいい。
　ー背景　：背景に色を敷くことで現在地を表現する。
　ー目印　：帯やアイコンなど、目印や装飾を添えることで現在地を表現する。

・トップ/一覧/詳細の構成
　だいたいのサービスはトップページ、一覧ページ、詳細ページの3構成になっている。
　サービスによってはトップページ＝一覧ページの場合もある。
　一覧ページのインタフェースの良し悪しが、ユーザーが望んだゴールにたどり着けるかのカギ。
　とはいえ一覧ページで工夫できることは、基本的には次の3つしかない。
　　絞り込み：何らかの制約をかけて絞る
　　並び替え：何らかの軸でソートする
　　切り替え：表示件数を変えたり、表示方法を変えたりする（リスト化/ブロック化）

2022/09/21

すごくいい本だな…社会人なりたての頃に読みたかった。
読んでいて「そうそう！そう言えば伝わるのかも！」と思った。

2022/07/18

初心者の人にとっては少し難しいように感じた

確かに参考になる部分は多かったが自分の目的とは違ったのであまり役に立たなかった

サイトを構築する上での必要な知識は載っているように感じた

また参考にしたいと思う。

2022/04/17

各デバイス、各OSのUIがわかりやすくまとめられている。タイトル通り教科書的な一冊。デザイナー職の方には物足りないかもしれない。

2021/12/11

UIデザインの体系的なことが学べる本

印象的だったのは、人間の認知特性について。
複雑さをなくすためにシンプルにすることが大事だとは考えていたことだけど、
シンプル＝単純ではなく、シンプル＝明快が大事だと。

そのための具体的な方法も載っていたのでこれから実践していきたい。。

2021/01/16

UIデザインとは何か、から実際のデバイスごとのデザインの解説がありわかりやすかった。

広く浅く解説があるので、もう少し深掘りした内容が知りたかったので自分には少し物足りなかった。

2020/06/04

借りたもの。
web、スマホに留まらず、TVまで。ソフトに限らずハードについても。マルチデバイスのUIデザインの設計がどういった意図で制作されているかを解説。

デザインの目的、物質的な制約、人間の認知特性などを踏まえて、あらゆるものは「デザイン(設計)」されている。

設計の具体的なハウツーの話よりも、身近にそれらが溢れていることを気づかせてくれる。
さらに、よく見るサイトの問題点を具体的に指摘したり、i phoneなど具体的なデバイスをあげ、その変容がどういった理由で変更されていったかを紹介。

マルチデバイス時代に、どんなツールでも統一された、使いやすいデザインになるように…デバイス毎にどんなデザインにすればよいか、レスポンシブでも耐えうる画像解像度で、軽量化することをはじめ、細やかな気遣いを改めて意識する。

2020/03/18

今まで読んだUIデザインの中で最も整理されていて、読みながら、「なるほど」と思わせてくれる。
2020年3月現在で、最新の話も載っており、UIデザインの関わる方に、特に初心者の方におすすめです。

2019/04/27

非常に分かりやすい。
自分が確認したい内容に合わせて、章別で読んだとしても大丈夫な書き方で印象も良かった