UI/UX のバックアップ(No.4)

[ トップ ]   [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• UI/UX へ行く。
  • 1 (2026-06-23 (火) 08:59:09)
  • 2 (2026-06-23 (火) 11:52:52)
  • 3 (2026-06-23 (火) 16:53:06)
  • 4 (2026-06-23 (火) 18:52:44)
  • 5 (2026-06-23 (火) 20:58:12)
  • 6 (2026-06-24 (水) 10:52:45)
  • 7 (2026-06-24 (水) 15:14:53)
  • 8 (2026-06-24 (水) 18:56:46)
  • 9 (2026-06-25 (木) 01:23:14)
  • 10 (2026-06-25 (木) 03:17:48)
  • 11 (2026-06-25 (木) 11:01:15)

---

「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

• 戻る

目次 †

概要 †

詳細 †

全体を通して、

• 「人間中心設計」という進め方に基づいて、ユーザーの利用状況を理解しながら「UI」を設計し、
• その結果として得られる「UX」を「ユーザビリティ」 と「アクセシビリティ」で評価・改善していく。

ユーザー・インターフェース（UI） †

• UXが「ユーザーが（システムや製品、サービスから）受け取る体験」であるのに対し、
• UIは「それを実現するシステムや製品、サービスのインターフェイス設計や仕様」を指す。

... †

... †

ユーザ・エクスペリエンス（UX） †

（ユーザ・エクスペリエンス / ユーザー体験）

• 「ユーザビリティ」から派生した新たな拡張された概念。
• システムや製品、サービスと関わったときの、人の反応のすべて。

定義と本質 †

• 定義(ISO 9241-210:2019/JIS Z 8530:2021による)

  “システム、製品又はサービスの利用前、利用中及び利用後に生じるユーザの知覚及び反応”

• ポイント
  • 本質的な意味：一言で言えば、「システムや製品、サービスと関わったときの人の反応のすべて」という非常に広い概念。
  • 影響を与える要因：ユーザーの知覚及び反応（注釈1）だけでなく、その他の製品・ユーザーに関する要因、利用状況（注釈2）の影響を受ける。

• 注釈
  • 1：ユーザの知覚及び反応は、ユーザの感情、信念、嗜好、知覚、身体的及び心理的反応、行動並びに達成感を含む。
  • 2：製品の「ブランド・イメージ、表現、機能、性能、支援機能及びインタラクション」、ユーザの「事前の経験、態度、技能、個性によって生じる内的及び身体的な状態」、利用状況などの要因の影響を受ける

満足度全体を重要視 †

するようになった経緯

• それまで主流だった「ユーザビリティ」だけでは説明しきれない製品・サービスとユーザーの関係性の説明が必要になった。
  • 魅力的な体験が勝るケース：操作が難しくても、孫と連絡が取れる携帯電話のように、得られる機能や体験が極めて魅力的であれば受け入れられる。
  • 難しさに価値があるケース：楽器の演奏技術やゲームの攻略、筋トレのように、訓練や適度な負荷、難易度の高さそのものがステータスや楽しさ、価値につながる。
  • 他の要素が優先されるケース：セキュリティ対策のように、安全性を確保するためにあえて複雑な手続きを受け入れる必要がある。

• 主戦場の変化（サービスの提供形態や評価軸の多様化）
  • 物売から事売（コーヒー豆を売る から 自動販売機・カフェなど）など「価値提供形態を変え付加価値向上を図る」ケースの増加。
  • 機能・性能向上からUX向上（鉄道車両ではスピードアップから乗客のユーザー体験向上）へシフトするケースの増加。
  • 具体的な事例：医療機器販売ではなく健診ソリューション（Philips Ambient Experience - People focused healthcare）

UIとの違い †

• UIは製品側に帰属する仕様（寸法、色、構造、スペックなど）であり、製品とユーザーの接点の要素。
• UXはユーザー側に帰属し、製品と接した結果としてユーザーの中に生じる「体験」そのものを指す。
• UIとUXの関係性：「UI＝原因」「UX＝結果」という因果関係にある。製品側のUIにユーザーが接した結果として、ユーザーがUX（体験）を享受する。

ユーザビリティとの違い †

• 「ユーザビリティ」の拡張された派生が「UX」で境界線は曖昧
  • ユーザビリティにも満足度やユーティリティの考え方がある。
  • 機能・性能がどちらに分類されるか？も、曖昧だが評価項目が異なりそう。
  • ただし「ユーザビリティ」が尺度であるのに対し「UX」は尺度ではない。
    従って、UXのレベルを議論するためには、別途、評価尺度を用意する必要がある。

• ユーザビリティから拡張された4つの観点（「対象物」「場面」「対象者」「反応」）

  観点	ユーザビリティの範囲	UXの範囲
  対象物	主に使い易さの内の操作性に関わる要素（機能/性能/UIなど）	加えて、ブランド・イメージ、機能、性能、価格、評判など全体
  場面	製品を今まさに操作している「利用中」	興味を持つ「利用前」から、修理や廃棄などの「利用後」まで
  対象者	目標を持ってリアルタイムに操作している人	利用前後の人や、隣で見ている人など、対象物と接点を持つ人全般
  反応	操作による効果・効率・満足	感情、思考、行動、ライフスタイルの変化などすべて

UXハニカム †

（別の切り口）

• UXを7つの要素でシンプルに説明した概念

• 中心1要素を外側6要素を満たして実現。
  • 中心1要素：「Valuable 価値がある」
  • 外側6要素：
    「Useful 役に立つ」「Usable 使いやすい」「Desirable 好ましい」
    「Findable 探しやすい」「Accessibleアクセスしやすい」「Credible 信頼できる」

Web UXの5階層モデル †

（別の切り口）

• 概念図

  	Webアプリ（タスク指向）	HTML（情報指向）
  表層	ビジュアル設計
  骨格	インターフェイス設計	ナビゲーション設計
  	情報設計
  構造	インタラクション設計	情報アーキテクチャ
  要件	機能仕様	コンテンツ要件
  戦略	ユーザーニーズ
  	サイトの目的

• 解説
  下層（抽象的）から上層（具体的）に向かって「戦略」「要件」「構造」「骨格」「表層」の5つの階層で構成される。
  • 設計プロセス：Webサイトの開発プロセス（目的の明確化 → 要件定義 → 構造決定 → ワイヤーフレーム化 → ビジュアル設計）に対応。
  • 普遍的な考え方：提唱者であるJ.J.ギャレット氏のこの概念図は、Webだけでなく他の製品やサービスにおいても基礎として応用できる。

UXデザイン †

• 概念
  UI設計に限定されるものではなく、意図したUXを提供するために「ユーザー視点」で機能やUIなどを設計すること。
  • 目的：単に「操作画面を描くこと」ではなく「ユーザー体験」を意図した通りに提供するための包括的な設計・開発行為。
  • 重要性：ユーザーに受け入れられないリスクを回避するため開発の上流から下流まで一貫して「ユーザーの視点」で考える。
  • 実践：プロセス全体を通してユーザーを中心におくアプローチ（人間中心設計（HCD））が不可欠。

• プロセス全体像
  UXデザイン（人間中心設計（HCD））は、製品開発プロセスと密接に連動している。

• 計画策定後に以下の4つのステップを繰り返しながら進める。
  1. 利用状況の理解と明示（ユーザーリサーチ・分析）：ユーザーリサーチを行い、現状の利用状況、課題、価値観を理解・記述
  2. ユーザー要求事項の明示（目標の定義）：調査結果を元に、作り手側が「提供すべきUX」を定義・宣言し、ターゲット像や体験を記述。
  3. 設計案の作成：目標達成のための具体的なアイデアを検討し、画面UIやサービスなどの形（仕様）に落とし込む。
  4. 設計案の評価：作成した設計案が目標に適合しているかを検証。問題がなくなるまでこのプロセスを繰り返す。

• 各ステップに合わせた最適な手法やツールを活用して設計の完成度を高める。
  1. 観察/フォトダイアリー、インタビュー、インフォーマント・プロフィール、現在のジャーニーマップ、...
  2. あるべき姿/目標とするUX、ペルソナ、未来のジャーニーマップ、...
  3. ストーリーボード、UIデザイン、ワイヤーフレーム/画面フロー、プロトタイプ作成、...
  4. ペーパー・プロトタイピング、ユーザビリティ・テスト、ヒューリスティック評価、アクセスログ、...

ユーザビリティ †

操作上の扱い易さ。

• 対象：人間が作った「人工物」の中の「道具」
• 道具：人が何らかの実用的な目的を達成するために使用する人工物

※ UXの一部であり、歴史的にも先に登場

定義と本質 †

• 定義 (ISO 9241-210:2019/JIS Z 8530:2021による)

  “特定のユーザが特定の利用状況において、 システム、製品又はサービスを利用する際に、 効果、効率及び満足を伴って特定の目標を達成する度合い”

• 厳密に言うと、ユーザビリティは、ユーザビリティとユーティリティに分けられる。
  利用に関する価値・便益についての...
  • ユーザビリティ：「機能を簡単かつ快適に使えるか？」マイナス排除
  • ユーティリティ：「優れた手段・機能があるか？」プラス提供

• 目標達成の度合いを測る3要素
  「（独立したものではなく）依存関係」と「優先順位」がある（以下、優先順位順）。
  • 効果：ユーザーがやりたいことを正確かつ最後までやり遂げられるか（正確性と完全性）。
  • 効率：操作に迷ったり無駄な時間をかけたりせず、スムーズに処理できるか。
  • 満足：操作手順に違和感がなく、ユーザーが満足（納得）できるか。
  • ※例：確信が持てないワンクリックより確信が持てる複数クリックの方が満足度が高まる。

• 議論に不可欠な3条件
  
  • 特定のユーザー（誰が使うのか）
  • 特定の目標（何のために使うのか）
  • 特定の状況（どんな場面・環境で使うのか）

石斧の例 †

破壊や切断という目的を果たすために巨大化・重量化する基調

• サイズ・重量：人間が普通に持って扱える適度な大きさに調整
• 素材：持ったときに手が痛くならず、滑りにくくされている。
• 形状：人間が腕を振り下ろす軌道に合わせ、刃先に最も力が伝わる

利用に関する性質 †

「使い難い」の2つの性質（9つの事例による分類）

• 製品スペックの問題：カメラの解像度、バッテリー持ち、通信状況など、ユーザーの存在とは無関係に、機能の有無や性能（スペック）として事前に評価できる問題。
• ユーザー起因の問題：操作が分からない（ボタンが押しづらい、文字が読みづらいなど）、ユーザーが実際に操作する中で発生する問題。

※ IT系では、ユーザー起因の問題が増えている。

ユーザーへの負担 †

（別の切り口）

• 身体的負担：利用する際の身体的の負担
• 心理的負担：利用する際の身体的以外の負担
• 社会的負担：誤操作による損失や、失敗による社会的影響など。

※ IT系では、身体的以外の部分が大きい。

認知とのギャップ †

（別の切り口）

ユーザーが製品を操作する際、頭の中では「気づく → わかる → 操作できる」という認知プロセス（メンタルモデル）が働いている。

• インタラクションの成立（成功）：作り手が提供したUIと、ユーザーの操作イメージが一致していれば、操作はスムーズに成功。
• 操作のつまずき（失敗）：ギャップがあると、アイコンに気づかない、意味がわからない、ボタンが小さくて押せないなどが起きる。

※ 電話の黒電話や受話器のマークは、将来、認知ギャップが発生する可能性がある。

測定要素の重要度の変化 †

「利用状況」や「経過時間」に応じて目標達成の度合いを測定する要素の重要が変化する。

• 利用状況の違いによる変化
  カメラを使用する場合、
  • 動かないもの（風景・食べ物など）の撮影： 操作に時間をかけても状態が変わらないため、時間は目標達成の決定的な要素になりにくい。
  • 動くもの（動物・乗り物など）の撮影： もたもたしているとシャッターチャンスを逃すため、操作の速さが目標達成の可否に直結する。

• 経過時間による変化
  • 購入直後：イニシャル作業をいかにスムーズに行えるか？
  • 利用継続時：目標達成は当然となり、作業効率が重要になる。
  • トラブル発生時：トラブルを解決して利用を再開できるか？

ITシステムへの応用 †

• 機器のデジタル化に伴うユーザビリティの変遷

• アナログ機器の特徴とユーザビリティ
  • 特徴：構造がシンプルで単機能
  • 操作性：外観を見ただけで操作方法が容易に想像できる。
  • 配慮：「解剖学的特性（身体的特性）」への配慮が中心。

• デジタル機器の特徴と課題
  • 特徴：多機能・複合化しており「機能と形状が無関係」になりがち。
  • 課題：外観だけでは、どう操作すればどう動くのかという操作方法が想像し難い。

• デジタル化による転換点とUI（GUI、CUI）設計の必要性
  • 課題：外観から操作を察することができなくなったため、意図的に操作方法がわかる設計（UI設計）が必要不可欠
  • 配慮：「解剖学的特性（身体的特性）」だけでなく「認知的特性（理解や判断のしやすさ）」に合っているかが特に重要。

• インターネット、Webサービス（Webアプリ、Webシステム）の誕生
  • 多数の対人サービスがWebサービスに移行、ユーザビリティの向上が強く求められるようになった。
  • ITシステムはアナログ・体験要素が少ないので、≒ マン・マシン・インターフェース（UI、GUI、CUI）になる。

Webユーザビリティ10原則 †

Webユーザビリティの大家、ヤコブ・ニールセン博士が1995年に提唱したUI設計原則

• UI系
  • システムの状態を可視化する：見えない裏の動きを表に表す。
  • 実世界とシステムをマッチングさせる：例えばボタンの見た目はボタンと解るように。
  • 一貫性と標準性を保持する：今や、サイト内に限らず、共通認知、一般常識に合わせる。
  • 覚えなくても理解できる設計にする：画面をデータメンテにしないで業務フロー的にする、みたいな。
  • 柔軟性と効率性をもたせる：メニューやショートカットなど幅広いスキルのユーザーに選択肢を与える。
  • 最小限で無駄のない設計にする：機能に優先順位をつける（稀なボタンはサブメニューにするなど）

• エラー系
  • ユーザに制御の主導権と自由を与える：誤操作を元に戻せる（業務例外的な）。
  • エラーは事前に防ぐ：システム例外、誤操作（ランタイム例外ではなく業務例外）に導かない工夫をする。
  • ユーザ自身で認識、診断、回復ができるようにする：誤操作が発生したら復帰方法を通知する。

• その他
  • ヘルプとマニュアルを用意する：その他、FAQ、チュートリアル、使い方ガイドなども。

フォーダンスとシグニファイア †

UI/UX設計やプロダクト設計において、ユーザーがモノを直感的に操作できるようにするための重要な概念

• アフォーダンス：環境やモノが人（動物）に提供する「行動の可能性」
• シグニファイア：ユーザーに「どう操作すればよいか」を伝える手がかりやサイン。

アクセシビリティ †

... †

... †

その他 †

学問領域 †

人間工学・感性工学・認知心理学：人間の特性をベースに設計を考える、UXの基礎となる学問領域

人間中心設計（HCD） †

人間中心 ≒ ユーザー指向の設計ポリシー。UXデザインには必要な考え方。

• スペック重視ではなく、利用者のニーズを中心に据える設計ポリシー（思想）。
• 「UI/UX」、「ユーザビリティ/アクセシビリティ」を実践するためのプロセス。
• 国際規格（ISO）にもなっており、プロセス・手法はUX設計にそのまま適用される。
• UXのJIS定義には「人間中心設計では、インタラクティブシステムの設計に関連するユーザエクスペリエンスだけを管理する。」とある。

ユニバーサル・デザイン（UD） †

• 年齢、性別、国籍、障害の有無にかかわらず「最初からすべての人が利用しやすいように設計する」という考え方

• 7つの原則
  • 原則1 : 誰にでも公平に利用できること
  • 原則2 : 使う上で自由度が高いこと
  • 原則3 : 使い方が簡単ですぐわかること
  • 原則4 : 必要な情報がすぐに理解できること
  • 原則5 : うっかりミスや危険につながらないデザインであること
  • 原則6 : 無理な姿勢をとることなく、少ない力でも楽に使用できること
  • 原則7 : アクセスしやすいスペースと大きさを確保すること

※ AIの公平性・包括性にも近い考え方。

カスタマー・エクスペリエンス（CX） †

（カスタマー・エクスペリエンス / 顧客体験）

• 本質的にはUXと大きな違いはない。
• システムや製品では「ユーザー」だが、サービスで違和感がある場合に「カスタマー」と呼ぶ。
• 余談だが、設計・開発系では「ユーザー」、企画・営業系では「カスタマー」と呼ぶ事が多い。

進め方 †

ユーザ・リサーチ †

「作り手が考える」から「ユーザ（インフォーマント）側からヒント」を得る（顕在 → 潜在、意識 → 無意識、断片 → 文脈）

全体の流れ †

利用状況の理解と明示～ユーザー要求事項の明示まで

• 調査手法：【ASIS】フォーカス・グループ（グループ・インタビュー）、アンケート、【TOBE】観察、フォト・ダイアリー、インタビュー
• 記述手法：【ユーザー像】インフォーマント・プロフィール → ペルソナ、【活動・体験による時間経過を伴う変化】現在 → 未来のジャーニーマップ

調査手法 †

• 観察（行動観察やエスノグラフィーとも呼ばれる）
  • 調査対象者（インフォーマント）とその活動に関する事実を把握するための調査手法
  • 調査者が実際の活動現場に直接出向くことでリアルタイムで詳細な活動状況を把握できる。
  • メリットとデメリット
    • メリット：言葉での意思疎通が難しい対象（例：小さな子供）や、無意識の行動も含めた詳細な事実の把握ができる。
    • デメリット：インフォーマントのプライベートな空間に調査者が入り込むため、お互いに精神的・物理的な負担が大きい。
  • 実施の際の留意点
    • 自然な活動を妨げない
    • 同意なく個人情報や機密情報を取得しない。

• フォト・ダイアリー
  • インフォーマント（対象者）自身に自身の活動を写真日記で記録してもらう情報収集手法です。
  • メリットと有効なケース
    直接的な「現場観察」が難しい以下のようなケースにおいて有効な代替手段
    • プライバシー・機密保持：プライベートな空間や、機密情報を扱う職場である場合。
    • 物理的・コスト的制約：調査現場が遠隔地にある、または調査対象の数が多すぎる場合。
  • デメリットとその補完策
    • 本人が記録した内容に限られるため、直接観察より情報量は落ちる。
    • インタビューのきっかけとして活用し、詳しく深掘りすることでカバーできる。
    • 実施上の留意点と工夫
      インフォーマントの記入負担が大きいため、モチベーション低下を防ぐ対策が必要
    • 記録内容や写真の撮り方を事前にわかりやすく説明し、質問に答えられるサポート体制を整える。
    • 提出のハードルを下げるため、「LINEで写真を撮って文章と送ってもらう」などの気軽な方法を取り入れる。
    • 多少内容が期待と異なっても、まずは期限までに提出してもらうことを最優先とする。

• インタビュー

プロトタイピング/UIデザイン †

ユーザビリティ・テスト †

基本ルール、 †

必要なモラル †

リリース後の活動 †

     

Site admin: TechInfoOfMicrosoftTech

PukiWiki 1.4.7 Copyright © 2001-2006 PukiWiki Developers Team. License is GPL.
Based on "PukiWiki" 1.3 by yu-ji. Powered by PHP 5.3.3. HTML convert time: 0.051 sec.