書き込み式

ヒューマンコンピュータ
インタラクション入門

コロ

ナ
社

博士（工学）西内信之【著】

コロナ社

はじ

めに製造技術や情報処理技術が飛躍的な進歩を遂げたことで、多くの工業製品が多機能化・高機能化しています。このような工業製品のおかげで、私たちの生活はとても便利で快適なものになってきました。その一方で、皆さんがこれらの製品を実際に使っているときに、その操作に不自然さを感じたり、使いにくいと思ったりしたことはありませんか。その原因の一つに、人間の特性と機械（コンピュータ）の特性を総合的にとらえるヒューマンコンピュータインタラ
クションの考え方が反映されていないことがよくあります。
ヒューマンコンピュータインタラクション（HCI：human computer interaction）は、「人間が使用するための対話型コンピュータシステムのデザイン、評価、実装に関連し、それら周ナ
社

辺の主要な現象に関する研究を含む学問分野」と HCI に関する国際的活動を行っている学会組織（ACM SIGCHI）において定義されています。ヒューマンコンピュータインタラクションとよく似た言葉で、ヒューマンインタフェース（HI：human interface）がありますが、インタフェース（interface）だけであれば「界面、接面」という意味ですから、HI は人間とシステムのやり取りをする境界となる部分（ハードウェア・ソフトウェア）の意味合いが強くなります。一方で、HCI のインタラクション（interaction）は「相互作用」という意味ですから、ロHCI は HI を介した人間とコンピュータのやり取りといった大きな系をとらえていることになります。HCI と HI の二つを学問分野として見てみると、多くの内容がオーバーラップしていコるというのも頷けます。

本書は、HCI の勉強を進めていくうえで重要となる観点から、第 1 部：人間に関すること、
第 2 部：HCI の基礎知識、第 3 部：HCI の評価方法、という三つのカテゴリーに分かれています。
第 1 部の人間に関することでは、HCI を考えるうえで、まさに主人公となる「人間」を人間工学の観点からとらえます。生き物である人間、人間を測る方法、色と人間の関係、人的過誤（ヒューマンエラー）について説明します。
続いて、第 2 部の HCI の基礎知識についてです。HCI を様々な観点から掘り下げていきます。
具体的には、ハードウェア、ソフトウェア、認知構造、設計原則について述べます。
最後の第 3 部の HCI の評価方法では、これまでに用いられてきたおもな評価方法を取り上げて紹介します。HCI の定量的評価であるフィッツの法則、眼球運動計測や、ヒューリスティック評価法、ユーザテストについて詳しく説明します。
本書の対象読者は、HCI や HI を勉強してみたいと考える初学者です。そのような皆さんに、少しでも興味を持続して、効率的に勉強を進めてもらうために、本書ではいくつかの工夫をしi

はじめに本書の構成（三つのカテゴリー）ています。本書の各ページは、解説部分、スライド部分、メモ部分に分かれています。スライド部分では、重要なキーワードが空欄になっていますので、皆さんは解説部分を読みながらス

ナ社

ライド部分の空欄にキーワードを埋めていってください。メモ部分は、皆さん自身で調べたことや、先生や講師がプラスアルファで話してくれたことをメモしておいてください。
本書の使い方は、次の二つを想定しています。

ロ

テーマ 1

生体システム

人間を中心に考えた HCI を理解するためには、人間そのものを理解する必要があります。

ここでは、生き物としての人間を理解しましょう。下のスライドには人間の基本的な構造をまう三つの器官系である、筋骨格系、感覚系、神経系に〇をつけてください。
Memoコ

1. 人間の構造と機能

人間の構造を以下の器官系に分類

解説部分

・筋骨格系

・消化器系

・呼吸器系・循環器系・泌尿器系・生殖器系・内分泌系・感覚系

１．人間の構造と機能とめてあります。下のすべての器官系が HCI に関係するわけではありません。本テーマで扱・神経系すべての器官系が+,設計に深く関係するわけではない。

