配色がメニューの操作効率に与える影響について情報学部情報学科 09J5--116 早川潤一情報学部情報学科横山研究室 09J5 1. はじめに現在、コンピュータ操作においてメニューは必須の機能だが、ソフトウェアによっては項目数が膨大なため目的の項目を見つけるのに時間がかかってしまう。そこでメニューに色を付けることで、操作をより効率的に行うことが出来るのではないかと考え、疑似的なメニュー付きアプリケーションを作成し、検証を行った。アプリケーションを操作してもらい、アンケートを記入してもらった。問題は 30 問＋終了の計 31 問で、指示に従ってメニューから項目を選びクリック、を繰り返す。また、それぞれの操作にかかった時間と全体でかかった時間、指示に対してどの項目を選択したかを記録している。被験者毎に実験を行うパターンの順序を変更することで、慣れなどが結果に影響しにくいようにした。 2. 見やすい配色色相などを統一することで画面を見やすくすることが出来る[1]。また、重要度の高いアイテムの誘目度を高くすると、エラー率を増大させることなく効率を高めることが出来る[2]。色が目を引き付ける度合いを誘目性といい、暖色が高く、寒色が低いとされている。本研究では、誘目度の高いオレンジ(255,130,0)と、低いみずいろ(0,200,255) を選んだ。 3. コントラスト比 JIS X8341-3 で定められている文字色と背景色の差による文字の見やすさのことで、1～21 の範囲となる。1:1～21:1 と記述され、図 1 のオレンジのように比率が高いほど見やすい配色となる。「 7.1.4.6 より十分なコントラストに関する達成基準」では少なくとも 7:1 のコントラスト比、大きな文字(半角英数字では 18pt または 14pt の太字以上、日本語を含む場合は 22pt または 18pt の太字のサイズ)の場合には少なくとも 4.5:1 とされている。実験で使用する色はどちらも 7:1 のコントラスト比を満たしている。図 1 コントラスト比の高いオレンジと低い青 4. 実験 Java の Swing を用いて図 2 のような疑似的なメニュー付きアプリケーションを表 1 の 7 パターン作成し、実験を行った。被験者 12 人に作成した図 2 実験中の画面実験中の画面パターン標準交互(暖色) 交互(寒色) グラデーション (暖色) グラデーション (寒色) 回数で変化 (暖色) 回数で変化 (寒色) 表 1 パターン一覧説明標準(灰色)状態のメニュー交互に暖色で色を付けたメニュー交互に寒色で色を付けたメニュー暖色のグラデーションを付けたメニュー寒色のグラデーションを付けたメニュー 2 回クリックすると暖色で色が付くメニュー 2 回クリックすると寒色で色が付くメニュー 5. 考察 1.8 1.6 合1.4 割るす1.2 対に均1 平 0.8 0.6 パターン被験者1 被験者2 被験者3 被験者4 被験者5 被験者6 被験者7 被験者8 被験者9 被験者10 被験者11 被験者12 図 3 パターン毎の平均に対する割合 3 (%) 図 3 は被験者毎に全パターンの平均を全体で割り正規化したグラフで、回数によって変わるパターンは全被験者ともに比較的安定して操作出来ている。1 クリックに平均してどの程度時間がかかるのかを表している図 4 のグラフでは、回数によって変わるパターンは標準のメニューより速く操作できている。また、すべてのパターンにおいて寒色が暖色より速く操作できている。図 5 は誤答率をグラフにしたもので、全パターンにおいて暖色が高く、寒色が低いという結果となった。パターンを一つ操作する毎に 3 を基準とした 5 段階評価のアンケートに回答してもらった。図 6 のアンケート結果では、回数によって変わるパターンの評価が高く、交互のパターンが低い。また、どのパターンも寒色のほうが目が疲れにくいと評価されていた。 4 3.5 2.5 率2 答1.5 誤誤答率 1 0.5 0 パターン図 5 パターン毎の誤答率 5 4 評3 価2 操作しやすさ使いたいか見やすいか目が疲れるか 1 0 パターン図 6 アンケート結果 6. まとめよく使う項目に色を付けると、効率よく操作することが出来た。また、暖色に比べると寒色の方が目に負担がかからず、エラー率も低いという結果を得た。 5.6 5.4 5.2 ) 秒5 間時4.8 均平4.6 ( 7. 今後の課題平均 4.4 4.2 図 4 パターン毎の 1 クリックにかかる平均クリックにかかる平均時間平均時間今後の課題として、色やパターンの追加や変更、メニューバーや文字の色の変更、また今回付けることが出来なかった、回数で色が変わるメニューへの色を消す条件や、音の追加などがある。引用文献 [1] 坂本邦夫, “画面デザインに向く配色，向かない配色,” CQ 出版社, 2012. [2] 横溝あずさ, 池上輝哉 , 福住伸一, “画面の配色バランスの作業効率・エラー率への影響の検証,” 2012.