電子機器インタフェースの色彩が直感的な操作に及ぼす影響に関する研究
メタデータ

言語: Japanese
出版者:
公開日: 2013-11-15
キーワード (Ja):
キーワード (En):作成者: 坂本, 牧葉
メールアドレス:所属:

URL

https://doi.org/10.15118/00005102

目次
序文

5

1.1

緒言 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

1.2

社会背景 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

1.3

研究目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8

1.4

関連研究 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9

1.5

本稿の構成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

背景理論

12

2.1

緒言 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

2.2

行為の 3 階層モデル . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

2.3

人の視覚と色彩. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

15

2.3.1 色彩の成り立ち . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

15

2.3.2 視覚表現における色彩の役割 . . . . . . . . . . . . . . . . . . . . . . . .

16

2.3.3 混色 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

17

2.3.4 表色系 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

18

1

2

2.4

色彩と心理 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

21

2.4.1 色彩による心理的影響 . . . . . . . . . . . . . . . . . . . . . . . . . . . .

22

2.4.2 混合イメージスケール . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

2.5

タッチパネル操作の特徴 . . . . . . . . . . . . . . . . . . . . . . . . . . . .

25

2.6

デバイス操作に関連する身体能力の年齢による変化. . . . . . . . . . . . .

25

2.7

結論 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

26

プッシュボタンの色と直感的操作との関係

28

3.1

緒言 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

28

3.2

プッシュボタンの色と直感的操作の速さと正確性との関係 . . . . . . . . . .

28

3.2.1 実験目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

28

3.2.2 操作との因果関係を明らかにする色彩 . . . . . . . . . . . . . . . . . . .

29

3.2.3 実験方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

29

3.2.4 実験結果の分析と考察 . . . . . . . . . . . . . . . . . . . . . . . . . . . .

30

3

3.3

プッシュボタンと背景のパネルの色と操作の速さと正確性との関係 . . . . .

31

3.3.1 実験目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

31

3.3.2 実験方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

31

3.3.3 実験結果の分析と考察 . . . . . . . . . . . . . . . . . . . . . . . . . . . .

32

2

3.4

結論 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

32

配色による画面全体の印象と操作の速さおよび正確性との関係

34

4.1

緒言 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

34

4.2

配色の位置と画面全体の印象との関係 . . . . . . . . . . . . . . . . . . . . .

35

4.2.1 実験目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

35

4.2.2 事前調査 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

35

4.2.3 実験方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

37

4.2.4 実験結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

38

4.2.5 分析と考察 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

38

4

4.3

配色による画面全体の印象と操作の速さ，正確性との関係 . . . . . . . . . .

41

4.3.1 実験目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

41

4.3.2 実験方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

42

4.3.3 実験結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

43

4.3.4 分析と考察 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

44

4.4

配色による画面全体の印象と，操作の速さ，正確性および操作者の主観評価との関係 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

46

4.4.1 実験目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

46

4.4.2 実験方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

46

4.4.3 正答数と操作時間の結果. . . . . . . . . . . . . . . . . . . . . . . . . .

47

4.4.4 操作と配色による画面の印象の主観評価との関係 . . . . . . . . . . . . .

48

4.4.5 分析と考察 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

49

4.5

結論 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

51

画面に用いる配色の明度差と操作との関係

54

5.1

緒言 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

54

5.2

画面に用いる色彩同士の明度差 . . . . . . . . . . . . . . . . . . . . . . . .

54

5.3

画面に用いる配色の明度差が操作に及ぼす影響 . . . . . . . . . . . . . . . .

55

5.3.1 実験目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

55

5.3.2 実験方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

55

5.3.3 実験結果の分析および考察 . . . . . . . . . . . . . . . . . . . . . . . . .

56

5

5.4

画面に用いる配色の明度差と操作との関係に操作者の年齢が及ぼす影響 . . .

57

5.4.1 実験目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

57

5.4.2 実験方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

58

5.4.3 実験結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

58

5.4.4 画面に用いる配色の明度に着目した分析と考察 . . . . . . . . . . . . . . .

60

3

5.4.5 二元分散分析による分析と考察 . . . . . . . . . . . . . . . . . . . . . . .
5.5

62

結論 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

64

結言

66

6.1

総括 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

66

6.2

今後の展望 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

68

付録 A

3 章の実験課題の出題一覧

69

付録 B

操作画面の印象評価手法

71

付録 C

青年，壮年グループの操作と，画面に用いる配色の明度との無相関関係

72

6

4

1 序文
1.1 緒言スマートフォンや金融機関の ATM などの情報端末を通じた物品購入やサービス提供が一般化している．これらは情報システムの分野の専門的知識や技術をもたない一般のユーザにも定着している．博物館などの展示解説や，施設紹介，図書館での蔵書検索など公共設備の一部として利用されるものも数多くみられる．情報を閲覧するだけではなく，購入手続きや振込などのために情報端末を用いる場合も多い．例として図 1 に，電子端末が駅構内で券売機として利用されている様子を示す．これらの端末は操作を誤ると，意図しない出費をしてしまったり，目的の時間の便を利用できなくなるなどの被害に遭う場合がある．また ATMなどの情報端末を使って，高齢者に現金を振り込ませる犯罪事例も報告されており，ユーザが素早く正確に操作可能できるようインタフェースデザインを整備することは社会的な課題であるといえる．つまり電子デバイスを誤りなく素早く操作ができることは，利用時の混雑といった公共的問題を解決するだけでなく，ユーザ自身の個人情報や財産を保護する上で非常に重要であるといえる．

図 1 駅構内で利用される電子機器

たとえば情報端末を通して切符などを購入する場合，短時間のうちに誤りなくその手続きを終えられたとき，そのインタフェースデザインは使いやすいと評価されると考えられる．
このような評価を規定するものとして，ユーザにとって使いやすい人工物を設計するための考え方であるユーザビリティ [1][2] や，人工物の使用を通した総合的な有意義な体験を示す
ユーザエクスペリエンス [3] の考え方が知られている．ユーザビリティは use と able を組み合わせた造語であり「使いやすさ」「使い勝手」を意味する [1][2]．国際規格の ISO9241-11の定義によれば「特定の利用状況において，特定の利用者によって，ある製品が，指定され5た目標を達成するために用いられる際の，有効さ，効率，利用者の満足度の度合い」を示し，一般的にソフトウェアやウェブサイトの使いやすさの尺度として用いられる．一方，ユー
ザエクスペリエンスは「製品・サービス・環境との対話操作の結果による，あるいはそれによって予期される，ユーザの感動，信念，好み，振る舞い，成果のすべて」（ISO 9341-210）と定義されており，単に人工物を支障なく利用できるだけではなく，使用を通して得られる「嬉しい」「面白い」といった情緒的な使用感を含む体験の総体を示す [3]．
正確に短時間で操作できることは，情報端末の利便性として必要不可欠であると考えられる．さらにインタフェースデザインを通した操作が好ましく感じられることもまた，ユーザに継続的に利用してもらうために軽視することはできない．つまり操作の迅速性，正確性といったユーザビリティに示される操作の合理的側面も，ユーザに好ましい印象を与え操作の動機づけとなる，ユーザエクスペリエンスに示される情緒的側面もインタフェースデザイン
において，達成すべき重要な課題であるといえる．
インタフェースの使いやすさとユーザに与える印象とに，影響を及ぼす要素の 1 つとして色彩が挙げられる．われわれは普段の生活において，対象の色彩を見ることによってその印
象や美醜を感じ取ったり，状態や性質を判断するための情報としている．たとえば植物の葉の色から成長の具合や健康状態を判断したり，空の色からそのときの時間帯を推測したりする．そしてそれらの情報はその後の行為に影響を及ぼす [4]．また色彩に対して美醜や寒暖などの印象を感じることによって，人の心身にも影響が及ぶことが知られている . たとえば暗い色を見ることによって気分が沈んだり，赤色を見て体温が上昇するといった例が挙げられる [5]．このように，人が色彩から情報を読み取ったり，心身に影響を受ける性質は，さまざまな分野のカラーデザインに応用されている．たとえば容器の色によって同じ飲料の風味が異なるように感じられる効果 [5] はパッケージデザインに応用され，壁面の色によって時間感覚や体温に影響が生じる効果 [5] は状況に応じた空間デザインに用いられている．現
在，タッチパネルをはじめとする電子デバイス画面の色彩設計の指標は，多くの場合にグラフィックデザインに関する知識や，デザイナーの経験則に基づいているが，操作性や使いやすさとの関係は定量的に明らかにされているとはいえない．そこで本稿では，インタフェー
スデザインに用いる色彩と，操作の速さ，正確性，操作者の使いやすさとの因果関係を明らかにすることによって，素早く，正確で快適な直感的操作に適した画面の色彩的性質を明らかにすることを試みる．
まず本章では，社会背景と関連研究について述べ，本稿の目的を明確化にする．1.2 節では本研究のテーマにおいて解決を目指す社会的課題とタッチパネル端末をはじめとする電子デバイスのデザイン性向上の意義などの背景について述べる．1.3 節では，電子デバイスのインタフェース改善を目的とした先行研究と，色彩が人の心理や行為に及ぼす影響を検証した先行研究について述べ，本稿で論点を明確にする．1.4 節では 1.2 節，1.3 節での議論をふまえて本稿の研究目的について述べる．

6

1.2 社会背景
近年の社会背景から本研究の必要性について述べる．電子端末を通したサービスの多様化に伴って，それらのインタフェースデザインにはさまざまな色彩設計が用いられるようになった．また近年では，さまざまなカラーバリエーションをもった電化製品や衣料品などが販売されるようになった．機能面から製品を選択するのならば，本体がどのような色でも構わないはずだが，実際は消費者の購買意欲は色彩によって大きく影響を受ける．そしてユー
ザは「お気に入りの色」のものを使用することによって，そうではないものを使用する場合
よりも満足度は高くなる [6]．情報端末画面の色彩設計においても同様に，操作を通して得られる好ましい印象はユーザの評価する使いやすさなどに影響を及ぼすと考えられる．
工業製品の色彩に対する趣向の多様化とともに，それらのデザイン性に対する需要も高まりつつある．近年，インターネットやテレビなどのメディアを通してファッション，インテ
リア，ライフスタイルなどの流行に関する情報が共有されることによって，ユーザの嗜好はこれまでになく多様化し，人々のデザインに対する関心にも高まりがみられる．たとえば文房具や日用品，コンピュータの周辺機器などのデザインは，使い勝手の良さを追求したものからユニークな形状を優先させたものまで幅広い趣向への対応がみられる．現在では一般のユーザが自らデザインしたウェブサイトを公開したり，プロフェッショナル仕様のデザイン
用ソフトウェアを利用することも珍しいことではなくなりつつある．ノーマンはその著書「エモーショナル・デザイン」[7] の中で，人工物設計にエモーショナル性の視点を導入することを「内省レベルのデザイン」と呼び，その重要性を説いている．単に機能的に満たされていれば良いというわけではなく，そのデザインが好ましいと感じられるものでなければ，それらが多くの製品やサービスの中から選び取られることは難しい．機能的に不足がなくとも，デザインが好ましく感じられなければユーザに受け入れられない場合さえある．したがって，電子機器の操作画面のデザインにおいても高い操作性とデザイン性とが両立されていなければ，設置者とユーザの双方にとって有益な関係は生じにくいと考えられる．
また，電子機器の操作画面は不特定多数のユーザに利用されることが前提であることから，特定のユーザにではなく，多様なユーザにとって使いやすいものでなくてはならない．
ロナルド・メイスらが提唱したユニバーサルデザイン [8][9] の原則に公平性が挙げられているように，インタフェースデザインでは多様なユーザの利用を想定する必要がある．たとえばインタフェースが理解しづらいものだったり，好ましく感じられないデザインである場合
は，とくに電子機器の操作に馴染みのないユーザは操作をすることがきわめて困難になると考えられる．ユーザが平等に操作できない場合，デジタルデバイドによって社会問題が引き起こされる可能性が懸念される．デジタルデバイドは，インターネットやパソコンなどの情報通信技術を利用できる者と利用できない者との間に生じる格差のことを指す [10]．格差に7

よってネットワークを通じたサービスの恩恵を受けられなかったり，コミュニティの中で疎外されてしまう要因になる場合がある．デジタルデバイドが生じる要因はさまざま指摘されているが，主として経済的格差，地域格差，身体的・社会的格差（性別，年齢，学歴など）などが挙げられる．たとえば年齢の高いユーザのなかには，タッチパネル電子デバイスの操作を習得する機会がなかったために操作に不慣れで，かつ苦手意識をもつ場合がある [12]．
この課題は社会的にも認識されており，短い手続きで通話をするための高齢者向けのスマー
トフォンのアプリケーションが提供されたりしている．苦手意識に加えて，インタフェース
デザインがわかりにくいなど，デザインによる支援が十分でないことも情報格差が起こる要因になると考えられる．たとえば，操作すべき対象が判別しにくかったり，操作のフィード
バックが分かりにくいことによるヒューマンエラーによって，正しい操作が阻害され，操作者のモチベーションを下げると考えられる．しかしこれらのエラーは，デザインの改善によって軽減することが可能であると考えられる．

1.3 研究目的
社会背景を踏まえて本研究の目的について述べる．今日では情報端末の普及に伴い，さまざまなデザインのインタフェースが提供され，多様なユーザに利用されている．そのため，多くのユーザに対して使いやすいインタフェースデザインが求められていると前節で述べた．そこで本研究では，人の心理や生理との因果関係が深い色彩に着目し，操作画面の色彩と操作との関係を探る．
電子端末の誤った操作はユーザの不利益につながるため，操作は正確に遂行される必要がある．また正確であるだけではなく，迅速に操作できることによって，利用時の混雑などによるトラブルを回避できると考えられる．したがって，まず画面の色彩と操作の正確性，素早さとの関係を明らかにする必要がある．また ATM などをはじめとする電子デバイスの一連の操作手続きは，文字入力やボタンの選択などの直感的操作の組み合わせによって構成されていると考えられる．したがって，とくに直感的判断による操作と画面の色彩との関係を明らかにする必要があると考えられる．また入力などの操作の際，操作者が自然と注目するのはプッシュボタンなどの操作対象の色彩だと考えられる．以上のことから，本研究の具体的目的の 1 つとして，プッシュボタンの色と直感的操作の素早さと正確性との関係を明らかにすることを設定する．
また前節では，生活用品をはじめとする工業製品の本体の色や質感など，製品の性能とは直接関わりのないような側面からも，ユーザの使いごこちは変化すると述べた．同様に，操作画面の色彩設計も使いやすさや好ましさへ影響を及ぼすと考えられる．そこで画面の色彩と操作の正確性，素早さと，操作者の画面に対する主観評価との関係を明らかにすることによって，操作性に優れ，使いごこちの良いインタフェースの色彩設計の性質を探ることがで

8

きると考えられる．操作画面の色彩設計は，一般的にプッシュボタンや背景色など画面上の全ての要素を対象として考えられている [11]．そこで，2 つめの具体的な研究目的として，配色による画面全体の印象と，直感的操作の速さと正確性と，操作者の画面に対する主観評
価との関係を明らかにすることを設定する．
さらに画面の色彩を視認し，電子デバイスを操作するために重要な操作者の視力は年齢による影響を受けやすいことから，画面の色彩と操作との関係に操作者の年齢が及ぼす影響についても明らかにする必要があると考えられる．そこで 3 つめの具体的な研究目的として，配色による画面全体の印象と，直感的操作の速さ，正確性との関係に操作者の年齢が及ぼす影響を明らかにすることを設定する．

1.4 関連研究
コンピュータをはじめとする電子機器インタフェースの使いやすさの向上を目的とした研究が，これまでいくつもなされてきた．前田らは，ユーザの年齢やデバイス操作習熟度に応じてインタフェースに表示される文字サイズや文言を分析した [13]．この研究ではデジタルデバイドの解消を目的として，高齢者，若者，子ども，それぞれの電子デバイスへの習熟度の異なるユーザに対して，より操作しやすいであろうメディアとそれらのインタフェースデ
ザインを提案している．この研究では年齢の異なるユーザの操作を研究の対象としている．
本稿でも操作者の年齢が画面に用いる色彩と操作との関係に及ぼす影響を議論しており，その点において興味の対象が一致する．しかし，この研究では適切なメディアと文言の提示方法の解明を目的としているのに対して，本稿では，非言語に印象を伝達される画面の色彩印
象が操作に及ぼす影響を明らかにすることを目指している点が異なる．槙らはディスプレイ
上の文字色とその背景色との関係が，可読性と主観評価に与える影響を検証した [14]．その結果，文字とその背景に用いる色彩との明度差が大きくなるほど可読性が高く，ユーザに好ましい印象をもたせられることが可能であることを明らかにした．この研究では，ディスプ
レイ上の要素の色彩に着目して，その見え方とよる好ましさなどの印象との関係を明らかにしている．本稿もまた，画面上の色彩が操作者の主観評価に及ぼす影響を明らかにすることを試みる点において興味が一致する．しかし本稿では文字色ではなく，プッシュボタンや画面の装飾に用いる配色に着目しており，さらにそれらが操作に及ぼす影響を検証している．
人の心理や行為に色彩が及ぼす影響を検証するものとして，以下のような先行研究が知られている．冨田らは供食トレイに用いる色彩が，それらを利用する人々の食事中の発話頻度に与える影響について被験者実験によって検証している [15]．この研究は，色彩と行為との関係を対象にしている点において本稿と同じ立場をとる．また村田らは作業環境の色彩と作業による疲労感との関係性を調査するため，作業台の天板に用いられる色彩とそこで行われる作業による疲労感との関係を実験によって検証している [16]．この研究は環境に与えられ9

た色彩が行為に及ぼす影響をテーマにしている点において本稿と興味の対象が一致する．しかしながら，村田らは被験者の自覚している疲労感に着目しているのに対して，われわれは被験者が無自覚のうちに生じる操作の正確性や速さへの影響に着目している点が異なる．
このように，さまざまな視点からインタフェースのユーザビリティを向上させるための研究や色彩が人の心理や行為に及ぼす影響についての研究については多くの事例が報告されている．しかしながら，背景色まで含めた電子デバイスの操作画面の色彩について，操作への影響を定量的に検証したものはこれまで議論されてこなかった．

1.5 本稿の構成
本論文は第 1 章の序文を含め，全体で 6 つの章で構成されている．第 2 章以降の内容について以下に説明する．第 2 章では人の行為の分析モデル，人の視覚と色彩との関係，色彩が人の心身に及ぼす影響，人の身体能力の年齢による変化，タッチパネル操作の特徴を背景理論として述べる．人の行為モデルは，本稿で着目する直感的操作の説明に用いる．人の視覚と色彩との関係では，人が色彩を視認するための光と物体と視覚の関係と，色彩の表記方法（表色系など）について説明する．色彩が人の心身に及ぼす影響に関しては，視覚情報としての色彩が人の心理や生理に及ぼす影響について説明し，3 章以降の実験の考察に用いる．
身体能力の年齢による変化は，6 章で配色による画面全体の印象と直感的操作の速さ，正確性との関係に操作者の年齢が及ぼす影響を明らかにする際，対象とする操作者の年齢を決定するための背景理論とする．タッチパネル操作の特徴に関しては，4〜6 章でタッチパネル
画面に用いる色彩が操作へ及ぼす影響を明らかにする際に，研究のモチベーションとする．
第 3 章では，プッシュボタンの色と直感的操作の速さと正確性との関係を明らかにすることを試みる．さらにプッシュボタンに加え，その背景である操作パネルの色との組み合わせが，直感的操作の速さと正確性に及ぼす影響を明らかにすることを試みる．第 4 章では，配色による画面全体の印象，直感的操作の速さ・正確性，操作者の画面に対する主観評価間の関係について明らかにする．まず最初に，配色は画面のさまざまな位置に配置されることか
ら，画面上のどの位置に配色が配置されることによって，画面全体の印象が決定づけられているか明らかにする．そして配色による画面全体の印象が，直感的操作の速さと正確性に及ぼす影響について明らかにする．さらに，配色による画面全体の印象が，操作の速さと正確性，操作者の画面に対する主観評価に及ぼす影響について明らかにする．第 5 章では，画面に用いる配色の明度コントラストと操作の速さ，正確性と画面に対する主観評価との関係を明らかにする．本章では配色の印象を決定づけるパラメータの 1 つとして，明度コントラス
トに着目し，それと操作と画面の主観評価との関係を調査する．次に画面に用いる配色と操作との関係に，操作者の年齢が及ぼす影響について明らかにする．色彩の見え方は操作者の視力など身体能力に依存する．とくに視力は年齢による影響を受けやすいことから，配色に10

よる画面全体の印象と，直感的操作の速さと正確性との関係に操作者の年齢が及ぼす影響について明らかにする．第 6 章では 5 章までの検証結果の概要を述べ，研究全体の総括と今後の展望について述べる．

11