先ほど〇をつけた三つの器官系が HCI においてどのように関係するのか考えてみましょう。
例えば、携帯電話を操作するときはどうでしょうか。下に示すそれぞれの内容は、上のスライドで〇をつけた筋骨格系、感覚系、神経系の三つの器官系のどれと関係しているでしょうか。

Memo

1.1 HCIと関連する主要な器官系

スライド部分

①系操作のために手、指を動かす。
②系
目的の画面を確認する 。
画面が切り替わるときの音を聞く。
アイコンをタッチすると振動する。

③→ 視覚→ 聴覚→ 触覚系
感覚器で得た情報を脳に伝達する。
脳で理解し、過去の記憶と突き合わせ、次を判断。

3

本書のページ構成
ii

メモ部分

はじめに

（1）
 個人で本書を使って勉強する：まず解説部分を読んでみましょう。スライド部分の解答のヒントになることが書いてある場合もあります。そして、巻末の解答を見ながら、スライド部分の空欄にキーワードを記入してみてください。
（2）
 授業やセミナーで本書を使って勉強する：授業を担当する先生や、セミナーの講師が、空欄部分にキーワードが書かれた PowerPoint のスライド（コロナ社の書籍紹介ページ†
より、教科書採用者・セミナー主催者向けに PowerPoint のスライドを提供）を使いながら、解説をしてくれます。スライドを見ながら、空欄部分にキーワードを書き写していってください。
どちらの使い方も、自分の手を動かしてキーワードを空欄に記入していきますので、本書の内容に集中しながら頭の中を整理できると思います。また、皆さんがキーワードを実際に書くことで、少しでも記憶の片隅に知識として残ることを期待しています。空欄部分の記入がすべて終わったら、今度は本書を HCI の参考書として利用してもらえると考えています。
さらに、各テーマには演習課題を用意しています。演習課題を解くことによって各テーマのナ社

内容についてより理解が深まると思います。ぜひ、チャレンジしてみてください。
最後になりましたが、本書を執筆するにあたり、ご助言ご協力賜りました、甲南大学 山中仁寛先生、東京工科大学 相野谷威雄先生、東京都立大学 瀬尾明彦先生、笠松慶子先生、福井隆雄先生、岡本正吾先生に、深く感謝申し上げます。

また、出版にあたり、大変お世話になりましたコロナ社の皆様に厚く御礼申し上げます。

西内信之

コロ

2022 年 2 月

本書に記載の会社名、製品名は、一般に各社の商標（登録商標）です。本文中では
TM、Ⓡマークは省略しています。

†

https://www.coronasha.co.jp/np/isbn/9784339029277/iii

目第1部

次人間に関することテーマ 1

生 体 シ ス テ ム…………………………………………………………………

2

1.

人間の構造と機能… ………………………………………………………………………… 3

2.

人間に関するいろいろな名称… …………………………………………………………… 5

3.

インタラクションデザインと関連する器官系… ………………………………………… 6

テーマ 2

生体計

測………………………………………………………………… 13

人体寸法の測定… …………………………………………………………………………… 142.

運 動 の 測 定… …………………………………………………………………………… 17

3.

生理的機能の測定… ………………………………………………………………………… 20

4.

心理的機能の測定… ………………………………………………………………………… 21

1.

色

2.

色の分類・属性・伝達・混合… …………………………………………………………… 27

3.

色の視覚効果・心理効果… ………………………………………………………………… 30

4.

色を考慮した設計… ………………………………………………………………………… 32

1.

ヒューマンエラーとは… …………………………………………………………………… 35

2.

ヒューマンエラーの要因… ………………………………………………………………… 39

3.

ヒューマンエラーの抑止… ………………………………………………………………… 42

第2部とと人間………………………………………………………………… 23

は… …………………………………………………………………………… 24

ヒューマンエラー… ………………………………………………………… 34

コテーマ 4

色ロ

テーマ 3

ナ社

1.

HCI の基礎知識

テーマ 5

ハ ー ド ウ ェ ア………………………………………………………………… 48

1.

… ………………………………………………………………… 49
入力装置（input device）

2.

