の活用～ IoT時代に要求されるサービス・UI/UX品質とは？ · IoT時代に要求されるサービス・UI/UX品質とは？～SQuaRE「製品品質：使用性」と「利用時の品質」を理解する～

Copyright (C) 2015 U'eyes Design Inc., All Rights Reserved.

株式会社 U’eyes Design

価値の多様化時代に要求される品質とは？～一歩先を行く品質の視点、SQuaREの活用～

IoT時代に要求されるサービス・UI/UX品質とは？

～SQuaRE「製品品質：使用性」と「利用時の品質」を理解する～

2015年8月28日

株式会社U’eyes Design

代表取締役鱗原晴彦

IoT時代に要求されるサービス・UI/UX品質とは？～SQuaRE「製品品質：使用性」と「利用時の品質」を理解する～


ネットワーク技術の飛躍的な発展により、モノとモノがつながる時代

が到来しています。この技術的な価値を、生活者/ユーザが認識し、

享受するためには「人との接点（サービス・UI/UX）」が必要不可欠で

す。すなわち、IoT時代のシステム・ソフトウェアには、実ユーザが

実環境下で、サービス・UI/UXを利用した際に感じ取る品質（印象、

心象、経験価値）を高めることが求められます。本講演では、

SQuaREにおいて定義されているUI/UXに関する品質特性・副特性

の活用の仕方について解説します。

1 /30



目次

１．ソフトウエア品質ガイド編～第３章今注目したい品質の視点～

１）品質モデルの概略（第２章より）

２）ユーザビリティの定義と考え方

３）ユーザビリティ観点を作り込むために

２．SQuaRE品質モデル活用リファレンス編～第５章利用時の品質品質特性表～

１）利用時の品質特性表１有効性「課題達成率」効率性「NEM」

２）利用時の品質特性表２満足性「SUS the System Usability Scale」

３）利用時の品質特性表３リスク回避性、利用状況網羅性「シナリオベース」

３．SQuaRE品質モデル活用リファレンス編～第６章製品品質品質特性表～

１）製品品質特性表１使用性運用操作性「直接操作と間接操作の画面遷移数」

２）製品品質特性表２使用性ユーザインタフェース快美性「等比級数黄金比」「色彩学」

３）製品品質特性表３使用性アクセシビリティ「WAIV」

2 /30



会社紹介

HCD認定専門家約30名創立25年

IPA/SEC 各委員会にてユーザビリティ系の情報を提供HCD-Net理事長ＣＣＤＳ監事

http://www.hcdnet.org/

http://www.ueyesdesign.co.jp/index.html



１.ソフトウエア品質ガイド編

～第３章今注目したい品質の視点～

3 /30



つながる世界のソフトウエア品質ガイド第2章 30p.

図2.3-3 システム・ソフトウエア製品の品質モデル

つながる世界のソフトウエア品質ガイド第2章 30p.

図2.3-4 利用時の品質モデル

１－１）品質モデルの概略（第２章より）

4 /30



図3.1-1 ユーザビリティの定義より（ISO 9241-11、 9241-210）図3.1-2 ユーザビリティの良し悪しは変化する

図3.1-3 ISO 9241-210のプロセス

１－２）ユーザビリティの定義と考え方

5 /30



既存の枠組み

形状/重さ加工精度キーボード押下圧耐久性・・・

全体サイズ画面サイズキーピッチ処理速度・・・

利用状況・ユーザー：主婦、初心者・作業：家計簿、友人との電子メールの連絡・作業環境：食卓、主に午後、・購入動機：そろそろ私も買ってみようかな

ボーナス商戦での割安購入→使える度合いを把握できないまま入手

eｔｃ.

仕様品質製造品質

Keyboard

利用品質

小樽商科大学平沢尚毅氏 ESEC2005専門セミナー資料より

Keyboard

文字のアサイン機能のアサインH/WとS/Wの良好な関係（MSG※の向上）

※MSG：Matching between SUI & GUI＊＊SUI: Solid User Interface GUI: Graphic User Interface

（ハードウエアの操作性）（ソフトウエア画面の操作性）

契約できない、

設定できない、

必要な文字が打てない、

別の人に送っちゃった

メールでこんなに

簡単に沢山の人と

お話できるんだ！

新機能、高性能、先端デザインだが結局・・・

使えない、使いにくい、情報を紛失した・・・

こんな事象を防ぐ品質

パソコンで言えば

6 /30

１－２）ユーザビリティの定義と考え方（参考）



機能適合性

性能効率性

使用性

互換性

信頼性

セキュリティ

