UI/UX
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-[[戻る>SaaS設計のポイント]]
*目次 [#z2e5a624]
#contents
*概要 [#j58758b2]
*詳細 [#cd6c2ca3]
全体を通して、
-「[[人間中心設計>#b506a751]]」という進め方に基づいて、ユ...
-その結果として得られる「[[UX>#k01982d0]]」を「[[ユーザビ...
**ユーザー・インターフェース（UI） [#l7d9ce8a]
ユーザー・インターフェース（UI / User Interface）
-[[UX>#k01982d0]]が「ユーザーが（システムや製品、サービス...
-UIは「それを実現するシステムや製品、サービスのインターフ...
***定義 [#y9c390d9]
-製品やサービス（機械、コンピューター、アプリなど）と、そ...
--[[OSのシェル>https://techinfoofmicrosofttech.osscons.jp...
--最近は、VUI（Voice User Interface / 音声ユーザー・イン...
--また、音声認識に留まらず事前の定義を必要としない、複雑...
-UIを構成する2つの視点
--視覚的な要素（見てわかるもの）
画面に表示されるデザインやレイアウト全般
---ボタン、メニュー、アイコン、テキスト
---配色、フォント、画像の配置
---グラフ表示やアニメーション
--操作的な要素（触って動かすもの）~
ユーザーが何かを入力したり、機械を動かしたりする手段です。
---マウスのクリック、キーボードのタイピング
---スマホのタップ、スワイプ、ピンチイン/アウト
---音声操作（「アレクサ」「Hey Siri」など）
***[[UIデザイン>#be4c7962]]と[[基本ルール>#x45c32af]] [#t...
本来、UI（操作画面）のデザインのみを指す概念ではないが、...
**ユーザ・エクスペリエンス（UX） [#k01982d0]
（ユーザ・エクスペリエンス / ユーザー体験）
-「[[ユーザビリティ>#nbcf08e9]]」から派生した新たな拡張さ...
-システムや製品、サービスと関わったときの、人の反応のすべ...
***定義と本質 [#pdfca6ae]
-定義(ISO 9241-210:2019/JIS Z 8530:2021による)
“システム、製品又はサービスの利用前、利用中及び利用後に...
-ポイント
--本質的な意味：一言で言えば、「システムや製品、サービス...
--影響を与える要因：ユーザーの知覚及び反応（注釈1）だけで...
-注釈
--1：ユーザの知覚及び反応は、ユーザの感情、信念、嗜好、知...
--2：製品の「ブランド・イメージ、表現、機能、性能、支援機...
***満足度全体を重要視 [#l8fdd667]
するようになった経緯
-それまで主流だった「[[ユーザビリティ>#nbcf08e9]]」だけで...
--魅力的な体験が勝るケース：操作が難しくても、孫と連絡が...
--難しさに価値があるケース：楽器の演奏技術やゲームの攻略...
--他の要素が優先されるケース：セキュリティ対策のように、...
-主戦場の変化（サービスの提供形態や評価軸の多様化）
--物売から事売（コーヒー豆を売る から 自動販売機・カフェ...
--機能・性能向上からUX向上（鉄道車両ではスピードアップか...
--具体的な事例：医療機器販売ではなく健診ソリューション（[...
***[[UI>#l7d9ce8a]]との違い [#w684199b]
-UIは製品側に帰属する仕様（寸法、色、構造、スペックなど）...
-UXはユーザー側に帰属し、製品と接した結果としてユーザーの...
-UIとUXの関係性：「UI＝原因」「UX＝結果」という因果関係に...
***[[ユーザビリティ>#nbcf08e9]]との違い [#y67379ad]
-「[[ユーザビリティ>#nbcf08e9]]」の拡張された派生が「[[UX...
--[[ユーザビリティ>#nbcf08e9]]にも満足度やユーティリティ...
--機能・性能がどちらに分類されるか？も、曖昧だが評価項目...
--ただし「[[ユーザビリティ>#nbcf08e9]]」が尺度であるのに...
従って、UXのレベルを議論するためには、別途、評価尺度を用...
-[[ユーザビリティ>#nbcf08e9]]から拡張された4つの観点（「...
|観点|[[ユーザビリティ>#nbcf08e9]]の範囲|UXの範囲|h
|対象物|主に使い易さの内の操作性に関わる要素（機能/性能/U...
|場面|製品を今まさに操作している「利用中」|興味を持つ「利...
|対象者|目標を持ってリアルタイムに操作している人|利用前後...
|反応|操作による効果・効率・満足|感情、思考、行動、ライフ...
***UXハニカム [#p534dd3e]
（別の切り口）
-UXを7つの要素でシンプルに説明した概念
-中心1要素を外側6要素を満たして実現。
--中心1要素：「Valuable 価値がある」
--外側6要素： ~
「Useful 役に立つ」「Usable 使いやすい」「Desirable 好ま...
「Findable 探しやすい」「Accessibleアクセスしやすい」「Cr...
***Web UXの5階層モデル [#n77d7964]
（別の切り口）
-概念図
||Webアプリ（タスク指向）|HTML（情報指向）|h
|表層|>|CENTER:ビジュアル設計|
|骨格|インターフェイス設計|ナビゲーション設計|
|~|>|CENTER:情報設計|
|構造|インタラクション設計|情報アーキテクチャ|
|要件|機能仕様|コンテンツ要件|
|戦略|>|CENTER:ユーザーニーズ|
|~|>|CENTER:サイトの目的|
-解説~
下層（抽象的）から上層（具体的）に向かって「戦略」「要件...
--設計プロセス：Webサイトの開発プロセス（目的の明確化 → ...
--普遍的な考え方：提唱者であるJ.J.ギャレット氏のこの概念...
***UXデザイン [#e2d57086]
-概念~
UI設計に限定されるものではなく、意図したUXを提供するため...
--目的：単に「操作画面を描くこと」ではなく「ユーザー体験...
--重要性：ユーザーに受け入れられないリスクを回避するため...
--実践：プロセス全体を通してユーザーを中心におくアプロー...
-プロセス全体像~
UXデザイン（[[人間中心設計（HCD）>#b506a751]]、[[進め方>#...
--計画策定後に以下の4つのステップを繰り返しながら進める。
+++利用状況の理解と明示（ユーザーリサーチ・分析）：ユーザ...
+++ユーザー要求事項の明示（目標の定義）：調査結果を元に、...
+++設計案の作成：目標達成のための具体的なアイデアを検討し...
+++設計案の評価：作成した設計案が目標に適合しているかを検...
--各ステップに合わせた最適な手法やツールを活用して設計の...
+++観察/フォトダイアリー、インタビュー、インフォーマント...
+++あるべき姿/目標とするUX、ペルソナ、未来のジャーニーマ...
+++ストーリーボード、UIデザイン、ワイヤーフレーム/画面フ...
+++ペーパー・プロトタイピング、ユーザビリティ・テスト、ヒ...
※ UXデザインは本質的に「マーケットイン」志向だが、革新的...
**ユーザビリティ [#nbcf08e9]
操作上の扱い易さ。
-対象：人間が作った「人工物」の中の「道具」
-道具：人が何らかの実用的な目的を達成するために使用する人...
※ [[UX>#k01982d0]]の一部であり、歴史的にも先に登場
***定義と本質 [#e13aee8a]
-定義 (ISO 9241-210:2019/JIS Z 8530:2021による)
“特定のユーザが特定の利用状況において、 システム、製品又...
-厳密に言うと、ユーザビリティは、ユーザビリティとユーティ...
利用に関する価値・便益についての...
--ユーザビリティ：「機能を簡単かつ快適に使えるか？」マイ...
--ユーティリティ：「優れた手段・機能があるか？」プラス提供
-目標達成の度合いを測る3要素~
「（独立したものではなく）依存関係」と「優先順位」がある...
--効果：ユーザーがやりたいことを正確かつ最後までやり遂げ...
--効率：操作に迷ったり無駄な時間をかけたりせず、スムーズ...
--満足：操作手順に違和感がなく、ユーザーが満足（納得）で...
--※例：確信が持てないワンクリックより確信が持てる複数クリ...
-議論に不可欠な3条件~
--特定のユーザー（誰が使うのか）
--特定の目標（何のために使うのか）
--特定の状況（どんな場面・環境で使うのか）
***石斧の例 [#q02c0875]
破壊や切断という目的を果たすために巨大化・重量化する基調
-サイズ・重量：人間が普通に持って扱える適度な大きさに調整
-素材：持ったときに手が痛くならず、滑りにくくされている。
-形状：人間が腕を振り下ろす軌道に合わせ、刃先に最も力が伝...
***利用に関する性質 [#i30b6765]
「使い難い」の2つの性質（9つの事例による分類）
-製品スペックの問題：カメラの解像度、バッテリー持ち、通信...
-ユーザー起因の問題：操作が分からない（ボタンが押しづらい...
※ IT系では、ユーザー起因の問題が増えている。
***ユーザーへの負担 [#o87c78f3]
（別の切り口）
-身体的負担：利用する際の身体的の負担
-心理的負担：利用する際の身体的以外の負担
-社会的負担：誤操作による損失や、失敗による社会的影響など。
※ IT系では、身体的以外の部分が大きい。
***認知とのギャップ [#z8e26866]
（別の切り口）
ユーザーが製品を操作する際、頭の中では「気づく → わかる →...
-インタラクションの成立（成功）：作り手が提供したUIと、ユ...
-操作のつまずき（失敗）：ギャップがあると、アイコンに気づ...
※ 電話の黒電話や受話器のマークは、将来、認知ギャップが発...
***測定要素の重要度の変化 [#g1ccecfb]
「利用状況」や「経過時間」に応じて目標達成の度合いを測定...
-利用状況の違いによる変化~
カメラを使用する場合、
--動かないもの（風景・食べ物など）の撮影： 操作に時間をか...
--動くもの（動物・乗り物など）の撮影： もたもたしていると...
-経過時間による変化
--購入直後：イニシャル作業をいかにスムーズに行えるか？
--利用継続時：目標達成は当然となり、作業効率が重要になる。
--トラブル発生時：トラブルを解決して利用を再開できるか？
***ITシステムへの応用 [#pdad6347]
-機器のデジタル化に伴うユーザビリティの変遷
--アナログ機器の特徴とユーザビリティ
---特徴：構造がシンプルで単機能
---操作性：外観を見ただけで操作方法が容易に想像できる。
---配慮：「解剖学的特性（身体的特性）」への配慮が中心。
--デジタル機器の特徴と課題
---特徴：多機能・複合化しており「機能と形状が無関係」にな...
---課題：外観だけでは、どう操作すればどう動くのかという操...
--デジタル化による転換点とUI（GUI、CUI）設計の必要性
---課題：外観から操作を察することができなくなったため、意...
---配慮：「解剖学的特性（身体的特性）」だけでなく「認知的...
-インターネット、Webサービス（Webアプリ、Webシステム）の...
--多数の対人サービスがWebサービスに移行、ユーザビリティの...
--ITシステムはアナログ・体験要素が少ないので、≒ マン・マ...
***Webユーザビリティ10原則 [#y803cd6e]
Webユーザビリティの大家、ヤコブ・ニールセン博士が1995年に...
-UI系
--システムの状態を可視化する：見えない裏の動きを表に表す。
--実世界とシステムをマッチングさせる：例えばボタンの見た...
--一貫性と標準性を保持する：今や、サイト内に限らず、共通...
--覚えなくても理解できる設計にする：画面をデータメンテに...
--柔軟性と効率性をもたせる：メニューやショートカットなど...
--最小限で無駄のない設計にする：機能に優先順位をつける（...
-エラー系
--ユーザに制御の主導権と自由を与える：誤操作を元に戻せる...
--エラーは事前に防ぐ：システム例外、誤操作（ランタイム例...
--ユーザ自身で認識、診断、回復ができるようにする：誤操作...
-その他
--ヘルプとマニュアルを用意する：その他、FAQ、チュートリア...
**アクセシビリティ [#laceb56b]
***... [#ge0c7130]
***... [#ua8fe42d]
**その他 [#wb593bd4]
***学問領域 [#s9d34038]
人間工学・感性工学・認知心理学：人間の特性をベースに設計...
***人間中心設計（HCD） [#b506a751]
人間中心 ≒ ユーザー指向の設計ポリシー。[[UXデザイン>#e2d5...
-スペック重視ではなく、利用者のニーズを中心に据える設計ポ...
-「[[UI>#l7d9ce8a]]/[[UX>#k01982d0]]」、「[[ユーザビリテ...
-国際規格（ISO）にもなっており、プロセス・手法はUX設計に...
-[[UXのJIS定義>#pdfca6ae]]には「人間中心設計では、インタ...
***ユニバーサル・デザイン（UD） [#o64ab004]
-年齢、性別、国籍、障害の有無にかかわらず「最初からすべて...
-7つの原則
--原則1 : 誰にでも公平に利用できること
--原則2 : 使う上で自由度が高いこと
--原則3 : 使い方が簡単ですぐわかること
--原則4 : 必要な情報がすぐに理解できること
--原則5 : うっかりミスや危険につながらないデザインである...
--原則6 : 無理な姿勢をとることなく、少ない力でも楽に使用...
--原則7 : アクセスしやすいスペースと大きさを確保すること
※ [[AIの公平性・包括性>G検定：試験対策#q6f3ee47]]にも近い...
***カスタマー・エクスペリエンス（CX） [#k962abd4]
（カスタマー・エクスペリエンス / 顧客体験）
-本質的には[[UX>#k01982d0]]と大きな違いはない。
-システムや製品では「ユーザー」だが、サービスで違和感があ...
-余談だが、設計・開発系では「ユーザー」、企画・営業系では...
*進め方 [#q5f167e3]
UI/UXデザイン、UIデザインはUXデザインに含まれる。
**ユーザ・リサーチ [#cd1249eb]
「作り手が考える」から「ユーザ（インフォーマント）側から...
***全体の流れ [#oea37559]
利用状況の理解と明示～ユーザー要求事項の明示まで
-調査手法：【ASIS】フォーカス・グループ（グループ・インタ...
-記述手法：【ユーザー像】インフォーマント・プロフィール →...
-分析手法：「気づきの抽出」「本質の洞察（インサイト）」「...
***調査手法 [#k36bf78c]
-観察（行動観察やエスノグラフィーとも呼ばれる）
--調査対象者（インフォーマント）とその活動に関する事実を...
--調査者が実際の活動現場に直接出向くことでリアルタイムで...
--メリットとデメリット
---メリット：言葉での意思疎通が難しい対象（例：小さな子供...
---デメリット：インフォーマントのプライベートな空間に調査...
--実施の際の留意点
---自然な活動を妨げない
---同意なく個人情報や機密情報を取得しない。
-フォトダイアリー
--インフォーマント（対象者）自身に自身の活動を写真日記で...
--メリットと有効なケース~
直接的な「現場観察」が難しい以下のようなケースにおいて有...
---プライバシー・機密保持：プライベートな空間や、機密情報...
---物理的・コスト的制約：調査現場が遠隔地にある、または調...
--デメリットとその補完策
---本人が記録した内容に限られるため、直接観察より情報量は...
---インタビューのきっかけとして活用し、詳しく深掘りするこ...
---実施上の留意点と工夫~
インフォーマントの記入負担が大きいため、モチベーション低...
---記録内容や写真の撮り方を事前にわかりやすく説明し、質問...
---提出のハードルを下げるため、「LINEで写真を撮って文章と...
---多少内容が期待と異なっても、まずは期限までに提出しても...
-インタビュー~
ユーザーリサーチの一環として「事実の把握」と「その背景（...
--主な特徴と手法
---1対1の実施：活動の背景を深掘りするため、フォーカスグル...
---半構造化インタビューの採用：事前に質問を用意しつつ、対...
---「個人の本音」の追求：一般論ではなく、言いづらいような...
--4つのポイント
---インフォーマントに多く話してもらう：インタビュアーの発...
---オープンクエスチョン：「はい/いいえ」で終わる質問では...
---「弟子入り」の態度で臨む：相手の活動や考えに関心と共感...
---活動の「文脈」に着目する：空間的な広がりと、時間的な変...
***入力資料の作成 [#ga9661e9]
-人に関する情報を「インフォーマント・プロフィール」、活動...
-その後の分析作業の基礎となるだけでなく、判断に迷った際、...
-インフォーマント・プロフィール
--インフォーマント（調査対象者）ごとに、その属性や基本的...
--基本プロフィールのほか、特徴的な活動、達成したいゴール...
-現在のジャーニーマップ
--概要と特徴
---定義：一連の人の活動体験を「旅」に見立てて時系列でまと...
---目的：システム、製品又はサービスなど、複数のタッチポイ...
---現在のマップ：観察、フォトダイアリー、インタビュー等か...
--構成要素と記述内容
---時系列の記述：横軸は時間経過、縦軸は活動内容、場所、利...
---視覚的要素：フォトダイアリー等から入手した写真もあわせ...
***分析手法 [#f4410c3b]
-気づきの抽出：事実に基づいてインフォーマントの特徴的な活...
---位置づけ：調査データ（プロフィールやジャーニーマップ）...
---基本方針：調査者の解釈や想像は極力加えず、徹底して「事...
---性質：正解・不正解の定義はなく、調査者によって異なる。...
-本質の洞察（インサイト）：事実に基づいた「気付き」から主...
--言葉による言語化: 関連する気付きをグループ分けして上位...
--関係性の図解（視覚化）: 順序・因果関係、座標プロット、...
-「あるべき姿（目標とするUX）」の定義：インサイトを基に「...
--概要：インサイトを基に、作り手が提供すべき理想の体験を...
--形式：「どのような人が、どのような活動体験ができる」 と...
--役割： 仕様検討が始まった後、機能やUIなどを判断する際の...
--視点：「実現手段」（はあるか？）「ユーザ」（とズレてい...
***出力資料の作成 [#oac62550]
-ペルソナ
--概要と目的
---定義：目標とするUX（あるべき姿）のうち、「どのような人...
---目的：開発に関わるメンバー間で「提供相手が誰か」の認識...
--作成のポイント
---具体性と本質：曖昧な平均像ではなく、達成したいゴールや...
---合意形成の重要性：正解はないので関係者間で合意が取れて...
-未来のジャーニーマップ~
仕様検討などの場面で判断のよりどころとなる「作り手が提供...
--目標と作成時の注意点
---目的：目指すべき体験活動の具体的イメージを関係者間で共...
---作成方法: 現在のジャーニーマップやユーザーリサーチ結果...
---注意点：リサーチ結果がない状態で作成する（≒仕様書にな...
--エモーショナルカーブの活用
---時系列に沿ったユーザーの感情の波（快適・不満など）を曲...
---上げ、下げ、プラマイ・ゼロなど。体験価値の妥当性を検討...
**プロトタイピング/UIデザイン [#l3f7c19e]
-位置付けと役割
--抽象から具体への移行：目標とするUXが決まった後、本格的...
--開発コストの削減：本格的な開発が始まると仕様変更のコス...
-プロトタイプ（試作）の基本的な考え方
--UX再現が最優先：最も重要なのは、ユーザーの体験を部分的...
--仕組みの再現は不要：体験さえ再現できれば、プロトタイプ...
--スピードと効率の重視：簡単に作ったもので検証を繰り返す...
***プロトタイプ [#z073cb46]
-画面・UI
--一般的な手法
---ペーパー・プロトタイプ：最も簡易的。ワイヤーフレームを...
---プロトタイピング・ツール：最近の主流。パソコン上で質の...
--定義と現実~
画面・UIプロトタイプで、以下の3つの違いは曖昧。重要なのは...
---ワイヤーフレーム：UI構造検討（インタラクションなし）
---プロトタイプ：ユーザビリティ検証（インタラクションあり）
---モックアップ：ビジュアル検討（見た目重視、インタラクシ...
-ハードウェア製品
--重要性：形状変更が困難なため、早い段階での十分な検討が...
--特徴：設計要素が多岐にわたるため、体験要素の検証目的毎...
--見た目・雰囲気：スケッチ、CG、VR/AR、モックアップなどを...
--モックアップ
---寸法・形状：紙や木、粘土、3Dプリンターで、1/nスケール...
---重量感・疲労度：実寸形状の中に重りを入れ、重さや重心を...
---機能試作：機能のみを再現して検証。外見や大きさは不問。
-サービス商品
--特徴：基本に立ち返り「簡易的に体験して検証する方法」を...
--手法：ロールプレイングでサービス利用場面を再現し、改善...
***UIデザイン [#be4c7962]
ユーザビリティ上の深刻な問題の多くはUIの基本構造に起因す...
問題の影響度、後工程からの手戻り工数が大きいため、画面・U...
-ペーパー・プロトタイピング：~
画面フローとワイヤーフレームで紙芝居をし、基本構造を決め...
--ツール
---画面フロー：画面遷移を矢印などで図式化したもの。
---ワイヤーフレーム~
・画面内の要素（ボタンや表示エリアなど）のレイアウトを簡...
・手書きやPowerPoint、UIデザイン・ツールなどを用いて、細...
--プロセス~
画面フローからワイヤーフレームの順、あるいはそれらを行き...
---画面フローの検討プロセス~
・タスク（機能・サービス）の全体像を把握~
・ユーザーの目的を洗い出し、メニュー構造へ分類・整理~
・操作の順序とステップ（画面数）を考える~
・イレギュラーへの対応（操作のやり直しや別行動）も考慮
---ワイヤーフレームの検討プロセス~
・画面に必要なUI要素の洗い出しとグループ化~
・レイアウトの配置（重要度、操作順、視線移動を考慮）~
・情報量のコントロール（非表示、ポップアップ、複数画面に...
-製品全体での一貫性（ルールの策定）
--製品全体で、タスク・画面毎の挙動やレイアウトがバラバラ...
--共通ルールを決め一貫性を持たせる「どの画面からもホーム...
-ツール（プロトタイピング・ツール、UIデザイン・ツール）
--画面上でワイヤーフレームを描き、画面遷移を指定すること...
--完成品レベルのビジュアルまで作り込めるため、ペーパー・...
--主な共通機能
---テンプレート・パーツの再利用：枠やOS標準のパーツが用意...
---画面遷移の指定：画面同士を「線」でつなぐだけで遷移を指...
---インタラクションの再現：タップ、ダブルタップやフリック...
---マルチデバイスでのプレビュー：PCや実機（スマホ・タブレ...
---コラボレーション機能：複数人での共同編集や、コメント機...
--代表的なツール「Figma」での操作例
---登録済みのパーツをドラッグ＆ドロップして配置
---ボタンから遷移先画面へ矢印（線）を引くことで、簡単に画...
---プレビュー画面で縦横のスクロールやタップによる画面遷移...
--ツールのリンク集
---Figma (https://www.figma.com)
---Marvel (https://marvelapp.com)
---UX pin (https://www.uxpin.com)
---Principle (http://principleformac.com)
---Origami Studio (http://origami.design)
---ProtoPie (https://www.protopie.io)
---Axure (https://www.axure.com/)
---Ulzard (https://uizard.io/)
---Justinmind (https://www.justinmind.com/)
---Framer X (https://www.framer.com)
---Flinto (https://www.flinto.com)
---Indigo Studio (https://jp.infragistics.com/products/in...
---Sketch (https://www.sketch.com)
**UIデザインの基本ルール [#x45c32af]
-人間の特性や過去のノウハウに基づく「基本ルール」に沿うこ...
-ただし、それだけで優れたユーザビリティが保証されるわけで...
-デザインガイドライン（OSメーカーが公開しているもの）や、...
***レイアウト [#f91ebb04]
-情報量の制限
--情報量を増やしすぎない配慮：人間の短期記憶には限界があ...
--短期記憶の限界：「マジカルナンバー7±2」人間が一度に処理...
--デザインへの応用：ユーザーの許容量を超えない適切な情報...
-視線移動に配慮~
UI配置の主な考え方は、横書きの操作画面でユーザーの視線は...
--配置の3つのアプローチ
---操作手順に合わせる：最初に押すボタンを左上に、完了ボタ...
---優先順位に合わせる：使用頻度の高い機能やおすすめコンテ...
---階層構造に合わせる：メニューやカテゴリー（上位）を上・...
--代表的なレイアウト例
---左上のロゴ配置：多くのサイトで左上に企業ロゴ（ホームへ...
---F型レイアウト：Webサイトでは画面の上部と左側にツールバ...
---右上のメニュー配置：スマホサイトでは、右上にハンバーガ...
-ゾーニング（エリア分け）~
意味の近いものごとにエリアを分けて配置するデザイン手法で...
--例：エアコンのリモコン~
基板の物理的な制約がある中で、機能の共通性や操作の連動性...
---温度調節：上下ボタンと液晶の数字（表示）を近接させ、連...
---風に関する機能：風量調節・風向・スイングなど、風に関す...
---メンテナンス機能：使用頻度が低いため、空きスペース（左...
---タイマー機能：下端に配置。端のエリアは視認性が高いため...
--例：ウェブサイト~
役割ごとに画面上の配置エリアが明確に固定されている。
---上部（ツールバー）： 全ページで共通して使う機能のゾー...
---左側（メニュー）： コンテンツ切り替え機能、および下部...
---右側（メインスペース）： コンテンツ表示ゾーン（上部が...
***手がかり [#h4235ceb]
-アフォーダンスとシグニファイア~
ユーザーがモノを直感的に操作できるようにするための重要な...
--アフォーダンス：モノが人に提供する「行動の可能性」（椅...
--シグニファイア：ユーザーに「どう行動すればよいか」を伝...
--ドアの取っ手の例
---パイプ形状: 手で握れるため「引く」動作を促す。
---プレート形状: 面があるため「押す」動作を促す。
--画面UIのデザイン変遷と課題
---スキューモーフィック・デザイン（過去）: 実際のボタンの...
---フラット・デザイン（現在）: トレンドである反面、出っ張...
-フィードバック
--定義と効果：ユーザーの操作に対するシステムからの反応。...
--必要性: 内部処理は見えないため、UIの一部として意図的に...
--具体例：ボタンがマウスオーバーで変色し、クリックで凹む...
--多角化：視覚（見た目）にとどまらず、カメラのシャッター...
-メタファー~
機能を「何かに例える表現手段」のこと。身近なものに例える...
--デスクトップメタファー：パソコンの基本画面を「書斎の机...
--画材・文房具のメタファー：グラフィックソフトにおいて、...
--ボタンのメタファー：本質的にはコマンド実行やパラメタの...
-強調表現
--特徴
---重要性: 通知や警告など、システムとユーザーの双方にとっ...
---異質性: 意識していないユーザーに気付きを促すという、使...
--目的~
特定の要素を目立たせるために使われ、主に4つの目的がある。
---意味の違いの表現：選択中のタブの色変更や、カレンダーの...
---システムからの通知：メッセージ受信などを知らせるアイコ...
---重要な判断の促進・警告：データ削除時のメッセージ表示や...
---要素への視線誘導：バナー広告など、ユーザーの目を引くた...
***操作手順 [#w22d7cda]
-画面フロー
--基本ルールは、ユーザーの「自然な思考順序」に合わせるこ...
--ただし、何が自然かは、サービスやユーザー像によって異な...
---例えば、JR東日本の指定席券売機では「特急券の指定（駅・...
---しかし、次の思考順序やニーズも考えられる「乗車券を先、...
-オブジェクト指向UI（OOUI）
--設計思想
---タスク指向UI：ユーザーが「処理（タスク）」を先に選択し...
---オブジェクト指向UI：ユーザーが「操作対象（オブジェクト...
--現在主流
---通常の「タスク指向UI」と比べ、モードレス（思考を分断し...
---メタファーとの相性もあり、現在、GUIアプリの多くは、こ...
***記憶負担 [#v9bbfbcf]
-一貫性~
「記憶負担」を軽減する核心的なアプローチ
--一貫性の定義と効果
---定義：異なる場面や製品でも、共通の操作作法を提供
---効果：初めて使う機能やアプリでも、過去の経験から操作方...
--範囲とUI要素
---範囲：1つの製品内、OS共通、ブランド内、業界全体などの...
---UI要素：用語、色、形、大きさ、配置、操作手順などを共通...
--「緩い一貫性」の有効性~
必ずしも「完全一致」である必要はない。
---用語のカタカナ表記と英語表記（どちらでも連想可能）
---RGB値が完全に一致していなくても同系色なら連想可能
---「SHIFTキーでの複数・範囲選択」のような「緩い一貫性」
--具体例と標準化
---アプリのメニューバー：「ファイル」「編集」、「編集」中...
---規格化とデファクトスタンダード：異なるメーカーのプリン...
-再認型メニューと再生型メニュー
--再認型（再確認する）： 正確に記憶していなくても状況に応...
--再生型（再入力する）： 従来のCUI（テキスト入力）のよう...
--スマホのマルチタッチ操作（ジェスチャー）や、音声対話型U...
***その他 [#caa2c7ad]
-寛容性とユーザー主体性に関する要約~
「ユーザー主体性」を持たせるUI設計：製品にコントロールさ...
--基本的にユーザーがアクションを起こさない限りシステム側...
--ユーザーは日常的に操作ミスや作業中断を行う。これらに対...
--今後、AIや自律型ロボット（ドローンなど）が普及すると、...
-習熟への対応~
長く使い続けるユーザーの習熟に合わせた「効率性」への配慮...
--代表例がキーボードショートカット、右クリック、ダブルク...
--初心者向けの標準的なアクセス方法を担保した上で、習熟者...
-安全性に基づく設計ルール~
--フールプルーフ（馬鹿よけ）：人間はミスをするという前提...
--具体例：電子レンジの扉を閉めないと加熱機能がオンになら...
--UI応用：入力チェック系全般。また、GitHubの「Danger Zone...
---文字列の強制手入力（タイピング・バリデーション）
---段階的なモーダルウィンドウ（多段階の警告）
---ボタンの意図的な非活性化（Disabled）と「赤色」の配色
---パスワードや2要素認証（2FA）の再要求
-解剖学的特性に基づく設計ルール
--形状、寸法、関節の可動範囲などの目に見える要素だけでな...
--設計データの入手方法：書籍やネットから人体寸法の統計デ...
--ハードウェア設計における重要性
---操作部の高さやスペース、ハンドルの大きさなどは人体寸法...
---操作や保持に必要な力は、人間の筋力や筋肉への負担を考慮...
--ソフトウェアUIにおける影響
---タッチパネルのボタンサイズや間隔など、物理的操作を伴う...
---OSメーカー（Apple、Microsoft、Google等）が標準UI部品を...
-言葉・用語のルール
--平易な言葉の選択：専門用語やアルファベット略語、カタカ...
--二重否定の回避：「不要なファイル以外は削除しない」「"プ...
--明確な主語の提示：「ファイルを閉じます」は、システムと...
**ユーザビリティ・テスト [#r675389a]
UIのテストで、[[UXも含む>#be4c7962]]ため、UXテストでもあ...
***概要 [#k8c8ed93]
-目的
--目的と評価対象：設計したアイデアが目標とするUXを実現で...
--開発プロセスにおける意義：プロトタイピングの一環として...
--品質のコントロール（歯止め）：一定の品質基準を設けるこ...
--実施のポイント：体験を評価するという視点を持ち、実際の...
-手法~
被験者に特定のタスクを与えて製品を操作してもらい、その際...
--実施方法
---インタラクション評価 (タスクあり）：被験者には、考えて...
---インタビュー：適宜インタビューを組み合わせることで、ユ...
--メリット・デメリット
---メリット：課題の発見だけでなくその原因も推測し易く、イ...
---デメリット：テストの準備や分析に手間がかかる（簡易手法...
-効果・効用
--ユーザー参加型製品開発の実現：~
ユーザー参加により間接的に[[人間中心設計（HCD）>#b506a751...
--評価技術
---実際の使用状況に近い客観的事実や操作プロセスを直接観察...
---その場でインタビューを行うことで被験者の主観的な印象も...
--啓蒙効果
---ユーザからの評価でユーザビリティへの意識が大きく向上（...
---開発者が「ユーザーがうまく操作できない場面」を直接目撃...
***体系 [#ff220366]
-ユーザ・ビリティテスト：被験者を使った評価
--観察：直接的に観察するため情報量と信頼性の観点から主軸
---インタラクション評価 (タスクなし）：自由操作
---インタラクション評価 (タスクあり）：一般的★
---パフォーマンス評価：タスクの成否を定量的（やや異質）に...
---操作ログ分析：間接的にユーザーの行動を検証
--質問：間接的に主観的な意見を聴く方法のため補足的
---インタビュー：対面で質問（タスク有り評価と組み合わせる...
---主観評価：アンケート用紙を用いて主観評価を回収する。
-ヒューリスティック評価(専門家による評価)：被験者を使わな...
--仕様のチェック：一般的な要件を満たしているか確認する。
--認知的ウォークスルー：専門家が実際に操作し、ユーザーが...
***実施 [#t4378870]
後の分析作業で「改善のアイデア」につなげるための情報収集...
-評価計画書の作成
--目的
---ミスなくスムーズに準備・進行できるよう、計画書を作成し...
---関係者との事前共有：開発者とあらかじめ計画を共有してお...
--内容
---背景・目的・目標：実施理由を明確にする。
---評価対象と範囲：実機・プロトタイプ、対象とする機能の範...
---評価方法：テストやインタビューの手法、特定の測定基準
---被験者情報とタスク：被験者の人数・条件、タスク・アンケ...
---実施場所と環境：テスト会場のレイアウトや機材の配線図な...
---スケジュール：プロジェクト全体と評価計画～実施の工程、...
---納品物：報告書やテストのエビデンス（録画動画・アンケー...
---役割分担：進行係、記録係、会場・製品の確保担当など、関...
-タスク指示書の作成
--目的
---被験者にタスクの「目的やゴール」を理解させる。
---タスクの与え方を均一にし、被験者ごとの理解のばらつきを...
--原則と注意点
---ヒントの排除：操作手順や機能名称は、画面上のボタン名と...
---ストーリー性：被験者を主人公にしたストーリーを設定（各...
---明確な指示：ゴールだけでなく、やってほしい操作・やって...
-被験者リクルーティング
--適切な被験者数：コスパ的に5〜6名が目安とされている。
--ポイント
---テスト結果への影響大：ユーザビリティテストの成否は、適...
---一般ユーザーこそが典型：「軽い気持ちで参加する人」（弱...
---外注の検討：複雑な条件や人数の厳密なコントロールが必要...
--条件の決め方
---基本的には「想定ユーザーと同等の特性・知識・機器使用経...
---基本属性・経験：年齢、性別、機器・サービスの所有や使用...
---製品への習熟度：原則として、問題を発見しやすくするため...
---妥協条件とNG条件: 理想通りの人が見つからない場合の「緩...
-会場準備
--会場要件
---基本インフラの確保：評価対象製品が確実に動作する環境（...
---確実な観察と記録：被験者の言動を克明に観察・録画できる...
---被験者への配慮：観察者を意識せず落ち着いて取り組める設...
---評価者間の連携：進行係と記録係が、被験者に気づかれずに...
--テストラボ~
防音された「テスト室」と「観察室」の2部屋で構成
---視覚・音響の分離~
・ハーフミラーやカメラを設置し、被験者に意識させずに観察...
・防音対策により、観察室側の会話が被験者に聞こえないよう...
---柔軟性と機材の充実~
・様々な製品や評価方法に対応できるよう内装を容易に変更で...
・映像機材や音響機器を一定水準で備えている。
--スタッフ~
テストを円滑に運営し、質の高い情報を得るための役割分担。
---進行係（モデレーター）：直接被験者と接してテストを円滑...
・タスクの提示と理解の促進、リラックスできる雰囲気づくり...
・インタビュー時、指示は「～してください」、質問は「～で...
・インタビューは問題の「真の原因」につながる情報を引き出...
---記録係：被験者の言動を記録~
・役割と体制：テスト中の被験者の操作状況を記録、分析者と...
・記録内容：製品の状態と被験者の行動、観察者自身の気づき...
・工夫：正しい手順、スムーズな操作は丸、同じ操作の繰り返...
---撮影係・機材担当：機材操作、トラブルに対応する。~
・役割：被験者の状況がよく分かる映像を観察室へ提供する。...
・ポイント：手元だけでなく視線、操作部分を同時に捉える。...
---被験者受付担当：当日の受付、案内、連絡を行う。
---被験者：テストに必要不可欠な存在。
-簡易手法~
本格的な設備の準備に手間がかかるので、会議室とスマホ1台で...
--会場と観察の工夫
---会場：機密保持と被験者のリラックスのため、周りから隔て...
---観察: ~
・リアルタイム観察が必要ない：被験者のストレス軽減と機材...
・リアルタイム観察が必要：観察者を1名に絞る、パーティショ...
--スマホによる撮影・録音
---基本体制：スマホを三脚で固定し、進行係が録画操作を兼任...
---注意点：長時間の撮影になるため、ACアダプターの接続とメ...
---推奨工夫：アダプター経由で外部モニターにHDMI出力すると...
**テスト結果の分析 [#qcd3f971]
***概要 [#h2f47fe7]
-分析に使用する材料（収集データ）
--事前情報：評価対象製品の仕様、被験者の属性
--テスト中の記録：ビデオ映像、行動・発話の記録、インタビ...
--アンケート：主観評価アンケートの回答結果
-分析・報告のプロセス
--問題箇所の特定とリスト化
---問題リストを作成：行動・発話記録やインタビュー結果を基...
---詳細分析シートの作成：リスト化した各問題について、問題...
---集計と報告書の作成：タスク達成度や主観評価アンケートの...
--報告後の流れ（開発側の対応）~
開発者は報告書を受け取った後、以下の対応を行う。
---開発側の事情を考慮した上で改めて改良方針を立て、修正箇...
---一部の問題は次回のバージョンアップやモデルチェンジのタ...
***実施 [#r60168a8]
-問題（特定とリスト化）
--ポイント
---主観より客観（行動）を優先：被験者の主観よりも、実際に...
---取り上げるべきかの判断基準：他者も同様につまずいている...
---問題の切り分けと統合：基本は1つの問題に複数を混在させ...
--問題リストの作成
---発見された問題の一覧を表にまとめる（タスクや被験者の情...
---並び順はタスク順、重要度順などがあるが、タスク順が分か...
---複数のタスクで共通する問題は、最終的に1つにまとめる。
-原因（分析プロセス）
--分析手順
---状況の確認：問題周辺の行動・発話、インタビュー内容、製...
---思考の推測：被験者が思い描いていたイメージ（メンタルモ...
---ギャップの特定：ユーザーの思考と合致しない「製品の仕様...
--ポイント
---「原因」と「結果」（≒ 問題）を混同しない：「製品の仕様...
---ユーザー側は「原因」としない：コントロールできる製品側...
---想定原因はあえて複数挙げる：原因を1つに絞り込まず、多...
-改良案（検討ポイント3点）
--基本アプローチ：「逆の仕様」にすることが、改良への基本...
--多様な案の提示：効果のレベル（抜本的〜対症療法的）や、...
--方向性の提示に集中する：設計開発を伴う具体的な改良方法...
-詳細分析シート
--体裁
---内容：1シート1問題、問題内容（つまずきの状況）、想定原...
---書式：厳密な決まりはなく、重要問題のみに絞ったり、リス...
---役割：単なる「報告書」にとどまらず、設計改善のための「...
--ポイント~
改良の意思決定に称されるため、
---端的なタイトル：タイトルを読むだけで、ユーザーがどう困...
---具体的な状況描写：テストを直接見ていない人でも、被験者...
---論理的なつながり：「問題内容 → 想定原因 → 改良の方向性...
---多様なアイデア：想定原因や改良の方向性を整理して複数出...
-報告書
--標準構成：一般的には問題リスト、詳細分析シート、タスク...
--目的と柔軟性：「テストで得られた知見を関係者に共有する...
--スピードを重視した代替手段：議事録を報告書の代わりにす...
**その他 [#s7365d03]
***リリース後 [#r8e232ce]
-独自ガイドライン作成~
自社製品のあるべき姿（品質や設計ルール）を社内で具体的に...
--実用性のある社内展開：自社製品に特化しているため実用性...
--具体性の向上：抽象的な表現を排除し、ボタンの形状や配置...
--品質目標とポリシーの共有：自社が目指すべき品質や設計ポ...
-継続的インテグレーション的な
--事項
---評価改善の継続：リリースした実製品で検証を繰り返し、見...
---ユーザーの反応や使用実態の把握：狙い通りのUX提供が出来...
---次回に向けた環境整備：プロジェクトを通じて得られたノウ...
--調査~
実態把握の具体的な方法：主に2つの調査がある。
---ユーザーの生の声の収集：ユーザーの反応や使用実態の把握~
・ネット情報のチェック：レビューや口コミ、SNSの投稿から、...
・インタビュー・テストの実施：記憶喚起のために実機を操作...
---競合製品との比較：評価改善の継続の一つ、競合比較による...
・仕様やコンセプトの比較：双方の製品を実際に操作し、機能...
・UX比較：双方で同じタスクを行ってもらい、客観的に比較す...
***モラル [#l30f0374]
-[[ユーザビリティ>#nbcf08e9]]は操作上の扱い易さだが、[[ユ...
-このため、ビジネス上の成功（売上やアクセス数）を優先する...
--登録は一瞬、解約は迷宮（ロッチ・モーテル / Roach Motel）
--コッソリ買い物かごに入れる（スネーキング / Sneaking）
--罪悪感を煽る選択肢（コンファーム・シェイミング / Confir...
--偽りの緊急性・希少性（フェイク・サージェンシー / Fake U...
--巧妙な視覚的誘導（ミスディレクション / Misdirection）
--定期購入へのすり替え（ディスガイズ・サブスクリプション ...
終了行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-[[戻る>SaaS設計のポイント]]
*目次 [#z2e5a624]
#contents
*概要 [#j58758b2]
*詳細 [#cd6c2ca3]
全体を通して、
-「[[人間中心設計>#b506a751]]」という進め方に基づいて、ユ...
-その結果として得られる「[[UX>#k01982d0]]」を「[[ユーザビ...
**ユーザー・インターフェース（UI） [#l7d9ce8a]
ユーザー・インターフェース（UI / User Interface）
-[[UX>#k01982d0]]が「ユーザーが（システムや製品、サービス...
-UIは「それを実現するシステムや製品、サービスのインターフ...
***定義 [#y9c390d9]
-製品やサービス（機械、コンピューター、アプリなど）と、そ...
--[[OSのシェル>https://techinfoofmicrosofttech.osscons.jp...
--最近は、VUI（Voice User Interface / 音声ユーザー・イン...
--また、音声認識に留まらず事前の定義を必要としない、複雑...
-UIを構成する2つの視点
--視覚的な要素（見てわかるもの）
画面に表示されるデザインやレイアウト全般
---ボタン、メニュー、アイコン、テキスト
---配色、フォント、画像の配置
---グラフ表示やアニメーション
--操作的な要素（触って動かすもの）~
ユーザーが何かを入力したり、機械を動かしたりする手段です。
---マウスのクリック、キーボードのタイピング
---スマホのタップ、スワイプ、ピンチイン/アウト
---音声操作（「アレクサ」「Hey Siri」など）
***[[UIデザイン>#be4c7962]]と[[基本ルール>#x45c32af]] [#t...
本来、UI（操作画面）のデザインのみを指す概念ではないが、...
**ユーザ・エクスペリエンス（UX） [#k01982d0]
（ユーザ・エクスペリエンス / ユーザー体験）
-「[[ユーザビリティ>#nbcf08e9]]」から派生した新たな拡張さ...
-システムや製品、サービスと関わったときの、人の反応のすべ...
***定義と本質 [#pdfca6ae]
-定義(ISO 9241-210:2019/JIS Z 8530:2021による)
“システム、製品又はサービスの利用前、利用中及び利用後に...
-ポイント
--本質的な意味：一言で言えば、「システムや製品、サービス...
--影響を与える要因：ユーザーの知覚及び反応（注釈1）だけで...
-注釈
--1：ユーザの知覚及び反応は、ユーザの感情、信念、嗜好、知...
--2：製品の「ブランド・イメージ、表現、機能、性能、支援機...
***満足度全体を重要視 [#l8fdd667]
するようになった経緯
-それまで主流だった「[[ユーザビリティ>#nbcf08e9]]」だけで...
--魅力的な体験が勝るケース：操作が難しくても、孫と連絡が...
--難しさに価値があるケース：楽器の演奏技術やゲームの攻略...
--他の要素が優先されるケース：セキュリティ対策のように、...
-主戦場の変化（サービスの提供形態や評価軸の多様化）
--物売から事売（コーヒー豆を売る から 自動販売機・カフェ...
--機能・性能向上からUX向上（鉄道車両ではスピードアップか...
--具体的な事例：医療機器販売ではなく健診ソリューション（[...
***[[UI>#l7d9ce8a]]との違い [#w684199b]
-UIは製品側に帰属する仕様（寸法、色、構造、スペックなど）...
-UXはユーザー側に帰属し、製品と接した結果としてユーザーの...
-UIとUXの関係性：「UI＝原因」「UX＝結果」という因果関係に...
***[[ユーザビリティ>#nbcf08e9]]との違い [#y67379ad]
-「[[ユーザビリティ>#nbcf08e9]]」の拡張された派生が「[[UX...
--[[ユーザビリティ>#nbcf08e9]]にも満足度やユーティリティ...
--機能・性能がどちらに分類されるか？も、曖昧だが評価項目...
--ただし「[[ユーザビリティ>#nbcf08e9]]」が尺度であるのに...
従って、UXのレベルを議論するためには、別途、評価尺度を用...
-[[ユーザビリティ>#nbcf08e9]]から拡張された4つの観点（「...
|観点|[[ユーザビリティ>#nbcf08e9]]の範囲|UXの範囲|h
|対象物|主に使い易さの内の操作性に関わる要素（機能/性能/U...
|場面|製品を今まさに操作している「利用中」|興味を持つ「利...
|対象者|目標を持ってリアルタイムに操作している人|利用前後...
|反応|操作による効果・効率・満足|感情、思考、行動、ライフ...
***UXハニカム [#p534dd3e]
（別の切り口）
-UXを7つの要素でシンプルに説明した概念
-中心1要素を外側6要素を満たして実現。
--中心1要素：「Valuable 価値がある」
--外側6要素： ~
「Useful 役に立つ」「Usable 使いやすい」「Desirable 好ま...
「Findable 探しやすい」「Accessibleアクセスしやすい」「Cr...
***Web UXの5階層モデル [#n77d7964]
（別の切り口）
-概念図
||Webアプリ（タスク指向）|HTML（情報指向）|h
|表層|>|CENTER:ビジュアル設計|
|骨格|インターフェイス設計|ナビゲーション設計|
|~|>|CENTER:情報設計|
|構造|インタラクション設計|情報アーキテクチャ|
|要件|機能仕様|コンテンツ要件|
|戦略|>|CENTER:ユーザーニーズ|
|~|>|CENTER:サイトの目的|
-解説~
下層（抽象的）から上層（具体的）に向かって「戦略」「要件...
--設計プロセス：Webサイトの開発プロセス（目的の明確化 → ...
--普遍的な考え方：提唱者であるJ.J.ギャレット氏のこの概念...
***UXデザイン [#e2d57086]
-概念~
UI設計に限定されるものではなく、意図したUXを提供するため...
--目的：単に「操作画面を描くこと」ではなく「ユーザー体験...
--重要性：ユーザーに受け入れられないリスクを回避するため...
--実践：プロセス全体を通してユーザーを中心におくアプロー...
-プロセス全体像~
UXデザイン（[[人間中心設計（HCD）>#b506a751]]、[[進め方>#...
--計画策定後に以下の4つのステップを繰り返しながら進める。
+++利用状況の理解と明示（ユーザーリサーチ・分析）：ユーザ...
+++ユーザー要求事項の明示（目標の定義）：調査結果を元に、...
+++設計案の作成：目標達成のための具体的なアイデアを検討し...
+++設計案の評価：作成した設計案が目標に適合しているかを検...
--各ステップに合わせた最適な手法やツールを活用して設計の...
+++観察/フォトダイアリー、インタビュー、インフォーマント...
+++あるべき姿/目標とするUX、ペルソナ、未来のジャーニーマ...
+++ストーリーボード、UIデザイン、ワイヤーフレーム/画面フ...
+++ペーパー・プロトタイピング、ユーザビリティ・テスト、ヒ...
※ UXデザインは本質的に「マーケットイン」志向だが、革新的...
**ユーザビリティ [#nbcf08e9]
操作上の扱い易さ。
-対象：人間が作った「人工物」の中の「道具」
-道具：人が何らかの実用的な目的を達成するために使用する人...
※ [[UX>#k01982d0]]の一部であり、歴史的にも先に登場
***定義と本質 [#e13aee8a]
-定義 (ISO 9241-210:2019/JIS Z 8530:2021による)
“特定のユーザが特定の利用状況において、 システム、製品又...
-厳密に言うと、ユーザビリティは、ユーザビリティとユーティ...
利用に関する価値・便益についての...
--ユーザビリティ：「機能を簡単かつ快適に使えるか？」マイ...
--ユーティリティ：「優れた手段・機能があるか？」プラス提供
-目標達成の度合いを測る3要素~
「（独立したものではなく）依存関係」と「優先順位」がある...
--効果：ユーザーがやりたいことを正確かつ最後までやり遂げ...
--効率：操作に迷ったり無駄な時間をかけたりせず、スムーズ...
--満足：操作手順に違和感がなく、ユーザーが満足（納得）で...
--※例：確信が持てないワンクリックより確信が持てる複数クリ...
-議論に不可欠な3条件~
--特定のユーザー（誰が使うのか）
--特定の目標（何のために使うのか）
--特定の状況（どんな場面・環境で使うのか）
***石斧の例 [#q02c0875]
破壊や切断という目的を果たすために巨大化・重量化する基調
-サイズ・重量：人間が普通に持って扱える適度な大きさに調整
-素材：持ったときに手が痛くならず、滑りにくくされている。
-形状：人間が腕を振り下ろす軌道に合わせ、刃先に最も力が伝...
***利用に関する性質 [#i30b6765]
「使い難い」の2つの性質（9つの事例による分類）
-製品スペックの問題：カメラの解像度、バッテリー持ち、通信...
-ユーザー起因の問題：操作が分からない（ボタンが押しづらい...
※ IT系では、ユーザー起因の問題が増えている。
***ユーザーへの負担 [#o87c78f3]
（別の切り口）
-身体的負担：利用する際の身体的の負担
-心理的負担：利用する際の身体的以外の負担
-社会的負担：誤操作による損失や、失敗による社会的影響など。
※ IT系では、身体的以外の部分が大きい。
***認知とのギャップ [#z8e26866]
（別の切り口）
ユーザーが製品を操作する際、頭の中では「気づく → わかる →...
-インタラクションの成立（成功）：作り手が提供したUIと、ユ...
-操作のつまずき（失敗）：ギャップがあると、アイコンに気づ...
※ 電話の黒電話や受話器のマークは、将来、認知ギャップが発...
***測定要素の重要度の変化 [#g1ccecfb]
「利用状況」や「経過時間」に応じて目標達成の度合いを測定...
-利用状況の違いによる変化~
カメラを使用する場合、
--動かないもの（風景・食べ物など）の撮影： 操作に時間をか...
--動くもの（動物・乗り物など）の撮影： もたもたしていると...
-経過時間による変化
--購入直後：イニシャル作業をいかにスムーズに行えるか？
--利用継続時：目標達成は当然となり、作業効率が重要になる。
--トラブル発生時：トラブルを解決して利用を再開できるか？
***ITシステムへの応用 [#pdad6347]
-機器のデジタル化に伴うユーザビリティの変遷
--アナログ機器の特徴とユーザビリティ
---特徴：構造がシンプルで単機能
---操作性：外観を見ただけで操作方法が容易に想像できる。
---配慮：「解剖学的特性（身体的特性）」への配慮が中心。
--デジタル機器の特徴と課題
---特徴：多機能・複合化しており「機能と形状が無関係」にな...
---課題：外観だけでは、どう操作すればどう動くのかという操...
--デジタル化による転換点とUI（GUI、CUI）設計の必要性
---課題：外観から操作を察することができなくなったため、意...
---配慮：「解剖学的特性（身体的特性）」だけでなく「認知的...
-インターネット、Webサービス（Webアプリ、Webシステム）の...
--多数の対人サービスがWebサービスに移行、ユーザビリティの...
--ITシステムはアナログ・体験要素が少ないので、≒ マン・マ...
***Webユーザビリティ10原則 [#y803cd6e]
Webユーザビリティの大家、ヤコブ・ニールセン博士が1995年に...
-UI系
--システムの状態を可視化する：見えない裏の動きを表に表す。
--実世界とシステムをマッチングさせる：例えばボタンの見た...
--一貫性と標準性を保持する：今や、サイト内に限らず、共通...
--覚えなくても理解できる設計にする：画面をデータメンテに...
--柔軟性と効率性をもたせる：メニューやショートカットなど...
--最小限で無駄のない設計にする：機能に優先順位をつける（...
-エラー系
--ユーザに制御の主導権と自由を与える：誤操作を元に戻せる...
--エラーは事前に防ぐ：システム例外、誤操作（ランタイム例...
--ユーザ自身で認識、診断、回復ができるようにする：誤操作...
-その他
--ヘルプとマニュアルを用意する：その他、FAQ、チュートリア...
**アクセシビリティ [#laceb56b]
***... [#ge0c7130]
***... [#ua8fe42d]
**その他 [#wb593bd4]
***学問領域 [#s9d34038]
人間工学・感性工学・認知心理学：人間の特性をベースに設計...
***人間中心設計（HCD） [#b506a751]
人間中心 ≒ ユーザー指向の設計ポリシー。[[UXデザイン>#e2d5...
-スペック重視ではなく、利用者のニーズを中心に据える設計ポ...
-「[[UI>#l7d9ce8a]]/[[UX>#k01982d0]]」、「[[ユーザビリテ...
-国際規格（ISO）にもなっており、プロセス・手法はUX設計に...
-[[UXのJIS定義>#pdfca6ae]]には「人間中心設計では、インタ...
***ユニバーサル・デザイン（UD） [#o64ab004]
-年齢、性別、国籍、障害の有無にかかわらず「最初からすべて...
-7つの原則
--原則1 : 誰にでも公平に利用できること
--原則2 : 使う上で自由度が高いこと
--原則3 : 使い方が簡単ですぐわかること
--原則4 : 必要な情報がすぐに理解できること
--原則5 : うっかりミスや危険につながらないデザインである...
--原則6 : 無理な姿勢をとることなく、少ない力でも楽に使用...
--原則7 : アクセスしやすいスペースと大きさを確保すること
※ [[AIの公平性・包括性>G検定：試験対策#q6f3ee47]]にも近い...
***カスタマー・エクスペリエンス（CX） [#k962abd4]
（カスタマー・エクスペリエンス / 顧客体験）
-本質的には[[UX>#k01982d0]]と大きな違いはない。
-システムや製品では「ユーザー」だが、サービスで違和感があ...
-余談だが、設計・開発系では「ユーザー」、企画・営業系では...
*進め方 [#q5f167e3]
UI/UXデザイン、UIデザインはUXデザインに含まれる。
**ユーザ・リサーチ [#cd1249eb]
「作り手が考える」から「ユーザ（インフォーマント）側から...
***全体の流れ [#oea37559]
利用状況の理解と明示～ユーザー要求事項の明示まで
-調査手法：【ASIS】フォーカス・グループ（グループ・インタ...
-記述手法：【ユーザー像】インフォーマント・プロフィール →...
-分析手法：「気づきの抽出」「本質の洞察（インサイト）」「...
***調査手法 [#k36bf78c]
-観察（行動観察やエスノグラフィーとも呼ばれる）
--調査対象者（インフォーマント）とその活動に関する事実を...
--調査者が実際の活動現場に直接出向くことでリアルタイムで...
--メリットとデメリット
---メリット：言葉での意思疎通が難しい対象（例：小さな子供...
---デメリット：インフォーマントのプライベートな空間に調査...
--実施の際の留意点
---自然な活動を妨げない
---同意なく個人情報や機密情報を取得しない。
-フォトダイアリー
--インフォーマント（対象者）自身に自身の活動を写真日記で...
--メリットと有効なケース~
直接的な「現場観察」が難しい以下のようなケースにおいて有...
---プライバシー・機密保持：プライベートな空間や、機密情報...
---物理的・コスト的制約：調査現場が遠隔地にある、または調...
--デメリットとその補完策
---本人が記録した内容に限られるため、直接観察より情報量は...
---インタビューのきっかけとして活用し、詳しく深掘りするこ...
---実施上の留意点と工夫~
インフォーマントの記入負担が大きいため、モチベーション低...
---記録内容や写真の撮り方を事前にわかりやすく説明し、質問...
---提出のハードルを下げるため、「LINEで写真を撮って文章と...
---多少内容が期待と異なっても、まずは期限までに提出しても...
-インタビュー~
ユーザーリサーチの一環として「事実の把握」と「その背景（...
--主な特徴と手法
---1対1の実施：活動の背景を深掘りするため、フォーカスグル...
---半構造化インタビューの採用：事前に質問を用意しつつ、対...
---「個人の本音」の追求：一般論ではなく、言いづらいような...
--4つのポイント
---インフォーマントに多く話してもらう：インタビュアーの発...
---オープンクエスチョン：「はい/いいえ」で終わる質問では...
---「弟子入り」の態度で臨む：相手の活動や考えに関心と共感...
---活動の「文脈」に着目する：空間的な広がりと、時間的な変...
***入力資料の作成 [#ga9661e9]
-人に関する情報を「インフォーマント・プロフィール」、活動...
-その後の分析作業の基礎となるだけでなく、判断に迷った際、...
-インフォーマント・プロフィール
--インフォーマント（調査対象者）ごとに、その属性や基本的...
--基本プロフィールのほか、特徴的な活動、達成したいゴール...
-現在のジャーニーマップ
--概要と特徴
---定義：一連の人の活動体験を「旅」に見立てて時系列でまと...
---目的：システム、製品又はサービスなど、複数のタッチポイ...
---現在のマップ：観察、フォトダイアリー、インタビュー等か...
--構成要素と記述内容
---時系列の記述：横軸は時間経過、縦軸は活動内容、場所、利...
---視覚的要素：フォトダイアリー等から入手した写真もあわせ...
***分析手法 [#f4410c3b]
-気づきの抽出：事実に基づいてインフォーマントの特徴的な活...
---位置づけ：調査データ（プロフィールやジャーニーマップ）...
---基本方針：調査者の解釈や想像は極力加えず、徹底して「事...
---性質：正解・不正解の定義はなく、調査者によって異なる。...
-本質の洞察（インサイト）：事実に基づいた「気付き」から主...
--言葉による言語化: 関連する気付きをグループ分けして上位...
--関係性の図解（視覚化）: 順序・因果関係、座標プロット、...
-「あるべき姿（目標とするUX）」の定義：インサイトを基に「...
--概要：インサイトを基に、作り手が提供すべき理想の体験を...
--形式：「どのような人が、どのような活動体験ができる」 と...
--役割： 仕様検討が始まった後、機能やUIなどを判断する際の...
--視点：「実現手段」（はあるか？）「ユーザ」（とズレてい...
***出力資料の作成 [#oac62550]
-ペルソナ
--概要と目的
---定義：目標とするUX（あるべき姿）のうち、「どのような人...
---目的：開発に関わるメンバー間で「提供相手が誰か」の認識...
--作成のポイント
---具体性と本質：曖昧な平均像ではなく、達成したいゴールや...
---合意形成の重要性：正解はないので関係者間で合意が取れて...
-未来のジャーニーマップ~
仕様検討などの場面で判断のよりどころとなる「作り手が提供...
--目標と作成時の注意点
---目的：目指すべき体験活動の具体的イメージを関係者間で共...
---作成方法: 現在のジャーニーマップやユーザーリサーチ結果...
---注意点：リサーチ結果がない状態で作成する（≒仕様書にな...
--エモーショナルカーブの活用
---時系列に沿ったユーザーの感情の波（快適・不満など）を曲...
---上げ、下げ、プラマイ・ゼロなど。体験価値の妥当性を検討...
**プロトタイピング/UIデザイン [#l3f7c19e]
-位置付けと役割
--抽象から具体への移行：目標とするUXが決まった後、本格的...
--開発コストの削減：本格的な開発が始まると仕様変更のコス...
-プロトタイプ（試作）の基本的な考え方
--UX再現が最優先：最も重要なのは、ユーザーの体験を部分的...
--仕組みの再現は不要：体験さえ再現できれば、プロトタイプ...
--スピードと効率の重視：簡単に作ったもので検証を繰り返す...
***プロトタイプ [#z073cb46]
-画面・UI
--一般的な手法
---ペーパー・プロトタイプ：最も簡易的。ワイヤーフレームを...
---プロトタイピング・ツール：最近の主流。パソコン上で質の...
--定義と現実~
画面・UIプロトタイプで、以下の3つの違いは曖昧。重要なのは...
---ワイヤーフレーム：UI構造検討（インタラクションなし）
---プロトタイプ：ユーザビリティ検証（インタラクションあり）
---モックアップ：ビジュアル検討（見た目重視、インタラクシ...
-ハードウェア製品
--重要性：形状変更が困難なため、早い段階での十分な検討が...
--特徴：設計要素が多岐にわたるため、体験要素の検証目的毎...
--見た目・雰囲気：スケッチ、CG、VR/AR、モックアップなどを...
--モックアップ
---寸法・形状：紙や木、粘土、3Dプリンターで、1/nスケール...
---重量感・疲労度：実寸形状の中に重りを入れ、重さや重心を...
---機能試作：機能のみを再現して検証。外見や大きさは不問。
-サービス商品
--特徴：基本に立ち返り「簡易的に体験して検証する方法」を...
--手法：ロールプレイングでサービス利用場面を再現し、改善...
***UIデザイン [#be4c7962]
ユーザビリティ上の深刻な問題の多くはUIの基本構造に起因す...
問題の影響度、後工程からの手戻り工数が大きいため、画面・U...
-ペーパー・プロトタイピング：~
画面フローとワイヤーフレームで紙芝居をし、基本構造を決め...
--ツール
---画面フロー：画面遷移を矢印などで図式化したもの。
---ワイヤーフレーム~
・画面内の要素（ボタンや表示エリアなど）のレイアウトを簡...
・手書きやPowerPoint、UIデザイン・ツールなどを用いて、細...
--プロセス~
画面フローからワイヤーフレームの順、あるいはそれらを行き...
---画面フローの検討プロセス~
・タスク（機能・サービス）の全体像を把握~
・ユーザーの目的を洗い出し、メニュー構造へ分類・整理~
・操作の順序とステップ（画面数）を考える~
・イレギュラーへの対応（操作のやり直しや別行動）も考慮
---ワイヤーフレームの検討プロセス~
・画面に必要なUI要素の洗い出しとグループ化~
・レイアウトの配置（重要度、操作順、視線移動を考慮）~
・情報量のコントロール（非表示、ポップアップ、複数画面に...
-製品全体での一貫性（ルールの策定）
--製品全体で、タスク・画面毎の挙動やレイアウトがバラバラ...
--共通ルールを決め一貫性を持たせる「どの画面からもホーム...
-ツール（プロトタイピング・ツール、UIデザイン・ツール）
--画面上でワイヤーフレームを描き、画面遷移を指定すること...
--完成品レベルのビジュアルまで作り込めるため、ペーパー・...
--主な共通機能
---テンプレート・パーツの再利用：枠やOS標準のパーツが用意...
---画面遷移の指定：画面同士を「線」でつなぐだけで遷移を指...
---インタラクションの再現：タップ、ダブルタップやフリック...
---マルチデバイスでのプレビュー：PCや実機（スマホ・タブレ...
---コラボレーション機能：複数人での共同編集や、コメント機...
--代表的なツール「Figma」での操作例
---登録済みのパーツをドラッグ＆ドロップして配置
---ボタンから遷移先画面へ矢印（線）を引くことで、簡単に画...
---プレビュー画面で縦横のスクロールやタップによる画面遷移...
--ツールのリンク集
---Figma (https://www.figma.com)
---Marvel (https://marvelapp.com)
---UX pin (https://www.uxpin.com)
---Principle (http://principleformac.com)
---Origami Studio (http://origami.design)
---ProtoPie (https://www.protopie.io)
---Axure (https://www.axure.com/)
---Ulzard (https://uizard.io/)
---Justinmind (https://www.justinmind.com/)
---Framer X (https://www.framer.com)
---Flinto (https://www.flinto.com)
---Indigo Studio (https://jp.infragistics.com/products/in...
---Sketch (https://www.sketch.com)
**UIデザインの基本ルール [#x45c32af]
-人間の特性や過去のノウハウに基づく「基本ルール」に沿うこ...
-ただし、それだけで優れたユーザビリティが保証されるわけで...
-デザインガイドライン（OSメーカーが公開しているもの）や、...
***レイアウト [#f91ebb04]
-情報量の制限
--情報量を増やしすぎない配慮：人間の短期記憶には限界があ...
--短期記憶の限界：「マジカルナンバー7±2」人間が一度に処理...
--デザインへの応用：ユーザーの許容量を超えない適切な情報...
-視線移動に配慮~
UI配置の主な考え方は、横書きの操作画面でユーザーの視線は...
--配置の3つのアプローチ
---操作手順に合わせる：最初に押すボタンを左上に、完了ボタ...
---優先順位に合わせる：使用頻度の高い機能やおすすめコンテ...
---階層構造に合わせる：メニューやカテゴリー（上位）を上・...
--代表的なレイアウト例
---左上のロゴ配置：多くのサイトで左上に企業ロゴ（ホームへ...
---F型レイアウト：Webサイトでは画面の上部と左側にツールバ...
---右上のメニュー配置：スマホサイトでは、右上にハンバーガ...
-ゾーニング（エリア分け）~
意味の近いものごとにエリアを分けて配置するデザイン手法で...
--例：エアコンのリモコン~
基板の物理的な制約がある中で、機能の共通性や操作の連動性...
---温度調節：上下ボタンと液晶の数字（表示）を近接させ、連...
---風に関する機能：風量調節・風向・スイングなど、風に関す...
---メンテナンス機能：使用頻度が低いため、空きスペース（左...
---タイマー機能：下端に配置。端のエリアは視認性が高いため...
--例：ウェブサイト~
役割ごとに画面上の配置エリアが明確に固定されている。
---上部（ツールバー）： 全ページで共通して使う機能のゾー...
---左側（メニュー）： コンテンツ切り替え機能、および下部...
---右側（メインスペース）： コンテンツ表示ゾーン（上部が...
***手がかり [#h4235ceb]
-アフォーダンスとシグニファイア~
ユーザーがモノを直感的に操作できるようにするための重要な...
--アフォーダンス：モノが人に提供する「行動の可能性」（椅...
--シグニファイア：ユーザーに「どう行動すればよいか」を伝...
--ドアの取っ手の例
---パイプ形状: 手で握れるため「引く」動作を促す。
---プレート形状: 面があるため「押す」動作を促す。
--画面UIのデザイン変遷と課題
---スキューモーフィック・デザイン（過去）: 実際のボタンの...
---フラット・デザイン（現在）: トレンドである反面、出っ張...
-フィードバック
--定義と効果：ユーザーの操作に対するシステムからの反応。...
--必要性: 内部処理は見えないため、UIの一部として意図的に...
--具体例：ボタンがマウスオーバーで変色し、クリックで凹む...
--多角化：視覚（見た目）にとどまらず、カメラのシャッター...
-メタファー~
機能を「何かに例える表現手段」のこと。身近なものに例える...
--デスクトップメタファー：パソコンの基本画面を「書斎の机...
--画材・文房具のメタファー：グラフィックソフトにおいて、...
--ボタンのメタファー：本質的にはコマンド実行やパラメタの...
-強調表現
--特徴
---重要性: 通知や警告など、システムとユーザーの双方にとっ...
---異質性: 意識していないユーザーに気付きを促すという、使...
--目的~
特定の要素を目立たせるために使われ、主に4つの目的がある。
---意味の違いの表現：選択中のタブの色変更や、カレンダーの...
---システムからの通知：メッセージ受信などを知らせるアイコ...
---重要な判断の促進・警告：データ削除時のメッセージ表示や...
---要素への視線誘導：バナー広告など、ユーザーの目を引くた...
***操作手順 [#w22d7cda]
-画面フロー
--基本ルールは、ユーザーの「自然な思考順序」に合わせるこ...
--ただし、何が自然かは、サービスやユーザー像によって異な...
---例えば、JR東日本の指定席券売機では「特急券の指定（駅・...
---しかし、次の思考順序やニーズも考えられる「乗車券を先、...
-オブジェクト指向UI（OOUI）
--設計思想
---タスク指向UI：ユーザーが「処理（タスク）」を先に選択し...
---オブジェクト指向UI：ユーザーが「操作対象（オブジェクト...
--現在主流
---通常の「タスク指向UI」と比べ、モードレス（思考を分断し...
---メタファーとの相性もあり、現在、GUIアプリの多くは、こ...
***記憶負担 [#v9bbfbcf]
-一貫性~
「記憶負担」を軽減する核心的なアプローチ
--一貫性の定義と効果
---定義：異なる場面や製品でも、共通の操作作法を提供
---効果：初めて使う機能やアプリでも、過去の経験から操作方...
--範囲とUI要素
---範囲：1つの製品内、OS共通、ブランド内、業界全体などの...
---UI要素：用語、色、形、大きさ、配置、操作手順などを共通...
--「緩い一貫性」の有効性~
必ずしも「完全一致」である必要はない。
---用語のカタカナ表記と英語表記（どちらでも連想可能）
---RGB値が完全に一致していなくても同系色なら連想可能
---「SHIFTキーでの複数・範囲選択」のような「緩い一貫性」
--具体例と標準化
---アプリのメニューバー：「ファイル」「編集」、「編集」中...
---規格化とデファクトスタンダード：異なるメーカーのプリン...
-再認型メニューと再生型メニュー
--再認型（再確認する）： 正確に記憶していなくても状況に応...
--再生型（再入力する）： 従来のCUI（テキスト入力）のよう...
--スマホのマルチタッチ操作（ジェスチャー）や、音声対話型U...
***その他 [#caa2c7ad]
-寛容性とユーザー主体性に関する要約~
「ユーザー主体性」を持たせるUI設計：製品にコントロールさ...
--基本的にユーザーがアクションを起こさない限りシステム側...
--ユーザーは日常的に操作ミスや作業中断を行う。これらに対...
--今後、AIや自律型ロボット（ドローンなど）が普及すると、...
-習熟への対応~
長く使い続けるユーザーの習熟に合わせた「効率性」への配慮...
--代表例がキーボードショートカット、右クリック、ダブルク...
--初心者向けの標準的なアクセス方法を担保した上で、習熟者...
-安全性に基づく設計ルール~
--フールプルーフ（馬鹿よけ）：人間はミスをするという前提...
--具体例：電子レンジの扉を閉めないと加熱機能がオンになら...
--UI応用：入力チェック系全般。また、GitHubの「Danger Zone...
---文字列の強制手入力（タイピング・バリデーション）
---段階的なモーダルウィンドウ（多段階の警告）
---ボタンの意図的な非活性化（Disabled）と「赤色」の配色
---パスワードや2要素認証（2FA）の再要求
-解剖学的特性に基づく設計ルール
--形状、寸法、関節の可動範囲などの目に見える要素だけでな...
--設計データの入手方法：書籍やネットから人体寸法の統計デ...
--ハードウェア設計における重要性
---操作部の高さやスペース、ハンドルの大きさなどは人体寸法...
---操作や保持に必要な力は、人間の筋力や筋肉への負担を考慮...
--ソフトウェアUIにおける影響
---タッチパネルのボタンサイズや間隔など、物理的操作を伴う...
---OSメーカー（Apple、Microsoft、Google等）が標準UI部品を...
-言葉・用語のルール
--平易な言葉の選択：専門用語やアルファベット略語、カタカ...
--二重否定の回避：「不要なファイル以外は削除しない」「"プ...
--明確な主語の提示：「ファイルを閉じます」は、システムと...
**ユーザビリティ・テスト [#r675389a]
UIのテストで、[[UXも含む>#be4c7962]]ため、UXテストでもあ...
***概要 [#k8c8ed93]
-目的
--目的と評価対象：設計したアイデアが目標とするUXを実現で...
--開発プロセスにおける意義：プロトタイピングの一環として...
--品質のコントロール（歯止め）：一定の品質基準を設けるこ...
--実施のポイント：体験を評価するという視点を持ち、実際の...
-手法~
被験者に特定のタスクを与えて製品を操作してもらい、その際...
--実施方法
---インタラクション評価 (タスクあり）：被験者には、考えて...
---インタビュー：適宜インタビューを組み合わせることで、ユ...
--メリット・デメリット
---メリット：課題の発見だけでなくその原因も推測し易く、イ...
---デメリット：テストの準備や分析に手間がかかる（簡易手法...
-効果・効用
--ユーザー参加型製品開発の実現：~
ユーザー参加により間接的に[[人間中心設計（HCD）>#b506a751...
--評価技術
---実際の使用状況に近い客観的事実や操作プロセスを直接観察...
---その場でインタビューを行うことで被験者の主観的な印象も...
--啓蒙効果
---ユーザからの評価でユーザビリティへの意識が大きく向上（...
---開発者が「ユーザーがうまく操作できない場面」を直接目撃...
***体系 [#ff220366]
-ユーザ・ビリティテスト：被験者を使った評価
--観察：直接的に観察するため情報量と信頼性の観点から主軸
---インタラクション評価 (タスクなし）：自由操作
---インタラクション評価 (タスクあり）：一般的★
---パフォーマンス評価：タスクの成否を定量的（やや異質）に...
---操作ログ分析：間接的にユーザーの行動を検証
--質問：間接的に主観的な意見を聴く方法のため補足的
---インタビュー：対面で質問（タスク有り評価と組み合わせる...
---主観評価：アンケート用紙を用いて主観評価を回収する。
-ヒューリスティック評価(専門家による評価)：被験者を使わな...
--仕様のチェック：一般的な要件を満たしているか確認する。
--認知的ウォークスルー：専門家が実際に操作し、ユーザーが...
***実施 [#t4378870]
後の分析作業で「改善のアイデア」につなげるための情報収集...
-評価計画書の作成
--目的
---ミスなくスムーズに準備・進行できるよう、計画書を作成し...
---関係者との事前共有：開発者とあらかじめ計画を共有してお...
--内容
---背景・目的・目標：実施理由を明確にする。
---評価対象と範囲：実機・プロトタイプ、対象とする機能の範...
---評価方法：テストやインタビューの手法、特定の測定基準
---被験者情報とタスク：被験者の人数・条件、タスク・アンケ...
---実施場所と環境：テスト会場のレイアウトや機材の配線図な...
---スケジュール：プロジェクト全体と評価計画～実施の工程、...
---納品物：報告書やテストのエビデンス（録画動画・アンケー...
---役割分担：進行係、記録係、会場・製品の確保担当など、関...
-タスク指示書の作成
--目的
---被験者にタスクの「目的やゴール」を理解させる。
---タスクの与え方を均一にし、被験者ごとの理解のばらつきを...
--原則と注意点
---ヒントの排除：操作手順や機能名称は、画面上のボタン名と...
---ストーリー性：被験者を主人公にしたストーリーを設定（各...
---明確な指示：ゴールだけでなく、やってほしい操作・やって...
-被験者リクルーティング
--適切な被験者数：コスパ的に5〜6名が目安とされている。
--ポイント
---テスト結果への影響大：ユーザビリティテストの成否は、適...
---一般ユーザーこそが典型：「軽い気持ちで参加する人」（弱...
---外注の検討：複雑な条件や人数の厳密なコントロールが必要...
--条件の決め方
---基本的には「想定ユーザーと同等の特性・知識・機器使用経...
---基本属性・経験：年齢、性別、機器・サービスの所有や使用...
---製品への習熟度：原則として、問題を発見しやすくするため...
---妥協条件とNG条件: 理想通りの人が見つからない場合の「緩...
-会場準備
--会場要件
---基本インフラの確保：評価対象製品が確実に動作する環境（...
---確実な観察と記録：被験者の言動を克明に観察・録画できる...
---被験者への配慮：観察者を意識せず落ち着いて取り組める設...
---評価者間の連携：進行係と記録係が、被験者に気づかれずに...
--テストラボ~
防音された「テスト室」と「観察室」の2部屋で構成
---視覚・音響の分離~
・ハーフミラーやカメラを設置し、被験者に意識させずに観察...
・防音対策により、観察室側の会話が被験者に聞こえないよう...
---柔軟性と機材の充実~
・様々な製品や評価方法に対応できるよう内装を容易に変更で...
・映像機材や音響機器を一定水準で備えている。
--スタッフ~
テストを円滑に運営し、質の高い情報を得るための役割分担。
---進行係（モデレーター）：直接被験者と接してテストを円滑...
・タスクの提示と理解の促進、リラックスできる雰囲気づくり...
・インタビュー時、指示は「～してください」、質問は「～で...
・インタビューは問題の「真の原因」につながる情報を引き出...
---記録係：被験者の言動を記録~
・役割と体制：テスト中の被験者の操作状況を記録、分析者と...
・記録内容：製品の状態と被験者の行動、観察者自身の気づき...
・工夫：正しい手順、スムーズな操作は丸、同じ操作の繰り返...
---撮影係・機材担当：機材操作、トラブルに対応する。~
・役割：被験者の状況がよく分かる映像を観察室へ提供する。...
・ポイント：手元だけでなく視線、操作部分を同時に捉える。...
---被験者受付担当：当日の受付、案内、連絡を行う。
---被験者：テストに必要不可欠な存在。
-簡易手法~
本格的な設備の準備に手間がかかるので、会議室とスマホ1台で...
--会場と観察の工夫
---会場：機密保持と被験者のリラックスのため、周りから隔て...
---観察: ~
・リアルタイム観察が必要ない：被験者のストレス軽減と機材...
・リアルタイム観察が必要：観察者を1名に絞る、パーティショ...
--スマホによる撮影・録音
---基本体制：スマホを三脚で固定し、進行係が録画操作を兼任...
---注意点：長時間の撮影になるため、ACアダプターの接続とメ...
---推奨工夫：アダプター経由で外部モニターにHDMI出力すると...
**テスト結果の分析 [#qcd3f971]
***概要 [#h2f47fe7]
-分析に使用する材料（収集データ）
--事前情報：評価対象製品の仕様、被験者の属性
--テスト中の記録：ビデオ映像、行動・発話の記録、インタビ...
--アンケート：主観評価アンケートの回答結果
-分析・報告のプロセス
--問題箇所の特定とリスト化
---問題リストを作成：行動・発話記録やインタビュー結果を基...
---詳細分析シートの作成：リスト化した各問題について、問題...
---集計と報告書の作成：タスク達成度や主観評価アンケートの...
--報告後の流れ（開発側の対応）~
開発者は報告書を受け取った後、以下の対応を行う。
---開発側の事情を考慮した上で改めて改良方針を立て、修正箇...
---一部の問題は次回のバージョンアップやモデルチェンジのタ...
***実施 [#r60168a8]
-問題（特定とリスト化）
--ポイント
---主観より客観（行動）を優先：被験者の主観よりも、実際に...
---取り上げるべきかの判断基準：他者も同様につまずいている...
---問題の切り分けと統合：基本は1つの問題に複数を混在させ...
--問題リストの作成
---発見された問題の一覧を表にまとめる（タスクや被験者の情...
---並び順はタスク順、重要度順などがあるが、タスク順が分か...
---複数のタスクで共通する問題は、最終的に1つにまとめる。
-原因（分析プロセス）
--分析手順
---状況の確認：問題周辺の行動・発話、インタビュー内容、製...
---思考の推測：被験者が思い描いていたイメージ（メンタルモ...
---ギャップの特定：ユーザーの思考と合致しない「製品の仕様...
--ポイント
---「原因」と「結果」（≒ 問題）を混同しない：「製品の仕様...
---ユーザー側は「原因」としない：コントロールできる製品側...
---想定原因はあえて複数挙げる：原因を1つに絞り込まず、多...
-改良案（検討ポイント3点）
--基本アプローチ：「逆の仕様」にすることが、改良への基本...
--多様な案の提示：効果のレベル（抜本的〜対症療法的）や、...
--方向性の提示に集中する：設計開発を伴う具体的な改良方法...
-詳細分析シート
--体裁
---内容：1シート1問題、問題内容（つまずきの状況）、想定原...
---書式：厳密な決まりはなく、重要問題のみに絞ったり、リス...
---役割：単なる「報告書」にとどまらず、設計改善のための「...
--ポイント~
改良の意思決定に称されるため、
---端的なタイトル：タイトルを読むだけで、ユーザーがどう困...
---具体的な状況描写：テストを直接見ていない人でも、被験者...
---論理的なつながり：「問題内容 → 想定原因 → 改良の方向性...
---多様なアイデア：想定原因や改良の方向性を整理して複数出...
-報告書
--標準構成：一般的には問題リスト、詳細分析シート、タスク...
--目的と柔軟性：「テストで得られた知見を関係者に共有する...
--スピードを重視した代替手段：議事録を報告書の代わりにす...
**その他 [#s7365d03]
***リリース後 [#r8e232ce]
-独自ガイドライン作成~
自社製品のあるべき姿（品質や設計ルール）を社内で具体的に...
--実用性のある社内展開：自社製品に特化しているため実用性...
--具体性の向上：抽象的な表現を排除し、ボタンの形状や配置...
--品質目標とポリシーの共有：自社が目指すべき品質や設計ポ...
-継続的インテグレーション的な
--事項
---評価改善の継続：リリースした実製品で検証を繰り返し、見...
---ユーザーの反応や使用実態の把握：狙い通りのUX提供が出来...
---次回に向けた環境整備：プロジェクトを通じて得られたノウ...
--調査~
実態把握の具体的な方法：主に2つの調査がある。
---ユーザーの生の声の収集：ユーザーの反応や使用実態の把握~
・ネット情報のチェック：レビューや口コミ、SNSの投稿から、...
・インタビュー・テストの実施：記憶喚起のために実機を操作...
---競合製品との比較：評価改善の継続の一つ、競合比較による...
・仕様やコンセプトの比較：双方の製品を実際に操作し、機能...
・UX比較：双方で同じタスクを行ってもらい、客観的に比較す...
***モラル [#l30f0374]
-[[ユーザビリティ>#nbcf08e9]]は操作上の扱い易さだが、[[ユ...
-このため、ビジネス上の成功（売上やアクセス数）を優先する...
--登録は一瞬、解約は迷宮（ロッチ・モーテル / Roach Motel）
--コッソリ買い物かごに入れる（スネーキング / Sneaking）
--罪悪感を煽る選択肢（コンファーム・シェイミング / Confir...
--偽りの緊急性・希少性（フェイク・サージェンシー / Fake U...
--巧妙な視覚的誘導（ミスディレクション / Misdirection）
--定期購入へのすり替え（ディスガイズ・サブスクリプション ...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
