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

原田秀司(著者)

• 販売会社／発売会社: 翔泳社
• 発売年月日: 2019/01/21
• JAN: 9784798155456

商品レビュー

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

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