Webコンテンツにおける赤文字の誘目性に関する研究―発見不可能な限界を求める測定手法―

全文

(1)Vol.2019-AAC-9 No.7 2019/3/8. 情報処理学会研究報告 IPSJ SIG Technical Report. Web コンテンツにおける赤文字の誘目性に関する研究 ―発見不可能な限界を求める測定手法― 永田和生1,a). 村上諒1. 概要：Web コンテンツでは，一般の文書と同様，背景色を白，文字色を黒とし，重要な箇所の文字色を赤にすることで強調する場合が多い．これは，赤色が持つ「誘目性」の高さを利用したものである．しかし，このような配色では，色弱者は本文中に含まれる赤文字を見つけることが難しいとされる．本研究では，著者らが先行研究で提案してきたものとは異なり，1 ヶ所のみの着色単語を発見させる手法によって “色弱の度合い”を測定し，その妥当性を検証している．結果として，提案手法によって得られた数値を一般色覚者に適用することで，色弱被験者の誘目性を再現できると結論づけている．キーワード：色覚特性，色弱，誘目性，Web，ユーザビリティ. Attractiveness by Red-colored Characters on Web pages: Assessment Method Using Undiscoverable Limit Kazuo NAGATA1,a). Ryo MURAKAMI1. Abstract: The important keywords or sentences on web pages are commonly colored by red. This typical highlighting is based on the “attractiveness” of red. In this paper, the author evaluate how much the redcolored characters have attractiveness for color-blind persons. The author proposes a method to calculate the level of color-blindness for each color-blind person. As a result, it is concluded that there is a clear diﬀerence in attractiveness of red-colored characters between normal color vision persons and color-blind persons. The author concluded that the attractiveness for a color-blind person can be found by using their method. Keywords: Colorblindness, Attractiveness, Web, Usability. 1. はじめに 1.1 背景一般的な文書において，「強調したい箇所」や「重要な箇所」は赤文字にすることが多い．これは，赤色が持つ「誘. この問題は，Web コンテンツにおいても同様である．. Web コンテンツでは背景色／文字色を自由に組み合わせられるが，やはり白い背景に黒い文字という組み合わせが標準的で，色弱者は本文中に含まれる赤文字を見つけることが難しいという傾向がある [4][5]．. 目性」の高さを利用したものである [1][2][3]．しかし，それは一般色覚者が見ることが前提とされていて，色弱者に. 1.2 色覚特性. は必ずしも当てはまらない．そのため，色弱者はそのよう. 遺伝によって一般的なものとは異なる色覚特性を持つ. な赤文字で書かれた重要事項を見つけるのに時間がかかっ. 「色弱者」は，一定の割合で存在する．色覚特性は大きく 5. たり，見つけられなかったりすることもある．. 種類に分類され，それぞれ以下に示すような特徴がある．. • C 型：一般色覚．出現頻度は約 95%．光の三原色を感 1. a). 熊本高等専門学校 National Institute of Technology, Kumamoto College. [email protected]. ⓒ 2019 Information Processing Society of Japan. 知する錐体のすべてが機能している色覚特性．. • P 型：主に赤色光を感知する L 錐体の欠損あるいは機. 1.

