Presentation is loading. Please wait.

Presentation is loading. Please wait.

福岡工業大学 情報工学部 情報工学科 種田研究室 情報工学科 種田研究室 樽美 澄香 [C8] 対話型遺伝的アルゴリズム( IGA )による 色弱者向けの Web ページ配色最適化システム 2009 年 2 月 20 日.

Similar presentations


Presentation on theme: "福岡工業大学 情報工学部 情報工学科 種田研究室 情報工学科 種田研究室 樽美 澄香 [C8] 対話型遺伝的アルゴリズム( IGA )による 色弱者向けの Web ページ配色最適化システム 2009 年 2 月 20 日."— Presentation transcript:

1 福岡工業大学 情報工学部 情報工学科 種田研究室 情報工学科 種田研究室 樽美 澄香 [C8] 対話型遺伝的アルゴリズム( IGA )による 色弱者向けの Web ページ配色最適化システム 2009 年 2 月 20 日

2 はじめに 「色弱」 「色弱」の定義 視細胞(赤, 青, 緑 ) の3種類のうち、 そのうちどれか1つの機能が低下している状態 「大半の色は見分けがつくが、 特定の範囲の色について見分けづらい色覚障害」

3 背景と目的 現在、だれでも Web ページを容易に制作・配信可能 多くの人に情報を伝えるためには、 「バリアフリーな配色」知識が必要 個人が勉強する手間がかかる 従来は、進化的計算を用いた 「制作者好みの配色生成」の研究がされている 閲覧者(今回は色弱者)向けの配色ではない 本来の配色からかけ離れず、色弱者ごとの症状具合にあわせ よりすばやく読みやすい配色に最適化するシステムの開発! i ?

4 読みづらい配色の Web ページ例 出典:岡部正隆, 伊藤啓, 橋本知子 『ユニバーサルデザインにおける色覚バリアフリーへの 提言 ” 』

5 研 究 内 容研 究 内 容

6 Good Morning! システムの概要 赤緑色弱の例 Good Morning! ? 1 1 .読みづらい Web ページを発 見 2 Good Morning! 2 .新しい配色の提案一覧から、 ユーザーにとって見やすい配色 に変更する 3 .進化的計算技法の IGA を用いることで、 よりすばやく、よりユーザーごとの目にあわせた補正を 行う ♪ 進化的計算による提 案 色情報 ( CSS 抽出 ) の 解析・変更 Good Morning! 開発言語: JavaScript

7 IGA による補正値探索

8 「明度・彩度」による補正 色弱者は「明度・彩度」の差に敏感 色弱者は「明度・彩度」の差に敏感 少ない変化量で色を判別できるようになる。 「本来の配色から、なるべくかけ離れない」という 研究の方針に適したパラメータ 感性を反映しやすい「 * 対話型遺伝的アルゴリズム (IGA) 」を用いて個 人にあわせた最適な補正値を探索、明度・彩度を補正。 ※ 色相 (H) 明度 (L) 彩度 (S) で色を表す HLS 表示系を使用する △明度 (明る さ) △彩度 (鮮やか さ) (高 ) (低 )

9 *対話型遺伝的アルゴリズム( IGA ) IGA 適応度の評価 母集団の生成 選択 交叉 終了条件 END Yes No 突然変異 IGA では 人間による判断 で、「評価」を 行う ※ GA の「適応度の評価」に は 定式化された関数を用い る ★ 自然淘汰をモデル化・最適解を求める 「遺伝的アルゴリズム (GA) 」を基にしてい る。 ★ IGA は感性を組み込みやすい特徴がある。

10 遺伝子の表現 遺伝子の表現法 1. バイナリコーティング: 0, 1, X 2. 実数値 GA ( BLX-α ): 1, 2.5, ・・・, 1000 etc. IGA では実数値 GA の探索効率が高い 3 色配色補正の遺伝子コーディング 44237836517 S 44% L 23% 1st color S 78% L 36% 2nd color3rd color S 5% L 17% 彩度 S: 0~100% 明度 L: 0~100% 3rd 2nd ( 1st ) ×9 個体 ?

11 選択・交叉 処理が単純で効率的な SimpleGA ルーレット選択・・・・適応度(評価)に比例した割合で親を選 択 エリート保存戦略・・・適応度(評価)の良い個体はそのまま残 す 一点交叉 突然変異 非一様突然変異 ランダムな座標で、第 1 世代はランダムな値に変更し、 世代ごとに変化させる値の幅を狭くし、安定した結果を得る。 遺伝的操作(選択・交叉・突然変異)

12 配色候補の評価 5段階の星評価 人間が操作しやすいと いわれる 5 段階評価 打ち切り世代まで 評価を繰り返す・・・ 「元の配色」に最も近い新 配色をデフォルト自動選択 各色の明度・彩度の差の 合計が、最も小さい配色 △ 実行中の画面 × (打ち切り 世代数:設定可) (配色評価) Web ページの配色を変更する (適用する) 5段階の星評価 人間が操作しやすいと いわれる 5 段階評価 打ち切り世代まで 評価を繰り返す・・・ ※ IGA では「ユーザーの感性(判断)」で評 価 (配色決定)

13 実験(主観評価) 1. 男性 9 名 2. 18 パターンの読みづらい配色から、 ユーザーが思う最も見づらい配色を 補正してもらう。 3. 主観評価(アンケート形式) 色弱者の見え方の実現 EIZO 社 色覚シミュレーションモニ ター「 FlexScan U 」 公式サイト製品情報 http://www.eizo.co.jp/products/u /sx2461w-u/index.html http://www.eizo.co.jp/products/u /sx2461w-u/index.html △読みづらい配色 18 パターンを CSS ルール化 (参考:色覚異常 - Wikipedia )

14 静的色弱シミュレーションでの結果 本システムを利用し、色弱者の見え方を実験 Web 色弱シミュレータ「 Vischeck 」 (http://vischeck.com/) パラメータの補正前・補正後のスクリーンショット( bmp 画像)を利用 私の通常の見え方で感覚的に補正した結果をシミュレートしているため、 今回の実験より、さらに情報を読み取りやすく補正することは可能? 補正前の配色補正後の配色 読みづらい読みやすくなった !

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

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

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

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


Download ppt "福岡工業大学 情報工学部 情報工学科 種田研究室 情報工学科 種田研究室 樽美 澄香 [C8] 対話型遺伝的アルゴリズム( IGA )による 色弱者向けの Web ページ配色最適化システム 2009 年 2 月 20 日."

Similar presentations


Ads by Google