UIデザインの教科書［新版］ マルチデバイス時代のインターフェース設計
- 翔泳社 (2019年1月21日発売)
本棚登録 : 609人
感想 : 19件
- Amazon.co.jp ・本 (208ページ)
- / ISBN・EAN: 9784798155456
作品紹介・あらすじ
使いやすい理由とは何か
本書はUIにおけるデザインの定義から、
ハードおよびソフトによる制約、人間の心理による影響、
そして具体的にデザインを形にする方法までを、
図や画像を使いながら、わかりやすく体系的に解説していきます。
Webサイトの閲覧者やアプリのユーザーは、
いつのまにか迷ったり、わからなくなったり、
操作がしっくりこなかったりすることがあります。
本書を読むと「わかりやすさ」と「使いやすさ」の要点がわかるので、
ユーザーを迷わせない、最適なUIを見つけることができます。
デザイナーはもちろん、エンジニア、ディレクター、発注者など、
UI制作に関わる、あらゆる方におすすめの1冊です。
＊本書は2013年刊行の『UIデザインの教科書』をもとにしていますが、
最新環境にあわせて、構成及び内容を全面的に書き直しています。
〈こんな人のための本です〉
・UIデザインの基本的な考え方を学びたい
・わかりやすさや使いやすさの理由が知りたい
・最新のデバイスごとの違いやルールを知りたい
・UIデザインのチェックリストがほしい
・UIデザインを説明するためのロジックが学びたい
...etc
〈目次〉
第1章 デザインの目的とUI/UX
第2章 物理的な制約
第3章 ソフトウェアの影響
第4章 人間の認知特性
第5章 階層と構造
第6章 ナビゲーションとインタラクション
第7章 デザインを形にする
感想・レビュー・書評
-
コメント0件をすべて表示
-
UI/UXのデザインに携わりたい人におすすめの１冊です。
人間の認知特性などを踏まえて学べるので「確かに！！」「なるほど…」と思うポイントが多くあります。
タイトルを見ると複雑で難しそうだと感じるかもしれませんが、読んで損はないと思います！
デザイン学科３年
0
-
＜本のタイトル＞
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つしかない。
絞り込み：何らかの制約をかけて絞る
並び替え：何らかの軸でソートする
切り替え：表示件数を変えたり、表示方法を変えたりする（リスト化/ブロック化）
0
-
初心者の人にとっては少し難しいように感じた
確かに参考になる部分は多かったが自分の目的とは違ったのであまり役に立たなかった
サイトを構築する上での必要な知識は載っているように感じた
また参考にしたいと思う。
0
-
UIデザインの体系的なことが学べる本
印象的だったのは、人間の認知特性について。
複雑さをなくすためにシンプルにすることが大事だとは考えていたことだけど、
シンプル＝単純ではなく、シンプル＝明快が大事だと。
そのための具体的な方法も載っていたのでこれから実践していきたい。。
0
-
UIデザインとは何か、から実際のデバイスごとのデザインの解説がありわかりやすかった。
広く浅く解説があるので、もう少し深掘りした内容が知りたかったので自分には少し物足りなかった。
0
原田秀司の作品
この本を読んでいる人は、こんな本も本棚に登録しています。
![ノンデザイナーズ・デザインブック [第4版]](https://m.media-amazon.com/images/I/51HKaOqL-RL._SL160_.jpg)
