情報工学科 05A2301 樽美 澄香 （Tarumi Sumika) 第5回 配色最適化システムの仮完成と GAパラメータの調整 情報工学科 05A2301 樽美 澄香 （Tarumi Sumika) 2008年12月 1日
前回までの内容 配色最適化システムが完成!! （現在は、補正は明度・彩度のみ） JavascriptによるDOM操作 ページの配色操作 IGAによる配色最適化手順 色相（全般）→明度・彩度（個人）→ルール化 遺伝的アルゴリズム操作の設計 ＜提案内部処理＞ 最適な明度・彩度の解の探索（HSV色空間を用いる） 配色最適化システムが完成!! （現在は、補正は明度・彩度のみ）
配色最適化システムの全体画面 △ 実行中の画面 Webページの選択（クリック）した箇所の配色を、見やすく補正する。CSSを操作する。 アプリ画面で操作を行う。 現在は、補正したいページに ボタンを設置することで利用可 表示中のページに対応予定 設置法：以下の２行を記述 Webページ アプリ <script type=“text/javascript“ src=“optapp.js"> <form> <input value=“配色補正ボタン" onclick="appOpen()" type="button"> </form> △ 実行中の画面
パラメータ設定画面 △ 実行中の画面 パラメータ設定画面は 面積節約のため、 折りたたみ式にレイアウト 打ち切り世代 交叉率 突然変異率 突然変異範囲 1～3の減少率 △ 実行中の画面
現配色＆新配色の表示 △ 実行中の画面 Webページの選択箇所から解析し表示する 新配色はIGA処理後に生成 現在の配色 ABC 3rd 2nd ( 1st ) 1色目：文字色 2色目：背景色 3色目：2次背景色 現在の配色 Webページの選択箇所から解析し表示する 色指定されているselector RGB16進に変換表示 （Webで使われる書式） 新配色はIGA処理後に生成 新しい配色 △ 実行中の画面
Webページの配色を変更する （適用する） 配色提案（IGA）画面 （配色評価） ５段階の星評価 人間が操作しやすいといわれる5段階評価 打ち切り世代まで 評価を繰り返す・・・ 「元の配色」に最も近い新配色をデフォルト自動選択 各色の明度・彩度の差の合計が、最も小さい配色 ５段階の星評価 人間が操作しやすいといわれる5段階評価 打ち切り世代まで 評価を繰り返す・・・ ×（打ち切り 世代数：調整中） （配色決定） Webページの配色を変更する （適用する） △ 実行中の画面
配色補正のプレビュー 文字色（1色目）と第1背景色（2色目）の明度差の表示機能 △ 実行中の画面 明度差 W3C（WWW技術標準化推進団体）では、 ウェブサイト設計で、明度差は125以上が望ましいとしている。 明度差は( R×299 + G×587 + B×114 )/1000 で計算。 ※ 現在は数値表示のみなので、自動選択・判断基準に利用したい。
パラメータの調整＆テスト 現在、パラメータの調整（設定）中です。 テスト日程 ゼミ実施日、12月15日（月）or 20日（月）予定 短期大学部からモニターをお借りして人力実験中。 EIZO社 色覚シミュレーションモニター「FlexScan U」 公式サイト製品情報 http://www.eizo.co.jp/products/u/sx2461w-u/index.html テスト日程 ゼミ実施日、12月15日（月）or 20日（月）予定 ぜひテストにご協力ください！（お願い） 詳細が決まり次第、後日ご連絡します。
htmlデータ（配色はCSS定義） ＜日本語での名言集＞ △見づらい配色 （出典：色覚異常 - Wikipedia） デモのテストデータについて 見づらい配色でCSSを定義 参考：色覚異常-Wikipedia htmlデータ（配色はCSS定義） ＜日本語での名言集＞ △見づらい配色 （出典：色覚異常 - Wikipedia）
補正後の色弱シミュレーション結果 本システムを利用し、色弱者の見え方を実験 見えづらい 見えやすくなった! 補正前の配色 補正後の配色 オリジナル 見えづらい 見えやすくなった! 第一色盲 本システムを利用し、色弱者の見え方を実験 Web色弱シミュレータ「Vischeck」(http://vischeck.com/) パラメータの補正前・補正後の低圧縮jpg画像を利用 私の通常の見え方で感覚的に補正した結果をシミュレートしているため、 今回の実験より、さらに情報を読み取りやすく補正することは可能？
# 今後の予定 # 研究状況（完了） 次のステップ 配色提案・補正処理の実装 GAパラメータの調整終了 複数人によるテスト （主観評価） システムの仮完成！ GAパラメータの調整中 12月上旬までに完了 次のステップ GAパラメータの調整終了 複数人によるテスト （主観評価） 評価方法の調査＆検討 評価用紙の作成
参考文献 色覚異常 – Wikipedia, http://ja.wikipedia.org/wiki/%E8%89%B2%E8%A6%9A%E7%95%B0%E5%B8%B8 W3C, Web Content Accessibility Guidelines 1.0, http://www.w3.org/TR/WAI-WEBCONTENT/
＊ご清聴ありがとうございました＊ 樽美 澄香