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

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

1 情報工学科 05A2301 樽美 澄香 （Tarumi Sumika)
第5回 配色最適化システムの仮完成と GAパラメータの調整 情報工学科　05A2301 樽美　澄香 （Tarumi Sumika) 2008年12月 1日

2 前回までの内容 配色最適化システムが完成!! （現在は、補正は明度・彩度のみ） JavascriptによるDOM操作
ページの配色操作 IGAによる配色最適化手順 色相（全般）→明度・彩度（個人）→ルール化 遺伝的アルゴリズム操作の設計 ＜提案内部処理＞ 最適な明度・彩度の解の探索（HSV色空間を用いる） 配色最適化システムが完成!! （現在は、補正は明度・彩度のみ）

3 配色最適化システムの全体画面 △ 実行中の画面 Webページの選択（クリック）した箇所の配色を、見やすく補正する。CSSを操作する。
アプリ画面で操作を行う。 現在は、補正したいページに ボタンを設置することで利用可 表示中のページに対応予定 設置法：以下の２行を記述 Webページ アプリ <script type=“text/javascript“ src=“optapp.js"> <form> <input value=“配色補正ボタン" onclick="appOpen()" type="button"> </form> △ 実行中の画面

4 パラメータ設定画面 △ 実行中の画面 パラメータ設定画面は 面積節約のため、 折りたたみ式にレイアウト 打ち切り世代 交叉率 突然変異率
突然変異範囲 1～3の減少率 △ 実行中の画面

5 現配色＆新配色の表示 △ 実行中の画面 Webページの選択箇所から解析し表示する 新配色はIGA処理後に生成 現在の配色
ABC 3rd 2nd ( 1st ) 1色目：文字色 2色目：背景色 3色目：2次背景色 現在の配色 Webページの選択箇所から解析し表示する 色指定されているselector RGB16進に変換表示 （Webで使われる書式） 新配色はIGA処理後に生成 新しい配色 △ 実行中の画面

6 Webページの配色を変更する （適用する）
配色提案（IGA）画面 （配色評価） ５段階の星評価 人間が操作しやすいといわれる5段階評価 打ち切り世代まで 評価を繰り返す・・・ 「元の配色」に最も近い新配色をデフォルト自動選択 各色の明度・彩度の差の合計が、最も小さい配色 ５段階の星評価 人間が操作しやすいといわれる5段階評価 打ち切り世代まで 評価を繰り返す・・・ ×（打ち切り 　　世代数：調整中） （配色決定） Webページの配色を変更する （適用する） △ 実行中の画面

7 配色補正のプレビュー 文字色（1色目）と第1背景色（2色目）の明度差の表示機能 △ 実行中の画面 明度差
W3C（WWW技術標準化推進団体）では、 ウェブサイト設計で、明度差は125以上が望ましいとしている。 明度差は( R×299 + G×587 + B×114 )/1000 で計算。 ※　現在は数値表示のみなので、自動選択・判断基準に利用したい。

8 パラメータの調整＆テスト 現在、パラメータの調整（設定）中です。 テスト日程 ゼミ実施日、12月15日（月）or 20日（月）予定
短期大学部からモニターをお借りして人力実験中。 EIZO社 色覚シミュレーションモニター「FlexScan U」 公式サイト製品情報 テスト日程 ゼミ実施日、12月15日（月）or 20日（月）予定 ぜひテストにご協力ください！（お願い） 詳細が決まり次第、後日ご連絡します。

9 htmlデータ（配色はCSS定義） ＜日本語での名言集＞ △見づらい配色 （出典：色覚異常 - Wikipedia）
デモのテストデータについて 見づらい配色でCSSを定義 参考：色覚異常-Wikipedia htmlデータ（配色はCSS定義） ＜日本語での名言集＞ △見づらい配色 （出典：色覚異常 - Wikipedia）

10 補正後の色弱シミュレーション結果 本システムを利用し、色弱者の見え方を実験 見えづらい 見えやすくなった! 補正前の配色 補正後の配色
オリジナル 見えづらい 見えやすくなった! 第一色盲 本システムを利用し、色弱者の見え方を実験 Web色弱シミュレータ「Vischeck」( パラメータの補正前・補正後の低圧縮jpg画像を利用 私の通常の見え方で感覚的に補正した結果をシミュレートしているため、 今回の実験より、さらに情報を読み取りやすく補正することは可能？

11 # 今後の予定 # 研究状況（完了） 次のステップ 配色提案・補正処理の実装 GAパラメータの調整終了 複数人によるテスト （主観評価）
システムの仮完成！ GAパラメータの調整中 12月上旬までに完了 次のステップ GAパラメータの調整終了 複数人によるテスト （主観評価） 評価方法の調査＆検討 評価用紙の作成

12 参考文献 色覚異常 – Wikipedia, W3C, Web Content Accessibility Guidelines 1.0,

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