研究内容

携帯電話インタフェースの色彩デザイン

研究背景

図1 グレーアウトの例

 現在,インタフェースには様々な色彩デザインが利用されている.この「インタフェースの色彩デザイン」には制作者と利用者との間に様々な意味付けが色によってなされている.意味付けの例として「グレーアウト」があげられる.これは,メニューやファイル選択など項目が並んでいる場合に,文字色をグレーにすることで選択することができない,という意味を項目に持たせている(図1 グレーアウトの例).インタフェースの制作者は選択できない項目にグレーアウトを利用し,選択できない項目の文字色をグレーに変えるとする.インタフェースの操作者はグレーアウトの存在を知っていると,「グレーの文字色=選択できない」という制作者の意図を読み取り,選択できる項目と選択できない項目との区別が色を見ただけで判断できる.しかし,グレーアウトの存在を知らない操作者は,グレーの文字を見ても選択できる項目であると誤って認識し,制作者の意図を読み取ることができない可能性がある.
 本研究では,色彩デザインの違いで各項目に意味を持たせることで,インタフェースの操作者がより制作者の意図を読み取りやすいような色彩デザインを考える.なお,本研究では身の回りの代表的なインタフェースとして携帯電話を利用する.

予備調査

予備調査の内容

 本研究を行うにあたり予備調査を行った.調査には携帯電話10台を用意し,文字だけで構成されているメニュー画面より次の3つに分類した項目の文字色と背景色をそれぞれ調査した.

  • 「選択可能」項目
      メニューに並んでいる項目のうち,選択することでアプリケーションが起動したり,次の階層のメニューに移動するなど,なんらかの反応が起こる.
  • 「選択不可能」項目
      選選択することができない,または選択しても何も反応がない.グレーアウトもこれに含む.
  • 「カーソル位置」項目
      カーソルの場所を表し,方向キーにより上下または左右に動かすことができる.

 なお,調査の表色系として「マンセル表色系」を利用する.

マンセル表色系

 マンセル表色系とは,色感覚の三属性である色相,明度,再度の感覚量を尺度化し,作成した色表示の体系である[1].三属性の特徴とその表記方法を以下に示す.

図2 マンセル表色系の色相環
  • 色相
    • R(赤),Y(黄),G(緑),B(青),P(紫)の5主要色相で色相環を作り,中間色(YR,GY,BG,PB,RP)を挟む10色相を作る.さらに10分割し,感覚的に等しく分け,100色相にする(図2 マンセル表色系の色相環).
  • 明度
    • 黒を0,白を10として,その間を感覚的に等しい段階に分ける.
  • 彩度
    • 無彩色を0とし,鮮やかになるにつれて値が大きくなる.その間は感覚的に等しい間隔に分けられる.
  • 表記方法
    • 有彩色・・・色相 明度/彩度(例: 5R 4/12)
    • 無彩色・・・N 明度(例: N5)

調査より見出した特徴

 調査結果より以下の特徴を見い出した.

  1. 「選択可能」項目は文字色と背景色との明度差が大きい.
  2. 「選択不可能」項目は文字色と背景色の明度差が「選択可能」項目より小さい.
  3. 「カーソル位置」項目の文字色は「選択可能」項目の背景色が用いられるケースが多い.またこの場合,背景色は文字色との明度差が大きくなるように設定される.

実験

パターンや色相により結果に違いがあるかどうかを明らかにするために次の実験を実施した.

  • 実験方法
  1. 被験者に実験全体の流れを説明
  2. 疑似携帯電話メニュー(図3)を被験者に表示(表示するパターンはAとB(図4)混合)
  3. 「選択可能」,「選択不可能」,「カーソル位置」のうち当てはまると思われる項目を被験者に回答させる
  4. 2. と 3. を繰り返す
  5. 1分間休憩
  6. 疑似携帯電話メニュー(図3)を被験者に表示(表示するパターンはCとD(図4)混合)
  7. 「選択可能」,「選択不可能」,「カーソル位置」のうち当てはまると思われる項目を被験者に回答させる
  8. 6. と 7. を繰り返す
  9. 実験後,被験者にアンケートの回答を求める