2 背景理論
2.1 緒言2 章では背景理論として，人の行為分析のモデル，色彩が視覚されるための物理的仕組み，
色彩が人の心理に及ぼす影響，タッチパネル操作の特徴，そしてデバイス操作に重要な身体能力の年齢による変化などについて述べる．

2.2 節では，行為について分析するためのモデルを導入する．一般に行為のモデルはヒュー
マンエラーの防止などの目的によって，行為のプロセスを分析するために用いられる．ここでは本稿で取り扱う操作を定義するためにラスムッセンの SRK モデルを用いる．

2.3 節では，人が色彩を視覚する物理的仕組みに関して，色彩が認識されるために必要な要素とそれらの関係性を述べる．またこの節では 3 章以降の実験に用いる色彩の選択の根拠
として減法混色と加法混色とについて述べる．次に本稿で色彩を表記に用いるマンセル表色
系について述べる．

2.4 節では，色彩と心理に関して，色彩から人が受ける印象の種類の分類と，色彩の客観的印象の位置関係を表したイメージスケールについて述べる．色彩から人が感じる印象についての知見は 3 章以降の検証の考察の背景理論とし，混合イメージスケール上の配色は実験
画面のデザインに用いる．

2.5 節ではタッチパネルデバイスの利点，またその特徴からインタフェースデザインにおいて考慮すべき点について述べる．これは 4〜6 章で述べる内容の研究背景とする．

2.6 節では，視力と光刺激に対する反応の素早さの，年齢による変化について述べる．これは 6 章において，画面の配色と操作との関係に操作者の年齢が及ぼす影響を明らかにする試みについて述べる際の背景理論とする．

2.2 行為の 3 階層モデル
ラスムッセンは人の行為をその意識レベルによって「知識ベース」「規則ベース」「技能ベース」の 3 階層に分類した [17]．これを表した図 2 のモデルを「行為の 3 階層モデル（SRK モデル）」という．図 2 に沿って，各行為ベースに当てはめる行為の知覚や思考の過程について述べる．行為者は何らかの事象を状況の変化として認識することをきっかけとして，行為に及ぶ場合が多いと考えられる．知識ベースの行為は次のように行われる，行為者はまず「状況の理解」に示されるように周囲を知覚・認識する．そして自己の経験や知識，
その場の状況から解決の糸口を得ることによって「経験的知識，外からの知識による判断」の段階を経る．次にどのような行為をすべきか，そしてそれによってどのような結果が得られるか，積極的に「予測モデル」をたてて行為に至る．行為者が行為に対して不慣れな場合，

12知識ベース
状況の理解

経験的知識、
外からの知識による判断

予測モデルをたてる

規則ベース

事象

状況の理解

技能ベース

図2

パターン処理による判断

行為

感覚的判断

ラスムッセンの SRK モデル

また行為が複雑である場合などの行為は知識ベースで行われることが多い．
自己の経験や知識に照らし合わせて，どのような手順を踏むべきか判断し行為に至るような場合を規則ベースの行為と呼ぶ．規則ベースで行為に及ぶ場合は，パターン化された方法に当てはめられた行為する場合が多いため，行為と結果との構造は意識されにくい．
技能ベースの行為では，状況の理解や行為選択のための思考プロセスは省かれ，「感覚的判断」によって行為に及ぶと考えられる．行為に対する習熟度が高い場合の行為は，実行プ
ロセスを意識しなくても感覚的に体が動くと考えられるため，技能ベースに行われると考えられる．行為は知識ベースに近いほど意識的に，技能ベースに近いほど自動的に実行される．SRK モデルは状況や人の熟練度の違いによって行為がどのように遂行されるのかを分析する場合に有効である．
図 3 に示すインターネット上で利用できる講演会申し込みフォームを例に，プッシュボタ
ンのデザインと各行為ベースとの関係について考察する．この申し込みフォームは必要事項を入力後，「申し込みますか？」という文言に対して「はい」か「いいえ」ボタンで回答する．「はい」を選択した場合には図 3（A）に示すように入力情報の確認画面が表示される．
一方で「いいえ」を選択した場合には図 3（B）に示すように入力情報が削除される．
図 4 に示すように，プッシュボタンのデザインと行為ベースとの関係を考察する．プッ
シュボタンが両方とも無彩色で文言が「はい」と「いいえ」の場合には，操作者は申し込みの可否を選択することは理解できるが，ボタンを選択した結果，どのようなフィードバックがあるのか予想できない．この場合の操作は申し込みの可否を「はい」もしくは「いいえ」に当てはめて規則的に回答されるため，規則ベースに当てはめられると考えられる．次にボタンの文言を図 4（A）に示すように，「はい」を「確認画面へ」とし，「いいえ」を「クリア」とすることによって，操作の結果が予測できるよう変更した場合，操作者は文言を解釈しながら操作することが考えられる．このように，操作者が積極的に予測モデルを構築しな

13

講演会「色彩が人の行為に及ぼす影響」
お申し込みの際は下記に内容にご記入ください.

氏名

坂本牧葉

住所

〒000-1234

FAX

000-

-

電話番号

080-

-

メールアドレス○○市-

sakamoto̲makiba@api.co.jp
申し込みますか？
送 い
信
は

リセット
いいえ

確認画面へ移動

入力情報が消える（A）（B）

講演会「色彩が人の行為に及ぼす影響」

講演会「色彩が人の行為に及ぼす影響」

下記の内容でよろしいですか？ ＜最終確認＞

お申し込みの際は下記に内容にご記入ください.

氏名

氏名：坂 本 牧 葉
住所：〒000-1234 ○○市
FAX：000--

電話番号：080-

-

-

住所

FAX

電話番号

メールアドレス：sakamoto̲makiba@api.co.jp

メールアドレス

申し込みますか？

送信

申し込みますか？
送 い
信
は

もどる

リセット
いいえ

図 3 インターネット上の講演会申し込みフォームの例

がら行う操作は知識ベースに当てはめられると考えられる．さらに図 4（B）に示すように．
文言の変更に加えてプッシュボタンの色を「確認画面へ」を明るい青色とし，「クリア」を
明るい赤色にしたとする．そうすることによって，まず操作者には 2 つのボタンの意味に違いがあることが瞬時に理解されると考えられる．そして操作者は青色から肯定的意味を，赤色から注意を促す意味を感じ取ることができる．その結果，ボタンの選択は無彩色を用いた
場合よりも直感的になると考えられる．
このように操作対象となるプッシュボタンやメニューに対して，操作の文脈や意味合いに合致した色彩を与えた場合，操作は感覚的になり，技能ベースへの移行を助けると考えられる．また一方で操作の意味合いとは関係なく配色された場合は，操作者は感覚的に操作せず，文言をよく読み，操作者自身の経験を踏まえて積極的に操作結果を予想して操作するた

14

知識ベース(A) 文言の改善

操作の結果を積極的に予測

確認画面へ

知識ベース
文字を読んで判断するため

規則ベース
パターンに
当てはめ、
規則的に判断

は い

いいえ

技能ベース
色彩の効果により瞬間的な判断が可能

技能ベース
感覚的判断

確認画面へ

(B) 文言と色彩の改善…明るい灰色図4

クリア…明るい青色

クリア…明るい赤色プッシュボタンのデザインと操作時の行為ベースとの関係の考察

め，知識ベースとなることが予想される．人は色彩から意味を読み取ったり，無意識に連想したり，感情が刺激されたりする [5]．したがって，このように操作対象の色彩が変更されることによって，それを操作する場合の行為ベースにも影響が及ぶと考えられる．

2.3 人の視覚と色彩
2.3.1 色彩の成り立ち
われわれが色彩を視認するためには照明光源（光）が必要である．その光によって対象物（物体）を照明し，その反射光が目に入り，その情報が目から脳（視覚領）に伝達される．そこではじめて物体の色を感覚として受けとめることができる．これらの関係を表したのが図5 である．
照明光

[光]

[感覚]

図5

[物体 ]

色彩が視認されるための光と物体と感覚との関係 [18]

15

II

光

感覚

色
I

III
物体

図6

色彩の概念を成立させる 3 つの要素 [18]また，色彩は媒介となる光と，それが投影される物体，身体の感覚の 3 つの要素が揃うことによって初めて認識することができる．色彩を認識するための光と物体と感覚との関係を
図 6 に示す．たとえば光と物体が存在（領域 I）しても感覚がなければ色を見ることはできない．また光と感覚が存在（領域 II）しても，光そのものには色がついていないので，色として見ることはできない．これは，白色光をプリズムによって分光し，七色のスペクトル光の混合色であることを発見した，アイザック・ニュートンの「The Rays are not colored」という言葉 [18] に表されている．感覚と物体のみが存在（領域 III）していても，光がなけ
れば色は見えない．人の目は光を取り込むことによって網膜上に像を結び，視覚神経を経て大脳に達し，そこではじめて色彩を知覚することができるという構造をしているためである．したがって光と物体と感覚とが相互に関係してはじめて，色彩の存在は成り立つものであるといえる．

2.3.2 視覚表現における色彩の役割
絵画などの視覚芸術や視覚デザイン分野において，色彩はそれらの主張を表現するために最も重要な要素のひとつである [2][19]．企業理念を表す色彩をコーポレートカラーとして用
いたり，製品イメージを表す色彩を広告に用いるなど，その効果を充分に活かすために多くの検討がなされている [19][20]．
ウェブなどのインタフェースデザインにおいては，ユーザに好ましい印象をもってもらわなければ，ユーザの積極的なアクセスは促されない．そこで操作時の見やすさや，目の疲労を考慮した上で，ユーザに好まれる配色を採用する必要がある．
色彩デザインの要素の 1 つとしてコントラストがある．コントラストは，視界に入る色彩
同士の色相，彩度，明度の値の差分によって生じる視覚的な対比である [20]．色彩の見え方
は隣接する色の影響を受け，単色で見た場合とは異なる印象に感じられたり，異なる色として認識されたりする [18]．ハレーション [20] は隣り合う色彩の対比によって起こる視覚効果の 1 つである．たとえば色相差が大きな鮮やかな赤色と緑色とが隣り合うと，2 色の境目が

16

動きを伴って見える場合がある．これは隣り合う色彩同士の強い色相コントラストや明度コ
ントラストによって生じ，不快に感じられる場合が多い．反対にコントラストの低い色を組み合わせた場合には，配色は全体に安定感が生まれるが，ぼんやりとした印象になる場合がある．平面をはじめ，さまざまな分野の色彩設計においても，色彩同士のコントラストを目的に応じて適度に調整することによって，美的なカラーデザインや文字の可読性，目の疲労感などに影響が及ぶ [2][19]．電子デバイスは印刷物などの媒体とはユーザとの関わりが異なり，見たり読んだりするだけではなく操作が伴う．そこで色彩と操作との因果関係を明らかにすることは，ユーザビリティを考慮した色彩設計の上で重要な課題であると考えられる．

2.3.3 混色
混色は染料，塗料を調色することによって作り出された色そのものと，色を混合して新しい色を作り出す手段や手法の 2 つの意味を表すが，本章では後者の意味で用いる．混色には色刺激の段階で複数の色刺激を合成し，1 つの色として感覚する物理的混色と複数の色刺激が目に入り，それを視覚系の処理によって 1 つの色として見る視覚的混合とがある [18]．
ディスプレイの色表現や，点描による絵画表現，またプリンターによる印刷物には視覚的混色が用いられている．ディスプレイ表示などの色表現には加法混色（RGB カラー）が，印刷物の色表現には減法混色（CMYK カラー）が一般的に用いられている．加法混色と減法混色の構成色と視覚的性質を以下に示す．
加法混色（RGB カラー）
加法混色は，照明光として新たな光が加わることよって明るさや色味が変化して感じられることである．赤（Red），緑（Green），青（Blue）を三原色とし，これらを混色することによってその色彩は白に近づく．これは，白色光が可視光線範囲内の広い範囲の波長（ 400〜

700nm）で構成されているが，それぞれ波長の異なる赤（600〜700nm），緑（500〜600nm），
青（400〜500nm）の色光が統合されることによって白色の波長に似た刺激が構成されることによって白色に見えるためである．図 7 左に加法混色の構造と原色を示す．加法混色では

R，G，B それぞれのパラメータの上限の値を 255 として色彩を表記する．たとえば最も彩度の高い赤色を表す場合は「R255

G0

B0」と示す．「R255

G125

B0」と示した場合はオレンジ色を表す．照明の他，CRT（ブラウン管）ディスプレイや液晶ディスプレイ
などの，発光体が色を表現する場合によく用いられる．
減法混色（CMYK カラー）
減法混色は，加法混色とは異なり物理的な色材による混色である．黄（Yellow），シアン（Cyan），マゼンタ（Magenta）が減法混色の三原色である．これらの原色同士を混ぜると，彩度，明度が下がる．三原色を等量で混ぜ合わせると加法混色とは反対に黒色に近づく．し

17

Red

Magenta

Magenta

Yellow

blacK

white
Blue

Red

Blue

Green

Cyan

Cyan

Yellow
Green

図 7 加法混色，減法混色の三原色

かし，三色の混色によって無彩色である黒色を表現することには限界があるため，三原色に黒（blacK）を補った CMYK カラーは今日の印刷媒体の表現の多くに用いられている．
図 7 右に減法混色の構造と原色を示す．減法混色では C，M，Y，K それぞれのパラメータの上限を 100% として色彩を表記する．たとえば最も彩度の高い黄色を表す場合は「C0%

M0%

Y100%

K0%」と表し，「C50%

M0%

Y100%

K0%」は鮮やかな緑色を表す．
加法混色と減法混色は混色における最も基本的な方法である．そこで色彩が行為へ及ぼす影響を明らかにする方策を検討するために，まずはこれらの原色と操作との関係を探ることが有効であると考えられる．

2.3.4 表色系
表色系は色彩を心理的あるいは心理物理的特性によって定量的に表示するための体系を示す [18]．表色系には大きく，顕色系，減色系，色名系の 3 つがある．3 つの表色系の特徴は以下の通りである．
顕色系 色紙その他の表面色よって標準色票を作成し，系統的（規則的）に配列して，その知覚色を定量的に表示する体系
減色系 光を色光とし，その色刺激の混色の割合に基づいて色を表示する体系
色名系 「赤色」「黄色」また「珊瑚色」「若草色」など，色彩に呼び名を付与することによって区別する
マンセル表色系はそのなかでも顕色系に分類される代表的なカラーオーダーシステムである．米国の美術の教師，画家でもあるマンセル（Munsell.A.H.）によって 1905 年に創案さ

18

明度
10Y
5BG
8/

色材の色再現領域
6/

4/

等彩度の
円筒面

等色相面
5R

2/

色相
10PB

/2

/6

/10

彩度

図8

マンセル表色系の三属性 [18]れた．現在一般的にマンセル表色系と呼ばれて使用されているものは，米国光学会によって修正が加えられた修正マンセル表色系という．これは日本工業規格（JIS Z 8721）として規格化されている．
マンセル表色系では色相，明度，彩度のパラメータで色彩が表される．マンセル色相（Hue）は赤や青などの色合いを示す．マンセル明度（Value）は色が明るいか暗いかを示す．
マンセル彩度（Chroma）は色の鮮やかさを示す．色相，明度，彩度を色の心理的三属性という．図 8 にマンセル表色系の構造を示す．
マンセル色相マンセル色相（Munsell Hue：H）はそれぞれ 5 つの基本色相とその中間色相の計 10 色相をベースに 0〜10 の数字と色相記号で表現する．マンセル色相は図 9 に示すように環状に表されるため，マンセル色相環と呼ばれる．マンセル色相環と色相分割を図 9 に示す．色
相は R（赤），Y（黄），G（緑），B（青），P（紫）の 5 つ基本色相と，RY（橙），GY（黄緑），BG（青緑），PB（青紫），RP（赤紫）の 5 つの中間色相で構成される．各 10 色相の中心色相は，たとえば赤（R）の場合，その範囲内で最も純粋な赤色の色相の位置に「5R」というように 5 の数字をつけて表す．同様に純粋な青の場合は「5B」と表され，橙の場合は「5YR」表記する．色相は中心色相を基準として 1〜10 までの数字をつけて表す．たとえば
図 9 に示すように最も純粋な赤い色相である，5R から黄の色相に寄るほど 6R，7R と表記
し，10R までが R の色相に属する．10R よりも黄の色相に寄ると，橙の色相となり 1YR と

19

5R
3
5RP 10RP 1 2

4 6 78 9

10R
5YR
1YR

R
RP

YR

10YR

赤

5Y

5P
P

紫

黄

PB

Y

GY
青

5PB

緑

B

5GY
G

BG
5B

5G
5BG

図9

マンセル表色系の色相環と色相分割 [18]表記する．反対に紫の色相に寄るほど 4R，3R と表記し，1R よりも紫の色相に寄ると赤紫の色相となり，10RP と表記する．マンセル色相環は，したがって 100 色相で表される．ただし，実際に作成されている標準色票集の色相分割は，2.5R，5R，7.5R，10R というように色相が 2.5 間隔のものが一般的である．以下にマンセル表色系のパラメータである色相，
明度，彩度の表記方法について述べる．
マンセル明度マンセル明度（Munsell Value：V）は色彩の中の，白色と黒色の割合のことを表す．明度は 0〜10 までの 11 段階で表現し，数値が高いほど白色の割合が高い．理想的な白（反射率100% の表面色）を 10 とし，理想的な黒（反射率 0% の表面色）を 0 として，その間を明るさの間隔が知覚的に等歩度になるように 10 段階に分割し，明度とする．実際には 1.0〜9.5程度の値で表すのが一般的である．
マンセル彩度
マンセル彩度（Munsell Choroma：C）は色彩の鮮やかさを表す．図 10 に色相 5R の等色相面の例で，縦方向の色票の配列はマンセル明度（V）の尺度を，横軸はマンセル彩度（C）の尺度を示す．図 10（1）に示す縦配列は，無彩色の明度スケールで彩度 C=0 である．マ20

（1）無彩色
9 白
マ 8
ン
セ 7
ル
6
バ
リ 5
ュ
ー
4
V
3
2 黒
0

1

2

3

4

6

8

10 12 14マンセル クロマ C

図 10

マンセル表色系の等色相面（5R）[18]

ンセル彩度（C）の尺度は図 10 に示すように色相によって最高値が異なる．明度一定のマ
ンセル彩度（C）の系列は無彩色（C=0）から一定の彩度の間隔で順次に色味のみが増加し，原理的にその際限はない．しかし，実際に実現できる色材にはその限界がある．したがって最高彩度の数値をもつ，純色と呼ばれる色は色彩，明度，彩度がさまざまに異なる．たとえば，黄色（Y）は比較的明度の高いところに最も高い彩度の色彩（Y8/12）がみられるが，紫色（P）では明度の低いところに最高彩度の色彩（P4/12）がある．
このようにマンセル表色系の色立体は色相や明度によって彩度段階の数が異なるので，その形は図 11 に示すように複雑な形状をしている．これはマンセル表色系の特徴の 1 つで，もし現存の最高彩度の色彩よりも高彩度の色材が出現した場合でも，その色票を高彩度側に追加するだけで，表色系全体の調整が必要ないという利点がある．
マンセル表色系における色彩は，色相 H，明度 V，彩度 C を HV/C で表示する．たとえば日本人女性の肌色は H=1YR，V=6，C=4 といわれるがこれは「1YR6/4」と表記される．無彩色の表示には Neutral の頭文字 N を用い，明るさ V=5 のグレーの場合は「N5」と表記される．マンセル表色系で表された色彩は，光の色を表すことに用いられる XYZ 表色系への変換が可能である．

2.4 色彩と心理
人が色彩を見ることによって感じるイメージや連想は，グラフィックデザインをはじめとする視覚的情報伝達において積極的に利用されている．たとえばトイレのサインには女性用に赤やピンク色を用い，男性用に黒や青色を用いる場合が多い．これには誘目性が高く区別

21

W
N9/

Y.8/12

YR6/1

2

P4/12

R4/14
RP4/12N1/B

図 11 マンセル色立体 [18]しやすい 2 色が選択されているが，女性用サインには女性らしい華やかさを表す赤やピンク色を用い，男性用サインにはそれとは対照的に硬さや強さが感じられる黒や青を用いることによって，サインの形状だけではなく色彩によって男女のイメージを連想させる目的がある．
人は色彩によって物事の状態を理解したり，色彩から意味や概念を感じたりしている．たとえばわれわれは外国に行ったとしても，信号の赤や青の色を見ることによって青系の色は安全であり進むことが可能であること，赤系の色は危険であり注意を要することなどを理解し，それらの意味を判断できると考えられる．これはトイレサインの例と同様に，色彩によって非言語にその印象を伝達することができるためである．加えて色彩は物の形状よりも瞬間的に認識が可能であり，個人差はあれど対象の特徴として印象深く記憶される [5]．このことは，その色彩がもつ意味を瞬時に理解して，行為を正しく解釈し選択していることを意味する．このような色彩がもつ性質は，ウェブなどのインタフェースデザインにも応用が期待できる．