適切度認識性

習得性

運用操作性

ユーザーエラー防止性

ユーザーI/F快美性保守性

移植性アクセシビリティ

製品品質特性副特性

表3.2-2 SQuaRE「使用性」副特性と

ユーザビリティ検討項目との対応関係（株式会社U'eyes Designの事例）

１－３）ユーザビリティ観点を作り込むために車載機器HMI領域における使用性の検討項目例

表3.2-1 車載用HMIの検討項目例（株式会社U’eyes Designによる）

7 /30



NE比4.5倍以上

NE比4.5倍未満

14

12

10

8

4

0

120

60

20

0

NE比

6

2

100

80

40

秒3.5

3.0

2.5

2.0

1.5

1.0

Novice操作時間

Expert操作時間

秒

15

10

5

0

NE比2倍以上

NE比2倍未満

NE比

2.04.5

9.8

図3.2-2 カーエアコン操作の場合（株式会社U’eyes Designによる）

１－３）ユーザビリティ観点を作り込むために

図3.2-3 カーナビの設定操作の場合

8 /30



操作ルート1

0

20

40

60操作ルート2 操作ルート1

秒

自治体第1位自治体第2位

0

2

4

6

NE比

自治体第3位

操作ルート1

2.52 3.51 4.73操作ルート2 操作ルート2

4.5

図3.2-4 Webサイトの場合

１－３）ユーザビリティ観点を作り込むために

「地方自治体Web サイトのユーザビリティ評価2009 ～子育て＆引越タスク編～」

9 /30



２.SQuaRE品質モデル活用リファレンス編

～第５章利用時の品質品質特性表～

10 /30



２－１）利用時の品質特性表１

SQuaRE品質モデル活用リファレンス編

第5章利用時の品質品質特性表 134p.



有効性「課題達成率」効率性「NEM」

11/30



・有効性課題達成率の例

12 /30

テストの目的

目標課題達成率成功の条件部分的成功の条件

失敗の条件

結果

文書作成ソフトウェアの罫線機能を使用して表入りビジネス文書を作成する事ができるかチェックする80％罫線機能を使って表が正しく作成されている事（スコア＝１）罫線の表が少なくとも部分的に正しく作成されている事（スコア＝0.5）罫線機能を使わなかった、または罫線表を半分以上正しく作成できなかった（スコア＝０）被験者20名中成功 5名スコア１× 5＝5部分的成功 10名スコア 0.5×10＝5失敗 5名スコア 0× 5＝0

平均スコアは 50％となり目標達成率に満たなかったため、次回のテストでは罫線機能のどこに問題があるかの調査を行う事を決定した。

9章結果のまとめ方 9.4有効性に関するデータの処理表9-1 課題達成率の例ユーザビリティテスティング共立出版株式会社（2003年）


1020＝50%



開発者とユーザの意識のズレを客観的に明示

ユーザテスト結果から操作時間に着目した結果

・効率性の例 NEM:Novice Expert ratio Method （問題点の発見）

ある操作ステップから

次の操作ステップに移るまでの時間を測定

客観的な数値情報となって現れた！

13 /30

Three aspects mental model by D.A.Norman

the designer’s conceptual model

the system image

the mental model




Time

Time

40

30

20

10

0

40

30

20

10

0

初心者

一般ユーザ

（Novice）

設計者

熟練ユーザ

(Expert)

次のボタンが押せない表示の意味

が不明入力がたいへんで時間が掛かる

内容を確認する

慣れていても入力はたいへん

内容は確認する

倍率20

15

10

5

0

Ｔni

ＴeiＲi＝

初心者・一般ユーザの操作時間

設計者・熟練ユーザの操作時間

‥‥m = i1413121110987654321操作ステップ

操作ステップ

操作モデルが一致操作性能の限界

操作モデルの不一致改善が可能

（2005年米国特許取得）

（2007年日本特許取得）

14 /30

NE比はできるだけ小さく1を目指す（4.5倍以上は致命的な欠陥がある）




e-GOV NEM評価 6.20（付属資料４電子政府ユーザビリティ基本調査結果報告）

15 /30

・効率性の例 NEM 電子政府ユーザビリティガイドライン

NE比はできるだけ小さく1を目指す（4.5倍以上は致命的な欠陥がある）








満足性快適性「SUS」the System Usability Scale

２－２）利用時の品質特性表２

16 /30



1. この商品をしばしば使いたいと思う

2. この商品は不必要なほど複雑であると感じた

3. この商品は、私にも容易に使えると思った

4. この商品を使うのに専門家のサポートがいるかもしれない