出力装置（output device）…………………………………………………………………… 55

1.

CUI

2.

GUI 設計におけるタスク指向とオブジェクト指向… …………………………………… 62

テーマ 6
テーマ 7

ソ フ ト ウ ェ ア………………………………………………………………… 59とGUI… …………………………………………………………………………… 60

HCI と認知構造… …………………………………………………………… 70

1.

人間の認知構造… …………………………………………………………………………… 71

2.

行為の 7 段階理論… ………………………………………………………………………… 73

3.

よいデザインの原則… ……………………………………………………………………… 78v

目

次テーマ 8

原則… …………………………………………………………………………… 83

1.

設

2.

デザインガイドライン… …………………………………………………………………… 89

第3部

計HCI の設計原則… …………………………………………………………… 82

HCI の評価方法

テーマ 9

HCI の定量的評価…………………………………………………………… 94

1.

GOMS モ デ ル… …………………………………………………………………………… 95

2.

ヒックの法則（Hick’s law）
… ……………………………………………………………… 97

3.

フィッツの法則（Fitts’ law）………………………………………………………………… 98

4.

眼 球 運 動 解 析… ………………………………………………………………………… 101

1.

分 析 的 手 法… ………………………………………………………………………… 106

2.

ユーザビリティに関する 10 のヒューリスティクス…………………………………… 1091.

Web の基礎知識… ………………………………………………………………………… 118

2.

インタラクションデザインにおける Web 特有のポイント…………………………… 120

3.

Web 特有のヒューリスティクス… ……………………………………………………… 123

1.

実 験 的 手 法… ………………………………………………………………………… 130

2.

プロトタイピング… ……………………………………………………………………… 134

テーマ 11Web ヒューリスティクス…………………………………………… 117

ユ ー ザ テ ス ト…………………………………………………………… 129ロ

テーマ 12

ヒューリスティック評価法… ……………………………………… 105

ナ社

テーマ 10コ

引用・参考文献… …………………………………………………………………………………… 143
空欄箇所・演習課題の解答………………………………………………………………… 146vi

第1部

コロ

ナ社

人間に関すること

テーマ 1

生体システム●本テーマで学ぶこと●
第 1 部の「人間に関すること」では、生体システム、生体計測、色と人間、ヒューマンエラーの観点で、人間をとらえていきます。まずは、本テーマで生き物としての人間を理解しましょ

1.

ナ社

う。
人間の構造と機能人間を中心に考えた HCI を理解するためには、人間そのものを理解する必要があります。ここでは、生き物としての人間を理解するために、人間を構成する器官系と、人間の2.

ロ機能という観点に着目してみましょう。
人間に関するいろいろな名称

コ

HCI や人間工学に関する技術論文を読むときや書くときに、普段使っている「腕」、「足」、「胴体」といった言葉は使われていません。専門的な用語として、人間に関するいろいろな名称をチェックしておきましょう。
3.

インタラクションデザインと関連する器官系
人間の基本構造である器官系について、インタラクションデザインに関連する筋骨格系、感覚系、神経系の三つをそれぞれ詳しく解説します。

テーマ 1

生体システム

人間を中心に考えた HCI を理解するためには、人間そのものを理解する必要があります。
ここでは、生き物としての人間を理解しましょう。下のスライドには人間の基本的な構造をまう三つの器官系である、筋骨格系、感覚系、神経系に〇をつけてください。
Memo

1. 人間の構造と機能
人間の構造を以下の器官系に分類

・消化器系

・呼吸器系・循環器系・泌尿器系・生殖器系・内分泌系・感覚系

ナ社

・筋骨格系・神経系すべての器官系が+,設計に深く関係するわけではない。

先ほど〇をつけた三つの器官系が HCI においてどのように関係するのか考えてみましょう。

ロ

例えば、携帯電話を操作するときはどうでしょうか。下に示すそれぞれの内容は、上のスライ

コ

ドで〇をつけた筋骨格系、感覚系、神経系の三つの器官系のどれと関係しているでしょうか。

Memo