(2) Vol.2019-AAC-9 No.7 2019/3/8. 情報処理学会研究報告 IPSJ SIG Technical Report. 能不全を原因とする色覚特性．. • D 型：主に緑色光を感知する M 錐体の欠損あるいは機能不全を原因とする色覚特性．. • T 型，A 型：稀に存在するが出現頻度は極めて低く，それぞれ約 0.001%．上記の型のうち P 型と D 型を合わせた出現頻度は，日本人の男性で約 5%，女性で 0.2%とされる [6]．本稿では特に赤色の感知特性に注目し，色弱者の中でも P 型を研究の図 1 実験 1 の実施環境. 対象とする．. 1.3 目的一般色覚の人々は赤を「強い」「目立つ」といった印象を. 測定する．この時間が 60[s] 以内であった場合は「発見できた」とみなす．. 与える色だと経験的に認識している．故に，人々はビジネス文書，ポスター，看板などの上に情報を配置するような場面で，目立たせたい場所に赤色を用いる傾向がある．こ. 2.2 検証前節の測定を一般色覚者と色弱者の両者に対して行い，. のことは神作らによって明らかにされており，「誘目性」と. 同一のグラフにプロットし，いくつかの基準で両者間の差. して述べられている [1]．しかし，前述のように赤色は色弱. 分を求める．次に，ここで求めた差分だけ着色単語の赤色. 者にとっては識別を苦手とする色であり，必ずしも強い印. をあらかじめ減衰させ，一般色覚者を被験者として再度前. 象を受けない場合も多い．むしろ他の色よりも目立たない. 節の方法で測定を行うことにより，色弱者の被誘目性の再. ような場合もある．. 現を試みる．この結果が色弱者とほぼ同一となるような. そこで我々は，一般的な白背景／黒文字の Web コンテンツでは，文字を赤く着色しても色弱者に対して誘目性を上げる効果は低いのではないか，という仮説を立て，先行研究で実証した [4][5]．従来から用いられてきた紙を媒体とする文書の場合は，当然ながら印刷後に動的に色を変換したりすることはできない．一方，Web コンテンツの場合はソースコードの構文. “色弱の度合い”の算定方法を探索する．. 3. 実験 3.1 実験環境図 1 のようなサーバ／クライアント環境で実験を行う．使用機材は以下の通りである．. • Web サーバ. 解析によって赤文字を検知し，動的に変換を施すことがで. – PC: VMware Fusion 上で動作する仮想マシン. きる．本研究の大目標は，そのような変換機構を開発する. – OS: CentOS Linux release 7.6.1810. ことにある．. – httpd: Apache/2.4.6. 本稿では，過去の研究 [5] などで実施してきた実験方法を再検討し，色弱者の “色弱の度合い”を測定する手法を提. – PHP 7.2.11 • クライアント. 案し，検証する．また，その結果に基づいて色弱者の誘目. – 端末: Apple iPad Pro 9.7 インチ. 性をエミュレートする機構を開発し，その実証評価を行う．. – OS: iOS 12.1.3. 2. 提案手法. – ブラウザ: Safari 実験場所は一般的な蛍光灯照明と自然光（直射日光では. 先行研究では，文書中に赤色の強度の異なる 2 個の着色. ない）が入り込む屋内で，3 名とも日中に同じ場所に着席. 単語を含ませ，どちらを早く発見するかという比較によっ. して実験を行う．クライアント端末の画面輝度は最大と. て色弱者の “色弱の度合い”の測定を試みた [4][5]．本稿で. する．. は，色弱者の日常的（現実的）な状態を測定することを主眼に置いた “色弱の度合い”の測定手法を提案する．. 3.2 被験者 • 一般色覚被験者 2019001，2019002. 2.1 測定まず，測定用の文章をタブレット PC に表示する．このとき，フォントサイズはブラウザの既定値のまま変更しない．文章中のランダムな 1 箇所に赤色の着色単語を混在さ. これまでに色弱と自覚したこと，および他者から指摘されたことがない一般色覚者 2 名．いずれの被験者も，裸眼視力または矯正視力で 1.0 以上．. • P 型被験者 2019101. せ，被験者はその着色単語を探し出してタップする．この. 先天的に色弱を持つ P 型色弱者 1 名．事前に扶桑プレ. 赤色着色単語の赤の強度を減衰させ，発見にかかる時間を. シジョン社製「パネル D-15 テスト（iPad 用）」[7] を. ⓒ 2019 Information Processing Society of Japan. 2.

