錯視の影響を考慮した透明パレットによる色選択手法とその検証

錯視の影響を考慮した透明パレットによる 色選択手法とその検証 明治大学 小林沙利 中村聡史 1

背景 色 はデザインの印象を決める重要な要素 ソフトウェア上の色選択には 色選択インタフェース が用いられる 色選択では， 選んだ色と実際に塗られる色 の印象が異なる 場合がある 2

背景：どれが同じ色？ パレット 1 パレット 2 3

背景：どれが同じ色？ パレット 1 パレット 2 4

背景：どれが同じ色？ パレット 1 色選択インタフェースの起こす パレット 2 錯視 5

色選択インタフェース間での色の印象の違い 同じ赤色でも周囲の色により違う明るさに見える 上：株式会社セルシス .イラスト マンガ制作アプリ CLIP STUDIO PAINT （クリスタ） , 2024 , https://www.clipstudio.net/ja/ 下： Microsoft, 無料のオンライン スライド プレゼンテーション : PowerPoint, 2024, https://www.microsoft.com/ja –jp /microsoft –365/powerpoint 11

背景 錯視現象により 選んだ色と実際に塗りたい色 の印象が異な る ・ デザインの印象が変わってしまう ・ 修正においてユーザの手間を増加 錯視を考慮した色選択インタフェースの実現は ユーザが望ましい色を選ぶうえで重要 12

これまでの調査：色選択インタフェースがもたらす錯視の影響 周辺にある色により，色の見かけの明るさが変わる 複数の背景色による色合わせタスクを実施 明るい色に囲まれた条件 暗い色に囲まれた条件 選 ん だ 色 の 明 度 選 ん だ 色 の 明 度 色の見かけの明るさが 周囲の明るさに応じて変わる 現象が 色選択の間違え方に影響を及ぼす Sari Kobayashi and Satoshi Nakamura. Seeing isn’tbelieving: How visual illusions distort color selection.In 37th Australian Conference on Human– ComputerInteraction (OzCHI 2025). To appear. 15

これまでの調査：色選択インタフェースがもたらす錯視の影響 色の表示面積が小さいほど周辺色に影響されやすい カラータイル 選 ん だ 色 の 誤 差 表示面積の小さいカラータイルは正確な色選択を阻害する可能性 Sari Kobayashi and Satoshi Nakamura. Seeing isn’tbelieving: How visual illusions distort color selection.In 37th Australian Conference on Human– ComputerInteraction (OzCHI 2025). To appear. 16

目的 塗る対象の周辺色と色選択インタフェースの背景色が異なる場合や カラータイルの面積の小ささによって意図と異なる色を選ぶ 色選択インタフェースの設計 ひとが色を見る際に発生する錯視に合わせた設計を行う必要がある 錯視を考慮した色選択インタフェースの実装と その検証

錯視を考慮した色選択インタフェース 透明な背景色 背景色に選ぶ色が影響される 選ぼうとする色をキャンバス上に置いたときの 色の見え方を確認できるようにする カラータイルを大きく提示 表示面積の小ささによる色の印象のずれを抑える 色系統を制限し，表示する色数を絞る 色系統タイル これらのアプローチを用いたシステムをPowerPoint上で実装 18

提案手法による色選択 カラータイルを右ドラッグ：移動 図形をクリックしてカラータイル を選択：色を塗る

実験 提案手法が正確で迷いの少ない色選択に有効かを検証 実験概要 PowerPoint 上での色合わせタスク (4 種類) 正答率，色の選択回数，解答時間，負荷を 2手法で実験者内比較 提案システム ・背景が透明色 ・パレットを動かせる ・カラータイルが大きい ベースラインシステム ・背景が白色 ・パレットを動かせない ・カラータイルが小さい 21

仮説 提案手法ではカラータイルをデザインの背景色と比較できる ベースライン手法と比較して， 仮説1： 仮説2： 仮説3： 仮説4： 提案手法はタスクの正答率が高い 提案手法は色を決定するまでの選択回数が少ない 提案手法は短時間で色選択を行える 提案手法は作業負荷が低い 22

実験手順 問題の構成 簡単な色覚検査 システムの練習 色合わせタスク 負荷に関するアンケート タスク１の練習 タスク１（６問） タスク２の練習 タスク２（６問） ・ ・ ・ タスク４（６問） 実験後アンケート 25

黒背景上に提示された 色を一致させるタスク ｃ

模様の色を一致させるタスク

画像上に提示された色を一致させるタスク

背景上の文字色を一致させるタスク あいうえお あいうえお

アンケート 負荷に関するアンケート NASA–TLXに回答 実験後アンケート 各パレットにおいて最も難しいと感じたタスクの種類 普段デザイン制作を行う際に色にこだわりがあるか システムへの感想 32