2.4.1 色彩による心理的影響
同じ重さの荷物であっても，明るい色彩のものは軽く感じられ，反対に暗い色彩のものは
重く感じられる場合がある [18]．明るい青色からは清涼感が感じられるし，オレンジや赤色からは暖かい感じを受ける．また，色彩によって対象が好ましいと感じられる場合もあれ
ば，嫌悪感を覚えることもある．このような，色彩を見ることによって感じられる感覚は色彩感情と呼ばれる [18]．色彩感情は知覚感情と情緒感情に大きく分類される．
知覚感情は人の視覚系の本来もっている特性に基づくもので，すべての人がもつ感情効果といわれる．人が生得的に有している感覚であると考えられることから，知覚感情は固有感情ともよばれる．色の寒暖感，進出・後退感，膨張・収縮感，軽重感・硬軟感がこれに当た22明るい・派手・温かい活
動性

嫌い・醜い・不快柔らかい・軽い・弱い

性
潜在

評価

性

硬い・重い・強い
好き・美しい・快

暗い・地味・冷たい

図 12

色彩感情の 3 軸

る．一方で情緒感情は個々の人が独自にもつもので，単色・配色感情，色の嗜好，色からの連想や象徴などがある．これらは個人差の大きい感情効果だといわれており，表現感情ともよばれる．
知覚感情と情緒感情のうち，多くの人に共通した傾向がみられる知覚感情は，図 12 に示
す評価性，活動性，潜在性の 3 つの軸によって構成される空間上で表現できることが大山，
オスグットらの研究によって分かっている [18]．評価性の軸は好き・嫌い，美しい・醜いな
どの主観的な感情を表す．人にとって一般的な環境色である青や緑や，明るく鮮やかな色彩において高い値を示しやすいといわれている．活動性の軸は動的・静的，派手・地味，冷た
い・温かいなどの色彩から受ける印象を表す．これは明度，彩度ともに高いほど高い値をとりやすい．潜在性の軸は強い・弱い，重い・軽い，硬い・軟らかいなど，色彩の内部に蓄えられた緊張の度合いを表す．潜在性は明度が低い場合に高い．また明度が高い色彩の場合に，彩度が高くなると潜在性の値が増す．

2.4.2 混合イメージスケール
混合イメージスケール [21][22] は以下で述べる 3 つのイメージスケールを同一平面上に表したものである．1 つめは，単色の印象を COOL–WARM，SOFT–HARD の 2 軸上に表した「単色イメージスケール [21][22]」である．2 つめは 2〜5 色の配色とそれらの印象との関係を同軸上に表した「配色イメージスケール [21][22]」である．3 つめは「さっぱり

23

3

2

SOFT

1

0

ロマンチック
可憐な

3

甘美な

プリティ

あどけない
かわいい

子供らしい
キュートな

2

1

WARM 0

気軽な
ほがらかな
のびのびした
うれしい
気楽な
親しみやすい楽しい
開放的な
愉快な
ユーモラスな
陽気な
快活な
はつらつとした
元気なカジュアルな

1

のどかな
自然な

派手な あざやかな

にぎやかな
はなやかな

アクティブな
行動的な

大胆な
刺激的な

ゴージャス

豊かな 装飾的な
豊潤な
情熱的な
豪華な 円熟した激しい
2
ぜいたくな 充実した
こってりした強烈なダイナミックな
力強い
力動的な
エネルギッシュなワイルド
3

ダイナミック3

ドレッシーな
女性的な
エレガントな
温雅な
麗しい

あでやかな
艶っぽい
華麗な
セクシーな
魅惑的な

タフな 男っぽい
たくましい
ワイルドな
2

なつかしい
古風な

奥ゆかしい
気品のある
風流な
枯れた
ひなびた

クラシック

さっぱりした
すがすがしい
清潔な
清らかな
クリアな

平和な
みずみずしい快適な

さわやかな

クール・カジュアル

シック

しゃれた
都会的な

真面目な

本格的な
風格のある
格調のある

0

HARD

がっしりした0 COOL

スピーディな

モダンな

進歩的な
革新的な
機敏な
理知的な
シャープな

冷静な

ダンディ

堅実な

1

スポーティな

紳士的な
男性的な
ダンディな
りりしい

重厚な

青春の
若々しい
スカッとした

シックな
スマートな

文化的な
知的な

2

軽快な

微妙な
慎ましい

閑静な

3

すっきりした健康な
新鮮な
生き生きした
安全な

地味な

渋い

クラシック&
ダンディ

1

クリア

静かな
さりげない
洗練された
質素な

優雅な

丹念な
味わい深い
アンティークな
伝統的な
クラシックな

丈夫な
どっしりした3

淡白な
簡素な
飾り気の無い

エレガント

素朴な
田園的な

2

淡い
ういういしいロマンチックな
純真な
清楚な
メルヘンの

柔和な
おとなしい
肌ざわりの良いなごやかな
ナチュラル
なじみやすい
マイルドな
やすらかな
やさしい
家庭的な
のんびりした
きめ細かい
繊細な
素直な
しなやかな
居心地のよい叙情的な フェミニンな
くつろいだ
しとやかな
おおらかな
情緒的な
上品な
優美な
温和な
ひかえめな

活気のある カジュアル

活動的な
躍動的な

1

精密な

モダン

緻密な 合理的なきりりとした高雅な 高尚な
気高い
神聖な
フォーマルな

1

2

人工的なメカニックな3

荘厳な 厳粛な

フォーマル

1

2

3

… 単色
… 2〜5色の組み合わせによる配色

図 13

混合イメージスケール [21][22]

した」「行動的な」などの印象語と印象との関係を同軸上に表した「言語イメージスケール[21][22]」である．これらを同軸上に表すことによって，単色，配色，イメージ語の印象の位置関係が示されている．
混合イメージスケールは，配色や印象語に対する印象評価などの調査を経て，日本カラー
デザイン研究所によって制作された．このイメージスケールは色彩から感じられる寒暖感を示す COOL–WARM 軸および，硬軟感を示す SOFT–HARD 軸上に単色と 2 色，3 色，5色の組み合わせからなる配色が配置されている．これらの配色はさらにカジュアル，フォー
マルといった 16 種類のエリアに分類されている．また，配色に対応した 180 の印象語も色彩とともに配置されている．図 13 に混合イメージスケール上に配置された印象語と，16 の24

カテゴリーを示す．またイメージスケール上の COOL–WARM 軸は，色彩感情の 3 軸のうち「動的静的」や「寒暖」を表す活動性と，SOFT–HARD 軸は「強弱」や「硬軟」を表す
潜在性と対応する．このイメージスケールは，平面やファッション，インテリアなどの分野
でコンセプトに応じたカラーコーディネートをしたり，与えられた配色がどのようなイメー
ジに当てはまるかを分析する場合などに用いられる．
前節で述べたように，色彩を視認することによってわれわれの心の内に生じる色彩感情は「活動性」「潜在性」「評価性」の 3 軸で表される．冷たさ–温かさなどを表す「活動性」，軽さ–重さなどを表す「潜在性」は，混合イメージスケール [21][22] に表されているように，客観的尺度で示すことが可能であることがわかっている．一方で評価性は，活動性や潜在性とは異なり年齢や性別，文化や生活環境に影響を受けるため個人差が大きく客観的尺度で示すことが困難である [18]．

2.5 タッチパネル操作の特徴
物品の購入や現金の引き出しなどタッチパネル端末を通して，重要なサービスが多く提供されている．近年では紙媒体に代わって用いられるようになった Kindle などの電子書籍端
末や，iPad をはじめとするのタブレット式コンピュータなど，さまざまな目的でタッチパ
ネル端末を使用する機会が増えた．タッチパネル端末は，インタフェースデザインの自由度が高く，壊れにくくメンテナンスが容易である [23]．そのため，その利便性によって今後もさまざまな分野への展開が期待されている．しかし，いくらタッチパネル端末が有用なものであっても，それらのインタフェーデザインが優れていなければ，操作者は正確かつスムー
ズに操作することはできない．物質的なボタンがなく，視覚的なフィードバックが多くを占めるタッチパネル画面は，その操作方法が視覚デザインによって理解できるよう設計されていなければ，初めて使用するユーザはスムーズに操作することが難しい．加えてタッチ操作
は，操作中は常に画面を注視する必要があることから，目の疲労なども考慮し，使いごこちの良い色彩デザインが求められる．

2.6 デバイス操作に関連する身体能力の年齢による変化
年齢を重ねることによって，人の心身にはさまざまな変化が生じる．視力や光刺激に対する反応の速さはインタフェースを視認し正確に操作するためには重要であるが，これらは年齢によって変化することが報告されている．視力と年齢との関係を図 14 左のグラフに示す．
人の視力は（A）に示す 20 歳頃を頂点として（B）に示す 40 歳代まで急激に低下し，その後はゆるやかに下降線を描く [24]．女性の視力の方がやや早くピークを迎えるが，男女ともに年齢による変化の傾向はほとんど変わらない．次に光刺激への反応の速さと年齢との関係を図 14 右のグラフに示す．光反応に対する反応の速さは（A）に示す 20 歳前後を頂点とし25

（B）に示す 30 歳代後半から 40 歳にかけて減速し始める．そして 50 歳代以降，さらに急激に遅くなっていく [25]．光反応に対する反応の速さは，年齢に関わらず男性の方が女性よりも素早いが，ピークを迎える年齢と減速を始める年齢には概ね変わりはない．
(A)

(B)

0.8

(A)

(B)

1.4
1.2
1.0
視 0.8
力
0.6

0.7

光
刺
激
へ
の
反
応
の
速
さ

0.6
0.5
0.4
0.3

【sec.】

0.2
0.1

0.4
0.2

0

10 20 30 40 50 60 70
年齢

図 14

男性
女性

10 20 30 40 50 60 70
年齢

年齢と視力との関係 [24] および年齢と光刺激への反応の速さとの関係 [25]

視力が衰えれば文字が読みにくくなったり，目的とする操作を実行させるためのプッシュボタンなどの選択に時間がかかることが予想される．また光刺激へする反応までの時間が長くなれば，画面に表示される情報に対する操作も迅速に行うことが難しい．とくにタッチパ
ネル画面での操作は，前節で述べたように視覚情報以外のフィードバックが少ないため，画面の視認が困難があったり，表示される情報への反応が遅かったりすると，素早く正確な操作はできない．このように加齢に伴う身体能力の変化によって，操作しやすいインタフェー
スデザインの性質も異なると考えられる．また色彩が視認されることによって人の心身は影響を受けることから，文字やボタンの色だけではなく，装飾を目的とした色彩も年齢の異なるユーザには影響の大きさも異なることが予想される．したがって，年齢の異なるユーザにはインタフェースデザインの面でも異なる支援が必要であることが考えられる．

2.7 結論
2 章では以降の章で必要となる基礎理論について述べた．2.2 節では，行為を 3 階層に分類して分析する「行為の 3 階層（SRK モデル）」について述べた．行為はそれが行われる際の意識によって，知識ベース，規則ベース，技能ベースの 3 階層に分けて考えることができる．知識ベースでは行為の構造全体が意識されるが，規則ベースにおいては行為の手続き以外はあまり意識されない．技能ベースにおいては行為の構造も手順も意識されず自動的に実26

行される．これらの行為ベースは状況や行為に対する習熟度などによって変化する．本稿ではとくに SRK モデルの技能ベースに示される直感的操作に着目する．
次に 2.3 節では人の視覚と色彩との関係について確認した後，加法混色，減法混色の構造と，色彩の表記法であるマンセル表色系について述べた．色彩は光と感覚と物体が存在する
ことによって初めて認識することが可能である．加法混色はディスプレイや照明など，光によって色彩を表現する場合に用いられ，赤，緑，青を三原色とする．減法混色は絵画や印刷
物など物理的混色によって色彩を表現する場合に用いられシアン，マゼンタ，黄を三原色とする．加法混色，減法混色の構造は色彩に関する基礎知識として述べるとともに， 3 章でプッシュボタンの色と操作との関係を明らかにするために行う検証に用いる色彩選択の背景理論とする．マンセル表色系では，色相，明度，彩度のパラメータの組み合わせによって色彩を表記する．マンセル表色系は最も基本的で汎用性が高い表色系であることから，本稿で色彩を表記する際に用いる．

2.4 節では人が色彩から受ける感覚である色彩感情が，評価性，活動性，潜在性の 3 軸上で表されることを述べた．評価性は好ましさや美しさ，活動性は温かさや派手さ，潜在性は重さや堅さの印象を表す．そしてそれらのうち活動性と潜在性の 2 軸上に，配色と印象語を配置した「混合イメージスケール」について述べた．色彩感情の構造は 4 章，5 章において，画面に用いる配色の印象と，操作性との関係を分析するために用いる．混合イメージスケー
ルは，画面に用いる配色と操作の速さ，正確性と，操作者の画面に対する主観評価との関係を明らかにするために，4 章，5 章で行う実験で実験画面のデザインに用いる．

2.5 節ではタッチパネル画面の特徴として，デザインの自由度が高い反面，視覚以外のフィードバックに乏しく，初心者には使いづらく感じられる側面があることを述べた．タッ
チパネル画面には物質的な操作対象がないため，わかりやすく見やすい視覚デザインが重要となる．これらは 4〜6 章で述べる，配色による画面全体の印象が，タッチパネル画面の操作やそれらに対するの主観評価に及ぼす影響について明らかにするために行う実験の背景理論とする．

2.6 節では年齢によって変化する，人の視力と，光刺激への反応の速さについて述べた．
これらの身体能力は一般的に 20 歳前後を頂点として急激に衰えがみられる．これらは 6 章
で述べる，タッチパネル画面の配色と操作との関係に年齢が及ぼす関係を検証する際，被験者の年齢層を決定する根拠とする．

27

3 プッシュボタンの色と直感的操作との関係
3.1 緒言3 章ではデバイス操作の際にマウスでクリックしたり，指でタッチして操作するプッシュ
ボタンの色が操作に及ぼす影響を明らかにすることを試みる．操作の際，意識的にまた高頻度で注目されるのはプッシュボタンなどの操作対象であると考えられる．したがってこれらの色から操作者が受ける影響は大きいと考えられる．そこでまず，プッシュボタンの色が操作の速さや正確性に及ぼす影響を明らかにすることを試みる．
本稿で着目する操作を 2.2 節で述べた SRK モデルに基づいて述べる．一口に電子デバイスの操作といっても，課題内容や操作に対する熟練度，状況などにおいて意識的に操作される場合もあれば，直感的に遂行される場合もある．すなわち，同じ課題でも知識ベースで操作される場合もあれば，規則ベースや技能ベースで操作される場合も考えられる．たとえば
電子端末を通して何らかの手続きを行う場合，画面上の文章を読解する行為は知識ベースであると考えられる．また以前使用したことのあるデバイスと類似したインタフェースデザイ
ンの場合は，その手続きは規則ベースでの判断になりやすいと考えられる．しかし知識ベー
スや規則ベースに当てはめられるような操作手続きであっても，それらは文字入力やプッ
シュボタンの選択などといった，技能ベースの直感的操作の組み合わせによって構成されていると考えられる．したがって技能ベースの直感的操作を素早く正確に行うことができることによって，手続き全体がスムーズに遂行されると考えられる．そこで本稿では技能ベースに該当する直感的操作とインタフェースデザインとの関係に着目する．以上のことから， 3
章ではプッシュボタンの色が技能ベースの直感的操作の素早さと正確性に及ぼす影響を明らかにする．さらにプッシュボタンとその背景の色とが直感的操作に及ぼす影響についても明らかにする．

3.2 プッシュボタンの色と直感的操作の速さと正確性との関係
3.2.1 実験目的
3.2 節ではプッシュボタンの色と直感的操作との関係との関係を明らかにすることを試みる．そこで技能ベースの直感的操作において，プッシュボタンの色彩を変化させることによって操作の速さや正確性が影響を受けるか調査するための実験を実施する．実験ではプッ
シュボタンに異なる色彩を用いた複数の操作画面で，被験者に簡単なクイズ課題に回答してもらい，その操作時間，正答数などを調査する．

28

3.2.2 操作との因果関係を明らかにする色彩
直感的操作との関係を調査するために実験画面に用いる色について述べる．2.3.3 項で述
べたように加法混色の三原色は赤（R），緑（G），青（B）である．一方でわれわれが日常生活の中で注目することが多いのは減色混合された色であり，その原色はシアン（ C）=明るい青，マゼンタ（M）＝ピンクがかった赤，イエロー（Y）=黄の 3 色である．これらの原色の中でも赤，青，黄の 3 色は他の色との混色では作り出すことができない色であり最も基本的な色彩であるといえる．2.3.4 項で述べたマンセル色相環の中でも，この 3 色は基本色相に含まれることから適正な選択だと判断した．したがって 2 章ではまず赤，青，黄の色彩に無彩色（グレー）に加えた 4 色をプッシュボタンに用いた画面における，直感的操作にかかる時間や正答数を調査する．

3.2.3 実験方法
画面上のプッシュボタンに付加される色彩が直感的操作に及ぼす影響を明らかにするために実験を実施した．実験には簡単な英単語の三択問題を出題するコンピュータ・プログラムを用いた．出題した問題一覧を付録 A，表 7 に示す．問題はこれら 98 問の中からランダムに出題される．このプログラムでは各問題ごとに正しい答え，誤った答え，「わからない」の 3 つのボタンが表示される．1 問の制限時間は 2.0 [sec.] であり，制限時間内にボタンがクリックされなかった場合は自動的に次の問題が表示される．このように瞬間的な判断が求められる状況を設定し，技能ベースの行為に色彩がどのような影響を及ぼすかを検証した．
各条件について 20 問ずつ出題した．
実験パネルのデザインと，プッシュボタンに用いた色彩とを図 15 に示す．プッシュボタ
ンの無彩色，赤，青，黄のボタンはウェブセーフカラーの中から選択した．選択した色彩のカラーコードとマンセル値を以下に示す．

• 無彩色：#999999（6N）• 赤色：#FF3333（6.6R 5.5/17.4）• 青色：#3366FF（6.6PB 4.7/21.4）• 黄色：#FFFF33（0.8GY 9.6/13.6）
ボタンの色彩がランダムに変化する条件 4 では，各ボタンの色は重複しないこととした．ボタンの背景色であるパネルはすべての条件で白色（#FFFFFF, N9.5）に統一した．被験者
は健康な大学生の男女 35 名であり，操作に慣れるための練習を行ったあと，条件 1 から条件 4 の順番で実施した．

29

問１.rabbit

パネル部分：全条件で白色（#FFFFF）
３つの選択肢：条件１〜4 のように変化

ウサギ
わからない

条件1
条件2

リス

条件3

条件4

選択肢ボタン「わからない」ボタン

無彩色（#999999）

無彩色（#999999）

赤（#FF3333）

黄（#FFFF33）

青（#3366FF）

黄（#FFFF33）

赤青黄からランダム

赤青黄からランダム
各ボタンの色は重複しない

図 15

プッシュボタンの色が操作に及ぼす影響の検証に用いた色彩

1.4
1.3
1.2

条件1

1.1
1.0
0.9
0.8

条件2

0.6
0.5
0.4

条件3

0.3
0.2

正答率

操作時間

クリックして未回答で不正解の回数 不正解の回数

条件4

操作時間

条件 1- 条件 2

0.74

0.14

0.24

0.68

条件 1- 条件 3

0.04

0.00

0.42

0.08

条件 1- 条件 4

0.21

0.15

0.72

0.61

条件 2- 条件 3

0.02

0.12

0.06

0.11

条件 2- 条件 4

0.21

0.93

0.15

0.92

条件 3- 条件 4

0.23

0.18

0.70

0.12

：強い有意 … p ＜ .01

図 16

クリックして未回答で不正解
不正解

正答率

0.7

：有意 … .01 ＜ p ＜ .05：有意傾向 … .05 ＜ p ＜ .10

プッシュボタンの色が操作に及ぼす影響

3.2.4 実験結果の分析と考察
図 16 に実験結果のグラフと t 検定（両側検定）の結果を示す．グラフの縦軸は条件 1 の結果を 1 としたときの比を，横軸は計測データと実験条件とを表す．正答率は条件 1 と条件 3（p ≤ .05），条件 2 と条件 3（p ≤ .05）との間でそれぞれ有意な差が認められた．したがって選択肢に青色を使った場合には，無彩色や赤を使った場合と比較して正答率が高くなるといえる．また操作時間では，条件 1 と条件 3（p ≤ .01）の間に有意な差が認められた．
したがって選択肢に青を使った場合に，無彩色を使った場合と比較して素早く回答する傾向があるといえる．クリックした結果，不正解であった回数は条件 2 と条件 3 の間に有意傾向の差が認められた（p ≤ .10）．「クリックして不正解」には「わからない」のボタンをクリッ

30

クした回数も含まれている．この結果から，条件 2 の選択肢に赤色を用いた画面では，条件

