書籍 ソシオメディアのロゴ

デザイニング・インターフェース 第2版

– パターンによる実践的インタラクションデザイン –

ジェニファー・ティドウェル (著), ソシオメディア株式会社 (監訳), 浅野紀予 (翻訳)
オライリー・ジャパン ; 2011年12月24日 ; ISBN: 978-4-87311-531-3 ; 4,830円 (税込) ; オールカラー; 592ページ

デザイニング・インターフェース 第2版 表紙
出版元の書籍紹介

UIデザイン体系を再整理すると同時に最新のパターンと事例を盛り込んだ増補改訂版

好評を博し増刷を重ねた第1版の出版から約5年。大幅に加筆修正された待望の第2版です。第2版では、「ソーシャルメディア」や「モバイルデバイス向けのデザイン」を取り上げた新章の追加をはじめ、パターン体系の見直し、読者フィードバックの反映など、優れたユーザインターフェースをデザインするための実用書として、またそのために理解すべきコンセプトや思想を学ぶための啓蒙書として、更に魅力的なものとなっています。

本書の特長

"第1版が出版された後にUIデザインの分野で起きた潮流として特筆すべきは、「UIデザインパターン」というものの存在が広く認知されるようになったことです。この背景には、高品質なユーザインターフェースへの需要の高まりがあります。そして、優れたユーザインターフェースをデザインするための分かりやすい方法論と、それを共有／学習するための言語がますます求められるようになったのです。本書は、まさにそのようなニーズに応える強力なソリューションと言えるでしょう。"

（監訳者あとがきより）

