*インタフェースと色彩 [#pc77e0f2]
#contents
**タッチパネルの色彩が操作性に与える影響 [#a22a8fff]
***研究背景 [#h5a98804]
銀行のATMやコンビニエンスストアの情報端末やスマートフォンなど，
入力操作にタッチパネルを用いたインタフェースが普及しつつあります.
これらのインタフェースはその利便性から，図書館の蔵書検索や博物館の展示案内に用いられるなど
公共施設にも積極的に導入が試みられています．
このように年代や性別，生活環境のことなる多くの人に使用される端末の操作画面は，
そのデザインがわかりやすく，快適である（ユーザビリティが高い）必要があるのです．
これらの操作画面には企業のイメージカラーが与えられる場合も多くあります．
しかし，われわれの判断や心理状態，それらに伴う行為は，色彩から多くの影響を受けることが知られていることから，
情報端末におけるユーザビリティと企業イメージとの両立は重要な課題であると考えられます．
また，タッチパネルの操作画面には物質的な操作ボタンの代わりに「ボタンに見える」操作対象を表示させます．
つまり，視覚デザインが，操作にとって非常に重要な意味を持っているといえます．
しかしながら，操作画面の印象はボタンの色だけではなく，
ボタンと組み合わせて用いられる図や文字や背景色からも影響を受けると考えられます．
そこでこの研究では，あえてプッシュボタンなどの操作の対象ではない部分のに配色を施すことによって
印象の変化させた複数の実験画面で，同じ操作をさせる実験を行います．
そうすることによって，操作画面のカラーデザインによる印象と，操作との関係を検証します．
***実験 [#oe10d2e5]
この研究では「クールカジュアル」や「ゴージャス」といった印象を表す配色を施すことによって
それぞれ配色によって印象の異なる12種類の操作画面を用意し，それぞれの画面で簡単な計算問題を解かせる実験をします．
また，その際に各画面からどのくらい好ましい印象を受けたか評価してもらいます．
その結果，クールカジュアルやシックといったカラーデザインを用いた操作画面では，計算問題の正答率が高く，
またゴージャスやワイルドといったカラーデザインの操作画面では，操作の誤りが多く，回答にも時間がかかることがわかりました．
また，正確に操作できた画面ほど，その画面デザインも好ましいと感じられやすい傾向があることがわかりました．
さらに分析した結果，このような操作と印象には，カラーデザインに用いる色彩同士の明度差（色彩に含まれる，白から黒の間の色の割合）が
とくに強く影響していることがわかりました．
***応用可能性 [#l31afd7f]
ATMなどの情報端末や駅の券売機など，さまざまな人に利用されるタッチパネルの
操作画面へ応用すれば，スムーズな操作が促されることによって混雑が解消されることが予想できます．
またカラーデザインによって快適性を考慮することができるので，利用も促されやすいと考えられるし，
初心者のユーザにも受け入れられやすいと考えられます．
**インタフェースの色彩デザイン・印象及び操作の関係の分析 [#s71f0292]
***研究背景 [#ue29d3cc]
近年，スマートフォンに代表されるタッチパネルインタフェースの普及が進んでいる．このタッチパネルインタフェースには，ボタンやスイッチのような物理的な操作オブジェクトがないため，インタフェースのデザインが操作性の良さを決める重要な要素となる．本研究では装飾として彩色した操作画面を被験者に提示し，実際に操作をしてもらった後，印象を評価してもらう実験を行う．その後，画面のデザインに対する印象と操作の複合的な関係を調べるために共分散構造分析を用いて分析する．
***実験 [#b14d3179]
-''操作性の測定実験''~
実験の対象となる被験者は色覚に異常のない20代の男女36名である．まず，被験者に操作方法やアンケートについての説明をした後，操作方法を理解してもらうために無彩色の操作画面で練習をしてもらった．その後，アイマスクを着用して2分間の休憩をはさみ，彩色した操作画面で実験を行った．被験者に提示した実験画面を下の図1（左側）に示す．装飾として画面の下に施された配色部分には，混合イメージスケールから偏りなく選んだ12種類の配色のうち1種類を選び，彩色した．配色部分以外は無彩色とし，画面の印象と混合イメージスケールの印象とが一致するようにした．この実験画面を12条件分用意し，それぞれを被験者に提示した．~
この実験画面上で操作画面への彩色についての印象が直感的な操作に及ぼす影響について検証するために，被験者にタッチパネルで簡単な足し算の問題を解答してもらった．問題は1条件につき30問出題される．1問あたりの制限時間は1.5秒とした．制限時間内に解答されなかった場合は自動的に次の問題に移る．このタスクにおいて解答時間と正答数，時間切れ数を記録した．各条件の操作画面で30問解答し終えた後，被験者に後述の操作画面の印象評価をしてもらった．各条件の間には，前の条件の配色の影響の軽減と眼の疲れによる影響を排除するために，アイマスクを着用して2分間の休憩をはさんだ．
-''操作画面の印象評価''~
各条件のタスク終了後，実験画面の印象評価として用意した15個の印象評価項目について，アンケート形式で被験者に評価してもらった．アンケートに用いた印象評価項目と対応する印象語を下の表1（右側）に示す．評価手法には評点尺度法（VAS: Visual Analog Scale）を用いた．なお，左右の順序による影響を軽減するため，VASで用いた印象語の左右の位置はランダムに変更して被験者に提示した．評価時には画面の配色を思い出しながら評価できるように実験画面のハードコピーを被験者に提示し，シートの各項目について該当すると思われる位置に線で印をつけてもらう．被験者にはあまり考え込まず，直感的に評価を行ってもらうよう指示した．左右の評価語句のうち，ネガティブな印象語から被験者がつけた印までの尺度を測り，その尺度値を100点満点で点数化した．
|CENTER:BGCOLOR(white):&ref(interface1.jpg,zoom,60%,図1 実験画面);|CENTER:BGCOLOR(white):&ref(impression1.jpg,zoom,50%,表1 印象評価項目と印象語);|
|CENTER:BGCOLOR(white):図1 実験画面|CENTER:BGCOLOR(white):表1 印象評価項目と印象語|
***分析 [#j63586a1]
上記実験から得た操作データ（操作時間，正答数，時間切れ数）と15の印象評価値（好感度，わかりやすさ，見やすさ等）を分析することで，より詳細にデータの分析を行う．分析には共分散構造分析を用いる．共分散構造分析は変数間同士の因果関係を分析・モデル化する方法で，重回帰分析と因子分析を合わせたものと考えることができ，両者のメリットを生かした分析が可能となる．
-''重回帰分析''~
重回帰分析は図式から相関ではなく，原因と結果がはっきりと理解できるといった特徴がある．しかし潜在変数を扱うことができない，1つまたはいくつかの原因に対し複数の結果を求めることが難しい（複数の従属変数では分析しにくい）といったデメリットがある．
-''因子分析''~
因子分析は直接観測できず観測変数の背後に潜む変数である潜在変数を求めることができる．これによって観測変数同士をまとめることができる．しかしはっきりとした因果関係を求めることができない（因子分析結果は相関関係であり，原因と結果のどちらになるかがはっきりしない）．
また，モデルを構成する要素として，実験の測定データなど直接データとして観測できる観測変数（四角で囲われた変数），観測変数の背後に潜む変数である潜在変数（楕円で囲われた変数）が存在し，それらをつなぐパスが因果関係，パス上の数値は偏回帰係数（変数間の影響度と考えることができる）をそれぞれ表す（図2）．
|CENTER:BGCOLOR(white):&ref(sample_model2.jpg,zoom,50%,図2 モデルの例);|
|CENTER:BGCOLOR(white):図2 モデルの例|
***共分散構造モデルの作成 [#d25c0164]
共分散構造分析はモデルを自由に作成することができる．しかし自由である以上，モデルを自分で1から作成する必要があるため，因果関係の仮説と潜在変数の求め方をここでは説明する．
-''因果関係の仮説''~
今回作成したモデルでは，''1. 条件''（操作画面の配色），''2. 印象''，''3. 操作性''，''4. 印象因子''（印象をまとめた因子，人間の感性とも考えられる），の4つの関係を示したい．まずはじめに操作画面を構成する配色は人間の感性に影響を与えると考えられる（1.→4.）．次に人間の感性によって印象が決まり，それが数値化されてアンケートの結果に現れる（4.→2.）．また人間の感性は操作の時間や正確性にも影響を与えると考えられる（4.→3.）．以上から下の図3のような関係を仮説し，この仮説に基づいてモデルを作成する．
-''潜在変数の求め方''~
潜在変数は印象評価値のデータのみで因子分析を行い，印象評価値を7つの印象因子にまとめた．求めた印象因子を次にまとめる．なお括弧内の印象は印象因子を構成する中で特に大きな影響を与えている印象を表す．
++ユーザの好み（親しみやすさ，好感度，美しさ，心地よさ）
++視認性の高さ（見やすさ，読みやすさ，わかりやすさ）
++精神的疲労度（作業の精神的負担の軽さ）
++明確さ（迷わない度）
++覚醒度（印象度，意欲）
++集中度（集中度）
++親しみやすさ（親しみやすさ）
|CENTER:BGCOLOR(white):&ref(model2.jpg,zoom,50%,図3 因果関係の仮説);|
|CENTER:BGCOLOR(white):図3 因果関係の仮説|
***分析の結果 [#a85a69da]
-''印象因子と操作性の関係'' ※括弧内は偏回帰係数
--''印象因子と操作時間との関係''~
ii. 視認性の高さ（-0.108），iii. 精神的疲労度（-0.095） の値が高くなればなるほど操作時間がわずかではあるが&color(blue){短くなる};ことがわかった．~
vii. 親しみやすさ（0.626） の値が高くなればなるほど操作時間は&color(red){長くなる};こともわかった．
--''印象因子と時間切れ数との関係''~
ii. 視認性の高さ（-0.197） の値が高くなればなるほど時間切れ数はわずかではあるが&color(blue){少なくなる};ことがわかった．~
vii. 親しみやすさ（0.777） の値が高くなればなるほど時間切れ数は&color(red){多くなる};こともわかった．
--''印象因子と正答数との関係''~
iv. 明確さ（0.191） の値が高くなればなるほど正答数はわずかではあるが&color(blue){多くなる};ことがわかった．~
vii. 親しみやすさ（-0.335） の値が高くなればなるほど正答数は&color(red){少なくなる};こともわかった．
***結論 [#y4b9152a]
分析の結果から''視認性が高まる印象''を被験者にもたせるような配色を施すと操作性が&color(blue){上がり};，''親しみやすさのわく印象''をもたせる配色を用いると操作性が&color(red){下がる};ことがわかった．
***発表会・質疑応答 [#n4caff13]
-生命ソフトウェアシンポジウム2011
--会期：2011年11月26日（土），27日（日）
--会場：福岡工業大学 FITホール
--発表題目：「共分散構造分析を用いたインタフェースの色彩デザインの印象と操作との関係の分析」
--著者：埴田 卓，澤井 政宏，坂本 牧葉，須藤 秀紹
--発表者：埴田 卓
--質疑応答：
---[Q1]~
親しみやすさが操作性を下げるとはどういうことか．~
[A1]~
親しみやすさの因子に含まれる印象（親しみやすさ，意欲，眼の疲労度など）の印象評価値が高くなるほど操作性が下がってしまうという結果が出たということである．~
[A'1]~
結論が説明不足だった．まず印象の「親しみやすさ」と因子の「親しみやすさ」が同じワードであったため混乱を招いた．また結果の説明がしっかりできていなかったため，結論が分かりづらかったかもしれない．今後説明する際にはもっとわかりやすく説明できるよう気をつける．
---[C1]~
（Q1に加えて）ソフトウェアキーボードが使いづらい（操作性が悪い）と回答した人がほぼ100％だったこと，この問を普段からキーボード操作をしている情報工学科の学生に聞いたこと（親しみやすさを感じている）から，ソフトウェアキーボードについて同じ実験をやればもっと顕著な結果が出るのではないか．~
[C'1]~
確かに親しみやすさが操作性を下げるという結果がでることが予想される．本研究の目的は「画面のデザインから受ける印象と操作性との関係の分析」であるため，このコメントを今後の実験案として参考にする．
--『''優秀発表賞''』を受賞しました．
***発表会・質疑応答２ [#n4caff13]
-生命ソフトウェアシンポジウム2011
--会期：2011年11月26日（土），27日（日）
--会場：福岡工業大学 FITホール
--発表題目：「画面上の色彩装飾の位置が印象に与える影響」
--著者：坂本 牧葉，須藤 秀紹，澤井 政宏
--発表者：坂本 牧葉
--質疑応答：
---[Q1]~
平面デザインにおける画面デザインの方法で紹介された
「三分の一の分割方法」（平面デザイン上のテクニックのひとつ．画面分割の境目や、文字やロゴマークなどのアイキャッチャーの役割をもつ要を、画面の長さの三分の一の間隔で配置することによって、アイキャッチャーは受け手の目につきやすくなり、また画面全体から受ける印象が良くなる）と本研究との関連性とがよく理解できなかった．~
[A1]~
実験結果では、ハードよりの配色である「モダン」「クラシック＆ダンディ」を
画面の上部に用いた場合にその印象が若干弱まる傾向が見られた。
これは「軽快さ」を表現するのに適している配置に「重さ」「硬さ」といった印象の配色を用いたためであると推測している．配置位置と色彩はなんらかの因果関係があることが推測されるが、紹介した平面デザインのテクニックのように確立したいという意味で紹介した．~
[A'1]~
誌面やポスターなどの平面デザインの分野では、画面デザインとは異なり画面構成の
手法が確立されていることを説明するために例として紹介した．
画面デザインにおいても、色彩などの要素と操作、印象との関係を検証し例のようなテクニックとして確立したいと考えている．~
---[C1]~
（検討中、早急に記載します）
~
[C'1]~
（検討中、早急に記載します）
**色彩が操作の反応時間や正確性に与える影響 [#oaafb68a]
***(研究背景) [#oaafb68c]
近年，一般家庭への高速なインターネット回線が普及したことで，さまざまなサービスがウェブサイト上で提供されるようになりました．また，たとえばブログ一つをとっても，アメーバブログやYahoo!ブログなど複数のウェブサイトがあるように，同じサービスが複数のウェブサイトで提供されています．
ユーザはその中から利用するウェブサイトを選びます．
ユーザが利用するウェブサイトを選ぶ基準の１つとしてユーザビリティというものがあります．
ユーザビリティが低いウェブサイトとは，利用方法がわからなかったり，操作方法が面倒であったり，目的のページになかなかたどり着けかなかったり，少し操作を間違えただけで今までの操作が無駄になる，といったようなウェブサイトのことです．
ユーザビリティを向上させることで使いやすいウェブサイトになり，より多くの人に利用してもらえることが期待できます．~
カラーセラピーなどでも知られるように，色が人の心理状態に影響を与えることはよく知られています．
大きさを実際の大きさよりも大きく感じる色や小さく感じる色があったり，実際の距離よりも近く感じたり，遠く感じる色，興奮する色や冷静になる色など色の与える影響は様々です．
これらの影響をうまく利用することで，表示をわかりやすくしたり，落ち着いて操作をさせることができ，ユーザビリティを向上させることができると考えられます．これらのことから，ユーザビリティの向上を考える上で色の影響は無視できません．
そこで本研究では，色が操作の正確性や反応時間にどのような影響を与えるかについて実験を行い検証しました．
***(ユーザビリティ) [#oaafb68d]
ユーザビリティとは，便利で使いやすいこと，使い勝手や利用のしやすさを意味する言葉です．ユーザビリティエンジニアリング原論では，ユーザビリティとは，
-学習しやすさ~
システムは，ユーザがそれを使って作業をすぐ始められるよう，簡単に学習できるようにしなければならない
-効率性~
システムは，一度ユーザがそれについて学習すれば，後は高い生産性を上げられるよう，効率的な使用を可能にすべきである．~
-記憶しやすさ~
システムは，不定期利用のユーザがしばらく使わなくても，再び使うときに覚え直さないで使えるよう，覚えやすくしなければならない．~
-エラー発生率~
システムはエラー発生率を低くし，ユーザがシステム使用中にエラーを起こしにくく，もしエラーが発生しても簡単に回復できるようにしなければならない．また，致命的なエラーが起こってはいけない．~
-主観的満足度~
システムは，ユーザが個人的に満足できるよう，また好きになるよう，楽しく利用できるようにしなければならない．~
~
の5つの特性から構成されているものと定義しています．
***(色の影響１ 暖色系・寒色系) [#oaafb68e]
赤色や黄色，橙色は，暖かい印象を与えることから暖色系と呼ばれ，活動的・積極的な感情を誘起させる作用があります．
逆に青色や紫色は冷たい印象を与えることから寒色系と呼ばれ，沈着・消極的な感情を誘起させ作業に対する意欲を失わせる効果があります．
また赤色などの暖色系には血圧や脈拍を上昇させ，青色などの寒色系には血圧や脈拍を減少させる効果があります．
***(色の影響２ 膨張色) [#t68db4c5]
実際の大きさよりも大きく見える色のことを膨張色と呼びます．
たとえば白色は黒色よりも大きく見えます．この効果を利用した例として，囲碁の碁石があります．黒石を白石よりもやや大きく作ることで同じ大きさに見えるようにしています．
#ref(igo01_R.jpg,nolink)
***(色の影響３ 色のイメージ) [#t68db4c6]
人は色からいろいろなものを連想します．
例えば，緑色から木の葉や自然，赤色から血や情熱などを連想します．
***(色の影響４ 配色のイメージ) [#t68db4c7]
色を組み合わせることでさまざまなイメージを与えることができます．
たとえば，左のような配色をすることで，桜がイメージされることからナチュラルなイメージを与えることができます．また右のような配色をすることで，ビルなどがイメージされモダンなイメージを与えることができます．~
&ref(natural00.jpg,nolink);
&ref(modern00.jpg,nolink);~
&ref(natural_R.jpg,nolink);
&ref(modern_R.jpg,nolink);
![[SDL]](image/lab_logo.png "[SDL]"){kind=logo}
![[System Design Laboratory]](image//head.gif "[SDL]")