3 の選択肢に青色を用いた画面よりも，誤った回答もしくは「わからない」のボタンが多く選択されたことがわかる．次に時間内に答えられずに不正解になった回数に着目すると，条件 1 と条件 3 の間に有意な差があった（p ≤ .10）．条件 1 では選択も「わからない」もグレーであるため，3 つのボタンの中から正解を探さなければならない．一方で，条件 3 では
黄色の「わからない」以外の選択肢が素早く発見できたため，正解を判断するまでの時間が短くなったと考えられる．以上の結果から，条件 3 の選択肢に青を用いた場合に，他の色を用いた条件よりも，素早くかつ正確に正解のボタンをクリックできているといえる．

3.3 プッシュボタンと背景のパネルの色と操作の速さと正確性との関係
3.3.1 実験目的
3.2 節ではプッシュボタンに用いる色によって，操作の速さ，正確性，クリックして不正解だった回数，未回答による不正解数に有意な，もしくは有意な傾向のある差が生じることが明らかとなった．この結果が得られた 3.2 節の実験画面の背景のパネルの色は，すべての条件で白色であった．2.3.2 項で述べたように，隣接する色との組み合わせによって色はその見え方に影響を受ける．したがってプッシュボタンの色と操作との関係を議論する上で，その背景色との関係を無視することはできない．そこで本節ではプッシュボタンの色と，その背景であるパネルの色と直感的操作の速さと正確性との関係を明らかにすること試みる．
実験ではプッシュボタンと背景の色の組み合わせの異なる複数の実験画面における，簡単な英単語のクイズの回答にかかる操作時間，正答数などを調査する．

3.3.2 実験方法
プッシュボタンと背景のパネルの色彩が操作に及ぼす影響を明らかにするために，図 17に示す 5 つの条件で実験を実施した．実験課題は前節の実験と同様の英単語の三択問題である．被験者は健康な大学生男女 16 名であり，プログラムに慣れるための練習を行ったあと，
条件 1 から条件 5 の順番で実施した．条件 2 から条件 4 の背景色は，いずれかのボタンの補色になるよう選択した．ボタンに用いる赤，青，黄の色は前節の実験と同じとし，背景の無彩色，暗い赤色，暗い青色にはウェブセーフカラーから以下の通り選択した．選択した色のカラーコードとそのマンセル値を以下に示す．

• 無彩色：#AAAAAA（N7）• 暗い赤色：#336699（2.8PB 4/8）

• 暗い青色：#993333（5.3R 3.5/9.7）

31

問１.rabbit

パネル部分：条件１〜5 のように変化

ウサギ

３つの選択肢：条件１〜5 のように変化
選択肢ボタン

わからない
リス「わからない」ボタン

パネル

条件1

無彩色（#999999） 無彩色（#999999） 無彩色（#AAAAAA）

条件2

赤（#FF3333）

黄（#FFFF33）

赤（#336699）

条件3

赤（#FF3333）

黄（#FFFF33）

青（#993333）

条件4

青（#3366FF）

黄（#FFFF33）

青（#993333）

条件5

青（#3366FF）

黄（#FFFF33）

赤（#336699）

図 17 プッシュボタンと背景のパネルの色が操作に及ぼす影響の検証に用いた色彩

3.3.3 実験結果の分析と考察
図 18 にプッシュボタンと背景のパネルの色とが操作に及ぼす影響を検証するために行った，実験の結果のグラフと t 検定（両側検定）の結果を示す．正答率はすべての実験結果で有彩色が無彩色に比べて高い値となった．なかでも，正答率において条件 1 の結果と条件 5の結果との間に有意な傾向の差がみられた（p ≤ .10）．回答に要した時間は背景色に関わらず，選択肢に青色を用いた条件 4，条件 5 で，条件 2，条件 3 と比較して有意に短かった．

クリックして不正解だった回数は，条件 1 と条件 2 との間の差が有意であった（p ≤ .05）．
プッシュボタンに用いる色彩に加え，背景色を設定した実験では，正答率において無彩色の条件と，プッシュボタンが青でかつ背景が暗い赤色の条件において有意な差が確認された．したがって，選択肢が青色でかつパネルが補色だった場合に積極的に選択され，かつ正答率も高くなると考えられる．背景色に関わらず選択肢の色に青色を用いた場合は，そうではない場合と比較して操作時間は短くなることがわかった．これは前節のプッシュボタンの色と操作との関係を明らかにするために行った実験の結果と一致する．

3.4 結論3 章では操作画面のプッシュボタンに用いる色彩が，直感的操作に及ぼす影響を明らかにするために 2 つの実験を実施した．1 つめの実験では，プッシュボタンに無彩色，赤色，青色，黄色がランダムに変化する場合の 4 つの条件で，被験者にコンピュータ上で簡単な英単語クイズに回答する課題を実施してもらった．その結果，プッシュボタンに青色を用いた場
合に，操作は無彩色や赤色を用いた場合よりも素早く正確になった．また，同じ課題にも関わらずプッシュボタンに青色を用いた場合は，無彩色の場合と比較して「時間内に回答できず不正解」の数が有意に低かった．

2 つめの実験では，プッシュボタンとその背景の色とが操作に及ぼす影響を明らかにするために，1 つめの実験パネルに背景色を設定した被験者実験を実施した．ボタンと背景が無

32

1.2

条件1

1.0
0.9
0.8

条件2

0.7
0.6

条件3

0.5
0.4
0.3

条件4
0.2

正答率

操作時間

クリックして未回答で不正解の回数 不正解の回数

図 18

条件5

クリックして未回答で不正解
不正解

正答率

操作時間

条件 1- 条件 2

0.30

0.43

0.04

1.00

条件 1- 条件 3

0.47

0.70

0.23

0.84

条件 1- 条件 4

0.14

0.03

0.23

0.11

条件 1- 条件 5

0.07

0.07

0.16

0.07

条件 2- 条件 3

0.72

0.72

0.28

0.85

条件 2- 条件 4

0.60

0.02

0.42

0.14

条件 2- 条件 5

0.45

0.03

0.45

0.10

条件 3- 条件 4

0.38

0.03

0.90

0.21

条件 3- 条件 5

0.23

0.07

0.78

0.16

条件 4- 条件 5

0.94

0.84

0.90

1.00

1.1

：強い有意 … p ＜ .01：有意 … .01 ＜ p ＜ .05：有意傾向 … .05 ＜ p ＜ .10

プッシュボタンとパネルの背景色が操作に及ぼす影響

彩色の場合，ボタンが赤色で背景が暗い青色の場合，ボタンが赤色で背景が暗い赤色の場
合，ボタンが青色で背景が暗い赤色の場合，ボタンが青色で背景が暗い青色の場合の 5 つの条件で実験を実施した．その結果，パネルの背景色に関わらず選択肢に青色を用いた場合
は，無彩色や赤色を用いた場合よりも正答率が高くなり，操作時間も短くなることが明らかになった．操作時間に関しては，ボタンが青色の場合，背景が補色である暗い赤色を用いた方が操作は素早くなることがわかった．
以上のことから短時間に回答する直感的操作において画面のプッシュボタンと背景の色によって，操作の速さや正確性に差が生じることが明らかとなった．とくに背景色に関わらず
プッシュボタンに青色を用いた場合には，その他の色を用いた場合よりも操作の速さと正確性とに優れていたことから，操作性の向上が期待できる可能性がある．

33

4 配色による画面全体の印象と操作の速さおよび正確性との関係
4.1 緒言3 章では操作の際に意識的に注目される，プッシュボタンとその背景のパネルの色とが操作に及ぼす影響を明らかにした．4 章ではプッシュボタンのように特定の要素の色ではな
く，画面全体の色彩設計が操作に及ぼす影響を明らかにすることを試みる．
一般的に操作画面はプッシュボタンをはじめとする選択肢やその背景色だけではなく，文字色やアクセントカラー，シンボルマークやイラストレーションなど，さまざまな要素によって構成されている．そしてそれらの色彩はデバイス設置者の企業イメージや提供するサービス内容に沿った印象が，画面全体のデザインから操作者に伝わるように綿密に設計されている．したがって，配色による画面全体の印象と操作との関係を明らかにしなければ，
本稿の成果を実際のインタフェースデザインへ応用することは難しい．そこで 4 章ではプッ
シュボタンのように意識的に着目される部分的な色彩ではなく，配色による画面全体の印象
が，直感的操作の速さと正確性，操作者に及ぼす影響を明らかにすることを試みる．それを検証するにあたって，4.2 節では画面全体の印象が配色の位置など，配色以外の要因によって大きく影響を受けないことを確認する．仮に配色が施される位置によって画面の印象が大きく変化する場合，配色と配色を施す位置とを独立変数として実験を設計する必要がある
が，それでは実験条件が膨大となり被験者への負担が大きい．そこで実験条件の独立変数が複雑になることを避けるため，配色の位置が画面全体の印象に及ぼす影響を明らかにすることによって，実験画面の配色位置を 1 つに決定するための根拠を得る．
次に 4.3 節では，配色による画面全体の印象が直感的操作の速さと正確性に及ぼす影響について明らかにする．4 章ではタッチパネル操作を対象として，画面全体の色彩設計から受ける印象が直感的操作の課題の素早さと正確性に及ぼす影響を被験者実験によって検証する．
操作における速さや正確性といった合理性が重要である一方で，同時に操作を通した「嬉しさ」や「楽しさ」などの情緒的な側面も考慮される必要がある．2.4 節で述べたように，
われわれは色彩を見ることによって好ましさや美しさを感じ，それらを主観的に評価する．
そこで 4.4 節では配色による画面全体の印象が直感的操作の速さ，正確性に及ぼす影響に加え，操作者の主観評価に及ぼす影響について明らかにする．

34

4.2 配色の位置と画面全体の印象との関係
4.2.1 実験目的
4.2 節では画面上の配色の位置と，画面に対する操作者の印象との関係を明らかにすることを試みる．画面に用いる配色と操作との関係を明らかにする上で，配色の位置によって画面の印象が大きく変化しないことを確認するためである．そこで同じ配色を異なる位置に配色した操作画面の画像を作成し，各画面の画像から受ける印象の，印象語への合致度を被験者に評価してもらう．そして同じ配色を異なる位置に配置した画面同士の評価値を比較し，
配色の位置と印象の強さとの関係を調査する．

4.2.2 事前調査
配色の画面上での位置と，印象の強さとの関係を明らかにするために，まず実際に利用されている電子端末の画面において，どのような位置に配色することが一般的であるか調査した．調査では実際に設置されている金融機関の ATM やキオスク端末の画面のデザインを収集し，配色が施されている位置ごとに分類した．実地調査に赴いての写真撮影やインター
ネット上の画像検索によって 70 のサンプル画像を入手し，プッシュボタン，背景以外の装飾として用いられている色彩が画面のどこに位置するか目視によって判断し，以下のように分類した．位置ごとに分類したサンプルの一例を抽象化し，その配色位置を示したものを図19 に表す．
• 画面上部：24 サンプル（図 19-1）• 画面下部：7 サンプル（図 19-2）• 画面上下部：14 サンプル（図 19-3）• 画面左部：3 サンプル（図 19-4）• 画面右部：1 サンプル（図 19-5）• その他 ボタンと背景色のみによる色彩構成など：21 サンプル（図 19-6）
このように画面の装飾としてのカラーデザインは背景色とプッシュボタンを除いて，画面の上下左右にライン状に配置される場合が多くみられた．とくに画面の上部や上下部に積極的に配置される傾向があった．そこで画面の上部，下部，左右部，上下部の 4 種類の配置位置に配色を施した場合，どの位置に配色を施した場合に配色の印象がユーザに対してより強く感じられるかを検証することとした．

35

テキスト
テキスト

テキスト

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

テキスト

テキスト

2. 画面下部への装飾がある場合
例：施設案内用端末

1. 画面上部への装飾がある場合
例：金融機関 ATM

ボタン

テキスト

ボタン

ボタン
ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

テキスト

ボタン

3. 画面上下部への装飾がある場合
例：動画配信用端末

テキスト

4. 画面左部への装飾がある場合
例：乗車券購入用端末

ボタン

ボタン

ボタン

テキスト
テキスト

テキスト

ボタン

テキスト
ボタン
テキスト

テキスト

ボタン

テキストテキスト
テキスト テキスト
テキストテキスト

ボタン
ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

5. 画面右部への装飾がある場合

6. 特定部位に装飾が無い場合（その他）

例：電子マネーチャージ用端末

例：金融機関 ATM… ボタンや背景以外で画面の印象に影響を与えている装飾的色彩（ロゴマークなどを含む）

図 19

実際に利用されているタッチパネル端末画面の配色位置の分類

36

1. 画面上部に配色

2. 画面下部に配色

3. 画面上下部に配色

4. 画面左右部に配色

図 20

配色位置が印象に及ぼす影響の検証に用いた 4 つの配色位置

4.2.3 実験方法
画面のどの位置が配色されることによって，画面全体の印象が決定づけられるかを明らかにするために，配色の施される位置と，画面から操作者が受ける印象の強さとの関係を調査する実験を実施した．実験では図 20 に示すような配色位置の異なる 4 種類のダミーの操作
画面に配色を施し，それらから受ける印象の印象語への合致度を被験者に評価してもらった．実験に用いる配色とそれらの混合イメージスケール上の位置を図 21 に示す．スケール
上から偏りの無いよう選択した 12 の配色と，4 種類の配色位置を組み合わせることによって 48 種類のダミー画面画像を作成した．ダミー画面画像のウインドウ全体の背景色を薄い
グレー（N8）とし，プッシュボタンの余白部分は白（N9.5）とした．文字要素は暗いグレー（N3）とした．文字情報の視認性を考慮しながら，画面全体のコントラストが強くなりすぎないよう統一感をもたせている．実験では配色と配色位置との組み合わせの異なる組み合わせ全てについて紙ベースの評価シートを作成し，ダミー画面画像から受ける印象を被験者に評価してもらった．評価シートを用いてそれぞれのダミー画面画像から受ける印象が，配色に付加された印象語にどの程度合致するか，5 段階の SD 法で評価してもらった．評価シー
トの一例を図 22 に示す．順序効果による影響を小さくするため 48 枚の評価シートの提示
順はランダムとした．画面全体から受ける直感的な印象を評価してもらうために，被験者に37

3RP8/4

5Y9.2/1

5P8/4

3

10PB8/4

2.5RP8/4

2.5P6/6

条件5
エレガント

5R5/12

5PB4/10

10Y8/12

条件1
カジュアル

5RP8/47R9.2/1

2.5P4/10

条件11
ゴージャス

2

7.5R8/4

条件3
ロマンティック

条件9
ナチュラル

1

SOFT
0

1

2

3R4/12

3

2

2

1

1

0 COOL

1

1

2

2

3

8YR5/8

10YR4/4

条件8
クリア

10BG9/2

10Y9/0.5

10BG7/4

条件2
クールカジュアル

6Y8/10

5B7/6

5PB6/8

条件10
シック

5PB6/4

5P6/2

5P7.5/0.5

条件4
モダン

6.25PB5.6/6

5B8/4

5B3/2

5PB8/13
3

N1

2.5G8.5/2

3

3

WARM 0

5P2/1

7.5Y9/6

2

1

0
HARD

1

2

3

5B4/4

条件7
フォーマル

条件12
ワイルド

条件6
クラシック＆ダンディ

10GY3/2

2.5Y6/8

7.5PB8/2

5PB2/2

2.5Y3/2

図 21 実験に用いた配色とそれらの混合スケール上の位置は考え込まず素早く判断するように指示した．また全 576 問という設問数の多さを考慮し，実験中に疲労を感じた場合には適度に休憩をとってもらった．被験者は大学でビジュアルデ
ザインの専門教育を受けており，視覚に異常のない大学生 11 名（19〜26 歳）である．

4.2.4 実験結果
実験結果を図 23 にグラフで示す．グラフの縦軸はその印象語の評価の平均値を表し，横軸は色彩に付加された印象語を表す．図 23 のグラフと表 1 に示すグラフ同士の相関値に着目すると同じ配色同士の間では全 72 の組み合わせのうち，65 の組み合わせで r = 0.60 以
上の正の相関関係が示された．グラフの形状に着目すると，配色位置が異なっても，同じ配色である場合にはグラフの示す傾向は同様であることがわかる．このことから画面の印象はほとんど色彩による影響に占められており，配色の位置が変わっても評価結果の傾向は大きく変わらないことがわかる．
またグラフから，配色に付加された印象語とは必ずしも同じ評価が与えられていない場合があることがわかる．たとえばクリアに対する結果ではクールカジュアルも高く評価されている．これは，被験者がもっている「クリア」という語彙に対する概念の違いが原因であると推測される．これはクリアの画面であれば，どの配置においても同様の結果が得られていることからも分かる．

4.2.5 分析と考察
評価値がすべての配置において，r = 0.80〜0.90 以上の高い正の相関係数を示した配色について考察する．クリアとナチュラルの配色を用いた場合，それらの評価値は，異なる配置

38

⑤

この画面のデザインから感じられる印象について
以下の質問について該当する項目を，別紙にマークして下さい．

⑦フォーマルな印象が感じられる①カジュアルな印象が感じられる

A

B

C

非常にそう思う

ややそう思うどちらともいえないD
ややそう思わないE
非常にそう思わない

B

C

非常にそう思う

ややそう思うどちらともいえないD
ややそう思わないE
非常にそう思わない

B

C

非常にそう思う

ややそう思うどちらともいえないC

非常にそう思う

ややそう思うどちらともいえないD
ややそう思わないE
非常にそう思わないA

B

C

非常にそう思う

ややそう思うどちらともいえないD
ややそう思わないE
非常にそう思わない⑨ナチュラルな印象が感じられる③ロマンチックな印象が感じられるA

B⑧クリアな印象が感じられる②クール・カジュアルな印象が感じられるA

A

D
ややそう思わないE
非常にそう思わない④モダンな印象が感じられる

A

B

C

非常にそう思う

ややそう思うどちらともいえないD
ややそう思わないE
非常にそう思わない⑩シックな印象が感じられる

A

B

C

非常にそう思う

ややそう思うどちらともいえないD
ややそう思わないE
非常にそう思わない

B

C

非常にそう思う

ややそう思うどちらともいえないD
ややそう思わないE
非常にそう思わない

B

C

非常にそう思う

ややそう思うどちらともいえない

図 22

C

非常にそう思う

ややそう思うどちらともいえないD
ややそう思わないE
非常にそう思わないA

B

C

非常にそう思う

ややそう思うどちらともいえないD
ややそう思わないE
非常にそう思わない⑫ゴージャスな印象が感じられる⑥クラシック & ダンディな印象が感じられるA

B⑪ワイルドな印象が感じられる⑤エレガントな印象が感じられるA

A

D
ややそう思わないE
非常にそう思わないA

B

C

非常にそう思う

ややそう思うどちらともいえない

ダミー画面の印象評価に用いる評価シート

39

D
ややそう思わないE
非常にそう思わない① カジュアル

③ ロマンチック② クールカジュアル

5.000

5.000

5.000

4.000

4.000

4.000

3.000

3.000

3.000

2.000

2.000

2.000

1.000

1.000

1.000

0.000

0.000
1

1

2

3

4

5

6

7

8

9

10

11

12

2

3

4

5

6

7

8

9

10

11

12

0.000
1

⑤ エレガント

④ モダン
5.000

5.000

4.000

4.000

4.000

3.000

3.000

3.000

2.000

2.000

2.000

1.000

1.000

1.000

0.000

0.000
2

3

4

5

6

7

8

9

10

11

12

⑦ フォーマル

1

2

3

4

5

6

7

8

9

10

11

12

0.000
1

5.000

5.000

4.000

4.000

4.000

3.000

3.000

3.000

2.000

2.000

2.000

1.000

1.000

1.000

0.000

0.000

2

3

4

5

6

7

8

9

10

11

12

⑩ シック

0.000
1

2

3

4

5

6

7

8

9

10

11

12

⑪ ゴージャス
5.000

5.000

4.000

4.000

4.000

3.000

3.000

3.000

2.000

2.000

2.000

1.000

1.000

1.000

0.000
1

0.000

3

4

5

6

7

8

9

10

11

レイアウト 1：上部のみ配色

図 23

表1
比較したレイアウト①

casual

12

1

2

3

4

5

6

7

8

9

10

11

12

2

3

4

5

6

7

8

9

10

11

12

5

1

2

3

4

5

6

7

8

9

10

11

12

6

7

8

9

10

11

12

⑫ ワイルド

5.000

2

4

⑨ ナチュラル

⑧ クリア

5.000

1

3

⑥ クラシック & ダンディ

5.000

1

2

6

7

8

レイアウト 2：下部のみ配色

9

10

11

12

0.000

1

2

3

4

5

レイアウト 3：上下部に配色

レイアウト 4：左右鵜部に配色

画面に用いる配色と画面上の位置との関係異なる配色位置の画面同士の印象評価の無相関検定結果③④⑤② cool⑥ classic
casual romantic modern elegant & dandy

⑦

⑧

⑨

⑩

⑪

⑫

fomal

clear

naturalchic

gergouswild