5. この商品にある様々な機能が良くまとまっていると感じた

6. この商品では一貫性のないところが多くあったと思った

7. たいていのユーザは、この商品の使い方について素早く習得できるだろう

8. この商品は、とても扱いにくいと思った

9. 私はこの商品を使いこなせる自信がある

10. この商品を使い始める前に私が学ぶべきことが多くあると思った

今回の一連の操作を実施した時点での、この商品に対するあなたの印象を教えてください。本格的に使う前の現時点の印象からの推測ということで気楽にご回答ください。

全くそうは思わないすごくそう思う1 2 3 4 5

･満足性快適性 SUS (the System Usability Scale)

60点以下は・・・80点以上なら優秀と言える

２－２）利用時の品質特性表２

17 /30




第5章利用時の品質品質特性表 142, 143, 147p.

リスク回避性、利用状況網羅性「シナリオベース」

２－３）利用時の品質特性表３

18/30



・リスク回避性、利用状況網羅性全利用シーン（シナリオ総数）に対する対応シナリオ数

・標準シナリオ

乗降客がエレベータに乗り込んでから行先階ボタンを押し、何もしない【3秒後に自動で閉まる】

乗降客が行先階で降り、誰も乗らない、他の階からも呼ばれない【3秒後に自動で閉まる】

・応用シナリオ

足に障害のある乗降客が、降りる人を待ってから、ゆっくり乗り込む【3秒以上かかると非安全】

足に障害のある乗降客が複数人、乗り込む際に、他の階から呼ばれる【急に閉まり非安全】

・想定外シナリオ

エレベータ内で気分が悪くなり、行先階で降りられず、自動で扉が閉じたまま停電し途中階で停止

【停電時のセーフティ機能がなければ非安全】

A社 B社

× ×

××

80％ 40％

（※％数値の扱いは各社にて設定）

エレベータ扉における自動開閉の想定シナリオで言えば・・・

利用特性シナリオ（仮称）の網羅性を意味する

エレベータで言えば、下記○印は「待ち時間の解消シナリオ 5W1H」で考察する

２－３）利用時の品質特性表３

19 /30



【5】運用的側面Contextual Reseach、シナリオの世界ユーザセグメント、ペルソナ、利用特性

暮らし方の多様性、ここが最も重要な分析考察を要するところ

○

ユーザモデル２

ユーザモデル３

○

ユーザモデル１

○

○ △○

△ ×○

■想定シナリオメトリクス

・標準シナリオ

・応用シナリオ

・想定外シナリオ

２－３）利用時の品質特性表３（参考）

20 /30

・グッドストーリーのみで考えている設計事例

○○銀行ATM 現金投入口蓋の自動開閉設計の例

1

2

3

4

5

6

7

利用状況を観察しないと見えてこないケース

親切設計のつもりが、余計な動きに・・・



３.SQuaRE品質モデル活用リファレンス編

～第６章製品品質品質特性表～

21/30




第6章製品品質品質特性表 164 168p.

３－１）製品品質特性表１使用性


第6章製品品質品質特性表 169p.

運用操作性「直接操作と間接操作の画面遷移数」

22 /30



・運用操作性直接操作と間接操作の画面遷移（Path）数

自分のお金を引き出す自分のお金を預ける他人にお金を振り込む現在の預金状況を確かめる現在の資産状況を確かめる・・・

自分の口座を指定する銀行を選ぶ支店を選ぶ口座種を選ぶ口座番号を入力する

目的の取引を成立させる必要な金額を入力する確認する

三菱東京UFJ

三井住友みずほりそな埼玉りそな・・・

赤坂赤羽板橋飯田橋宇都宮江古田荏田尾久

上石神井亀戸外苑前吉祥寺九品仏久我山京王桜ヶ丘国分寺

小平佐江戸坂下清水丘新橋神泉隅田川住吉

世田谷瀬谷外神田外堀通り雑司が谷玉川立川高田馬場

横浜群馬阿波仙台千葉・・・

縦方向：サービスを享受する（直接操作）

横方向：分割された必要情報を獲得する（間接操作）（本来は一覧したいが画面のサイズに入りきらない場合）

A

B

C

2

1

3 ４1

1

【直接操作の事例】銀行ATMでサービスを受けるのに必須の操作

（引き出す、預ける、振り込む等サービスの選択操作）

【間接操作の事例】銀行名、支店名を50音キーボードで検索する操作

（システムの都合でユーザが強いられる操作）

直接操作

間接操作


23 /30



B1

B2 B3

A1

C1 1 Path