1.1 HCIと関連する主要な器官系①系操作のために手、指を動かす。
②系
目的の画面を確認する 。
画面が切り替わるときの音を聞く。
アイコンをタッチすると振動する。

③→ 視覚→ 聴覚→ 触覚系
感覚器で得た情報を脳に伝達する。
脳で理解し、過去の記憶と突き合わせ、次を判断。

3

１．人 間 の 構 造 と 機 能とめてあります。下のすべての器官系が HCI に関係するわけではありません。本テーマで扱

第1部

人間に関すること

人間の基本構造である器官系と HCI を関連づけるときに、神経系については少しイメージしづらいですね。そこで、運動機能、感覚機能、認知機能の三つの人間の機能という観点でイ構造の器官系があると考えてみてください。
Memo

1.2 各機能から見たデザイン要素例
機能：
物の大きさ、空間の大きさ、リーチ（手が届く距離）、操作具のかたさ、ものの重さ、機械の反応時間。
④

機能：
表示の大きさ、明るさ、配色、警告音の大きさ・高さ。

ナ社

⑤

機能：
操作方法、表示内容、気づきやすさ。

⑥

人間の機能についての具体的な例として、ステーキを焼く場面を考えてみましょう。ステーロ

キを焼くときは、キッチンにある様々な道具を使うわけですが、下のスライドに挙げたデザイ
ン要素は、人間の三つの機能である運動機能、感覚機能、認知機能のどれと関連しているか考えてみましょう。
Memoコ

１．人 間 の 構 造 と 機 能ンタラクションデザインを見てみましょう。これら三つの機能を実現するために、人間の基本ステーキを焼く場面を考えてみよう
背の高さに合ったガスコンロの高さ

・⑦機能炎の見やすい形状

・⑧機能

操作のしやすいつまみ・⑨機能

もちやすいフライパンの取っ手形状

・⑩機能

わかりやすいレシピ・⑪

4機能

テーマ 1

生体システム

器官系の詳しい解説に入る前に、人間に関するいろいろな名称を押さえておきます。まずは人間の身体各部の名称についてです。下の人体図の各部は、図の下に並んでいるどの名称が対応しますか。HCI や人間工学の技術論文を読むときや書くときに、普段使っている「腕」、「足」、
２．人間に関するいろいろな名称「胴体」といった言葉は使われていません。これらの名称を使うようにしましょう。
Memo

2. 人間に関するいろいろな名称

どの部分でしょう？⑫

ナ社

2.1 身体各部の名称

頭部、体幹、体幹上部、体幹下部、上腕部、前腕部、手部、上肢、大腿部、下腿部、足部、下肢

専門的な名称は、身体の各部だけではなく、身体の運動（動作）にもあります。上肢（肩関ロ節）、下肢（股関節）のどちらも運動の名称は同じです。外旋、内旋、屈曲、伸展、内転、外転という運動は、下のスライドのどの図が表しているでしょうか。身体各部の名称と同様に、

コ

技術論文の中では、これらの運動の名称が用いられています。
Memo

2.2 身体の運動の名称

上肢（肩関節）の場合⑬⑭⑮⑯⑰⑱

下肢（股関節）の場合

5

第1部

人間に関すること

それでは、最初の話題に戻って、人間の基本構造である器官系から、インタラクションデザインと関連する三つの器官系について、それぞれ詳しく見ていきましょう。まずは、筋骨格系です。筋骨格系は、人間の骨組みとなる骨格から構成される骨格系と、骨格を動かす筋から構成される筋系の二つに分けられます。
３．インタラクションデザインと関連する器官系

Memo

3. インタラクションデザインと関連する器官系
3.1 筋骨格系： 人間の骨組みとなる骨格。

⑳： 骨格を動かす筋。

ナ社⑲

骨格系は、インタラクションデザインに直接は関係しなさそうですが、ここでは参考知識とロして押さえておきましょう。代表的な五つのパーツは、右の骨格図のどの部分でしょうか。各

Memo

コ

名称の右にある点と、対応する箇所を線で結んでみましょう。