0.80599 0.83442 0.76818 0.57325 0.68688 0.80113 0.87362 0.91071 0.88459 0.95316 0.91721 0.69654
0.76058 0.90052 0.70977 0.53354 0.75955 0.65886 0.88046 0.92378 0.85877 0.87529 0.83678 0.43687
0.52418 0.84511 0.84047 0.50789 0.83122 0.58876 0.76204 0.96356 0.85551 0.89548 0.80968 0.52343
0.73033 0.93385 0.92996 0.93169 0.84813 0.79479 0.88728 0.98057 0.95565 0.89370 0.84890 0.84143
0.71901 0.87498 0.79418 0.74134 0.80285 0.68114 0.61856 0.92840 0.93349 0.82884 0.83295 0.77013
0.79556 0.92841 0.75334 0.87520 0.72642 0.75771 0.64624 0.93768 0.96090 0.76335 0.82818 0.93442
top … 画面上部に配色，bottom … 画面下部に配色，side … 画面左右部に配色，t&b … 画面上下部に配色

40… 相関係数 r < 0.6

間すべての組み合わせにおいて r = 0.85 と高い相関値を示した．このことから，SOFT 軸よりの印象が強い配色は配置の影響を受けにくく，一定の印象を操作者に与えることが可能であると考えられる．相関係数が r = 0.60 を下回るの値を示した配色は，すべて HARD 軸
よりの配色であることからも，これが推測できる．
ロマンチックの配色はクリア，ナチュラル同様に SOFT の印象が強いが，ふたつの配色と比べて配置間の相関係数は高い値ではない．これはロマンチックが SOFT–HARD
軸の SOFT の印象が強いが，COOL–WARM 軸上でほぼニュートラルである．そのためCOOL–WARM 軸の印象が配置による影響を受けたのではないかと推測される．これは上部配置の場合にナチュラルの評価値が高くなり，左右部配置の場合にクリアの評価値が高くなっていることから読み取れる．したがって SOFT の印象が強い配色であっても，COOL–WARM 軸上での印象がニュートラルである場合，印象は配置による影響を受けやすいことが推測される．
次に配置間の評価値の相関係数が r = 0.60 を下回るの値を示した配色について考察する．モダンの配色を用いた場合は，上部-下部，上部-上下部，上部-左右部の間で相関係数がr = 0.60 を下回った．上部配置では同じ配色を用いているのにも関わらずモダンに対する評価値が 3.00（ニュートラル）を下回り，下部配置の場合にはモダンに対する評価値が最も高くなった．また，ワイルドの配色での印象評価結果は，上部-上下部，上部-左右部の配置
間で相関係数が 0.60 を下回った，上部配置の場合に評価値は最も低く，一方で左右部配置の場合に最も高くなった．
これらの結果から，モダンやワイルドなどの HARD 軸寄りの配色は，上部への配置を組み合わせた場合に操作者が画面から感じられる印象はわずかに弱くなることが予想される．
これは本来軽快さを表すのに効果的である画面の上部への配色位置に，それとは反対に重さが感じられる配色が配置されたことによってそれらが打ち消し合い，印象が弱まったのではないかと推測される．一方で画面の下部へ配色した場合の印象は，同じ配色面積である画面
上部への配色した場合の印象とは異なり，より配色面積の大きな画面の上下部，左右部に配色した場合との印象との間に差が見られない．したがって画面の下部に配色する場合の印象
は，上部に配置する場合よりも，配色の種類によらず一定の印象を被験者に与えていると考えられる．

4.3 配色による画面全体の印象と操作の速さ，正確性との関係
4.3.1 実験目的
3 章ではプッシュボタンと操作パネルに与える色が，操作の速さや正確性に影響を与えることが明らかになった．しかし，これらの実験は赤，青，黄といった最も基本的な色彩を用いて行ったことに対して，実際に提供されているウェブサイトなどのインタフェースは，印41

象を反映させた複数の色の組み合わせが用いられる．また画面の背景やシンボルマーク，イラストなどプッシュボタンのような操作対象ではない部分も画面の印象を決定づける．
そこで 4.3 節では，配色による画面全体が，操作の速さと正確性との関係を明らかにする．
実験では，4.2 節での検証をもとに決定した配色位置の画面に，印象の異なる配色を配置す
ることによって実験画面を作成し，被験者に直感的な操作の課題を処理してもらう．その際の操作速さ，正答数を計測し，各条件におけるそれらの差を分析する．

4.3.2 実験方法
実験では 2.4.2 項で述べた混合イメージスケール全体から位置に偏りのないよう 12 の選出し，実験画面に用いた．カジュアル，クールカジュアル，ロマンチック，モダン，エレガ
ント，クラシック&ダンディ，フォーマル，クリア，ナチュラル，シック，ゴージャス，ワ
イルドの配色を用いて 12 種類の実験画面を作成し，実験条件 1〜12 とした．各配色を構成する色彩のマンセル値と各配色のスケール上での位置を 38 ページの図 21 に示す．
色彩が技能ベースの行為に及ぼす影響を調べるため，実験には一桁同士の足し算を三択で答えるという簡単な課題を用いた．この課題は単純作業が肉体および精神的ストレスに及ぼす影響を調べるために行なわれるクレペリンテスト [26] でも採用されていることから，技能
ベースの作業として適切であると判断した．実験装置としてパーソナルコンピュータ上で動作するソフトウェアを作成した．被験者はタッチパネル操作で簡単な足し算の三択問題に回答する．操作画面には 1 つの正しい答えと 2 つの間違った答えがプッシュボタン上に表示される．1 問の制限時間を 1.5 [sec.] とし，各条件につき 30 問出題される．被験者は正しいと思われる答えのプッシュボタンにタッチする．制限時間内に回答されなかった場合，自動的に次の問題が表示される．それらの操作に要した時間と正答数を計測する．
実験に用いたソフトウェアの画面の構成を図 24 に示す．実験用タッチパネルモニターには株式会社ナナオ製の FlexScan L560T-C を用い，光環境を統制した実験室で実施した．
モニターにはガンマ補正を実施した上で，被験者に対して設定した各条件の色彩が刺激として与えられるよう調整を施した．プッシュボタン部分を無彩色とし，画面の下部に図 21に示す各色彩をブロック状の色彩パターンとして配置することで，画面全体の印象が条件 1から条件 12 の印象にそれぞれ一致するようにした．ウインドウ全体の背景色を薄いグレー（N8）とし，プッシュボタンの余白部分は白（N9.5）とした．また問題文や選択肢の数字は暗いグレー（N3）とした．文字情報の視認性を考慮しながら，画面全体のコントラストが強くなりすぎないよう統一感をもたせている．画面下部への配色によって各条件の画面全体の印象が，画面としての安定感を保ちながら，それぞれの配色のもつ印象によって変化するように考慮した．被験者は色覚に異常のない大学生・大学院生の男女 24 名である．実験の流れを図 25 に示す．

42

回答用プッシュボタン

図 24

実験画面の構成図

実験開始

実験内容の説明：5分

練習用画面でのタスクの練習：1分
アイマスクを着用し休憩：2分
実験画面での操作：1分

12条件の実験画面でアイマスクを着用し休憩：2分 操作し終えるまで繰り返す
実験終了：合計44分

図 25 実験の流れ

4.3.3 実験結果
図 26 は各条件における操作時間と正答数との平均値を表す．図 26（A）に示すグラフは，

1 問を回答するために要した操作時間の各条件における平均値を表す．このグラフの縦軸は
操作時間の長さ [msec] を示し，横軸は各実験条件を示す．条件 8（クリア）は最も操作時間が短く，次いで条件 6（クラシック&ダンディ），5（エレガント）も短時間であった．一

43

1080

(A) 各条件の操作時間の平均[msec]

29.0

1060

28.5

1040

28.0

1020

27.5

1000

27.0

980

26.5

960

26.0

940

25.5

920

条カ
件ジ
1ュ
ア
ル

条ク
件ー
２ル
カ
ジ
ュ
ア
ル

条ロ
件マ
ン
3 テ
ィ
ッ
ク

条モ
件ダ
4 ン

条エ
件レ
５ガ
ン
ト

条ク
件ラ
6 シ
ッ
ク
&
ダ
ン
デ
ィ

条フ
件ォ
ー
7 マ
ル

条ク
件リ
8 ア

条ナ
件チ
9 ュ
ラ
ル

条シ 条ゴ
件ッ 件ー
ク
10
11ジ
ャ
ス

条ワ
件イ
12 ル
ド

25.0

(B) 各条件の正答数の平均

[回]

条カ
件ジ
1ュ
ア
ル

多重比較検定による有意差: .01< p < .05: .05< p < .10

条ク
件ー
２ル
カ
ジ
ュ
ア
ル

条ロ
件マ
ン
3 テ
ィ
ッ
ク

条モ
件ダ
4 ン

条エ
件レ
５ガ
ン
ト

条ク
件ラ
6 シ
ッ
ク
&
ダ
ン
デ
ィ

条フ
件ォ
ー
7 マ
ル

条ク
件リ
8 ア

条ナ
件チ
9 ュ
ラ
ル

条シ 条ゴ
件ッ 件ー
ク
10
11ジ
ャ
ス

条ワ
件イ
12 ル
ド

図 26 配色による画面全体の印象が操作に及ぼす影響

方で条件 12（ワイルド）は操作に最も時間を要した．多重比較法（トゥーキーの方法 [27]）による検定を行った結果，条件 12 と条件 5，6 の操作時間に有意な差（p ≤ .05）が認められ，条件 8 との間に強い有意な差（p ≤ .01）が確認された．図 26（B）に示すグラフは，各条件における課題の正答数の平均値を表す．このグラフの縦軸は正答の回数であり，横軸は各実験条件を示す．条件 2（クールカジュアル）の操作おいて正答数の平均は最も多くな

り，条件 11（ゴージャス）において最も少なくなった．ここでは多重比較法による検定で有意な差は検出されなかったが，ウェルチの t 検定 [28] による一対比較の結果，表 2 に示す
組み合わせの条件同士の間に有意な差が認められた．

4.3.4 分析と考察
まず各条件における操作時間の平均値に着目する．ワイルド，エレガント，クラシック&ダンディとエレガントとの間にそれぞれ有意な差があったことから，ワイルドのようにHARD の印象が強く，WARM 寄りの印象の配色は操作に時間がかかることが推測される．
一方で，エレガント，クラシック&ダンディは WARM-HARD 軸上でほぼニュートラルな位置にあり，クリアにおいては COOL 軸に強く寄っていることから，WARM の印象は操作の迅速性に影響を及ぼすことが考えられる．
次に正答数の平均値に着目する．カジュアル，ナチュラル，クールカジュアル，シックの配色を用いた場合に他の条件よりも有意に正答数が多くなった．なかでも値が高かった

44

表2

正答数において有意な差が確認された条件の組み合わせ
正答数の平均において，t 検定による有意な差がみられた条件同士の一覧
条件 1-4(p<.10)

条件 2-12(p<.05)

条件 1-7(p<.10)

条件 9-4(p<.10)

条件 1-11(p<.10)

条件 9-7(p<.10)

条件 2-4(p<.01)

条件 9-11(p<.10)

条件 2-6(p<.10)

条件 10-4(p<.05)条件 2-7(p<.05)

条件 10-7(p<.05)条件 2-8(p<.05)

条件 10-11(p<.05)条件 2-11(p<.01)

条件 10-12(p<.10)… 強い有意

条件2

条件11

条件10

条件12

操作速度が短く，正答数が高かった条件

図 27

… 有意

… 有意傾向操作速度が長く，正答数が低かった条件

操作性の高かった条件，低かった条件に用いた配色の明度コントラストの比較

クールカジュアルとシックは，ともに COOL 軸によった青味のある配色であることから，

COOL の印象をもつ配色は感覚的判断で行う操作の正確性に貢献する可能性がある．
また操作に時間を要し，かつ正確性の低くなることがわかったワイルドやゴージャスといった配色は，WARM 軸よりの印象であるとともに，構成色同士の明度コントラストが高いという特徴がみられた．一方で操作の正確性が高かったクールカジュアルやクリアの配色
は，COOL 軸寄りの印象で配色同士の明度コントラストが低かった．図 27 に実験結果から比較した，操作性の高い配色と低い配色を用いた条件の特徴を示す．

45

配色による画面全体の印象と，操作の速さ，正確性および操作者の主

4.4

観評価との関係
4.3 節では，画面全体の印象を決定する配色の種類によって，操作の速さと正確性に有意な差が生じることが明らかになった．とくに配色の構成色同士の明度コントラストが操作へ影響を及ぼす可能性があると述べた．1.2 節で述べたように，家電製品などのカラーバリ
エーションはユーザの購買意欲だけではなく，使用感そのものに対して影響を及ぼす．同様にインタフェースデザインの色彩設計の印象が操作へ影響する可能性がある．たとえば同じ
手続きの操作をする場合でも，画面の色彩設計が異なる場合は画面に対する好ましさや操作のしやすさなどに影響を及ぼすと考えられる．そこで次に配色による画面全体の印象と，操作の速さと正確性および好感度，わかりやすさなどのユーザの主観評価との関係を明らかにすることを試みる．

4.4.1 実験目的
実験では，異なる配色を施した複数の実験画面で被験者に一桁同士の直感的な操作課題に回答してもらい，回答に要した時間と正答数を計測する．そして各実験画面での操作の後に，画面から受ける好感度やわかりやすさなどの主観評価を被験者に行ってもらう．課題の操作時間，正確性，主観評価の結果を分析し，画面の配色と操作と主観評価との関係を調査する．

4.4.2 実験方法
課題は前章と同じく，タッチパネル操作で回答する一桁同士の足し算の三択問題である．
そしてそれらの操作時間と正答数を計測する．1 問の制限時間を 1.5 [sec.] とし，各条件につき 30 問出題される．制限時間内に回答されなかった場合，自動的に次の問題が表示される．実験では前章で述べた 12 の配色を 43 ページの図 24 に示す，インタフェースデザインの「配色部分」に配置した 12 条件を実験画面とした．
各実験条件での操作終了後，画面の配色によるユーザの評価性への影響を明らかにするため，被験者に画面の印象を評価してもらった．主観評価実験に用いる語彙は次のように決定した．まず仲川らの提案するウェブユーザビリティ評価スケール（WUS）[29] において，
ユーザビリティ評価に有効な評価項目の因子として用いられている 7 項目（好感度，役立ち感，信頼性，操作の分かり易さ，構成の分かり易さ，見やすさ，反応の良さ）のうち，操作の内容や情報端末の性能に左右されないと考えられる，「好感度」「わかりやすさ」「見やすさ」の 3 つを採用した．さらにインタフェースの評価性を表す要因として「親しみやすさ」「心地良さ」「美しさ」の 3 つを加えた 6 項目を採用した．被験者にはカラー印刷した操作画面

46

実験開始

実験内容の説明：5分

練習用画面でのタスクの練習：1分
アイマスクを着用し休憩：2分
実験画面での操作：1分
実験画面の印象評価：2分12条件の実験画面で操作し終えるまで繰り返す

アイマスクを着用し休憩：2分
実験終了：合計68分

図 28 実験の流れの画像を提示しながら画面の印象について評価してもらう．評価手法には医療現場において人の五官に与えられた刺激の強さを調査するために多く用いられる Visual Analogue Scale（VAS 法）[30]（付録 B）を用いる．順序による影響を軽減するため，評価項目の左右語句の位置をランダムに変更して被験者に提示した．評価はあまり考え込まず，直感的に行ってもらうよう指示した．
実験の全体の流れについて述べる．図 28 に実験の流れを示す．被験者に操作方法やアン
ケートについて説明した後，操作方法を理解してもらうために無彩色の操作画面を用いて練習をしてもらう．その後，アイマスクを着用して 2 分間の休憩をとり，条件 1〜12 の操作画面を用いた操作をしてもらう．各条件の操作画面で回答した直後，被験者に画面から受ける印象を評価してもらう．各条件の間には前の実験の配色の影響を軽減するためと，目の疲れによる影響を排除するためにアイマスクを着用して 2 分間の休憩をとってもらった．被験者は視覚に異常のない大学生，大学院生の男女 36 名である．このプロセスを 36 名分繰り返す．

4.4.3 正答数と操作時間の結果
実験結果のうち，各条件で 1 問の操作に要した時間の平均値と，課題の正答数を図 29 に示す．1 問あたりの操作時間の平均は，条件 3（ロマンチック）と条件 8（クリア）の場合に短くなった．一方で条件 11（ゴージャス），条件 12（ワイルド）の場合は操作に時間を要した．条件 3（ロマンチック）と条件 11（ゴージャス）の間に多重検定（トゥーキーの方法）47

(A) 各条件の操作時間の平均[msec](B) 各条件の正答数の平均

[回]
28.5

1015

※各条件同士で多重比較検定による有意な差はないが，ウェルチのt検定による一対比較によって条件2，10と1010

条件4，7，11，12の間などで有意差が確認された．

1005
28.0
1000
995
27.5

990
985
980

27.0
975
970
26.5

965
条カ
件ジ
1ュ
ア
ル

条ク
件ー
２ル
カ
ジ
ュ
ア
ル

条ロ
件マ
ン
3 テ
ィ
ッ
ク

条モ
件ダ
4 ン

条エ
件レ
５ガ
ン
ト

条ク
件ラ
6 シ
ッ
ク
&
ダ
ン
デ
ィ

条フ
件ォ
ー
7 マ
ル

条ク
件リ
8 ア

条ナ
件チ
9 ュ
ラ
ル

条シ 条ゴ
件ッ 件ー
ク
10
11ジ
ャ
ス

条ワ
件イ
12 ル
ド

条カ
件ジ
1ュ
ア
ル

多重比較検定による有意差: .01< p < .05: .05< p < .10

条ク
件ー
２ル
カ
ジ
ュ
ア
ル

条ロ
件マ
ン
3 テ
ィ
ッ
ク

条モ
件ダ
4 ン

条エ
件レ
５ガ
ン
ト

条ク
件ラ
6 シ
ッ
ク
&
ダ
ン
デ
ィ

条フ
件ォ
ー
7 マ
ル

条ク
件リ
8 ア

条ナ
件チ
9 ュ
ラ
ル

条シ 条ゴ
件ッ 件ー
ク
10
11ジ
ャ
ス

条ワ
件イ
12 ル
ド

図 29 配色による画面全体の印象が操作に及ぼす影響

表3

各条件同士の実験結果の一対比較において有意な差が確認された組み合わせ
各条件同士の平均正答数を t 検定によって一対比較した結果

条件 2 - 4

条件 2 - 8

条件 10 - 4

条件 2 - 5

条件 2 - 9

条件 10 - 7

条件 2 - 6

条件 2 - 11

条件 10 - 8

条件 2 - 7

条件 2 - 12

条件 10 - 11
… 強い有意条件 10 - 12

… 有意

… 有意傾向[27] による有意な差（.01 < p ≤ .05）が，条件 8（クリア）と条件 11（ゴージャス）の間に，有意傾向（p ≤ .10）が認められた．

各条件あたりの正答数の平均値は，条件 2（クールカジュアル）と条件 10（シック）の場

合に高い値を示した．一方で条件 4（モダン），条件 7（フォーマル），条件 11（ゴージャス），
条件 12（ワイルド）の場合は正答数は少なかった．各条件同士で多重検定（トゥーキーの方法）による有意な差は確認されなかったが，t 検定による一対比較によって，条件 2（クールカジュアル）と条件 10（シック）と他の多くの条件との間に有意な差が確認された．一覧
を表 3 に示す．

4.4.4 操作と配色による画面の印象の主観評価との関係
図 30 に各条件のユーザビリティに関する主観評価とインタフェースの評価性との関係を表したグラフを示す．縦軸は各項目における評価値で，横軸は降順に並べ替えた実験条件である．グラフの背景が斜線で表されている条件の画面はとくに評価が高く，網掛けで表され

48

70

（A）好感度

[％]

70

60

60

50

50

40

40

30

30

20

20

10

10

0

0

2
70

9

8

3

5

10

1

7

4

6

11 12

（B）わかりやすさ

[％]

2
70

50

50

40

40

30

30

20

20

10

10

0

8

9

5

3 10

4

7

12 11

6

（E）心地良さ

[％]

…

60

1

…

60

0

8

70

（D）親しみやすさ

[％]

2

3 10

9

7

5

4

6 12

1

（C）見やすさ

[％]

2

11

70

60

60

50

50

40

40

30

30

20

20

10

10

0

8

9

3

5

7 10

1

4

6 12 11（F）美しさ

[％]

0

8

9

2

3

5

7

10 12

1 … カジュアル2 … クールカジュアル

7 … フォーマル

8 … クリア

4

6

1 11

9

3 … ロマンチック

4 … モダン

9 … ナチュラル

10 … シック

2

5

8

3

7

5 … エレガント

11 … ゴージャス

1 10 411 12

6

6 … クラシック & ダンディ

12 … ワイルド

