デザイニング・インターフェース 第2版 ―パターンによる実践的インタラクションデザイン

著者 : Jenifer Tidwell 浅野紀予

• オライリージャパン (2011年12月24日発売)

作品紹介・あらすじ

本書は、ウェブアプリケーション、インタラクティブなウェブサイト、モバイルデバイスなどのインターフェースをデザインするデザイナーとプログラマーのために、デザイン上の問題に対するすぐに使える解決策を「パターン」として体系化した書籍です。第2版では、「ソーシャルメディア」、「モバイルデバイス向けのデザイン」のそれぞれに対応した章の追加をはじめ、最新のデザインや第1版への読者のフィードバックに対応した構成の見直し、パターンの追加などが全体にわたって行われ、より有用な書籍として生まれ変わりました。

感想・レビュー・書評

[chieさんの感想 · 2012年5月18日]

情報がたっぷり詰まってるので、集大成として、気が向いた時にペラペラしたり、じっくり読み込んでもいい。

とくに、SNS以降の章が面白かった。

[おぬまさんの感想 · 2023年10月19日]

図書館で借りた。
Webデザイン系の本。既にこの系統の本はいくつか借りているが、本書の特徴はパターンをたくさん並べて、それの対応を詳しく並べていることだ。これこそデザインパターンのような気もする。
オライリーの本では珍しく、オールカラーだ。Webデザインを扱う上で、カラーマネジメントも重要だからなのだろう。
分厚くて全ては読み切れていないが、モバイルのWebデザインへの対応など、幅広く学ぶことができる。結構良さげと感じた。星5つ評価にしておく。

[japapizzaさんの感想 · 2022年1月29日]

「使いやすいアプリケーションは、直感的になるようにデザインされている」という意見があるだろう。もちろん、その通り。ただその意見は、ほとんどトートロジーに近い。
　それに加えて、「直感的」だと言う場合、実は「慣用的」だということを言わんとしているのだと指摘した。…
　こう言い直してみよう。「使いやすいアプリケーションは、”慣用的”になるようにデザインされている」。
　…”慣用的”とは、そのアプリケーションのすべてのパーツが、そのジャンルを代表するような製品と、まったく同様にデザインされていることを意味するとはかぎらない。…各パーツが十分に慣用的であり、パーツ同士の関係が明確になっていれば、ユーザは初めて目にするインターフェースであっても経験的知識を駆使して理解できるのだ。
　…
　自分がデザインするアプリケーションにユーザが何を期待するかを認識し、さまざまなイディオムやフレームワーク（大きな部分）、個別の要素（小さな部分）、パターン（あらゆる部分に渡る）が用意された道具箱の中からよく考えて選択を行うならば、オリジナリティを損なうことなく、”慣用的に使える”ツールを組み立てることができるだろう。

　本質的にパターンとは、ユーザインターフェースやウェブサイト、オブジェクト指向プログラム、あるいは建築物など、さまざまな対象における「ハビタビリティ（居住性）」を向上させるような、構造や動作の特質のことである。パターンは物事をより理解しやすく、またはより美しくする。つまり道具を一段と有益で使い勝手を良いものにしてくれる。

■パターンとは何か
・具体的であり、一般原則ではない
・プラットフォームやシステムの種類を問わず有効である
・成果であり、プロセスではない
・アドバイスであり、必須事項ではない
・複数の要素の関係性であり、単一の要素ではない
・デザイン事情に応じてカスタマイズされる

■よいインターフェースデザインは、見た目から始まるわけではない。
　出発点となるのは、人々を理解することなのだ。
　目先のデザイン上の問題だけにとどまらず、十分に深く現状把握ができるまで、質問を繰り返そう。
　インターフェースデザインの極意は、「正しい問題を解決すること」にあるのだ。

■ユーザの目標達成を可能にするパターン
１．安全な探検「迷ったりトラブルに巻き込まれたりせずに、探検できますように。」
２．即座の喜び「後でじゃなく、今すぐにこれを済ませたいんだ。」
３．最小限での充足「これで十分満足だよ。これ以上時間をかけて、もっとうまくできる方法を覚える気はないんだ。」
４．途中での方針変更「途中までやってみたけど、気が変わっちゃったよ。」
５．回答の先送り「今はそれに答えたくないんだ。とりあえず最後まで進めさせてよ！」
６．少しずつの組み立て「ここを変えてみよう。まだしっくりこないから、もう一度変えてみよう。このほうがいいな。」
７．習慣化「このやり方は他の場所ではいつもうまくいくのに、どうしてここでは駄目なんだ？」
８．小刻みな休止「もうすぐ電車が来る。あと２分間だけ、有意義に使わせてくれない？」
９．空間的な記憶「１分前まであのボタンは間違いなくここにあったのに。どこへいったんだ？」
10．展望的な記憶「これは後回しにするから、忘れないようにここに置いたままにしよう。」
11．繰り返しの効率化「この操作、いったい何回繰り返せばいいのだろう？」
12．キーボードのみ「お願いだから、マウスなしでも操作できるようにしてよ。」
13．他社のアドバイス「これについて、他のみんなはどう考えているのだろう？」
14．個人的レコメンデーション「これは友達から読むように勧められたから、かなり面白いはずだ。」

・Amazonでは、すべてのアカウント関連情報にワンクリックでたどり着ける。

・あるオブジェクトに対して、クリックやドラッグなど何らかの操作ができそうに見える場合、そのオブジェクトがそのアクションの実行を「アフォードしている」と言う。

