[C8] 対話型遺伝的アルゴリズム（IGA）による色弱者向けのWebページ配色最適化システム福岡工業大学情報工学部情報工学科種田研究室樽美澄香 2009年 2月 20日はじめに  「色弱」の定義  視細胞（赤,青,緑)の３種類のうち、そのうちどれか１つの機能が低下している状態  「大半の色は見分けがつくが、特定の範囲の色について見分けづらい色覚障害」背景と目的  現在、だれでもWebページを容易に制作・配信可能  多くの人に情報を伝えるためには、「バリアフリーな配色」知識が必要個人が勉強する手間がかかる  i? 従来は、進化的計算を用いた「制作者好みの配色生成」の研究がされている閲覧者（今回は色弱者）向けの配色ではない  本来の配色からかけ離れず、色弱者ごとの症状具合にあわせよりすばやく読みやすい配色に最適化するシステムの開発！読みづらい配色のWebページ例出典：岡部正隆, 伊藤啓, 橋本知子『ユニバーサルデザインにおける色覚バリアフリーへの提言”』研究内容進化的計算による提案システムの概要 Good Morning!  赤緑色弱の例色情報（CSS抽出) の解析・変更 2．新しい配色の提案一覧から、ユーザーにとって見やすい配色に変更する Good Good Morning! Morning! Good Morning! Good Morning! 1 1．読みづらいWebページを発見 ? ♪ 3．進化的計算技法のIGAを用いることで、よりすばやく、よりユーザーごとの目にあわせた補正を行う開発言語：JavaScript IGAによる補正値探索「明度・彩度」による補正（高）  色弱者は「明度・彩度」の差に敏感  少ない変化量で色を判別できるようになる。（低） △明度 △彩度（明るさ）（鮮やかさ）  「本来の配色から、なるべくかけ離れない」という研究の方針に適したパラメータ  感性を反映しやすい「*対話型遺伝的アルゴリズム(IGA)」を用いて個人にあわせた最適な補正値を探索、明度･彩度を補正。 ※ 色相(H)明度(L)彩度(S)で色を表すHLS表示系を使用する＊対話型遺伝的アルゴリズム（IGA） ★ 自然淘汰をモデル化・最適解を求める「遺伝的アルゴリズム(GA)」を基にしている。 IGA ★ IGAは感性を組み込みやすい特徴がある。母集団の生成適応度の評価終了条件 No Yes END ※GAの「適応度の評価」には定式化された関数を用いる選択交叉突然変異 IGAでは人間による判断で、「評価」を行う遺伝子の表現 ?  遺伝子の表現法 1. バイナリコーティング： 0, 1, X 2. 実数値GA（BLX-α）： 1, 2.5, ･･･ , 1000 etc. IGAでは実数値GAの探索効率が高い   3色配色補正の遺伝子コーディング 3rd 2nd 44 23 78 36 5 17 ×9個体 S L 44% 23% 1st color S L 78% 36% 2nd color S L 5% 17% 3rd color 彩度S: 0~100% 明度L: 0~100% ( 1st ) 遺伝的操作（選択・交叉・突然変異）  選択・交叉   処理が単純で効率的なSimpleGA  ルーレット選択・・・・適応度（評価）に比例した割合で親を選択  エリート保存戦略・・・適応度（評価）の良い個体はそのまま残す  一点交叉突然変異  非一様突然変異  ランダムな座標で、第1世代はランダムな値に変更し、世代ごとに変化させる値の幅を狭くし、安定した結果を得る。配色候補の評価 ※IGAでは「ユーザーの感性（判断）」で評価（配色評価）  ５段階の星評価  ×（打ち切り世代数：設定可）人間が操作しやすいといわれる5段階評価  打ち切り世代まで評価を繰り返す・・・  「元の配色」に最も近い新配色をデフォルト自動選択  各色の明度・彩度の差の合計が、最も小さい配色（配色決定） △ 実行中の画面 Webページの配色を変更する（適用する）実験（主観評価） 1. 男性9名 2. 18パターンの読みづらい配色から、ユーザーが思う最も見づらい配色を補正してもらう。 3. 主観評価（アンケート形式）  色弱者の見え方の実現  EIZO社色覚シミュレーションモニター「FlexScan U」  公式サイト製品情報  △読みづらい配色18パターンをCSSルール化（参考：色覚異常 - Wikipedia） http://www.eizo.co.jp/products/u /sx2461w-u/index.html 静的色弱シミュレーションでの結果補正前の配色オリジナル読みづらい補正後の配色読みやすくなった! 第一色盲  本システムを利用し、色弱者の見え方を実験  Web色弱シミュレータ「Vischeck」(http://vischeck.com/)  パラメータの補正前・補正後のスクリーンショット（bmp画像）を利用  私の通常の見え方で感覚的に補正した結果をシミュレートしているため、今回の実験より、さらに情報を読み取りやすく補正することは可能？補正後の読みやすさ（P型） 4 読みやすさ＆情報取得 ※元は同じ配色でも、補正後の値は異なった 1 読みやすい↑ 3 読みや 2 すさ補正前 1 －結果－読みづらい↓ 0 0 1 2 3 4 5 6 7 8 9 被験者ナンバー  補正後 9人全員が、補正後の読みやすさ（D型）  P型(25%)・D型(75%)ともに、  4 1 読みやすい↑ 「読めない/読みづらい」から 3 「読める/読みやすい」に補正  情報取得可能になった読みや 2 すさ 1 補正後、情報取得できたか読みづらい↓ 0 0 1 2 3 4 5 被験者ナンバー 6 7 8 9 操作しやすさ  色弱者＝コンピュータに馴染みないユーザー含む   「操作しやすさ」に配慮する 5 D型 4 P型結果  「楽」「普通」評価     操作しやすさ 9人中6人 (2/3) コメント「星評価が楽」「苦ではない」「面倒」評価  9人中3人 (1/3)  コメント「GUI操作が面倒」程ほど良い評価が得られたが、慣れた人にはGUI操作は面倒  操 3 作しやすさ 2 1 0 0 1 2 3 4 5 6 7 8 9 10 被験者ナンバー CUI・ショートカット機能（評価） 4:楽 3:普通 2:苦ではない 1:面倒まとめ  本研究では進化的計算技法（IGA）を用いた配色最適化システムを開発した。   個人ごとに読みやすい配色に変更できることがわかった。今後の課題  GAパラメータの検討  収束が早く、第2世代以降から近い値（人間からみたらほぼ一緒の配色）ばかりになり細かい補正ができない問題点あり  「学習（ルール化）」及び「自動補正」の実現  動画像への応用＊ご清聴ありがとうございました＊樽美澄香