図 30 各条件の印象評価の平均値ている条件の画面との全ての組み合わせにおいて多重検定による有意な差が確認された．な
かでもクールカジュアル，クリアの配色を用いた場合に全ての印象評価項目において，他の配色よりも評価値が高いことがわかる．一方でゴージャスの配色を用いた場合はどの項目においても低い評価値を示した．

4.4.5 分析と考察
課題の正答数，操作に要した時間と各印象評価項目との無相関検定の結果を表 4 に示す．
正答数と好感度との間には中程度の正の相関（r = .63）が確認された．わかりやすさ，親し

49

表4

操作の速さと正確性と，画面に対する主観評価との間に確認された有意な相関関係
相関係数 r

p値

0.63

.027

わかりやすさ0.56.056

親しみやすさ0.56.057- 0.56.057

わかりやすさ- 0.68.014

見やすさ- 0.56.057

心地良さ- 0.66.020

比較したデータ
正答数 ー 好感度

操作時間 ー 好感度

0.4 < r < 0.7 … 中程度の相関関係
0.2 < r < 0.4 … 相関傾向

… 有意
… 有意傾向みやすさも正答数との間には正の相関関係（ともに r = .56）が確認された．操作に要した時間の長さと好感度，わかりやすさ，見やすさ，心地良さとの間にはそれぞれ負の相関関係(r = −.56, −.68, −.56, −.66) が確認され，これらの項目の評価が高い操作画面では，操作時間が短いことがわかった．操作時間は心地良さとの間および，見やすさとの間に相関傾向があることから，素早い操作が要求されるインタフェースには心地良く，見やすいと感じられるカラーデザインが適していると考えられる．正答数は親しみやすさとの間に相関傾向にあることから，正確性が要求されるインタフェースのデザインには，親しみやすいと感じられるカラーデザインが適していると予測できる．実験結果から，好感度とわかりやすさは，
操作時間と正確性の双方と強い相関関係があり，これらの操作性と関連があることがわかる．また素早く，正確な操作が要求されるデザインに適しているということが明らかになったクールカジュアルやクリアの配色は，情動的な因子である親しみやすさ，心地良さにおいても高い評価を得ている．このことから使用者の情感にうったえるデザインは，ユーザビリ
ティにおいても良い影響を及ぼすと予測できる．
次に色彩感情を構成する評価性，活動性，潜在性の 3 因子と，課題の操作に要した時間，正答数との分析を試みる．図 31 に示す散布図は縦軸を各条件で 1 問の操作に要した時間の平均値，横軸をそれぞれの配色の色彩感情の 3 因子である評価性（嫌い-好き：好感度の評
価結果），活動性（COOL-WARM），潜在性（SOFT-HARD）として実験結果を表現している．図 31（A）に示すグラフは評価性と操作時間との関係を表す．前節で述べたようにクー
ルカジュアルやクリアといった評価性の高い配色を画面に用いた場合は操作時間が短く，操作時間と評価性との明確な相関関係がこの図からも読み取れる （r = −.56, p ≤ .10）
．図 31（B）に示すグラフは活動性と操作時間との関係を表す．活動性が低く静的な印象の配色を操作画面に用いた場合は操作時間が短い傾向にある (r = .51, p ≤ .10)．図 31（C）に示す

グラフは潜在性と操作時間との関係を表す．短い操作時間を示したロマンチックやクリアの50

（A）評価性と操作時間（B）活動性と操作時間[msec]
操作時間（C）潜在性と操作時間[msec]
操作時間[msec]
操作時間

980

980

985

985

985

990

990

990

995

995

995

1000

1000

1000

1005

1005

1005

1010

1010

1010

1015

1015

1020

1020

（r=-.56, p<.10）

980

-20

-15

-10

-5

0

5

10

15

20

-4

-3

-2

-1

0

1

2

3

4

1020

（r=.48, p=.011）-4-3

活動性（COOL - WARM）

評価性（嫌い - 好き：好感度）

図 31

1015

（r=.51, p<.10）

-2

-1

0

1

2

3

4

潜在性（SOFT - HARD）

操作時間と画面に用いた配色の色彩感情との関係

配色に着目すると潜在性が低いことがわかる．一方で操作時間を要したワイルドは潜在性の値が高い．無相関検定の結果はっきりとした有意性は認められなかった（r = .48, p = .11）
が，潜在性と操作時間の間に相関傾向が読みとれる．以上のことから評価性が高く，活動性と潜在性が低い配色を画面に用いた場合，そうではない場合と比較して操作に要する時間が短くなると考えられる．
図 32 に示す散布図は縦軸を各条件の正答数の平均値，横軸をそれぞれ色彩感情の 3 因子である評価性，活動性，潜在性として実験結果を表現している．図 32（A）に示すグラフは評価性と正答数との関係を表す．前節の分析のとおり，評価性と操作の正確性との間に正の相関関係が認められることがこの図からもわかる（r = .63, p ≤ .03）．図 32（B）に示すグ

ラフは活動性と正答数との関係を表す．クールカジュアルやクリアといった比較的，活動性の低い配色の場合に正答数は多くなり，一方でゴージャスやワイルドといった活動性の高
い配色の場合に正答数は少なくなった．しかしながら同様に活動性の低いクリア，モダン，
フォーマルといった配色の場合は操作に時間がかかっており，活動性と正答数の間に有意な相関関係は認められなかった．図 32（C）に示すグラフは潜在性と正答数との関係を表す．
潜在性が高いワイルドやフォーマルなどの配色，また潜在性の低いクリアやロマンチックなどの配色と比較して，ニュートラルなクールカジュアル，シック，カジュアルといった配色を用いた場合は正答数が多い傾向が見受けられた．しかしながら検定による有意な相関関係は認められなかった．以上のことから操作の正答数の多さは色彩感情空間を表す 3 軸のうち，評価性のみと相関関係にあることがわかる．

4.5 結論4 章では，配色による画面全体の印象が操作の速さと正確性，および操作者の主観評価に及ぼす影響を明らかにすることを試みた．配色による画面全体の印象が操作に及ぼす影響を51

（A）評価性と操作時間（B）活動性と操作時間

正答数 [ 回 ]（C）潜在性と操作時間

正答数 [ 回 ]正答数 [ 回 ]

28.6

28.6

28.4

28.4

28.4

28.2

28.2

28.2

28.0

28.0

28.0

27.8

27.8

27.8

27.6

27.6

27.6

27.4

27.4

27.4

27.2

27.2

27.2

（r=.63, p<.03）

28.6

27.0

-20

-15

-10

-5

0

5

10

15

20

27.0

-4

-3

-2

-1

評価性（嫌い - 好き：好感度）

0

1

2

3

4

27.0

-4

-3

-2

-1

活動性（COOL - WARM）

0

1

2

3

図 32 正答数と画面に用いた配色の色彩感情との関係明らかにするにあたって，まず最初に，画面のどの位置に配色を施すことによって，画面全体の印象が決定づけられるかを明らかにするために予備実験を実施した．実験では複数の配色と配色位置との組み合わせによる，複数の操作画面画像を作成し，被験者に各画面の印象の印象語への合致度を評価してもらった．そして同じ配色を用いた異なる配色位置の画面画像に対する評価を比較した．その結果，同じ配色を用いた画面の画像に対する評価値の間には，一つ比較におけるほとんどの組み合わせで高い相関関係が確認された．このことから配色による画面全体の印象は，配置の影響を受けにくいことが明らかになった．
次に配色による画面全体の印象が，タッチパネルの直感的操作の素早さと正確性に及ぼす影響について明らかにするために実験を行った．実験では異なる配色を施した 12 の実験画
面で，被験者にタッチパネル操作で 1 桁同士の足し算の三択問題に回答してもらった．それらの 1 問当たりの回答に要した時間と正答数を測定して各条件の平均値を比較した．その結果，クールカジュアルやシックなど，配色に用いる色彩同士のコントラストが低く，寒色系の配色を用いた場合に，操作は迅速性と正確性が高くなる傾向があった．反対に配色に用いた色彩同士のコントラストが高く，ゴージャスなど暖色系の配色を用いた場合は操作の迅速性と正確性は低くなった．
続いて画面全体の配色の印象が，タッチパネルの直感的操作の素早さと正確さおよび操作者の画面に対する主観評価に及ぼす影響について明らかにするために実験を行った．実験では異なる配色を施した 12 の実験画面で，被験者にタッチパネル操作で 1 桁同士の足し算の三択問題に回答してもらった．そして画面から受ける「好感度」「見やすさ」などの印象を評価してもらった．各条件同士の実験結果の平均値を比較した結果，ロマンチックやクリアの配色を用いた場合には，ゴージャスの配色を用いた場合よりも操作が素早くなった．またクールカジュアル，クリアの配色を用いた場合の操作は，モダン，フォーマル，ゴージャスなど他の配色を用いた場合よりも正確になった．主観評価においてはクリア，ナチュラル，

52

4

潜在性（SOFT - HARD）

クールカジュアルの配色を用いた場合の評価値が高かった．配色の客観的印象とユーザの主観評価が操作に及ぼす影響を明らかにするために，色彩感情の 3 軸である評価性，活動性，潜在性と操作時間，正答数との関係の分析を試みた．評価性は実験条件の画面に対する好感度の評価値を用いた．活動性はその配色の温かさや派手さなどの印象を，潜在性は重さや硬さなどの印象を表す．各条件で 1 問あたりの操作に要した時間および正答数と，色彩感情の3 軸の値との相関関係を分析した．その結果，操作時間は評価性と活動性との間に有意な相関関係がみられた．したがって操作者に好ましく感じられる配色を画面に用いた場合，または活動性の低い配色を画面に用いた場合に操作時間は短くなると考えられる．正答数は評価性との正の相関関係が確認されたことから，操作者にとって好ましいと感じられる配色を用いた画面では，操作の正確性が高くなることが明らかとなった．
以上のように 4 章では 3 つの検証を通して，配色による画面全体の印象が直感的操作の速さ，正確性，操作者の画面に対する主観評価に及ぼす影響を明らかにするために実験を行った．その結果，画面に用いる配色の明度コントラストが低い場合は，迅速性と正確性，ユー
ザの主観評価の値がそれぞれ高くなった．反対に配色の明度コントラストが高い場合は，操作に要する時間は長く，正答数は少なくなり画面に対する主観評価の値は低くなった．色彩同士の強いコントラストは誘目性を高めるため，グラフィックデザインなどの分野では人の注意を引く目的で用いられる場合が多い．また活動性の高い配色は見る者に温かさや派手さを感じさせる．したがって，速やかに正確な操作をしなければならない状況は，コントラス
トが高く，派手さや温かさの感じられる配色ではなく，ある程度コントラストが低く，静的で冷たい印象の配色を用いた方がユーザは素早く正確な操作ができると考えられる．画面に対する主観評価の値は，操作の素早さと正確性との両方と相関関係にあることから，操作が素早く正確に遂行できた場合に「好ましい」と判断された可能性がある．以上のことから，素早く正確なタッチパネルの直感的操作が求められる情報端末の操作画面の配色には，配色に用いる色彩同士のコントラストを低く，また冷たさや落ち着きの感じられる配色を採用することが操作性とユーザの主観評価とに良い影響を及ぼすと考えられる．

53

5 画面に用いる配色の明度差と操作との関係
5.1 緒言2.4 節で述べたように色彩におけるコントラストは，配色の印象や目の疲労感に影響することが知られている．4 章では画面に用いる色彩同士の明度差，つまりコントラストが操作の速さ，正確性，操作者の画面に対する主観評価に影響する可能性があることがわかった．
そこでまず 5.2 節では配色を構成する色同士の明度の差（明度差）が操作に及ぼす影響の詳細を明らかにするために，それを定量的な値として定義する．次に 5.3 節では，画面の配色に用いる色彩の明度差が，タッチパネルの直感的操作の速さと正確性，画面に対するユーザの好感度評価に及ぼす影響を明らかにする．4 章で行われた検証の結果では，明度コントラ
ストの低い配色を用いた画面において，明度コントラストが高い画面よりも操作の速さ，正確性，画面に対する主観評価が優れていた．そのため画面に用いる配色の明度コントラスト
は操作の素早さと正確性，画面に対する主観評価にとくに影響を及ぼすパラメータなのではないかと考察された．本節ではその考察を明らかにするために，明度差をパラメータとした実験画面において被験者に簡単な操作課題を行ってもらい，各画面における操作時間，正確性，画面に対する好ましさを調査する．
視力や光刺激への反応の速さといったデバイス操作に重要な身体能力は， 2.6 節で述べたように操作者の年齢によって大きな差が生じやすいことが知られている．明度差の見え方
は，操作者の視力に影響を受けると考えられる．したがって，画面の配色から操作に受ける影響は，ユーザの年齢によって異なることが予想される．1.2 節の社会背景で述べたように，
電子デバイスのユーザは多様化していることから操作者の年齢による操作への影響を明らかにすることが重要であると考えられる．そこで 5.4 節では，画面の配色の明度差とタッチパネルの直感的操作との関係に，操作者の年齢が及ぼす影響について明らかにすることを試
みる．

5.2 画面に用いる色彩同士の明度差画面に用いる配色の明度差が，操作と操作者の画面に対する主観評価とに及ぼす影響を明らかにするために，本節では配色を構成する色彩同士の明度差を定義する．明度差の算出には各配色を構成する色彩のマンセル明度の値を用いた．配色を構成する色彩から 2 色を選ぶ
全ての組み合わせについて明度の差の絶対値を求め，その平均値を配色の明度差とした．この明度差を DBV（Dif f erent between Brightness of color V alue）と呼ぶことにする．

54

DBV は以下の式で定義される．

DBV =

n−1
!

n
!

(|bi − bj |)i=1 j=i+1

n C2

(1)

n は画面に用いられている色数を示す．bi ，bj は画面に用られている色のうち，i 番め j 番
めのものの明るさをそれぞれ表す．

2 色の組み合わせによる配色を例として，明度差の求め方について述べる．2 色の明度の値をそれぞれ 5.00 と 2.00 とする．その場合に 5.00 と 2.00 の差の絶対値，すなわち 3.00 を配色に用いた色の数で割り，1.50 という値が求められる．したがってこの配色の明度差はDBV =1.50 となる．
次に明度がそれぞれ 5.00，2.00，1.00 の値の 3 色で構成される配色に拡張すると，まず 3 色のうちから 2 色を選ぶ全ての組み合わせにおいて，差の絶対値を求める（|5.00-2.00|=3.00，|5.00-1.00|=4.00，|2.00-1.00|=1.00）．そしてそれらの合計を配色に用いた色彩の数で割ることによって得られた値（8.00 ÷ 3=2.66666…）を小数点 2 位以下を切り捨てて，この配色の明度差 DBV =2.66 とする．

5.3 画面に用いる配色の明度差が操作に及ぼす影響
5.3.1 実験目的
画面に用いる配色の明度差 DBV が操作の速さ，正確性，操作者の主観評価との関係を明らかにするために実験を実施する．実験では被験者に，異なる配色を施した複数の実験画面
において，直感的操作の課題に回答してもらい，それらの回答にかかった時間と正答数を計測する．被験者は課題回答後に各実験画面から受けた好感度について評価してもらう．そしてそれらの実験結果と，画面に用いた配色の明度差 DBV の値との因果関係を調査する．

5.3.2 実験方法
実験では 38 ページの図 21 に示す 12 の配色を 43 ページの図 24 の，インタフェースデザ
インの配色部分に配置し，12 条件を実験画面とした．実験全体の流れを図 33 に示す．被験者に操作方法や印象評価方法について説明した後，操作方法を理解してもらうために無彩色の操作画面を用いて練習をしてもらう．その後，アイマスクを着用して 2 分間の休憩をとり，条件 1〜条件 12 の操作画面を用いた操作をしてもらう．各条件ごとに 30 問回答した直
後，被験者にカラー印刷した操作画面の画像を提示しながら画面の好感度について評価してもらう．各条件の間には前の実験の配色の影響を軽減するためアイマスクを着用して 2 分間の休憩をとってもらう．
また，慣れや疲れなどの影響を軽減するため被験者ごとに実験条件の順番を次のように変

55

実験開始

実験内容の説明：5分

練習用画面でのタスクの練習：1分
アイマスクを着用し休憩：2分
実験画面での操作：1分
実験画面の印象評価：2分12条件の実験画面で操作し終えるまで繰り返す

アイマスクを着用し休憩：2分
実験終了：合計68分

図 33 実験の流れ

更する．1 番目の被験者には条件 1〜12 の順で試行してもらい，その後 2 番目の被験者は条件 2〜12，そして最後に条件 1 を試行するというようにローテーションさせる．そうすることで全員が異なる順序で実験を行うよう配慮する．被験者は色覚に異常のない大学生・大学
院生の男女 24 名である．

5.3.3 実験結果の分析および考察
図 34 に示すグラフは縦軸に明度差 DBV をとり，横軸に DBV に対応した条件の実験結果を示す．グラフの上部に位置するほど構成する色同士の DBV が大きい条件の結果を，下部に位置するほど DBV が小さい条件の結果を表す．グラフは左から，操作時間の平均値，正答数の平均値，好感度評価の平均値をそれぞれ表す．
まず DBV と正答数の平均値との関係に着目する．グラフからわかるように，DBV が大きい条件における正答数の平均値は低く，DBV が小さい条件における正答数の平均値は高い値を示した．DBV と正答数の平均値との間の相関係数は，r = −.74 であり高い負の相関があるといえる．とくに DBV が 3.00 以上である 4 つの条件（条件 7：フォーマル，条件

11：ゴージャス，条件 4：モダン，条件 12：ワイルド）の正答数では，高い値を示した条件 2（クールカジュアル），条件 10（シック）における値よりも，すべて有意に低い値となった．
次に DBV と好感度の平均値の関係に着目する．DBV が大きい条件における好感度は低い値となり，DBV が小さい条件における好感度は高い値を示した．相関係数は r = −.61となった．このことから操作の正確さや操作者が感じる好感度には，操作画面に用いられる

56

DBV

操作時間

好感度

正答数

フォーマル

4.00
ゴージャス

モダン

＊

ワイルド

3.00
カジュアル

クラシック＆ダンディ

2.00

クリア

＊

エレガント
クールカジュアル

1.00

シック
ロマンチック

1000

1010

1020

1030

1040

1050

1060

26.5

27.0

27.5

28.0

28.5

35

40

45

50

55

ナチュラル

60

[回]

[msec]

65[％]＊… モダン，ワイルド間およびクリア，エレガント，クールカジュアル間の明度差は等しい

図 34 画面の配色の明度差と操作時間，正答数，画面に対する好感度評価との関係

色彩の明度差が影響を与えている可能性があると推測できる．

DBV と操作時間の平均との関係に着目すると，正答数と好感度の平均と比較して顕著ではないものの DBV の大きな条件では，そうではない条件よりも操作に要する時間が長い傾向があるように読み取れる．DBV と操作時間の平均との相関係数は r = .51 となった．これは中程度の相関（説明率 26.01 ％）であり，この仮説についてはさらに実験を重ねて確認する必要がある．
このように配色を構成する色彩同士の明度差に着目した分析を行った結果，それらが操作の正確さや画面の印象評価に対して，影響を及ぼしていることがわかった．

5.4 画面に用いる配色の明度差と操作との関係に操作者の年齢が及ぼす
影響
5.4.1 実験目的
5.4 節では画面の配色に用いる色彩同士の明度差と，操作の速さ，正確性との関係に，操
作者の年齢が及ぼす影響を明らかにするために実験を実施する．実験では 5.2 節で定義した明度差を基準として，画面に配置する配色を変えた実験画面を作成し，年齢の異なる 2 群の被験者に，直感的操作の課題に回答してもらう．そして明度差の異なる各実験画面における，2 群の被験者の操作と速さ，正答数とを比較することによって，画面に用いる配色の明度差と操作と操作者の年齢との関係を調査する．

57

5.4.2 実験方法
実験には前章と同様に一桁同士の足し算を三択で回答するという簡単な課題を用いた．被験者は 3 つのボタンのうちから正しいと思われる答えのプッシュボタンにタッチする．1 問の制限時間を 1.5 [sec.] とし，各条件につき 30 問出題する．制限時間内に回答されなかった
場合，自動的に次の問題が出題される．回答に要した時間，正答数，誤答数，時間切れによる不正解数をそれぞれ計測する．
被験者は年齢層の異なる 2 つのグループとする．26 ページの図 14 のグラフに示すように，20 歳前後（A）を境に，人の視力と光刺激への反応の速さはともに下降および失速を始め，40 歳代以降（B）急激に衰える．そこで（A）の年代にあたる青年グループと（B）にあたる壮年グループが，画面に用いる配色によってどのような影響を受けるか実験によって明らかにすることを試みる．2 つの被験者グループは「青年グループ」（20〜23 歳の男女

10 名），「壮年グループ」（35〜43 歳の男女 10 名）とした．いずれの被験者も視覚に異常はない．
実験画面に用いる配色は，DBV を基準としてマンセル値によって決定した．DBV を

