情報工学科 05A2301 樽美 澄香 （Tarumi Sumika)

Presentation on theme: "情報工学科 05A2301 樽美 澄香 （Tarumi Sumika)"— Presentation transcript:

1 情報工学科 05A2301 樽美 澄香 （Tarumi Sumika)
第6回 配色最適化システムの実験評価 情報工学科　05A2301 樽美　澄香 （Tarumi Sumika) 2009年 1月 26日

2 前回までの内容 今回、完成したシステムを主観評価にて実験 配色最適化システムの完成（機能の紹介） JavascriptによるDOM操作
CSSを用いた、ページの配色操作 IGAによる配色最適化 最適な明度・彩度の解の探索（HSV色空間を用いる） 今回、完成したシステムを主観評価にて実験

3 配色最適化システムの目的 背景 目的・方針のおさらい 誰にでも容易にWebページを作成できるようになった。
閲覧者側（本システムでは色弱者）から行う配色変更システム ユーザーの見やすさにあわせた配色補正（主観性） 本来の配色から、なるべくかけ離れない配色候補を選択

4 実験内容（１） 実験日時 目的 被験者 2008年12月15日（月）18:00-19:00 種田研究室所属の男性9人
色弱者にとって情報が読み取りづらい「見づらい配色」を、開発したシステムを用いて、 「見やすい配色」に変更し、 情報が読み取れるようになったかどうか、システムの効果を実験する（主観評価） 被験者 種田研究室所属の男性9人

5 実験内容（２） 実験方法 CSSで定義された18パターンの「一般的に見づらい配色」（次スライド参照）の中で、被験者が最も見づらい配色を1パターン選ぶ。 開発したシステムを用いて、 被験者の「見やすい」と思う感覚で、配色を補正する。 主観評価（アンケート形式）を行う。 補正前配色での情報読みやすさ（４段階） システムの操作性（４段階） 補正後、情報が取得できるようになったか？（２段階） 補正後配色での情報読みやすさ（４段階）

6 「色弱者の見え方」の実現 市販されている動的「色覚シミュレーションモニター」を用いる
色を変更した際に、瞬時に「色弱者の見え方」を演算するためシステムの操作性に影響しない 色弱者の99%を占める「P型」「D型」（赤緑色盲）設定で実験 25% 75% 0.02% ▲ 色覚用語分類表（参考文献２）

7 htmlデータ（配色はCSS定義） ＜日本語での名言集＞ △見づらい配色 （出典：色覚異常 - Wikipedia）
実験データについて 見づらい配色でCSSを定義 参考：色覚異常-Wikipedia htmlデータ（配色はCSS定義） ＜日本語での名言集＞ ９組 9組 × 2 （文字-背景反転） ＝ 18パターン △見づらい配色 （出典：色覚異常 - Wikipedia）

8 実験しました ～ご協力ありがとうございました～
2008年12月15日（月）18:00に 本大短期大学部PCルームにて実験を行った。 使用機器 EIZO社 色覚シミュレーションモニター「FlexScan U」 公式サイト製品情報

9 ー　実　験　結　果　－

10 読みやすさ ＆情報取得 － 結果 － 補正前 9人全員が、 補正後 P型・D型ともに、 ※元は同じ配色でも、 補正後の値は異なった
読みやすい↑ ※元は同じ配色でも、 補正後の値は異なった 補正前 読みづらい↓ － 結果 － 9人全員が、 P型・D型ともに、 「読めない/読みづらい」から 「読める/読みやすい」に補正 情報取得可能になった 補正後 読みやすい↑ 補正後、 情報取得できたか 読みづらい↓

11 操作しやすさ 色弱者＝コンピュータに馴染みないユーザー含む 結果 程ほど良い評価が得られたが、 慣れた人にはGUI操作は面倒
「操作しやすさ」に配慮する 結果 「楽」「普通」評価 9人中6人 (2/3) コメント「星評価が楽」 「苦ではない」「面倒」評価 9人中3人 (1/3) コメント「GUI操作が面倒」 程ほど良い評価が得られたが、 慣れた人にはGUI操作は面倒 CUI・ショートカット機能 （評価）　4:楽　3:普通　2:苦ではない　1:面倒

12 自動選択機能の利用 配色自動選択機能 利用状況と考察 新たに提案された配色郡のなかで、 元の配色に最も近い配色を自動選択する機能
最終的な配色候補すべてが見やすい配色とは限らず、 必ずしも「元の配色に近い候補」が見やすいわけではない。 GA設計 or 最終的にユーザーが決定した配色をルール化し、 それを現在の自動選択機能に影響させる仕組みが必要　？ ◆自動選択機能の利用回数 利用 6回 不利用 12回 （9人・18回中）

13 補正後の明度差 文字色と背景色の明度差は、125以上が望ましい W3C（ WWW技術標準化推進団体）※第5回参照 所感と考察
必ずしも明度差125以上の配色候補が、 「見やすく、元の印象を崩さない」と 感じる配色ではないようだった。 ユーザーの考える「見やすい」によって・・・ 「元のイメージを崩さない（現状）」or「読みやすい(提案する時点で、125以上で制限をかける)」の2種類のモードを用意し、処理を切り替えることで対応できる。 ◆補正後の明度差 125～255 6回 62～124 　0～61 （9人・18回中）

14 まとめ 本研究では進化的計算技法（IGA）を用いた 配色最適化システムを開発した。 今後の課題
個人ごとに読みやすい配色に変更できることがわかった。 今後の課題 GAパラメータの検討 収束が早く、第2世代以降から近い値（人間からみたらほぼ一緒の配色）ばかりになり細かい補正ができない問題点あり 「学習（ルール化） 」及び「自動補正」の実現 動画像への応用

15 参考文献 http://www.happycolors.net/
色覚異常 – Wikipedia, 色覚バリアフリー HAPPY COLORS

16 ＊ご清聴ありがとうございました＊ 樽美　澄香