図3 実験画面
図4 メニューのパターン
  • 各パターンの説明
    • パターンA
       「選択可能」項目と「選択不可能」項目の背景色が暗く,「カーソル位置」項目の背景色が明るい.
    • パターンB
       「選択可能」項目と「選択不可能」項目の背景色が明るく,「カーソル位置」項目の背景色が暗い.
    • パターンC
       パターンAに「メニュー」という項目がついたもの.
    • パターンD
       パターンBに「メニュー」という項目がついたもの.
      • 「メニュー」項目を説明書きやタイトルなどの色,という意味で以降「基本色」と呼ぶ.

なお,パターンA,Bは背景色の明度の高低の違いによる差があるかどうかを, パターンC,Dは基本色の有無による差があるかどうかを調べるために用意した.

結果と考察

  1. 明度の高低(パターンACとパターンBDの結果を比較)では大きな差がないことがわかった.
  2. 基本色のありなし(パターンABとパターンCDの結果を比較)では,項目を見比べる場合に基準となる基本色を加えたパターンの方が正確性があがることが結果からわかった.
  3. 色相の違い(色相別に比較)では大きな差が現れなかった.しかし,若干のばらつきはあったため,今後の調査が必要.

参考文献

[1] 日本色彩学会: 新編色彩科学ハンドブック, 東京大学出版会, pp134-140, 1998