0.00〜4.00 の 5 段階とし，各 DBV の画面で配色そのものの明るさを light，medium，darkの 3 段階設け，その組み合わせによって 15 種類の実験画面を設定した．すべての条件を図35 に示す．
実験全体の流れを図 36 に示す．まず被験者に対して実験内容について説明し，同意を得る．次に練習用画面でタッチパネルでの回答の練習をしてもらう．アイマスクを着用し，2分間休憩したのち，15 条件の実験画面での操作を実施する．各条件での操作の間には，条件間の影響と目の疲労を軽減するために，アイマスクを着用し 2 分間の休憩をしてもらう．な
お実験条件の提示順は被験者ごとにランダムとした．

5.4.3 実験結果
青年グループの実験結果を図 37 にグラフで示す．まず図 37 左上の操作時間の平均値について述べる．条件 12（DBV =3.00, dark）の場合に最も操作時間が短く，条件 2（DBV =0.00, medium）の場合は時間を要した．ただし各条件同士で有意な差は確認されなかった．次に図 37 右上に示す正答数の平均値について述べる．条件 1（DBV =0.00,

light），15（DBV =4.00, dark）の場合に正答数が多く，条件 1 と条件 14（DBV =4.00,
medium），条件 15 と条件 7（DBV =2.00, light），条件 15 と条件 14 との間に t 検定による一対比較において有意傾向の差が確認された．次に図 37 左下に示す誤答数の平均値について述べる．条件 10（DBV =3.00, light）において誤答数が少なく，条件 7（DBV =2.00,

light）の場合に多かった．表 5 に誤答数の平均値において有意な差が確認された条件の組
み合わせを示す．青年グループでは条件 10 と，条件 7 をはじめとする他の多くの条件と

58

DBV = 0.00

DBV = 1.00

DBV = 2.00

DBV = 3.00

DBV = 4.00

light
条件1

条件4

条件7

条件10

条件13

条件5

条件8

条件11

条件14

条件6

条件9

条件12

条件15

medium
条件2

dark
条件3

図 35

明度差 DBV と配色の明るさを基準に決定した実験条件の間に有意な差が確認された．次に図 37 右下に示す時間切れ数の平均値について述べる．
条件 1（DBV =0.00, light）の時間切れ数は最も少なく，条件 4（DBV =1.00, light），9（DBV =2.00, dark）との間に有意傾向の差がみられた．
表5

誤答数において青年・壮年グループの各条件間で t 検定による有意な差が確認された組み合わせ青年グループ

壮年グループ

条件 13-1(p<.10)

条件 7-10(p<.05)

条件 1-8(p<.10)

条件 6-8(p<.10)

条件 1-10(p<.10)

条件 8-10(p<.10)

条件 1-10(p<.10)

条件 6-9(p<.10)

条件 2-10(p<.10)

条件 9-10(p<.05)

条件 1-11(p<.05)条件 6-11(p<.05)条件 3-10(p<.05)

条件 12-10(p<.10)

条件 1-13(p<.10)

条件 6-13(p<.10)

条件 6-10(p<.05)

条件 14-10(p<.01)

条件 1-15(p<.10)… 強い有意… 有意… 有意傾向壮年グループの実験結果を図 38 にグラフで示す．まず図 38 左上の操作時間の平均値について述べる．条件 5（DBV =1.00, medium）の場合に操作時間が短く，条件 2（DBV =0.00,

medium）の場合に時間を要した．ただし各条件同士で有意な差は確認されなかった．次に図 38 右上の正答数の平均値について述べる．条件 9（DBV =2.00, dark）の場合が最

59

実験開始

実験内容の説明：5分

練習用画面でのタスクの練習：1分
アイマスクを着用し休憩：2分
実験画面での操作：1分
アイマスクを着用し休憩：2分

15条件の実験画面で操作し終えるまで繰り返す

実験終了：合計53分

図 36 実験の流れも正答数が多く，条件 2（DBV =0.00, medium）の場合が最も低かったが，各条件間で有意な差は確認されなかった．次に図 38 左下の誤答数の平均値について述べる．条件 11（DBV =3.00, medium）の場合に誤答が少なく，条件 1（DBV =0.00, light）の場合に多かったが，各条件同士の有意な差は確認されなかった．表 5 の有意な差が確認された条件の組み合わせに着目すると，条件 8（DBV =2.00, medium），11（DBV =3.00, medium），13（DBV =4.00, light）などを用いた画面では，条件 1（DBV =0.00, light），6（DBV =1.00,

dark）などの画面よりも誤答数が少ないことがわかる．次に図 38 右下の時間切れ数の平均値について述べる．壮年グループは条件 5（DBV =1.00, medium）や条件 9（DBV =2.00,

dark）の場合に少なく，条件 2（DBV =0.00, medium）の場合に多かったが，各条件間で有意な差は確認されなかった．

5.4.4 画面に用いる配色の明度に着目した分析と考察
各条件の配色の明るさと実験結果との相関関係を分析した．各条件に用いた色彩の明度（マンセル値）の平均値を算出し，その配色の明るさとした．そしてそれらの値と実験結果との無相関検定を行った．各条件の配色の明度の平均値，つまり明るさと，正答数，操作時間，誤答数，時間切れ数との無相関検定の結果を付録 C の表 8，表 9 に示す．有意な相関関係がみられた，実験結果と配色の明度との組み合わせについて，図 37 と表 8 の A〜D，図38 と表 9 に A〜C とに示す．
青年グループは DBV =3.00 を用いた場合，配色の明るさと正答数の間に有意な負の相関（r = −1.00, p ≤ .01）が確認された（図 37-A）．加えて DBV =3.00 の配色は誤答数と60

青年グループ[msec]

操作時間

1100.00[times]

＊0.00

＊1.00

＊2.00

＊3.00

29.5

＊4.00

1080.00

29.0

1060.00

28.5

1040.00

28.0

1020.00

27.5

1000.00

27.0

980.0026.5

960.0026.0

940.0025.5

920.0025.0

900.00

24.5

1

3.0

2

3

4

5

6

7 8 9

10 11 1213 14 15

1

誤答数
＊0.00

2.5

＊0.00

＊1.00

＊3.00

＊2.00

A

p = 0.00 強い有意r = 1.00 強い正相関

＊4.00

24.0

880.00[times]

正答数[times]

B

＊1.00

＊2.00

p = 0.04 有意
r = -0.99 強い負相関

＊3.00

C

3.5

＊4.00

2

3

4

5

6

7

8

9

10 11 1213 14 15

時間切れ数
＊0.00

＊1.00

＊3.00

＊2.00

D

＊4.00

3.0

p = 0.03 有意
r = -0.99 強い負相関

2.5

p = 0.04 有意
r = 0.99 強い正相関

2.0

2.0
1.5

1.5
1.0

.01

0.5

0.5

0.0

0.0

1

2

3

4

5

6

7 8 9

10 11 121

13 14 15

2 3

4

5

6

7

8

9

10 11 1213 14 15

: .05< p < .10

図 37

青年グループの操作と画面の配色の DBV との関係

配色の明るさとの間に負の相関（r = −0.99, .01 < p ≤ .05）と，時間切れ数と配色の明るさとの間に正の相関（r = 0.99, .01 < p ≤ .05）が確認された（図 37-C, D）．したがって

DBV =3.00 の配色の場合，配色全体の明度の低下に伴って正答数は下がり，それは誤答数の増加によるものであることがわかる．

壮年グループは，DBV =3.00 の場合に配色の明るさと時間切れ数との間に強い有意の正の相関関係（r = 1.00, p ≤ .01）がみられた（図 38-C）．しかし DBV =3.00 の場合の壮年の正答数の平均値は，配色の明るさとの相関関係はみられない．同様に操作時間（図 38-A）と誤答数とにみられた有意な相関関係（図 38-B）も，正答数と照らし合わせた結果，それ61

壮年グループ[msec]

操作時間

1100.00[times]

＊0.00

＊1.00

＊2.00

A

＊3.00

29.5

＊4.00

p = 0.08 有意傾向r = 0.99 強い正相関1060.00

＊1.00

＊2.00

＊3.00

＊4.00

10 11 1213 14 1528.5

1040.00

28.0

1020.00

27.5

1000.00

27.0

980.0026.5

960.0026.0

940.0025.5

920.0025.0

900.0024.5
24.0

880.00

1

3.0

＊0.00

29.0

1080.00[times]

正答数

2

3

4

5

6

7

8

9

10 11 1213 14 15

1

誤答数

[times]

＊0.00

＊1.00

＊3.00

＊2.00

＊4.00 B

3.5

2

3

4

5

6

7

8 9

時間切れ数
＊0.00

＊1.00

3.0

2.5

＊3.00

＊2.00

C

＊4.00

p = 0.00 強い有意r = 1.00 強い正相関

2.5
2.0

p = 0.05 有意傾向
r = -0.99 強い負相関

2.0

1.5

1.5
1.0

.01

0.5

0.5

0.0

0.0

1

2

3

4

5

6

図 38

7

8

9

10 11 1213 14 15

1 2

3

4 5

6

7

8 9

10 11 1213 14 15

壮年グループの操作と画面の配色の DBV との関係

らとの因果関係は認められなかった．

5.4.5 二元分散分析による分析と考察
次に実験結果と DBV との関係に，操作者の年齢が及ぼす影響について分析した．画面のDBV と操作の速さ正答数および被験者の年齢との関係を，二元分散分析によって分析した結果を図 39 に示す．このグラフでは，DBV =0.00 の場合とそれ以外の DBV =1.00〜4.00の実験結果とを比較している．また表 6 には二元分散分析による分析のために，操作時間を離散化した値を示す．図 39 上段の操作時間の結果においては，DBV =1.00〜4.00 の条件の場合はすべて，DBV =0.00 の場合より小さい値（速く）なっている．ただし青年，壮年グ

62

1100
1150
1200
1250
1300

図 39

df=1
F=0.0124.5

df=1
F=0.053

青年

28.0

壮年

27.5

27.5

青年

DBV=0.00
DBV=4.00

3.0

3.5
3.0

青年

DBV=0.00
DBV=3.00

df=1
F=0.622

26.5

26.5

壮年

27.0

DBV=0.00
DBV=2.00

df=1
F=2.854

DBV=0.00 vs DBV=4.00

4.0

DBV=0.00
DBV=3.00

壮年

27.5

青年

27.0

27.5
27.0
26.5

壮年

6
7
8
9
10

28.0

青年

28.0

壮年

DBV=0.00
DBV=1.00

df=1
F=0.957

X

DBV=0.00 vs DBV=3.00

4.0

4.0

df=1
F=0.093

1150
1200
1250
1300
1350

4.5

DBV=0.00
DBV=2.00

t
t
t
t
t

3.5

0
1
2
3
4
5

3.0

3.5

青年

28.0

壮年

正
答
数

操作時間の平均

X

3.5

4.0

df=1
F=0.091

3.0

操
作
時
間

DBV=0.00
DBV=1.00

850
900
950
1000
1050
1100

DBV=0.00 vs DBV=2.00
4.5

4.5

DBV=0.00 vs DBV=1.00

t
t
t
t
t
t

壮年

青年

27.0

操作時間の平均

800
850
900
950
1000
1050

操作時間の離散化

DBV=0.00
DBV=4.00

df=1
F=0.364

26.5

表6

壮年

青年

明度差 DBV と操作との関係に操作者の年齢が及ぼす影響

ループの差はどの DBV 値においても概ね同程度であった．
次 に 同 図 下 段 の DBV =0.00 と DBV =1.00〜4.00 の 正 答 数 と の 比 較 に 着 目 す る ．

DBV =0.00 の場合，壮年グループの方が一様に低下しているのに対し，他の DBV 値では低下の具合が緩やかになっている．とくに DBV =2.00 においては，青年グループよりも壮年グループの方が正答数が高くなっていることがわかる．DBV =0.00 と DBV =2.00の画面の正答数を二元分散分析で比較した結果，これらの間には有意傾向の差が確認された（F = 2.854, p ≤ 0.10），したがって DBV =2.00 を用いた画面では，DBV =0.00の配色を用いた画面と比較して操作者の年齢が配色と正答数との関係に強く影響を及ぼしているといえる．DBV =0.00 と DBV =1.00 とを比較した場合には，有意な差とはいえないが（F = 0.957, p ≥ 0.10）同様の傾向がみられた．DBV =3.00 と DBV =0.00 とを比較した場合（F = 0.622, p ≥ 0.10），DBV =4.00 と DBV =0.00 とを比較した場合は（F = 0.364, p ≥ 0.10）有意な差は確認されず，配色と正答数との関係に操作者の年齢が及ぼす影響は，DBV =1.00，DBV =2.00 よりは弱いといえる．これは DBV =3.00 と63

DBV =4.00 の明度差の大きな配色の画面では，視力や光刺激への反応の速さの低下した壮年グループの被験者にとって，操作がしにくかったのではないかと推測される．一方で反対に青年グループの被験者は，DBV =1.00 と DBV =2.00 の配色の画面では正答数が低くなる傾向がみられる．

DBV =2.00 の配色を用いた画面では，青年グループよりも壮年グループの正確性が高くなる傾向がみられたことから，壮年ユーザの操作の正確性によい影響を及ぼす可能性がある．また DBV =1.00 の配色を用いた場合は，世代の異なるユーザ間の操作の正確性の差は小さくなるが，同時に両方の年代のユーザともに高い正確性を期待することができないと考えられる．

5.5 結論5 章では，タッチパネルの直感的操作において，画面の配色の明度差が操作に及ぼす影響について明らかにするために検証を行った．まず画面に用いる配色の明度差が操作に及ぼす影響を分析するため，明度差を DBV として定量的に定義した．そして画面に用いた配色の明度差と，操作の速さ，正確性，操作者の画面に対する好感度評価との関係を明らかにするために実験を行った．実験では異なる印象の配色を施した実験画面において被験者に直感的操作の課題に回答してもらい，画面から受ける好感度を評価してもらった．その結果，操作が素早く正確で，好感度評価が高かった画面は，配色の明度差が低いことか明らかとなった．
次に画面の配色の明度差と操作との関係に年齢が及ぼす影響を明らかにすることを試みた．実験では配色の明度差 DBV と明度をパラメータとして，15 条件の実験画面を用意した．そしてそれらの画面で，一桁同士の足し算の三択問題を被験者に回答してもらい，操作
時間，正答数，誤答数，時間切れによる不正解数を計測した．
その結果，青年グループは DBV =0.00 の明度の高い配色と，DBV =4.00 の明度の低い配色を用いた画面で正答数が多くなった．また DBV =3.00 の配色を用いた場合は配色が明るくなるほどが正答数が多くなり，誤りが少なくなる傾向があることがわかった．さらに二元分散分析によって DBV =0.00 の実験結果と，DBV =1.00〜4.00 の実験結果を比較した．
その結果，操作の素早さは年齢による影響を受けなかったが，正答数において DBV =1.00，

2.00 の配色を用いた場合は年齢による影響が見られ，青年グループと壮年グループの正答数の差が小さくなる傾向があることが明らかとなった．とくに DBV =2.00 を用いた場合には青年グループの操作の正確性を壮年グループのそれが上回る可能性があることがわかった．
これらの結果から，画面の配色に用いる色彩同士の明度差と操作との関係は，操作者の年齢による影響を受けることが明らかとなった．DBV =2.00 の明度差の低い配色を用いた場
合には，壮年ユーザの操作の正確性を支援できる可能性があることから，壮年ユーザに多く利用され，かつ正確性を必要とするキャッシュサービスなどのインタフェースへの応用が期64

待できる．そして DBV =3.00 のやや高い明度差で，かつ明度の高い配色を画面に応用することによって，青年ユーザは誤答の少ない操作が可能であると考えられる．したがって青年
ユーザ向けのサービスのインタフェースへの応用が期待できる．

65

6 結言
6.1 総括研究全体の総括について述べる．本稿では電子デバイスの操作画面に用いる色彩が，操作者に及ぼす影響を明らかにするために，以下の 3 点について検証すると 1 章で述べた．

• プッシュボタンの色と直感的操作の速さおよび正確性との関係• 配色による画面全体の印象と，直感的操作の速さと正確性，操作者の画面に対する主観評価との関係• 配色による画面全体の印象と，直感的操作との関係に操作者の年齢が及ぼす影響
まず，プッシュボタンの色が直感的操作の速さと正確性に及ぼす影響を明らかにするために検証を行った結果，ボタンに青色を用いた場合に，無彩色や赤色を用いた場合よりも操作は素早く正確になった．また同様の実験画面に背景色を設定した検証の結果，青色のプッ
シュボタンに対して，背景にその補色である暗い赤色を用いた場合に操作はとくに素早くなった．これらの結果から，同じ課題の操作であっても，その速さや正確性はプッシュボタンに用いる色彩の影響を受けることが明らかになった．2 つの検証を通して，プッシュボタ
ンに青色を用いた場合に操作が素早く正確になる傾向がみられたことについては，色彩心理学上，冷静さや理性的な印象を感じさせる青色が素早く正確な直感的操作に良い影響を及ぼした可能性がある．ボタンの色と背景色との関係を検証した結果に関しては，青色の心理的影響に加えて，背景の補色によってプッシュボタンの青色が際立ち，視認性が向上したことによって，正答を素早く選択できたのではないかと推測される．
次に配色による画面全体の印象が，直感的操作の速さと正確性に及ぼす影響を明らかにするために実験を行った．その結果，構成色同士の明度差が低い配色を用いた場合に，直感的操作の迅速性，正確性，操作者の画面に対する主観評価が高くなることがわかった．また寒色系の配色を用いた場合に，暖色系のものを用いた場合よりも操作は素早く正確になり，操
作者は画面を好ましいと感じやすかった．寒色，すなわち青系統の配色を用いることが操作の迅速性に良い影響を及ぼすことは，プッシュボタンの色と操作との関係の検証した 3 章の実験結果と一致する．これは寒色の色彩から受ける静的な印象が，素早く正確な直感的操作を行う状況の操作者の心理に良い影響を及ぼしたのではないかと推測される．
続いて配色による画面全体の印象と直感的操作との関係に，操作者の年齢が及ぼす影響を明らかにすることを試みた．配色の構成色同士の明度差と操作との関係に，年齢が及ぼす影響を明らかにするために実験を行った．その結果，明度差の値が 3.00 の配色で，かつ配色
自体の明度が明るくなるほど，青年ユーザの操作の正確性が向上する可能性があることがわ
かった．また操作の速さは年齢による影響を受けにくいが，正確性は影響を受けやすいこと

66

がわかった．なかでも画面に明度差の値が 2.00 の配色を用いた場合には，青年の被験者よ
りも壮年の被験者の正答数が高くなった．したがって明度差の値が 2.00 の配色の画面では，壮年ユーザの操作の正確性を高める可能性があることが明らかになった．
これらの結果から，直感的なデバイス操作の素早さと正確性はプッシュボタンの色に影響を受けることが明らかになった．なかでも青色を用いた場合は，赤や無彩色を用いるよりも操作の素早さと正確性が向上する可能性がある．そして画面の色彩設計の構成色同士の明度
コントラストを低くし，寒色系の色彩を採用することによって，操作の迅速性，正確性と操作者の画面全体の印象への主観評価は高くなる可能性があることがわかった．したがって，これらの成果を金融機関の ATM や交通機関の券売機などの操作画面の色彩設計に応用することによって，そうではないデザインを用いる場合よりも，操作者は素早く正確に直感的操作ができ，画面に対して好ましい評価することが期待できる．また操作の正確性は配色の明度差による影響を受けやすく，青年ユーザに多く利用される画面には明度差の値が 3.00 の明るい配色を用い，壮年ユーザに利用される場合には明度差の値が 2.00 の配色を用いた場
合に，そうではない配色の画面よりも操作は正確になる可能性がある．以上の結果をインタ
フェースの色彩設計に応用することによって，操作者の年齢層（青年，壮年）に応じた操作の正確性と素早さに優れ，操作者に好ましいと感じられやすい操作画面の色彩設計が可能であると考えられる．
本稿では操作対象であるプッシュボタンに用いる色彩だけではなく，操作には直接関係の無いように思われがちであった，装飾としての配色を含めた画面全体の印象が操作に及ぼす影響を検証した．その結果，背景の一部に異なる配色を施すことによって，操作者の受ける
画面への印象が変化するだけではなく，操作の速さや正確性に有意な差が生じることがわ
かった．また配色による画面の印象が好ましい場合，操作の迅速性，正確性も高くなることを明らかにした．プッシュボタンに青色を用い，加えてそれ以外の背景などに明度差の低い
寒色系の配色を用いることによって，操作の素早さ，正確性，画面から受ける好ましさを高めることが期待できる．
一般的に操作画面の色彩設計は提供されるサービスの内容や，提供者のコーポレートカ
ラーなどに基づいて決定される．またそれらの色彩設計はデザイナーの経験則に基づくことが多く，操作性との因果関係も明らかにされていなかった．本稿では画面に用いる色彩と操
作との関係を被験者実験によって検証することによって，色彩と直感的操作の速さと正確性，画面の印象との関係を明らかにした．そして画面の色彩設計において，操作性と画面の印象に大きな影響を及ぼすパラメータである明度差 DBV と操作との関係を定量的に明らかにした．これらの結果を操作画面の色彩設計に応用することによって，高い操作性とユーザの画面に対する主観評価とを兼ね備えた操作画面の色彩設計が期待できると考える．