3 Path

3 Path

1 Path

1 Path

直接操作Path数 3=1＋1＋1

B1

B2 B3

A1

C1 1 Path

3 Path

3 Path

1 Path

1 Path

直接操作Path数 3=1＋1＋1

B4

3 Path

3 Path

間接操作Path数 6=3＋3 間接操作Path数 12=3＋3＋3＋3

間接操作をできるだけ少なく設計するために

同じタスクにおけるPath数で品質を管理する

【カウント例】直接操作の画面遷移を 1 Path とカウント

間接操作の画面遷移を 3 Path とカウント

A銀行 B銀行

（※Path数値の扱いは各社にて設定）

・運用操作性直接操作と間接操作の画面遷移（Path）数

画面操作のしやすさの度合い＝１－間接操作のための画面遷移数

タスク遂行のための全画面遷移数

1-6/933.3%

1-12/1520%

＞


24 /30






第6章製品品質品質特性表 170 171p.

ユーザインタフェース（UI）快美性「等比級数黄金比」「色彩学」

３－２）製品品質特性表２使用性

25 /30



かたちのデータファイル Ⅲかたちの技術 Ⅲ－6 黄金分割

高橋研究室彰国社刊 54 55p.

Φ矩形の性質

白銀数 τ＝ ≒2.414１＋√2 １：（τ－１）≒1:1.414白銀比

黄金数 φ＝ ≒1.618１＋√5

2１：（φ－１）≒1:0.618黄金比

『日本の黄金比』といわれ、日本の建築技術（木造建築）に欠かせないものである。古くから「曲尺」という大工道具で使われてきた。また、「法隆寺」や「雪舟の山水画」「浮世絵」などでも白銀比が見られる。実生活においては、A4 版の用紙〔白銀長方形）が最も身近な白銀比である

A4サイズ

黄金・白銀・青銅一数と比と形と率と一 NTT-Electronic Library Service 経済学研究第74巻第4号岩本誠一〔九州大学大学院経済学研究院教授〕江口将生〔九州大学経済学府研修生・東鷹高校教諭〕吉良知文〔九州大学経済学府博＋前期課程〕

・UI快美性等比級数黄金比


26 /30



・UI快美性色彩学背景色と表示色＜悪い例＞

◆色の組み合わせの問題に注意するコントラストがほとんどないのも問題である。白地に黄色の文字や黒字に茶色の文字を想像してみるとよくわかる。「ユーザーインタフェースの設計第2版」より

暗い背景に対して赤と青の文字を使用しない方がよい。あからさまな色の深さの違いは目障りになることもある。「GUIのお作法」より

青みの量だけが違うような近接色は使用しないこと。このような2色の境界はぼやけて見えてしまうだろう。「見せるインタフェースデザイン」より

青系統の色を互いに近付けて置くのは避ける。人間の眼は、青色で濃さだけが違うものの輪郭を認識するのは得意ではないからである。「ソフトウエア開発のためのユーザーインタフェース」より

RGB YMCK

マンセル値など

測定ツールカラー・コントラスト・アナライザー以下のサイトより無償でダウンロードすることができる。http://www.infoaxia.com/tools/cca/


27 /30




第6章製品品質品質特性表 172 173p. アクセシビリティ「 WAIV 」Web Available Intellectual Verification

３－３）製品品質特性表３使用性

28 /30



1:表示速度(85.71点)

2:概要の理解(50.00点)

3:完全なアクセス(56.25点)

4:ユーザーによる操作(87.50点)

5:本文の読みやすさ(75.00点)

6:適切な読み上げ(64.29点)

7:コンテンツの視認性(81.25点)

JIS X8341-3:2010 等級A 達成率(52.6%)

JIS X8341-3:2010 等級AA 達成率(62.5%)

JIS X8341-3:2010 等級AAA 達成率(54.1%)

WAIVの自動生成レポート例と測定結果

WAIV GUI

・アクセシビリティ WAIV（自動評価ツール）

３－３）製品品質特性表３使用性

29 /30



ご清聴ありがとうございました。

30 /30

株式会社U’eyes Design 鱗原晴彦

[email protected]

Documents

の活用～ IoT時代に要求される サービス・UI/UX品質とは？ · IoT時代に要求されるサービス・UI/UX品質とは？～SQuaRE「製品品質：使用性」と「利用時の品質」を理解する～

の活用～ IoT時代に要求されるサービス・UI/UX品質とは？ · IoT時代に要求されるサービス・UI/UX品質とは？～SQuaRE「製品品質：使用性」と「利用時の品質」を理解する～