発表会・質疑応答

  • 沖井・須藤・工藤・岡田研究室 合同卒業研究発表会
    • 会期:2011年2月18日(金),21日(月)
    • 会場:室蘭工業大学 SVBL
    • 発表題目:「知識ベースの認知処理で理解できるインタフェースの配色デザイン」
    • 発表者:埴田 卓
    • 質疑応答:
      • [Q1]
        このデザインをどのようなものに応用するのか.
        [A1]
        本研究で用いた「選択可能」,「選択不可能」,「カーソル位置」項目を用いているGUIを利用したシステムであれば応用することが可能である.
        [A'1]
        当日回答と同じ.GUIを用いた基本的なメニュー画面であれば他のシステムでも応用は可能であると思われる.
  • [Q2]
    本研究のタイトルである「知識ベースで適切に理解できる」とはどういう意味か.
    [A2]
    ラスムッセンの3段階モデルのうち知識ベースの状態,つまりメニュー画面を初見の状態でも理解できるような配色デザインを考えるという意味をもつ.
    [A'2]
    当日回答と同じ.
  • [C1]
    カーソル位置が動かない状態のメニューで実験したが,カーソル位置項目が動くことを考慮する必要があるのではないか.
    [C'1]
    実際にGUIを用いたシステムに配色デザインを用いる場合はカーソル位置を動かした方が視覚的にカーソル位置項目がわかりやすいため考慮する必要がある.しかし,本研究では配色のみで理解できるデザインを作成することを主としているため,カーソルが動くことを考慮していない.
  • 感性フォーラム札幌 2011
    • 会期:2011年2月5日(土)
    • 会場:札幌市立大学サテライトキャンパス
    • 発表題目:「知識ベースの認知処理で理解できるインタフェースの配色デザイン」
    • 著者:埴田 卓,坂本 牧葉,須藤 秀紹
    • 発表者:埴田 卓
    • 質疑応答:
      • [Q1]
        アクティブになっている項目があるため,カーソル項目となるのは当たり前ではないか.よって,カーソル項目が不必要ではないか.
        [A1]
        当日の質問を理解できず,質問とは違う内容の回答をしてしまった.
        [A'1]
        実験の操作画面の説明が不十分であった.質問者はカーソル項目を実験中に動かせるものだと考えていたと思われる.実際の操作画面ではカーソル項目は動かないため,3つの選択肢を選択可能項目,選択不可能項目,カーソル位置項目に分類した.もし,カーソル位置が実験中に動くのであれば,質問者の指摘通り,カーソル位置項目が選ばれて当たり前であるため不必要といえる.
  • [Q2]
    インタフェースの混色系からマンセル表色系の顕色系への変換は難しいと思われるが,そのあたりについてはどう考えているのか.
    [A2]
    自分の視覚を頼りにカラーチップと照合し調査を行ったため,正確な値ではないかもしれない.
    [A'2]
    やはり,混色系と顕色系の変換は難しいと思われる.しかし,[C2]の指摘通り基準を作成したり,数人の測定者から平均を求めたりすればよりよい値を得ることができるのではないだろうか.
  • [C1]
    インタフェースデザインはスマートフォンを例にした方がよいのではないだろうか.
    [C'1]
    確かに近年では携帯電話がスマートフォン化してきているため,今後に生かす場合は携帯電話よりもスマートフォンで考える必要がある.しかし,本研究ではGUIを用いているシステムの中で使用頻度が高い携帯電話を代表的に取り扱っているだけであるため,GUIを用いているシステムであるスマートフォンでも今回と同じような結果が得られると思われる.
  • [C2]
    (Q2に関して)正確なマンセル値を求めるのなら,カメラで画面を撮影し,基準を作ればより正確な値を出すことができると思われる.
    [C'2]
    このコメントを参考にし,次回の計測の際はカメラで撮影する.また,より正確な値を求める方法として照合する際の人数を自分一人ではなく数人に増やし,その平均値をとる方法も考えている.
  • 沖井・須藤・工藤・岡田研究室 合同卒業研究中間報告会
    • 会期:2010年12月7日(火),14日(火)
    • 会場:室蘭工業大学 SVBL
    • 発表題目:「SRKモデルの知識ベースで対処できる携帯電話メニューの配色研究」
    • 発表者:埴田 卓
    • 概要:携帯電話のメニューの配色にはさまざまなものがある.その中には製作者と利用者との間に色の意味の捉え方が違うものがあり,製作者が意図したものとは異なる意味が製作者に伝わる場合がある.この問題を解決するために,SRKモデルの知識ベースを利用する.意味を積極的に理解しようとするSRKモデルの知識ベースで処理できるような配色を見つけるために本研究を行う.
    • 質疑応答:
      • [Q1]
        研究は具体的にどのようなことをしたいのか.
        [A1]
        SRKモデルの知識ベースで処理できるような配色の研究をしたい.
        [A'1]
        現在の携帯電話のメニューにはさまざまな項目があり,それら項目をメニュー製作者は文字色や背景色の色の差で分けている.携帯電話は操作に慣れるとSRKモデルの技能ベースに移行し,感覚的な操作ができるようになる.しかし,新しく携帯電話を買う,またはテーマを変更すると,携帯電話の利用者はSRKモデルの知識ベースでの処理が要求される.利用者が持っている知識,経験を用いて操作できる,つまり,知識ベースで対処できる携帯電話メニューの配色を作成できるようになると,少しでも製作者,利用者の負担を減らすことができるのではないかと考え,本研究を行う.
  • [Q2]
    疑似携帯電話の作りが簡単すぎて,現実の携帯電話との差が開きすぎているのではないか.
    [A2]
    確かに作りが簡単すぎた.
    [A'2]
    メニューの作りをシンプルなものにした理由は,画像やアイコンといったノイズとなる他の情報を取り払うためである.実験では色の差で項目の違いをみているため,指摘のあったとおり,用意した疑似携帯電話メニューが現実の携帯電話メニューと差があるように感じる.これは,代表的なインタフェースとして携帯電話を利用しているためであり,携帯電話以外のインタフェースにも後々応用していきたいため,似せる必要はあまりないと考えた.

添付ファイル: filejikken_add.jpg 547件 [詳細] filemenu_all.jpg 551件 [詳細] filemunsell_hue.jpg 1790件 [詳細] fileimage01.jpg 561件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2011-12-07 (水) 10:29:57 (2535d)