ＵＩデザインの教科書―マルチデバイス時代のインターフェース設計 （新版）

原田 秀司【著】

翔泳社（2019/01発売）

• サイズ B5判／ページ数 207p／高さ 23cm
• 商品コード 9784798155456
• NDC分類 548.2
• Cコード C3055

出版社内容情報

使いやすい理由とは何か



本書はUIにおけるデザインの定義から、

ハードおよびソフトによる制約、人間の心理による影響、

そして具体的にデザインを形にする方法までを、

図や画像を使いながら、わかりやすく体系的に解説していきます。




Webサイトの閲覧者やアプリのユーザーは、

いつのまにか迷ったり、わからなくなったり、

操作がしっくりこなかったりすることがあります。




本書を読むと「わかりやすさ」と「使いやすさ」の要点がわかるので、

ユーザーを迷わせない、最適なUIを見つけることができます。




デザイナーはもちろん、エンジニア、ディレクター、発注者など、

UI制作に関わる、あらゆる方におすすめの1冊です。




＊本書は2013年刊行の『UIデザインの教科書』をもとにしていますが、

最新環境にあわせて、構成及び内容を全面的に書き直しています。




〈こんな人のための本です〉

・UIデザインの基本的な考え方を学びたい

・わかりやすさや使いやすさの理由が知りたい

・最新のデバイスごとの違いやルールを知りたい

・UIデザインのチェック項目が知りたい

・UIデザインを説明するためのロジックが学びたい

...etc




〈目次〉

第1章　デザインの目的とUI/UX

第2章　物理的な制約

第3章　ソフトウェアの影響

第4章　人間の認知特性

第5章　階層と構造

第6章　ナビゲーションとインタラクション

第7章　デザインを形にする




1章　デザインの目的とUI/UX

　1-1：本書の範囲と対象

　1-2：デザインの目的

　1-3：UIとUX

　1-4：まとめ



2章　物理的な制約

　2-1：デバイスのバリエーション

　2-2：入力手段の違い

　2-3：画面の違い

　2-4：AndroidとiPhone

　2-5：まとめ



3章　ソフトウェアの影響

　3-1：Webとアプリ

　3-2：テキスト・画像・動画

　3-3：パフォーマンス

　3-4：まとめ



4章　人間の認知特性

　4-1：色・形・動き

　4-2：インタラクションコスト

　4-3：一貫性

　4-4：シンプルさ

　4-5：共通概念

　4-6：まとめ



5章　階層と構造

　5-1：縦、横、前後

　5-2：階層の深さと広さ

　5-3：現在地と差別化表現

　5-4：トップ・一覧・詳細

　5-5：関連する情報

　5-6：わからないとは何か

　5-7：まとめ



6章　ナビゲーションとインタラクション

　6-1：ナビゲーション

　6-2：インタラクション

　6-3：ヘッダ

　6-4：フッタ

　6-5：パンくずリスト

　6-6：カラムと左右ナビゲーション

　6-7：オーバーレイ、インレイ

　6-8：スクロール、ページング

　6-9：スクロールの方向

　6-10：まとめ



7章　デザインを形にする

　7-1：ミニマルデザイン

　7-2：デザインガイドライン

　7-3：プロトタイプ

　7-4：マルチデバイスデザイン

　7-5：まとめ



原田 秀司［ハラダ ヒデシ］
著・文・その他

内容説明

本書はＵＩにおけるデザインの定義から、ハードおよびソフトによる制約、人間の心理による影響、そして具体的にデザインを形にする方法までを、図や画像を使いながら、わかりやすく体系的に解説していきます。Ｗｅｂサイトの閲覧者やアプリのユーザーは、いつのまにか迷ったり、わからなくなったり、操作がしっくりこなかったりすることがあります。本書を読むと「わかりやすさ」と「使いやすさ」の要点がわかるので、ユーザーを迷わせない、最適なＵＩを見つけることができます。デザイナーはもちろん、エンジニア、ディレクター、発注者など、ＵＩ制作に関わる、あらゆる方におすすめの１冊です。

目次

第１章　デザインの目的とＵＩ／ＵＸ
第２章　物理的な制約
第３章　ソフトウェアの影響
第４章　人間の認知特性
第５章　階層と構造
第６章　ナビゲーションとインタラクション
第７章　デザインを形にする

著者等紹介

原田秀司［ハラダヒデシ］
１９７４年東京都生まれ。東京大学工学部卒。ＩＴベンダーにてプログラマー／ＳＥとして勤務したのち、Ｗｅｂ制作会社にてディレクターとして勤務。２００８年よりフリーランスとして独立。ＰＣ、スマートフォン、タブレット、ＴＶ、スマートホーム機器などのＵＩを設計している。日本グラフィックデザイナー協会（ＪＡＧＤＡ）所属（本データはこの書籍が刊行された当時に掲載されていたものです）
※書籍に掲載されている著者及び編者、訳者、監修者、イラストレーターなどの紹介情報です。

感想・レビュー

※以下の感想・レビューは、株式会社ブックウォーカーの提供する「読書メーター」によるものです。

[タナカ電子出版]

この本は使いやすい商品を作り出すための設計の教科書です。とくにこの本で扱う商品はデバイスやアプリ　ソフトのことを扱っていますが、もちろんそれだけに止まらず色々な商品にも応用できる考え方が学べます。印刷がカラーなのでとても読みやすく、書いている内容も視覚的直感で理解しやすいです。この本の著者や製作者のデザイン感覚をも評価に値します❇️。

2019/05/07

[さぼてん]

うーむとてもわかりやすかった。一番ありがたかったのはデバイスごとの一覧表。レスポンシブは常日頃気をつけてるけど、ほんと調整が手間。今の所だとUIに対して数字が大きく上がらないと成果にはならないが、少しずつ改善して全体の質をあげていくことで、良いUXに繋がるのだと思う。自分のサイトでも使ってこ。というかAmazonを真似するのがいいんだろうな。詳細ページの施策には流石すぎた。

2021/06/20

[ラテ]

UIデザインの入門書としてわかりやすかった。多分専門家には常識なんだろうと思うことも分かりやすい。

2019/06/03

[かなすぎ@ベンチャー企業取締役CTO]

自分はデザイナーではないが、よくモックやプロトタイプを作ることが多く、その際デザイナーさんと話すので、デザイナーさんがどのように考えているのかを理解することができるような内容だった。デザインっていうと、感覚的な世界をイメージしてしまうが、かなり論理的な世界で、今までは正直とっつきにくさを感じていたが、デザインも詳しく勉強してみたいなと思うようになった。デバイスやOSによる差などを論理的に説明していて、その差を活かしたデザインなどが求められていることも理解できた。

2020/02/25

[めかぶこんぶ]

具体的な実例と共に、UIデザインの基本を解説。全体として平易な解説で、分かりやすくまとめられている。実際のサービス例があるため、気になったサービスを見に行くことで動きも確認できる。デザインのトレンドはどんどん移り変わるものだと思うので、3年も前のものだとちょっとイマイチな教科書になってしまう（もちろん普遍的なルールはあれども…）ことも実感。 ☆備忘：PWAの実装方法？

2019/10/23