【感想・ネタバレ】UIデザイン必携 ユーザーインターフェースの設計と改善を成功させるためにのレビュー

原田秀司

※この商品はタブレットなど大きいディスプレイを備えた端末で読むことに適しています。また、文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。

【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。ご購入前に、無料サンプルにてお手持ちの電子端末での表示状態をご確認の上、商品をお買い求めください】

使いやすさのデザインルール集

本書は、UIデザインの現場で役立つハンドブックです。

UIデザインとは、ユーザーがサービスと
やりとりをするための接点を設計することです。
そこで必要なことは、ユーザーを迷わせずに、
余計な手間もかけさせることなく、
インターフェースを直感的に使えるようにすることです。

本書は、そのために必要な知識やルールを一冊にまとめています。

UIデザインが上手くいかないときや問題が生じたときの解決策、
またよくある失敗に対する防御策をみつけることができます。

さらに、基本から書かれているので、現場で役立つだけでなく、
知りたいところから学習していくこともできます。

デザイナーはもちろん、エンジニア、PdMなど、
UIに関わるあらゆる方「必携」の1冊です。

〈目次〉
CHAPTER 1 UIとデザイン
CHAPTER 2 環境による影響
CHAPTER 3 人間の認知特性
CHAPTER 4 構造とナビゲーション
CHAPTER 5 分かりやすさ、使いやすさ
CHAPTER 6 留意すべきこと

※本電子書籍は同名出版物を底本として作成しました。記載内容は印刷出版当時のものです。
※印刷出版再現のため電子書籍としては不要な情報を含んでいる場合があります。
※印刷出版とは異なる表記・表現の場合があります。予めご了承ください。
※プレビューにてお手持ちの電子端末での表示状態をご確認の上、商品をお買い求めください。

[ブクログ · ★★★★★]

WFだけでなくUIの方向性を決めるような仕事も始まったので読んだ。端的にポイントがまとまっていて大半わかりやすい。

[ブクログ · ★★★★★]

分かりやすさ、使いやすさとはどういうことか？直感的とはどういうことか？が明文化されており、参考になる。

[ブクログ · ★★★★★]

著者の前著が、業務をする上で非常に有益だったので、今回も早速目を通してみた。
WEB、特にフロントデザインの製作に関わる人ならば、UIやUXを考えることはすでに業務の一部といっても差し支えない。
私も使い手に気持ちよく使ってもらえることを常に考えて業務を進めているつもりだが、残念ながら考えが至らず使いにくくなってしまう点も多い。その度にお客様からお叱りを受けつつ、他のわかりやすい事例などを参考に改良を重ねているが、こういった改良を重ねて善いフィードバックが得られるのは非常に楽しい。
この本はその「改良」について、事例などを用いて非常にわかりやすく書かれている。内容も実践的で、デザインの話にありがちな言語化が足りないということもなく、読み進めてスッと腹に落ちていくような感触を得られた。
「自分の会社のWebサービスやアプリをもっと使ってほしい」「けれどもUI・UXに長けたデザイナーが周りにいない」といった場合、この本から得られる気づきはきっと多いと思う。

[ブクログ · ★★★★☆]

事例が写真付で紹介されており、説明も簡潔なのでとてもわかりやすい。何気なくスマホを触っているときにも、気付けることが増えた。

[ブクログ · ★★★★☆]

マルチデバイスが一般的になり
それぞれのインターフェースに求められるものが
変化する現在。
普段の生活で何気なくさわっているデジタルの
デザインを使いやすくするために
どうするか。
たくさんの具体例とともに掲示され
非常にわかりやすい。
やっぱりやっぱりこういった書籍では
具体例がとても大切。

[ブクログ · ★★★★☆]

写真付きで解説。ユーザインターフェースとして、デザインやユーザビリティの本質が学べる。まさにユーザエクスペリエンス。サービスや製品とのやり取りでユーザが得られるすべての体験。非常に示唆に富んだ教科書である。

主張少なく、デザインすることを心がける。カラーについてはベースカラー、メインカラー、アクセントカラーの3色が望ましい。目立たせようと思った着色でカラフルになり、結局何を目立たせたかったのか分からなくなるからだ。階層は深く狭くより、広く浅く。1ページ目でコンテンツメニューを網羅するのが良い。隙間、罫線、背景色、囲いの順で視覚的な区分の強さが決まる、などなど。

マウスオーバーやホバー。パララックス。ドットインジケーター、パンくずリスト。ローディングとプログレスバー、オーバーレイとインレイ。インタラクションコスト。見ているだけで疲れそうな横文字だが、こうした専門用語にUIの概念が宿る。ピンとこない言葉があるのだったらこの本が有効だろう。

[ブクログ · ★★★★☆]

事例があり分かりやすくまとまってる。
最後の留意事項はわかっていながらもとても大事なことで気をつけなければと思った。
謙虚になろう。

[ブクログ · ★★★★☆]

面白かったですよ。読みやすいし。事例もあるし。
デザインというか、ボタンとかのUIの知識入れたくて読みました。

最後に、心構えみたいな章があって、少し意外でした。

[ブクログ · ★★★★☆]

面白かった。人間の思考とかを元にこうあるべきみたいな説明で理解しやすかった。
誤字がちょいちょいあって気になった。

[ブクログ · ★★★☆☆]

UIとはユーザーがサービスや製品とやりとりするためのすべての接点
UXとはサービスや製品とのやり取りでユーザーが得られるすべての体験

モバイルアプリは専門的
Webアプリは汎用的

対になる色を見つけるなら色相だけを動かす
弱い色を見つけるなら明度だけを動かす
調和を保った色を見つけるなら彩度だけを動かす

ベースカラー
メインカラー
アクセントカラー

インタラクションの役割は
注目・理解・演出
マイクロインタラクション（Xのいいねなど）
パララックス
マイクロインジケーターなど

Webページは、トップ、一覧、詳細
全てこの形からできている

決済や送信、確定などは明確な返事が必要
致命的な操作にな再確認のワンクッションを置く


ヘッダーはサービスの全体図
フッターは補助的ツール
メガドロップダウンメニュー

割込には2種類
オーバーレイ（ポップアップやツールチップ）
インレイ
画面追従のスティッキーヘッダーや、告知エリアはオーバーレイの一つですが目障り
アコーディオンはインレイ

コンテンツの見せ方は2種類
スクロール　無段階（リニア）
ページング（全体が一度に切り替わる）
インクリメンタルスクロール
スクロールは文字の影響で縦のみ
無限スクロールはフッターが見れない
ページネーション


場所・操作・状態をつかめるようにする
わからない３つの条件
場所、画面中でフォーカスを失う
操作、結果の予測が立たず、使ってみるまでわからない
次に行うアクションが不明確
状態、現在の状態（モード）を把握できないこと

インタラクションコスト
利用頻度が少ない場合は頭の負荷低減を優先する
利用頻度が高い場合は、体の負荷低減を優先する

シンプルとは、余計な解釈がなくめいかいであること
一貫性　サービスの世界観を壊さず、ユーザーの認知負荷を大きく低減できる
なるべく共通概念を使う（星はお気に入りアイコン）

[ブクログ · ★★★☆☆]

なんとなく便利に感じてることが理論に基づいて設計されていることが分かった。
目から鱗、とはならないがそれなりに参考になる本。