■４つの重要なゲシュタルトの法則
・近接の要因：複数のものを近づけて配置すると、見る者はそれらを仲間として関連付ける。これは、UI上のコンテンツやコントロールを強力にグループ化する基本原理である。
・類同の要因：２つのものの形状や大きさ、色、向きが同じなら、見る側もそれらを同種のものとして関連付ける。
・連続の要因：人間の目は、より小さな要素の整列によって描かれる連続的な直線や曲線を見出そうとする。
・閉合の要因：人間はまた、輪郭の曖昧な余白や長方形のような、はっきり意図して描かれたわけではない単純な閉じた形状を見出そうとする。複数の要素グループは、閉じた形状として見えることが多い。
　
■前注意的変数
・色の階調
・色の明度
・色の彩度
・質感
・位置と整列
・向き
・大きさ
・形状

■フォームデザインの基礎知識
・何を要求されているのか、それは何のためなのかを、必ずユーザが理解できるようにしよう。
・可能なら、何も質問しないでおこう。
・「外界にある」知識は、「頭の中にある」知識より正確なことが多い。
・エラーにはきめ細かく対応し、なるべく寛容に対処しよう。
・土台となるプログラミングモデルをそのまま流用しないように用心しよう。
・ユーザビリティテストを実施しよう。
・どのコントロールを選ぶかは、求められる入力内容についてのユーザの予想を左右するため、賢明に判断しよう。

■モバイル向けデザインの課題
・ちっぽけな画面サイズ
・さまざまな画面の幅
・タッチスクリーン
・テキスト入力の難しさ
・物理的に厳しい環境
・ソーシャルな影響と限られた注意力

■ウェブサイトの信頼性
　もっとも重要な要因…は、ウェブサイトの見た目であった。ユーザは、素人が作ったように見えるサイトを信頼しなかったのだ。

[hanawaoritasiさんの感想 · 2017年9月18日]

第二版も、刊行されてから六年も経った。
それそろ、第三版の登場か？

[kimitoshiさんの感想 · 2015年4月15日]

インターフェースに関する解説本。イメージと名称、その効果をしるには良いかと。

[sou (08thse)さんの感想 · 2014年3月10日]

おもに Web の UI に関するデザインの本。こういう書籍はそう多くないので、役に立ちそう。ただ、モバイルデバイスなどデザインの変遷もまた早いので、安心はできない。

[ちひろさんの感想 · 2013年2月28日]

Webのインターフェースについてレイアウト、表示方法部品などの観点から、よく使われるパターンをまとめたもの。内容は非常に豊富でそれぞれのパターンについて概ね実例がついているため、分かりやすい。辞書的にそばにおいておいて困ったら見るような使い方になると思う。

[yasulabさんの感想 · 2012年12月26日]

僕自身はエンジニアですが、基礎の部分から丁寧に解説されている本なので、デザインについて全く分からないエンジニアでもサクサクと読み進めていけます（というかサクサク読まないと全然読み終わりません）。

第１〜３章ぐらいまでは連続して読むべきだと思いですが、それ以降は各 UI 毎に独立している傾向があるので、４章以降は好きなところから読んでしまっても大丈夫だと思います。

また、各章は基本的に２つのチャプターに分かれていて、1) 対象となる UI 設計に関する基本的な考え方を学ぶチャプターと、2) その考え方を元に実世界の UI 例 (Design Pattern) を分析するチャプターの２つに分かれています。

読了後はライブラリとして使えるので、特にこれから UI について勉強する人については、「各 UI の基礎堅め＋Design Pattern のライブラリ」として一石二鳥な使い方が出来る本だと思います。

デザイニング・インターフェイス第２版の勉強会を主催して（※執筆者公認済）、勉強会で使用した資料は全て公開してあるので、もしよければこちらもご参考にしてください。

Designing Interface 2e Study Group
http://www.facebook.com/groups/di2e.study/

[豊橋技術科学大学図書館さんの感想 · 2012年8月2日]

2012年度ブックハンティングで選書された図書
【推薦コメント】旧版を持っているが、新版ではモバイル用のインターフェースについての記述が追加され、本の厚さも2倍近くになっている。ソフトウェアGUIの教科書、リファレンスとしても良書。

【配架場所】図・3F開架　
【請求記号】007.6||TI

[koshikawa naotoさんの感想 · 2012年7月31日]

UIデザインのパターンを整理している。

[masabochiさんの感想 · 2012年2月28日]

オライリー本はいつも厚く、普通の本読みにとっては読みづらいんだけど、
価値ある本を提供しているなってつくづく思います。

これは画面設計やWEBデザインをする上で必読の一冊。
教科書的であり、実務的であり、非常重宝する本であると思います。

どうやってWEBページを考えますか、っていうときにわからなければ
「この本をひけ！」ってなりそうです。

個々の部品の説明もあるし、写真盛りだくさんの事例いっぱいなので、
イメージもつかみやすいのかなって思います。

見栄えとかを見直す上でもそばにあった方がいいなって思う本です。

個人的にこのシリーズは読みづらいんですよね。そこが僕にとっては苦であります。。

[iamaslibさんの感想 · 2012年1月31日]

貸し出し状況等、詳細情報の確認は下記URLへ
http://libsrv02.iamas.ac.jp/jhkweb_JPN/service/open_search_ex.asp?ISBN=9784873115313