クイズで学ぶUIデザイン ユーザビリティの基本が身につく50問 [単行本]

クイズで学ぶUIデザイン ユーザビリティの基本が身につく50問 の 商品概要

• 目次

  Part 1　クイズ編
  
  Chapter 1　誰がどこで使うのか
  Q1 ボタンの区別、どちらがみんなにわかりやすい?
  Q2 複数選択ができるアンケート、どちらのUIがふさわしい?
  Q3 韓国への一人旅。日程を比較して航空券を安く買いたい。予約しやすいカレンダーはどっち?
  Q4 多国籍の人が来るコンビニ画面、どちらがやさしい?
  Q5 ネットワーク診断ツールの結果表示。アメリカ向けにふさわしいのはどっち?
  Column 1　UIデザインの歴史
  
  Chapter 2　画面遷移と操作手順
  Q6 階層構造、どちらがわかりやすい?
  Q7 アンケートの選択肢の配置、どちらがわかりやすい?
  Q8 「73」と数字を入力するとき、どちらが早く操作できる?
  Q9 入力スペースへ記入するとき、どちらが直感的に入力しやすい?
  Q10 数値を微調整するとき、どちらが使いやすい?
  Column 2　「ヤコブ・ニールセンの10原則」と「ヤコブの法則」は別もの
  
  Chapter 3　デバイスの制約
  Q11 地デジの番組予約。テレビの画面とタブレットの画面が並んでいる。どちらがテレビの画面?
  Q12 タッチパネルの数値設定ボタン、どちらがミスなく操作できる?
  Q13 この2つのズームUI、どちらがスマホ向き?
  Q14 本日20時20分に、大人2人、子供4人のチケットをスマホで申し込みたいとき、どちらが操作しやすい?
  Column 3　ATMのテンキー配置が逆なのはなぜ？
  
  Chapter 4　視覚心理と UI
  Q15 ショップアプリの登録画面、わかりやすいのはどっち?
  Q16 どちらのアイコンの視認性が高い?
  Q17新製品のおもちゃ、サイトで目を引くのはどちらの見せ方?
  Q18 次に押すボタンを明確に示したいときふさわしいのはどっち?
  Q19 サイトの構成。臨時休業のお知らせを確実に見せたいとき、ふさわしいのはどっち?
  Column 4　エレベーターの「閉」ボタンの真実
  
  Chapter 5　認識とUI
  Q20 入力フォーム、どちらがスピーディに入力できる?
  Q21 タブの表現、どちらがわかりやすい?
  Q22 時間表示、どちらが残り時間がわかりやすい?
  Q23 この2つのレイアウト、どちらのほうが操作の流れがスムーズ?
  Q24 この2つの説明、どちらが読みやすい?
  Q25 この2つの画面、どちらが選びやすい?
  Column 5　世界で一番働き者のUIパーツ
  
  Chapter 6　手がかりと UI
  Q26 診察の順番、どちらが見つけやすい?
  Q27 固定文字と可変文字が明確なのはどっち?
  Q28 項目選択、どちらが他にも選択肢があることがわかる?
  Q29 カロリー摂取量が多すぎる日、どちらが見つけやすい?
  Q30 英語が選ばれているのが明確にわかるのはどっち?
  Column 6　ハンバーガーメニューの誕生秘話
  
  Chapter 7　色・形・文字
  Q31 情報の重要度、どちらがわかりやすい?
  Q32 医療機器の文字、どちらが見間違えにくい?
  Q33 この2つの医療機器の画面、どちらが危険な状態だとすぐに判断できる?
  Q34 この2つの表示、どちらの文字が読みやすい?
  Q35 直感的にわかりやすいアイコンはどっち?
  Q36 説明文が読みやすいのはどっち?
  Q37 数値の表示、遠くからでも見やすいのはどっち?
  Q38 リストの表示、1行ごとを見分けやすいのはどっち?
  Column 7　WindowsとMacの「閉じる」位置が違う理由
  
  Chapter 8　思案クイズ
  Q39 スクロールが多いデザインはユーザーにどんな影響を及ぼす?
  Q40 画面下部にある主要ボタンを画面上部に移動した場合、どんな問題が起こりやすい?
  Q41 文字色と背景色のコントラストが弱いとどうなる?
  Q42 メニューをすべてアイコンのみで表示すると、どうなる?
  Q43 フォームでの選択肢をすべてプルダウンにすると、どうなる?
  Q44 同じアプリ内で画面ごとにUIスタイルが違うと、どうなる?
  Q45 この画面でボタンを見たとき、ユーザーはどのように感じる?
  Q46 このエラーメッセージが表示されると、何が起こりやすい?
  Column 8　ありなしワークショップのススメ
  
  Chapter 9　洞察クイズ
  Q47 このUIどこが問題?
  Q48 このUIどこが問題?
  Q49 このUIどこが問題?
  Q50 このUIどこが問題?
  Column 9　なしありワークショップのススメ
  
  Part 2　スタディ編
  
  Study 1　利用者と利用環境の考え方
  1-1 UIは誰のために?
  1-2 色覚の多様性
  1-3 文化による違い
  1-4 多言語対応における言語選択の工夫
  1-5 多言語対応を見据えたレイアウト設計
  1-6 まとめ
  Column 10　Undo（元に戻す）が生んだ世界
  
  Study 2　情報の構造と操作の流れ
  2-1 階層構造とは?
  2-2 人はどこまで覚えられる?
  2-3 階層の見せ方の工夫
  2-4 階層の深さと幅のバランス
  2-5 慣れたユーザーは、UIをどう見ているか
  2-6 まとめ
  Column 11　なぜ「変な箱」は生き残ったのか
  
  Study 3　デバイス特性と設計上の制約
  3-1 デバイスによる違い
  3-2 画面サイズの制約
  3-3 入力方法の制約
  3-4 利用環境の制約
  3-5 まとめ
  
  Study 4　視覚心理をUIにどう活かすか
  4-1 視覚心理とUIの関係
  4-2 ゲシュタルトの法則
  4-3 進出色と後退色
  4-4 錯視と誤解の回避
  4-5 視線の動きと注視位置
  4-6 まとめ
  Column 12　彼らはUIを作ろうとしていなかった
  
  Study 5　認識と理解のプロセス
  5-1 認識と理解の違い
  5-2 アイコンとラベル
  5-3 用語のわかりやすさ
  5-4 フィードバックと状態認識
  5-5 まとめ
  
  Study 6　行動を導く手がかりの設計
  6-1 手がかりとは何か
  6-2 視覚的な手がかり
  6-3 行動を促す手がかり
  6-4 一貫性と学習効果
  6-5 まとめ
  
  Study 7　色・形・文字による情報伝達
  7-1 色・形・文字が担う役割
  7-2 色の役割と注意点
  7-3 形で伝える工夫
  7-4 文字のわかりやすさ
  7-5 まとめ
  
  Appendix　ヤコブ・ニールセンのユーザビリティ10原則
  1. システム状態の見える化
  2. 現実世界との対応
  3. ユーザー操作の自由度
  4. 一貫性と標準
  5. エラーの予防
  6. 記憶に頼らない操作
  7. 柔軟性と効率性の確保
  8. シンプルで洗練されたデザイン
  9. エラー発見と回復のしやすさ
  10. ヘルプとドキュメンテーション

