書籍レビュー

書籍レビュー：「UI デザインの教科書」を読んでみた

2021年1月24日

UI デザインの教科書を読んでみたので、メモ書きとレビューを残します。

https://www.amazon.co.jp/gp/product/4798155454

お断り・・・下記のメモでは、大部分はパラフレーズを行っていますが、一部は本文の表現をそのまま流用させてもらっています。また、一部自分の言葉を補っている部分があります。

章ごとの要点

  • １章　デザインの目的と UI/UX
    • デザインの目的
      • デザインは「絵」や「芸術」ではなく、「設計」であり、課題解決とバリューをもたらすもの。
    • UI と UX
      • UI・・・ユーザーが仕組みとの接点であり、モニター、キーボード、マウス、アプリケーションなどである。
      • UX・・・ユーザーがサービス利用を通じて感じる全ての体験であり、主観的なものである。
  • ２章　物理的な制約
    • 入力手段の違い
      • PC・・・マウス(及びトラックパッド)は画面上で細かい操作を行うことができる。また、縦スクロールを行ってもそれほどユーザーの負担にはならない。モニターとマウスポインターがそれぞれ独立して存在しているため、画面上でホバー状態を利用することができる。
      • タッチパネル・・・タッチパネルではマウスほどの細かな操作ができず、操作対象の要素は PC と比較すると大きくする必要がある。ホバー状態を利用することができないので、目視で捜査対象の可否判断ができる必要がある。
    • Android と iPhone
      • iOS ではソフトウェアとして戻るボタンを提供する必要があるが、Android ではデバイス側で戻るボタンが提供されている。そのため、サービスによっては画面左上のメニューが iOS と Android で異なる場合がある。
  • ３章　ソフトウェアの影響
    • Web とアプリ
      • Web サービス
        • ブラウザからアクセスできるため個別にインストールする必要がない。(配備の手間が省ける。)
        • マルチデバイス、マルチ OS 対応がしやすい。
        • URL を伴う。
      • ネイティブアプリケーション
        • 実行時パフォーマンスが高い。
        • Web サービスよりもより複雑なジェスチャーに対応できる。
  • ４章　人間の認知特性
    • 色・形・動き
      • 色・・・瞬時に判断する(見分ける)ことができる。ただし、複数の色が存在すると判別するのに時間がかかるため、デザインを検討する上で不用意に色を多用するのは避けるべきである。
    • インタラクションコスト
      • インタラクションコストとは、精神的負荷と身体的負荷から構成される。インタラクションコストを下げるには、「一貫性」、「シンプルさ」、「共通概念」をベースとしたデザインがなされる必要がある。
      • 精神的負荷・・・UI の状態認知に要する負荷を含めた、精神的な活動にかかる負荷のこと。
      • 身体的負荷・・・タップ、スクロール、クリックを含む、エンドユーザーのあらゆる物理的な操作にかかる負荷のこと。
    • 共通概念
      • 社会で周知されている概念を取り入れることで、ユーザーに機能の意図を示すことができる。国や地域、習慣に影響されることなく共通的に理解されるデザインが、ユニバーサルデザインというコンセプトである。
  • ５章　階層と構造
    • 階層の深さと広さ
      • 階層は浅く広い方が検索性が高く使いやすい傾向にある。同階層上を検索するよりも、階層を移動して検索する方がインタラクションコストが高くなるため。
    • 現在地と差別化表現
      • 現在地を示す方法として、パンくずリストや多段ヘッダー表示がある。多段ヘッダー表示では、外観に変化を加えることで他の(同階層にある)カテゴリと差別化を図ることができる。
    • トップ・一覧・詳細
      • サービスの構成として、「トップ・一覧・詳細」が採用されることが多い。一覧と検索結果は本質的に同じ構造となっている。
  • ６章　ナビゲーションとインタラクション
    • カラムと左右ナビゲーション
      • サイドナビゲーションにツリーメニューを配する場合、ツリーのノードをインデント表示することになる。ノードの最下層項目に対応するコンテンツ(詳細)を画面メイン領域に表示する際に、左のメニューから右の詳細と左から右への視線の流れは自然に感じられるが、右から左では不自然に感じられる。
    • オーバーレイ
      • ポップアップとも呼ばれ、画面遷移が発生せず、現在画面でユーザーに任意の操作を求めることができる。画面遷移と比較すると、現在ページへの復旧も容易である。オーバーレイには、画面全体を覆う割り込みと、画面の一部を覆う割り込みがある。
    • スクロール、ページング
      • Google 検索の場合、PC 向けページでは、腰を据えた作業を行うことを念頭に、従来からあるページングが採用されているであろう。一方でスマートフォン向けページでは、ユーザーは短時間で手軽に検索を行いたいニーズを念頭に、無限スクロールを採用しているであろう。
    • スクロールの方向
      • テキストは改行を伴いながら上から下に向かって流れていく。このため、テキスト量が多いコンテンツは縦にスクロールする傾向がある。画面が横長の場合、（画面が長い方向である）横にスクロールする傾向がある。
  • ７章　デザインを形にする
    • デザインガイドライン
      • デザインガイドラインには外観を司る様々なルールが定義されている。デザインガイドラインの目的は、各 UI 要素の定義を示すことでそれら要素の再利用性を高める、システム運用を通じて一貫したデザインを保持し続ける、クロスデバイスにおいて統一感を提供することである。大手を含む各社から独自のデザインガイドラインが公開されている。
    • プロトタイプ
      • ワイヤーフレームは、大まかな構成を示すものであり作り込みは行われていない。思い描いているイメージを絵に描き起こしたレベルのものでよい。素早いフィードバックループの実施を目的としている。
      • モックアップは、実際のサービスと同様のインタラクションや操作感を提供する。
      • プロトタイプを利用することで、企画の早い段階でステークホルダー間での合意形成を行うことができる。実利用される開発プラットフォームを用いて作成されるもの。

まとめ

この書籍を読んでみて、経験則的に「なんとなくこうだろう」と感じていたことに対して、下支えする理由を伴って説明されており、理解が深まる概念が多かったです。また、今まで散在していた理解の点が整理される感覚もあり、とても有用でした。先の要点メモを読んでみて、もっと詳しく知りたい！と思った方は、UI デザインの教科書おすすめです。

-書籍レビュー