実験手順 実験参加者： 35 名（いずれも PowerPoint の使用経験あり） システムの使用順序はランダム 同じディスプレイから一定距離を置いた正面に座り実験を実施した 33

結果 正答率 提案手法： 95.3% ベースライン手法： 81.8% 提案手法の正答率が高かった 正答率が100% の参加者 ベースライン手法では 35 名中0名 提案手法では35 名中15 名 34

結果 選択回数 提案手法： 1.1 回 ベースライン手法： 1.8 回 提案手法の選択回数が少なかった 35

結果 解答時間 提案手法： 10.8 秒 ベースライン手法： 8.93 秒 提案手法の解答時間が長かった 36

結果 –負荷の評価 – ベースライン手法 提案手法 合計 35.38 45.31 * 知覚的要求（色選びへの難しさ） 6.73 15.74 身体的要求（マウスの移動） 9.76 3.87 *** タイムプレッシャー 0.69 0.98 作業成績（正答率） 4.90 努力（色選択を頑張る必要性） 8.07 7.09 *** 12.15 フラストレーション 5.24 5.55 ** * p<.05 ** p<.01 *** p<.001 合計スコアにおいて提案手法の負荷が低かった 知覚的要求・作業成績・努力 において提案手法の負荷が低い 身体的要求において提案手法の負荷が高い 37

結果 –アンケート – 各パレットにおいて最も難しいと感じたタスクの種類 提案手法・ベースライン手法ともに 文字色彩色タスクを難しく感じた人が多い →難しく感じたタスクに手法間の違いは表れなかった 普段デザイン制作を行う際に色にこだわりがあるか 5段階中4段階目以上（ 1：全くない～ 5：とてもある）を 回答した参加者（ 35 名中23 名）の正答率について，全参加者の結果と差が無かった →色へのこだわりを持っていても手法間で正答率に差が表れた 38

結果と考察 提案手法はベースライン手法より 正答率が高く，選択回数が少なく，負荷が低かった 仮説1： 提案手法はタスクの正答率が高い 仮説2： 提案手法は色を決定するまでの選択回数が少ない 仮説3： 提案手法は短時間で色選択を行える 仮説4： 提案手法は作業負荷が低い 仮説1， 2， 4が支持された

結果と考察 解答時間はベースライン手法の方が短かったため 仮説3「提案手法は短時間で色選択を行える」 提案手法のシステムに対する習熟度の低さ – 右ドラッグでパレットを移動する操作の使いづらさ – 色をかざす操作の慣れなさ は支持されなかった

考察 – 条件とタスクごとの正答率 – タスク１ タスク２ タスク３ タスク４ タスク 1と 4において差が表れた パレットの背景色と異なる色の上で色選択を行う状況では錯視が発生するが， 提案手法ではその影響を受けづらかった 41

タスク 1 における色選択の差 ベースラインシステム 提案システム

考察 – 条件とタスクごとの正答率 – 提案手法でタスク 4の正答率が低かった 大きなカラータイルを細い線である文字に当てはめても色が一致しているか分かりづらかった 44

考察 –改善点– 提案手法における誤答 色の系統を間違えた解答がみられた →提案手法は選択した色系統のみを表示するシステムであり， 一度選んだ色系統以外を検討しようとしなかったため 塗る対象の面積に合わせた色面積の表示や別の色系統を検討させる デザインが必要 45

考察 – 条件とタスクごとの選択回数 – タスク１ タスク２ タスク３ タスク４ タスク 1， 3， 4の選択回数に差が表れた 錯視を引き起こすパレットなら塗り直してしまう状況について 提案手法では修正の手間を省けた 46

選択回数が多くなった例

提案手法での色選択

提案手法での色選択行動 提案手法で選択回数が多かった例 52

考察 – 負荷の評価 – 負荷の評価 ・知覚的要求と努力で提案手法の負荷が低い 提案手法での色選択は簡単に感じられたのではないか 「実際の色の上に乗っけてできるからやりやすい」 ・身体的要求は提案手法の負荷が高い マウスでパレットを動かす操作や色の切替が負荷となった 「（ベースライン手法の方が）縦に並んでるので選びやすかった」 「（提案手法は）それぞれの色がもうちょっと近くても良い」 53

展望 配置・表示の改善 文字色を変える際にも色を確認しやすくなるパレットの実装 実際のデザイン制作で発生するような色を模索する状況や ユーザ個人のPCでディスプレイの環境が異なる状況において 応用が可能であるか検証 54

まとめ 背景 色選択インタフェースが起こす錯視は色選びを難しくする 目的 錯視の影響を考慮した透明パレットによる色選択手法の検証 実験 PowerPoint 上での彩色タスク 結果 正答率，選択回数，負荷について提案手法の有用性が示された 考察 提案手法では錯視に合わせた色選択ができた可能性 展望 実際にデザインを作るシーンに沿った実験 55