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

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

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

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

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

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

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

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

ー　実　験　結　果　－

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

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

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

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

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

参考文献 http://www.happycolors.net/ 色覚異常 – Wikipedia, http://ja.wikipedia.org/wiki/%E8%89%B2%E8%A6%9A%E7%95%B0%E5%B8%B8 色覚バリアフリー HAPPY COLORS http://www.happycolors.net/

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