67

6.2 今後の展望
本研究の今後の展望ついて述べる．
まず，想定する操作状況やユーザにより合致する色彩設計のインタフェースデザインを提供するために，明度差以外のパラメータと操作との関係を明らかにすることが挙げられる．
本研究を通して，配色の明度差は操作の速さや正確性，操作者の画面に対する主観評価への影響が大きいことが明らかになった．2.3.4 項で述べたように，マンセル表色系における色彩の心理的三属性は，明度の他に彩度と色相とがある．本研究の結果に加え，これらのパラ
メータと操作との関係を明らかにすることによって，操作性とユーザに与える印象との根拠を有した画面の色彩設計が可能になると考えられる．
次に研究の対象とする操作者の年齢層を拡張することが挙げられる．本稿ではタッチパネ
ル端末の中心的な利用者層である青年，壮年のユーザを対象とした．しかし，近年ではタッ
チパネル端末が小学生児童の教育現場に導入が試みられるなど，ユーザの年齢はますます広範囲に及んでいる．そこで青少年や高齢者の操作と画面の色彩との関係を明らかにし，本稿の結果と統合することによって，より操作者の年齢に適した操作画面の色彩設計の方策を明らかにできると考えられる．
最後に，素早さと高い正確性とが求められる以外の操作目的に応じた色彩設計を明らかにすることが挙げられる．本稿では素早く正確な直感的操作と，画面に用いる色彩との関係との関係を明らかにすることを試みた．しかしながら，タッチパネル端末はさまざなサービスの提供に利用されているため，その操作は必ずしも正確性やスピードが求められる場合にだ
けにとどまらないと考えられる．たとえば，操作に時間がかかっても誤りなく操作することができたり，長い時間操作しても集中力が持続しやすいなど，さまざまな状況に適した配色を明らかにすることによって，多様な目的に応じた画面の色彩設計が可能になることが期待
できる．

68

付録 A

3 章の実験課題の出題一覧

3 章のプッシュボタンの色と直感的操作との関係を明らかにするために行った実験で，課題として用いた英単語の三択問題の出題一覧を表 7 に示す．実験では大学生を被験者とした
ため，感覚的操作が可能であるよう中学校 1〜2 年程度で学習する簡単な英単語の日本語訳を回答する課題とした．選択肢の種類は正解，不正解，「わからない」の 3 つである．「わからない」は正解がわからない場合に選択するよう指示した．

69

表7

プッシュボタンの色が操作に及ぼす影響を検証した実験で用いた三択問題一覧

正解

70

不正解

わからない

付録 B

操作画面の印象評価手法

VAS（Visual Analogue Scale）は無尺度の SD 法である [30]．この手法ではまず，100mmの直線を挟んだ両端に，評価軸となる語句とその反対語を配置する．被験者は評価対象に対し，自身が感じる印象の強さに応じて直線上に垂直線で印を付けて評価する．
たとえば，画面に対して好感がもてるかどうかを評価する場合，VAS は図 40 のように作成する．100mm の直線軸上で「好感がもてる」寄りの最も端に印をつけた場合は「好感度」
は 100 点とする．一方「好感がもてない」寄りの端に印をつけた場合は 0 点とする．これによって得られた被験者の得点の平均値を各条件の評価値とする．
対象から受けた印象の強さに該当する位置に線で印を付ける

図 40 Visual Analogue Scale

本稿では順序による影響を軽減するため，左右の語句の位置をランダムに変えて被験者に提示した．また 4.4 節で 1 つの実験画面につき 6 項目の主観評価を行った場合には，各画面での評価ごとに項目の順番をランダムに変えて提示した．VAS は本来医療現場で患者の感じる，身体的または精神的な痛みを計測するために用いられていたが，近年では色彩の印象を評価する手法としても用いられている．

71

付録 C

青年，壮年グループの操作と，画面に用いる配色の明度との無相関関係

画面に用いる配色の明度差と操作との関係に操作者の年齢が及ぼす影響を明らかにするために 5.4.4 項で行った実験の結果を，配色の明るさと操作との関係に着目して分析した．各
配色の明度の平均値をその配色の明るさとし，実験結果とを無相関検定によって分析した結果，表 8 の A〜D，表 9 の A〜C に示す通りの有意な相関関係が明らかとなった．

表 8 青年グループの実験結果と画面の配色の明るさとの無相関検定の結果
青年グループ
DBV

条件

配色1

明度差 0.00
明度差 0.00
明度差 0.00

条件 2
条件 3
条件 4

9.75
5.00
1.00

明度差 1.00
明度差 1.00
明度差 1.00
明度差 2.00
明度差 2.00
明度差 2.00
明度差 3.00
明度差 3.00
明度差 3.00

明度差 4.00
明度差 4.00
明度差 4.00

条件 5
条件 6
条件 7

条件 8
条件 9
条件 10
条件 11
条件 12
条件 13

条件 14
条件 15
条件 16

9.50
6.00
2.50

9.50
6.75
4.00
9.50
7.50
5.50
9.50
8.25
7.00

配色2

8.75
5.25
1.75

8.00
5.25
2.50
7.25
5.25
3.25

6.50
5.25
4.00

配色3

8.00
4.50
1.00
6.00
3.75
1.00
5.00
3.00
1.00
3.50
2.25
1.00

平均値

正答数

相関係数 rp値

操作時間 相関係数 r

p値

誤答数

相関係数 r

p値

9.75
5.00
1.00

28.3
27.5
27.5

0.89

0.29

966.511003.73981.23

-0.45

0.70

1.2
1.5
1.8

-0.99

0.04

-0.24

0.84

0.13

0.91

0.65

0.54

0.17

0.88

-0.94

0.22

0.85

0.34

1.00

A 965.14
979.000.00
982.57

0.34

0.77

-0.58

0.60

0.01

0.99

8.75
5.25
1.75
7.83
5.25
2.50
7.25
5.25
3.25

6.50
5.25
4.00

27.3
27.7
27.4
27.1
27.6
27.0
28.2
27.9
27.6

27.7
27.2
28.4

981.06992.48979.12965.14979.00982.57

978.02967.88977.89

1.8
1.5
1.6
2.2
1.7
1.7
0.5
1.1
1.6
1.7
1.7
1.2

-0.99

0.03

0.86

0.33

時間切れ数 相関係数 r

B

0.7
1.7
1.3

1.6
1.3
1.4

C

1.1
1.7
1.9

1.8
1.4
0.9
1.0
0.8
0.9

p値

-0.64

0.55

0.65

0.54

-0.95

0.19

0.99

0.04

0.50

0.66

D

表 9 壮年グループの実験結果と画面の配色の明るさとの無相関検定の結果
壮年グループ
DBV

条件

配色1

明度差 0.00
明度差 0.00
明度差 0.00

条件 2
条件 3
条件 4

9.75
5.00
1.00

明度差 1.00
明度差 1.00
明度差 1.00
明度差 2.00
明度差 2.00
明度差 2.00
明度差 3.00
明度差 3.00
明度差 3.00

明度差 4.00
明度差 4.00
明度差 4.00

条件 5
条件 6
条件 7

条件 8
条件 9
条件 10
条件 11
条件 12
条件 13

条件 14
条件 15
条件 16

9.50
6.00
2.50

9.50
6.75
4.00
9.50
7.50
5.50
9.50
8.25
7.00

配色2

8.75
5.25
1.75
8.00
5.25
2.50
7.25
5.25
3.25

6.50
5.25
4.00

配色3

8.00
4.50
1.00
6.00
3.75
1.00
5.00
3.00
1.00
3.50
2.25
1.00

平均値

正答数

相関係数 rp値

操作時間 相関係数 r

p値

誤答数

相関係数 r

p値

9.75
5.00
1.00

27.0
26.3
27.0

0.06

0.95

1043.961063.481032.84

0.29

0.80

1.5
1.0
1.2

0.64

0.55

0.35

0.77

0.66

0.53

-0.59

0.59

8.75
5.25
1.75
7.83
5.25
2.50
7.25
5.25
3.25

6.50
5.25
4.00

27.3
28.2
26.8

26.9
28.2
28.4
27.2
27.8
27.9
27.5
27.2
27.2

-0.91

0.26

-0.92

0.24

0.86

0.33

72

1056.961013.24
1027.191036.111023.421014.95

1044.29
1049.41022.491045.66
1032.111032.47

0.99

0.08

0.76

0.44

0.85

0.34

A

1.1
0.9
1.4
1.3
0.7
0.7
0.7
0.5
0.9
0.6
0.9
1.3

0.85

0.34

-0.50

0.66

-0.99

0.05

時間切れ数 相関係数 r
1.6
2.8
1.7
1.5
0.9
1.8
1.8
1.1
0.9
2.1
1.7
1.3

B

1.5
2.0
1.6

p値

-0.13

0.91

-0.32

0.78

0.94

0.20

1.00

0.00

-0.18

0.87

C

謝辞
本研究は筆者が室蘭工業大学大学院工学研究科に在籍していた 2009 年から現在に至るまで，室蘭工業大学大学院工学研究科の須藤秀紹准教授のもとで進めてきた研究をまとめたものです．須藤秀紹准教授には，研究者としての考え方から論旨の組み立て方，文章表現に至るまで，大変お忙しいにも関わらず誠に丁寧にご指導をいただきました．須藤先生は専門外から快く筆者を学生として受け入れ，研究者としての道をひらいてくださいました．また先
生ご自身の姿勢から，人やものごとと誠実に関わることの大切さを示してくださいました．
ここに深く感謝の意を表す次第です．
室蘭工業大学大学院工学研究科の佐賀聡人教授ならびに畑中雅彦教授には，本研究に対して真摯で有益なご意見を頂き，本稿の執筆を導いていただきました．大変お忙しいにも関わらず，惜しみないご指導を賜りましたことを深く感謝を申し上げます．
また室蘭工業大学の諸先生方，教職員の皆様には本研究の遂行にあたって多くのご支援を賜りました．とくに OB の澤井政宏氏，筆者の在学時に室蘭工業大学 SVBL でお世話になった教職員の皆様，筆者が在籍したシステムデザイン論研究室の皆様には，実験遂行や分析にご助力いただき，多くの有益なご意見をいただきました．ここに深く感謝を申し上げます．
筆者が 2003 年〜2006 年の間に在学し，また 2006 年〜2009 年の間に教務補助員として所属した，秋田公立美術工芸短期大学（現秋田公立美術大学）の諸先生方には，在籍期間中の制作・研究活動についてご理解をいただき，多くのご支援，ご助力を賜りました．とくに樋田豊次郎教授，五十嵐潤教授，渡邉有一教授，澤田享教授，野村松信教授には，筆者が進学を目指すにあたってさまざまなご相談をさせていただき，惜しみないご助力を賜りました．
深く感謝を申し上げます．また筆者が学生として在籍していた期間に，2004 年〜2006 年の間に指導くださった北海道教育大学教育学部の小北麻記子准教授には，制作指導を通して，他者と関わり，美しいものを生み出すことの価値を教えていただきました．小北先生と過ごした日々がなければ，工学の分野へ進学する道はありませんでした．ここに深く感謝を申し上げます．
また筆者が現在所属している岐阜市立女子短期大学の村上眞知子生活デザイン学科長をはじめとする諸先生方には，本研究の遂行をご理解いただくとともに，社会人学生としての日々を支えていただきました．ここに深く感謝申し上げます．
最後に，筆者の進路の選択を受け入れ，精神面，経済面から支え続けてくれた父，母をはじめ家族の皆に深く感謝します．ありがとう．

73

参考文献
[1] Jenifer Tidwell: デザイニング・インタフェース パターンによる実践的インタラクショ
ンデザイン; オライリー・ジャパン (2011).

[2] 中川聰: グラフィックデザイナーのためのユニバーサルデザイン実践テクニック ; ワー
クスコーポレーション (2011).

[3] 川西裕幸, 栗山進, 潮田浩: UX デザイン入門〜ソフトウェア&サービスのユーザエクス
ペリエンスを実現するプロセスと手法〜; 日経 BP 社 (2012).

[4] J.J. ギブソン, 古崎敬, 古崎愛子, 辻敬一郎, 村瀬旻 : 生態学的視覚論-ヒトの知覚世界を探る; サイエンス社 (1986).

[5] 野村順一: 増補 色の秘密 最新色彩学入門; 文藝春秋 (1994).
[6] 魅力工学研究フォーラム編: 魅力工学; 海文堂出版 (1992).
[7] ドナルド・A. ノーマン, 岡本明, 安村通晃, 伊賀総一郎, 上野晶子: エモーショナル・デ
ザイン 微笑を誘うモノ たちのために; 新曜社 (2004).

[8] C&C 振興財団 (編), アクセシビリティ研究会 (著): 情報アクセシビリティとユニバー
サルデザイン; ASCII (2003).

[9] 中川聰: グラフィックデザイナーのためのユニバーサルデザイン実践テクニック 51;
ワークスコーポレーション (2011).

[10] 木村忠正: デジタルデバイドとは何か コンセンサス・コミュニティをめざして; 岩波
書店 (2001).

[11] SE 編集部（編）: Web デザインフォーラム 10 人のプロが教える原則と経験則; 株式会社翔泳社 (2011).

[12] 佐藤和文: IT シニアが社会を変える : デジタルデバイドの克服を目指して; 情報処理学会研究報告.IM, [情報メディア] , pp. 57-64 (2001).

[13] 前田優作, 辻村恵里子, 杉田薫, 岡哲資, 横田将生: ユニバーサルマルチメディアアクセ
スのためのユーザインタフェース; 電子情報通信学会技術研究報告. KBSE, 知能ソフト
ウェア工学 108(326), pp.71-76 (2008).

[14] 槙究, 田中奈苗, 留目真由香: 読みやすさと配色の良さの両立ー文字色と背景色の組み合わせの評価ー; 日本色彩学会誌 29(1), pp.2-13 (2005).

[15] 冨田圭子, 吉田真奈, 饗庭照美, 松井元子, 大谷貴美子: 供食用トレイの色が喫食者の心理に与える影響; 日本色彩学会誌 第 32 巻 SUPPLEMENT, pp.58-59 (2008).

[16] 村田淳, 宮腰直幸: 天板の色彩が作業者の疲労感に与える影響ー自覚症状調べを用いた疲労感測定による検証; 日本建築学会大会学術講演梗概集, pp.103-104 (2007).

[17] 海保博之, 原田悦子, 黒須正明: 認知的インタフェース コンピュータとの知的つきあい
74

方; 新曜社 (1991).

[18] 山中俊夫: 色彩学の基礎; 文化書房博文社 (1997).
[19] 伊達千代: デザインのルール、レイアウトのセオリー。; エムディエヌコーポレーショ
ン (2010).

[20] 大里浩二（監）. フレア（編）: すべての人に知っておいてほしい配色の基本原則; エム
ディエヌコーポレーション (2012).

[21] 小林重順（著）, 日本カラーデザイン研究所（編）: カラーシステム; 講談社 (2001).
[22] 小林重順（著）, 日本カラーデザイン研究所（編）: カラーイメージスケール 改訂版;
講談社 (1999).

[23] 越石健司, 黒沢理: 要点解説タッチパネル; 工業調査会 (2009).
[24] ユニバーサルデザイン研究会編: ユニバーサルデザイン：超高齢社会に向けたモノづく
り; 日本工業出版社 (2003).

[25] C.T.Morgan 他（著）, 近藤武他（訳）: 人間工学データブック : 機器設計の人間工学
指針; コロナ社 (1972).

[26] 岡村一成, 黒沢洋一, 児玉斉二, Danny D. Stein berg, 土屋明夫, 馬場房子, 馬場昌雄:
新盤 行動の科学ー心理学ー; 東京教学社 (1978).

[27] 石村貞夫, 石村光資郎: 入門はじめての分散分析と多重比較; 東京図書 (2008).
[28] 石村貞夫: 入門はじめての統計解析; 東京図書 (2006).
[29] 仲川薫, 須田亨, 善方日出夫, 松本啓太: ウェブサイト ユーザビリティアンケート評
価手法の開発; ヒューマン インターフェースシンポジウム 2001 予稿集, pp.421- 424(2001).
[30] 山際幹和: visual analogue scale を座右に置き; 東京医学社 JOHNS Vol.25 No.9
pp.1433-1435 (2009).

75

著者発表文献リスト
学会誌等• 須藤秀紹, 坂本牧葉,

操作パネルの色彩が操作者に与える影響”, 日本感性工学会論文集, vol. 9 no. 1, pp. 19-23, 2009.

• Makiba Sakamoto, Hidetsugu Suto, Masahiro Sawai,

Relation between impres-sions of a touch panels’ coloration and operation”, Artificial Life and Robotics,
vol. 15, No. 3, pp. 335-340, 2010.

• 坂本牧葉, 須藤秀紹, 澤井政宏,

画面上の色彩装飾の位置が印象に与える影響”, 岐阜

市立女子短期大学研究紀要第 61 輯, pp. 123-126, 2012.

• 坂本牧葉, 須藤秀紹,

タッチパネルインタフェースの色彩デザインの印象と操作時

間及び正確性との関係”, 日本感性工学会論文集 Vol. 10, No. 4, pp. 543-550, 2011.

• 坂本牧葉, 須藤秀紹, 澤井政宏,

タッチパネル式インタフェースの色彩構成の印象と操作の速度および正確性との関係”, ヒューマンインタフェース学会論文集, vol. 14,

No. 4, pp. 457-466, 2012.
• 坂本牧葉, 須藤秀紹,

ユーザの年齢の違いがタッチ画面の色彩デザインと操作との関係に及ぼす影響”, 岐阜市立女子短期大学研究紀要第 62 輯, pp.137-142, 2013.

国際会議• H. Suto, M. Sakamoto and M. Okita,

Affect of color of interface on accuracy

and speed of operations”, Proc. 2009 International Conference on Biometrics andKansei Engineering, pp. 201-204, 2009.

• M. Sakamoto, H. Suto and M. Sawai,

Relation between impression of touch

panels’ coloration and operation”, Proc. Fifteenth International Symposium on
ARTIFICAL LIFE AND ROBOTICS, pp. 537-540, 2010.

• Mayuko NAMBU, Makiba SAKAMOTO and Hidetsugu SUTO,

Influences ofcoloration of touch panel interface on the several generation operators”, Proc.
SICE Annual Conference 2011, pp. 202-205, 2011.

• Hidetsugu Suto and Makiba Sakamoto, Effect of coloration of touch panel interface on wider generation operators”, Proc. ICWN/ICOMP’ 2012, 2012 (printing).

76

口頭発表
• 坂本牧葉, 須藤秀紹, 小北麻記子,

操作パネルの色彩が操作者に与える影響の分析”,• 鎌田寛之, 坂本牧葉, 須藤秀紹,

色彩の配色が操作の正確性や反応時間に与える影響

第 10 回日本感性工学会大会予稿集, CD-ROM, 2008.
の検証”, 第 1 回生命ソフトウェア部会研究会 講演論文集, pp. 21-22, 2008.

• 須藤秀紹, 鎌田寛之, 坂本牧葉, 小北麻記子,

インタフェースの配色が操作の正確性に与える影響”, 第 5 回日本感性工学会春季大会予稿集, CD-ROM, 2009.

• 坂本牧葉, 佐藤哲, 澤井政宏, 若槻淳一朗, 須藤秀紹, 小北麻記子,

操作パネルの色彩が操作の速度や正確性に与える影響の分析”, ヒューマンインタフェースシンポジウ
ム 2009 論文集, pp. 563-568, 2009.

• 坂本牧葉, 須藤秀紹, 澤井政宏,

タッチパネルインタフェースの色彩から受ける印象

が操作に及ぼす影響の検証”, 日本色彩学会誌 vol. 34 supplement 2010, pp. 12-13,

2010.
• 坂本牧葉, 須藤秀紹, 澤井政宏,

画面上の色彩装飾の位置が印象に与える影響”, 生命• 南部真友子, 坂本牧葉, 須藤秀紹,

タッチ画面の配色が操作者に与える影響と操作性

ソフトウェアシンポジウム 2011 講演論文集, pp. 64-67, 2011.

との関係”, 第 6 回日本感性工学会春季大会プログラム, CD-ROM(11D-01), 2011.

• 埴田卓, 澤井政宏, 坂本牧葉, 須藤秀紹,

共分散構造分析を用いたインタフェースの

色彩デザインの印象と操作との関係の分析, 生命ソフトウェアシンポジウム 2011 講

演論文集, pp. 68-71, 2011.

• 坂本牧葉, 南部真友子, 埴田卓, 澤井政宏, 須藤秀紹,

インタフェースに用いる色彩デザインの印象と操作性との関係”, 第 39 回 知能システムシンポジウム資料, pp.

39-44, 2012.

77