(3) Vol.2019-AAC-9 No.7 2019/3/8. 情報処理学会研究報告 IPSJ SIG Technical Report. 図 3. 開発した測定プログラムの操作画面. 減衰させるエミュレータを用いた．一方，本稿では前節の測定方法をそのまま使用し，後述する方法によって求める減衰量をあらかじめ適用してから試行を開始することでこれに代える．これにより，一般色覚者でも色弱者と同様の見え方を再現できることを想定している．被験者は，実験 1 と同じ一般色覚者 2 名とする．. 4. 実験結果図 2. 実験 1 の評価用 HTML 文書. 4.1 結果 1：赤色着色単語の誘目性比較用いて色覚特性の型を同定．自動車運転免許保有．日常の生活には不自由を感じていないと云う．識別が難しい色は，赤と黒，紫と水色，茶色と緑，など．老眼と乱視を眼鏡で矯正している．本稿の筆頭著者本人．. 3.3 実験方法 3.3.1 実験 1：赤色着色単語の誘目性比較まず，文書中に出現する “赤文字による強調” が，一般色覚者および色弱者に与える誘目性の差を評価する．その方法は以下の通りである．. 一般色覚者と P 型色弱者の測定結果を図 4 に示す．本来は折れ線グラフで描画するべきデータではないが，減衰量を求める目安として描画している．グラフより，P 型色弱者は減衰量が 1 段階の時点で成功率の低下が始まっており，減衰量が 8 段階になったところで成功率がゼロ（＝まったく発見できない）になっている．一方，一般色覚者は概ね減衰量が 9 段階になったところから成功率が下がり始め，. 14 段階でゼロになっている．両者の発見成功率が下がり始めた点の減衰量の差分 ∆Ll は，9 − 1 = 8 となる．この算定結果を P 型被験者の “色弱の度合い” と仮定し，実験 2 で適用する減衰量とする．. ( 1 ) 図 2 のような HTML 文書を用意する．この HTML 文書は PHP によって生成され，Web ブラウザで読み込むとランダムな 1 ヶ所の単語が赤色で着色され. 4.2 結果 2：色弱者の誘目性の再現実験 2 の結果を図 5 にグラフとして示す．マーカー ■. て表示される．（図 2 では右下部の「支援」の文字が. （実線）とマーカー ●（破線）は図 4 と同じものである．. 16 進数 3 桁（赤，緑，青それぞれ 1 桁）表現の#F00. マーカー ▲があらかじめ減衰量を適用した場合の一般色覚. で着色されている）. 者 2 名の発見成功率で，それに沿う点線はそれらの値から. ( 2 ) 被験者は，タブレット PC を用いてこの HTML 文書. 得られた多項式（3 次）近似曲線である．. を見て，最初に発見した着色単語を指でタップする．発見できない場合は「見つけられない」ボタンを押. 5. 考察. すことでパスできる．. 5.1 赤色着色単語の誘目性比較. ( 3 ) このとき，タップするまでに要した時間を自動で記録する．. 図 5 に示すように，一般色覚者と比べて P 型被験者は明らかに発見成功率の低下が早く，赤色着色文字が P 型被験. ( 4 ) 着色単語の R 値の減衰量は図 3 のように試行前に指. 者に与える誘目性は低いと考えられる．一般色覚者は発見. 定する．1 段階ずつ 15 段階まで減衰させ，それぞれ. 成功率の低下が遅く，少々暗い赤色で着色されても問題な. で 10 回ずつ試行する．. く発見できるが，少なくとも今回の P 型被験者 2019101 に. 3.3.2 実験 2：色弱者の誘目性の再現先行研究 [4][5] では数値指定によって着色単語の赤色を ⓒ 2019 Information Processing Society of Japan. 対しては#FFF の赤色を用いなければ確実な誘目性は期待できないと考えられる．. 3.