3.1.1 骨格系
（1）骨格の構成
人間は206個の骨で構成。

おもな五つのパーツに分けられる。
㉑

1) 頭蓋骨きょう か く6・2) 胸 郭・

3) 脊柱・

4) 上肢骨・5) 下肢骨・―著 者 略 歴―1993 年
1995 年
1997 年
2004 年
2005 年
2014 年2016 年
2020 年

横浜国立大学工学部生産工学科卒業
横浜国立大学大学院工学研究科博士前期課程修了（生産工学専攻）
神奈川大学工学部助手
博士（工学）（横浜国立大学）
首都大学東京システムデザイン学部准教授
AGH 科学技術大学客員教授（ポーランド）
首都大学東京システムデザイン学部教授
東京都立大学システムデザイン学部教授（校名変更）
現在に至る

著者略歴いさお)

江間敏（えまさとし）

高橋勲（たかはし

1975年
1977年
1977年
1985年
1986年
1991年
2002年

金沢大学工学部電気工学科卒業
東京工業大学大学院修士課程修了
国鉄（現 JR）勤務
鉄道技術研究所主任研究員
沼津工業高等専門学校勤務
沼津工業高等専門学校助教授
沼津工業高等専門学校教授
現在に至る

1971年

東京工業大学大学院博士課程修了（電気工学専攻)
工学博士（東京工業大学)
東京工業大学助手
宇都宮大学助教授
長岡技術科学大学助教授
長岡技術科学大学教授
逝去

ナ社

1971年
1975年
1978年
1988年
2003年

パワーエレクトロニクスⒸ Satos
hiEma,Is
aoTakahas
hi2002ロPowerElectr
onics

2002年 １ 月 25日 初版第 １ 刷発行
2011年 ９月 30日 初版第10刷発行
書き込み式
ヒューマンコンピュータインタラクション入門

コIntroduction to Human-Computer Interaction 2022 年 4著月 11 者
日検印省略
発 行 者

Ⓒ Nobuyuki Nishiuchi 2022★

初版第１刷発行江間敏
勲にし ナ 社
うち株式会社
コロ著者
西内代 表者真也
発 行 者牛 来株式会社
壮 光 舎 印 刷 株代式会表社
者
高橋

のぶ

ゆき信
之
検印省略
コ ロ ナ 社
印 刷 所
牛 来 真 也印 刷 所
壮光舎印刷株式会社
112001
1 東京都文京区千石 446-10製 本 所株式会社
グ リ ー ン
発行所 株式会社 コ ロ ナ 社
112―0011 東京都文京区千石 4―46―10
CORONA PUBLI
SHING CO.
,LTD.
発 行 所 株式会社 コ ロ ナ 社
Tokyo Japan
CORONA PUBLISHING CO., LTD.
振替 00140-8-14844・電話(03)3941-3131(代)Tokyo Japan
ホームページ http:/振替00140―8―14844/www.coronasha.
c（03）o.jp3941―3131（代）・電話
ホームページ

I
SBN 9
78-43
39-012002

https://www.coronasha.co.jp(金)(製本：グリーン)

Printe
dinJapan
本書のコピー，スキャン，デジタル化等のISBN
978-4-339-02927-7
C3055 Printed in Japan

（森）

無断複製・転載は著作権法上での例外を除＜出版者著作権管理機構 委託出版物＞
き禁じられております。購入者以外の第三本書の無断複製は著作権法上での例外を除き禁じられています。複製される場合は，そのつど事前に，者による本書の電子データ化及び電子書籍出版者著作権管理機構（電話03-5244-5088，FAX 03-5244-5089，e-mail: info@jcopy.or.jp）の許諾を化は，いかなる場合も認めておりません。
得てください。

落丁・乱丁本はお取替えいたします

本書のコピー，スキャン，デジタル化等の無断複製・転載は著作権法上での例外を除き禁じられています。
購入者以外の第三者による本書の電子データ化及び電子書籍化は，いかなる場合も認めていません。
落丁・乱丁はお取替えいたします。