• 内容紹介

  なぜそれがよいUIなのか、
  説明できますか?

  「なぜこのボタンは押しやすいのか?」
  「なぜこの画面は迷いやすいのか?」

  UIデザインには“理由”があります。

  本書は、50問のクイズを通して、ユーザビリティの本質を体感的に学べる1冊です。

  ユーザーの認知、視覚心理、デバイス特性、情報構造など、実務で必ず直面するポイントを、具体例で体系的に理解できます。

  単なる正解当てではなく、「なぜそうなるのか」を解説。ヤコブ・ニールセンの「ユーザビリティ10原則」などの理論と結びつけながら、デザインの根拠を言語化できる力を養います。

  初学者から実務者まで、なんとなくではなく、「根拠で語れるUI」を身につけたいすべての人へ。

  ■書籍の特徴：
  ・50問すべてに正解の根拠となる解説つき
  ・ニールセンの10原則を具体例で理解できる
  ・思案クイズでは判断力が養える
  ・教育・研修教材としても使いやすい

  ■本書のターゲット：
  ・UIデザインの初学者
  ・UIデザイナー1～3年目
  ・ディレクター/PM
  ・エンジニアでUI設計に関わる人
  ・デザインを説明する立場の人
  ・UIの良し悪しを判断する立場の人

  ■CONTENTS：
  Part 1　クイズ編
  Chapter 1　誰がどこで使うのか
  Chapter 2　画面遷移と操作手順
  Chapter 3　デバイスの制約
  Chapter 4　視覚心理とUI
  Chapter 5　認識とUI
  Chapter 6　手がかりとUI
  Chapter 7　色・形・文字
  Chapter 8　思案クイズ
  Chapter 9　洞察クイズ
  Part 2　スタディ編
  Study 1　利用者と利用環境の考え方
  Study 2　情報の構造と操作の流れ
  Study 3　デバイス特性と設計上の制約
  Study 4　視覚心理をUIにどう活かすか
  Study 5　認識と理解のプロセス
  Study 6　行動を導く手がかりの設計
  Study 7　色・形・文字による情報伝達
  Appendix　ヤコブ・ニールセンのユーザビリティ10原則

クイズで学ぶUIデザイン ユーザビリティの基本が身につく50問 の商品スペック