(4) Vol.2019-AAC-9 No.7 2019/3/8. 情報処理学会研究報告 IPSJ SIG Technical Report. の結果を単純に左にシフトしたものを図 5 にマーカー ◆ として描画し，他と同様に多項式（3 次）近似曲線（二点鎖線）を描画してみたところ，こちらの方が P 型被験者の近似曲線に近くなることがわかった．この結果から，本稿で提案した測定方法では ∆Ll と ∆Lf の平均をもって “色弱の度合い”とすれば妥当であると考えられる．. 6. まとめと今後の課題本稿では，一般的な Web コンテンツにおける赤色着色文字に対する色弱者の被誘目性に着目し，その特性の評価図 4. 赤色着色単語の誘目性比較. を行なった．その結果を元に色弱者の “色弱の度合い”を求める手法を考案し，一般色覚者に擬似的に適用することでその妥当性を確認した．実験 1 では，一般的な白背景／黒文字の Web コンテンツにおいて，P 型色弱者に対しては赤色着色文字の誘目性が低いことを確認した．実験 2 では，実験 1 で結果のグラフから求めた「発見成功率が下がり始めた点の減衰量の差」と「発見成功率が完全に 0%になった点の減衰量の差」の平均値を “色弱の度合い”とし，赤色の減衰量としてあらかじめ適用した状態にすることで，一般色覚者と P 型被験者が概ね同様の特性となることが確認できた．今後は，複数の色弱者の協力を得て，本稿で考案した “色弱の度合い”の算定方法についてさらなる検証を進めたい．また，色弱者の中でも個人個人で “色弱の度合い”にばらつきがあるのかもまだ不確定であるため，実験データの累積によりその妥当性を検証していきたい．. 図 5 色弱者の誘目性の再現. 謝辞本研究は JSPS 科研費 JP18K11978 の助成を受けたものです．. 同グラフでは，一般色覚者と P 型被験者の差分として以下の 2 つが見られる．. • 発見成功率が下がり始めた点の減衰量の差 ∆Ll = 9−1=8 • 発見成功率が完全に 0%になった点の減衰量の差. 参考文献 [1] [2]. ∆Lf = 14 − 8 = 6 今回，実験 2 であらかじめ適用する赤色の減衰量には，. [3]. 前者を採用した．その理由は，図 4 から読み取れるように，後者の 6 段階を適用したとて一般色覚者は成功率 100%を. [4]. 達成することができると予想されたためである．. 5.2 色弱者の誘目性の再現. [5]. 図 5 に示すように，あらかじめ減衰させた場合の一般色覚者の発見成功率（マーカー ▲）の多項式（3 次）近似曲. [6]. 線（点線）は，P 型被験者のそれに接近しているが，一致しているとは言い難い．そこで，前節に挙げた一般色覚者と P 型被験者の 2 つ差. [7]. 神作博： “色と視覚表示” ，人間工学，Vol.4，No.1，pp.7-16， 1968．重田和広，中山実，清水康敬：立体ディスプレイを用いた文字提示の効果，電子情報通信学会論文誌，Vo1.J82-A， No.1，pp.158-167，1999．成井智祐，中山実：着色文字の色情報が語句探索時間に与える効果の一検討，日本教育工学会論文誌，Vol.35，No.1， pp.95-98，2011．永田和生，坂本奨馬：Web コンテンツにおける赤文字の誘目性に関する研究，信学技報，Vol.116，No.519，pp.87-90， 2017．永田和生：Web コンテンツにおける赤文字の誘目性に関する研究-色覚特性の度合いが可変なエミュレーター，信学技報，Vol.117，No.502，pp.35-38，2018．日本眼科学会：「目の病気，先天色覚異常」， http://www.nichigan.or.jp/public/disease/ hoka senten.jsp（閲覧日：2019 年 2 月 5 日）扶桑プレシジョン：パネル D-15 テスト， https://itunes.apple.com/jp/app/panerud-15tesuto/ id406108475?mt=8. 分 ∆Ll と ∆Lf の平均 (8 + 6)/2 = 7 を用いて一般色覚者 ⓒ 2019 Information Processing Society of Japan. 4.

(5)