主な内容

  • 第2版によせて
  • 序章
  • 1章　ユーザの行動
    • 目標達成の手段
    • ユーザ調査の基礎
    • ユーザの学習意欲
    • パターンの解説
      • 安全な探検（Safe Exploration）
      • 即座の喜び（Instant Gratification）
      • 最小限での充足（Satisficing）
      • 途中での方針変更（Changes in Midstream）
      • 回答の先送り（Deferred Choices）
      • 少しずつの組み立て（Incremental Construction）
      • 習慣化（Habituation）
      • 小刻みな休止（Microbreaks）
      • 空間的な記憶（Spatial Memory）
      • 展望的な記憶（Prospective Memory）
      • 繰り返しの効率化（Streamlined Repetition）
      • キーボードのみ（Keyboard Only）
      • 他者のアドバイス（OtherPeople’s Advice）
      • 個人的レコメンデーション（Personal Recommendations）
  • 2章　コンテンツを整理する：情報アーキテクチャとアプリケーション構造
    • 情報アーキテクチャの全体像
    • パターンの解説
      • フィーチャー/サーチ/ブラウズ（Feature, Search, and Browse）
      • ニュースストリーム（News Stream）
      • 画像管理ツール（Picture Manager）
      • ダッシュボード（Dashboard）
      • カンバスとパレット（Canvas Plus Palette）
      • ウィザード（Wizard）
      • 設定エディター（Settings Editor）
      • 代替表示（Alternative Views）
      • 多数のワークスペース（Many Workspaces）
      • マルチレベルのヘルプ（Multi-Level Help）
  • 3章　動き回る：ナビゲーション、標識、経路探索
    • いつでも居場所が分かるということ
    • ナビゲーションのコスト
    • ナビゲーションのモデル
    • ウェブサイト向けのデザインルール
    • パターンの解説
      • 明快な入り口（Clear Entry Points）
      • メニューページ（Menu Page）
      • ピラミッド（Pyramid）
      • モーダルなパネル（Modal Panel）
      • ディープリンクできるステータス（Deep-linked State）
      • 避難口（Escape Hatch）
      • 分厚いメニュー（Fat Menus）
      • サイトマップフッター（Sitemap Footer）
      • ログインツール（Sign-in Tools）
      • シーケンス表示（Sequence Map）
      • パンくず（Breadcrumbs）
      • 注釈つきスクロールバー（Annotated Scrollbar）
      • アニメーションによる転換（Animated Transition）
  • 4章　ページを構成する：ページ要素のレイアウト
    • ページレイアウトの基礎
    • パターンの解説
      • 視覚的なフレームワーク（Visual Framework）
      • 中央ステージ（Center Stage）
      • 等分グリッド（Grid of Equals）
      • タイトルつきセクション（Titled Sections）
      • タブ形式モジュール（Module Tabs）
      • アコーディオン（Accordion）
      • 開閉可能パネル（Collapsible Panels）
      • 移動可能パネル（Movable Panels）
      • 右揃えと左揃え（Right/Left Alignment）
      • 対角線バランス（Diagonal Balance）
      • 反応的な追加表示（Responsive Disclosure）
      • 反応的なイネーブル化（Responsive Enabling）
      • リキッドレイアウト（Liquid Layout）
  • 5章　リストで表現する
    • リストのユースケース
    • 情報アーキテクチャ再考
    • 解法のサンプル
    • パターンの解説
      • 2パネルのセレクタ（Two-Panel Selector）
      • 1ウィンドウでのドリルダウン（One-Window Drilldown）
      • リストのインレイ（List Inlay）
      • サムネイルのグリッド（Thumbnail Grid）
      • カルーセル（Carousel）
      • 行のストライプ配色（Row Striping）
      • ページネーション（Pagination）
      • 項目へのジャンプ（Jump to Item）
      • アルファベット式スクローラー（Alphabet Scroller）
      • カスケーディングリスト（Cascading Lists）
      • ツリー表示テーブル（Tree Table）
      • 新規項目の入力行（New-Item Row）
  • 6章　事を行う：アクションとコマンド
    • 限界を広げる
    • パターンの解説
      • ボタンのグループ（Button Groups）
      • マウスオーバー表示ツール（Hover Tools）
      • アクションパネル（Action Panels）
      • 目立つ「完了」ボタン（Prominent“Done”Button）
      • 動的なメニュー項目（Smart Menu Items）
      • プレビュー（Preview）
      • プログレス表示（Progress Indicator）
      • キャンセル機能（Cancelability）
      • マルチレベルのアンドゥ（Multi-Level Undo）
      • 操作の履歴（Command History）
      • マクロ（Macros）
  • 7章　複合的なデータを表示する：
    • 限ツリー、チャート、その他のインフォメーショングラフィックス
    • 限インフォメーショングラフィックスの基礎
    • 限パターンの解説
      • 概観と詳細（Overview Plus Detail）
      • データティップ（Datatips）
      • データのスポットライト（Data Spotlight）
      • 動的なクエリ（Dynamic Queries）
      • データのブラッシング（Data Brushing）
      • 部分的なズーム表示（Local Zooming）
      • ソート可能なテーブル（Sortable Table）
      • 放射状テーブル（Radial Table）
      • 複数Y軸のグラフ（Multi-Y Graph）
      • 小さな複合データ群（Small Multiples）
      • ツリーマップ（Treemap）
  • 8章　ユーザの入力を受け取る：フォームとコントロール
    • フォームデザインの基礎知識
    • コントロールの選択
    • パターンの解説
      • 寛容な入力形式（Forgiving Format）
      • 構造化された入力形式（Structured Format）
      • 穴埋め（Fill-in-the-Blanks）
      • 入力ヒント（Input Hints）
      • 入力プロンプト（Input Prompt）
      • パスワード強度メーター（Password Strength Meter）
      • オートコンプリート（Autocompletion）
      • ドロップダウン形式の選択ツール（Dropdown Chooser）
      • リストビルダー（List Builder）
      • よいデフォルト値（Good Defaults）
      • 同一ページでのエラーメッセージ（Same-Page Error Messages）
  • 9章　ソーシャルメディアの利用
    • 本章で扱わない話題
    • ソーシャルメディアの基本
    • パターンの解説
      • 多彩な編集コンテンツ（Editorial Mix）
      • 個人的な発言（Personal Voices）
      • 再投稿とコメント（Repost and Comment）
      • 会話のきっかけ（Conversation Starters）
      • 超小型の逆ピラミッド（Inverted Nano-pyramid）
      • タイミング戦略（Timing Strategy）
      • カテゴリー別ストリーム（Specialized Streams）
      • ソーシャルリンク（Social Links）
      • 共有ウィジェット（Sharing Widget）
      • ニュースボックス（News Box）
      • コンテンツのスコアボード（Content Leaderboard）
      • 最新のさざめき（Recent Chatter）
  • 10章　モバイルへの対応
    • モバイル向けデザインの課題
    • パターンの解説
      • 縦方向のスタック（Vertical Stack）
      • 映写スライド（Filmstrip）
      • タッチ表示ツール（Touch Tools）
      • 下部ナビゲーション（Bottom Navigation）
      • サムネイルとテキストのリスト（Thumbnail-and-Text List）
      • 無限リスト（Infinite List）
      • ゆとりのあるボーダー（Generous Borders）
      • テキスト消去ボタン（Text Clear Button）
      • 読み込み中のインジケーター（Loading Indicators）
      • 豊富なアプリ連携（Richly Connected Apps）
      • スリム化したブランディング（Streamlined Branding）
  • 11章　よい見た目にする：視覚的なスタイルと美学
    • 同じ内容、違うスタイル
    • ビジュアルデザインの基礎
    • デスクトップアプリケーションにおけるビジュアルデザインの意義
    • パターンの解説
      • 深みのある背景（Deep Background）
      • 少色相・多明度（Few Hues, Many Values）
      • コーナー処理（Corner Treatments）
      • フォントを反映したボーダー（Borders That Echo Fonts）
      • ヘアライン（Hairlines）
      • フォントウェイトのコントラスト（Contrasting Font Weights）
      • スキンとテーマ（Skins and Themes）
  • 参考情報
  • 監訳者・訳者あとがき
  • 索引

関連