hirax.net::Keywords::「ユーザーインターフェース」のブログ



2000-04-09[n年前へ]

心に浮かぶハートマーク 

色覚の時空間特性で遊んでみよう

 4月である。「四月物語」の4月である。

で書いたように、私は4月だけは英語の勉強をしたくなるのである(何故なら、全然できないから)。そこで、ここのところ英語の先生のところに足繁く出向いている。その時に、信号機の例題を出されて「青信号」と言おうとして私は"ablue light"と言ってしまった。すると、「青信号は"green"だ -> The run signalis green.」と言われてしまった。しまった、確かにその通りだ。いや、英語でそう表現することに納得という話ではない。英語ではこうだと言われたら、私はそのまま頷くのみである。"Yes,sir"状態である。納得したのは、信号機の「現実の」色の話だ。そう言えば、日本でも信号機は「緑色」だった。試しに、信号機の一例を次に示してみる。
 
MacOS Xのファインダー上の「緑」信号

実は人にそう優しくないユーザーインターフェースの一例

 本当は「緑色」なのに、「何故、青信号と言われていたのだっけ?」と考えながら、帰り道に交差点、「緑」信号をじっと見ていた。すると、「緑」信号は消えて、黄信号になった。しかし、私の目にはその瞬間「赤」信号が見えたのである。
 私は夢を見ていたわけでも、予知能力があるわけでもむろんなくて、それは単なる錯覚である。「緑」信号が消えた瞬間に「赤」信号が見える、という錯覚である。

 私が見た「赤」信号機の錯覚を実感してもらうために、こんなアニメーションGIFを作ってみた。ソフトをレジストしてないが故の、SGという文字は気にしないでもらいたい。下の画像中央にある黒い点を見つめていて欲しい。すると、緑のハートマークが消えた瞬間から、赤いハートマークがおぼろげに見えるはずである。
 

白地に浮かぶ赤いハートマーク
(黒点を見つめること。)

 

 これは、色覚の時間特性による錯覚の一つである。実際に、赤いハートマークがあるわけではない。私の心の中にだけ、浮かぶハートマークである。

 その原因となる色覚の時間特性を示すグラフを以下に挙げる。これは色覚の時間特性を示すグラフの例である。色覚のインパルス応答のようなものである。ある色を見た後には、その色の反対色を感じるということを示している。
 

色覚の時間特性を示すグラフの例
朝倉書店 内川恵二著 色覚のメカニズム 色を見るしくみ より
 このような、色覚の時間特性により、緑色のハートマークを見た後に、赤いハートマークが心の中に見えたのである。ハートマークの黄色い縁取りの残像は青く見えるのだ。そして、同じように私の信号機の錯覚に繋がるのだ。

 このような錯覚というのはとて興味深いものである。視覚という「デバイスの特性」が「目に見えて実感できる」ことが特に面白い。以前、

で考えた「電子写真」の画像特性や、の時のCCDや液晶といったものの画像特性を考えたときにも何故だかその「デバイスの変なところ」というものには心惹かれるのである。何故なら、私は「短所は長所」でもあると思うからだ。いやもちろん、「長所は短所」というわけで、要は考え方と使い方次第、ということだ。

 さて、先の錯覚は色覚の時間特性によるものだった。それと全く同じような錯覚が、色覚の空間特性から得ることができる。そのような錯覚の一つにこのようなものである。それを下に示してみる。
 

白い線の交差部が赤く見える錯覚

 この有名な画像パターンを見れば、「白い線の交差部が赤く見える」はずだ。

 これは、色覚の空間特性によるものである。これを示すグラフの例を以下に示す。この場合もやはり色覚の時間特性のように、ある刺激があるとその周囲に反対の色の影響が表れる。例えば、周りに白が多いと、その部分は黒っぽく見える。赤色の周りは緑がかって見えるのである。逆に緑色のものの周りは赤く見えるのだ。
 そして、それをさらに進めると、周囲に赤色が少ない場所は、周りに比べて赤く見えるのである。上の画像で言えば、白の交差部は、赤の刺激が少ないので、赤の刺激を逆に感じるのである(ちょっと説明をはしょりすぎかな)。
 

色覚の空間特性を示すグラフの例
朝倉書店 内川恵二著 色覚のメカニズム 色を見るしくみ より

 今回は、このような色覚の空間特性をシミュレートしてみたい。道具は単純にPhotoshopだ。もう手作業でやってみるのだ。ネコの色覚で遊んだ

の時と同じである。
 
色覚の空間特性をシミュレートし、錯覚を生じさせてみる
 これがオリジナル画像。黒背景に白い線で格子模様が描かれている。
  白い(つまり光刺激が多い領域)からの影響を考える。先に示したグラフのように、光刺激がある箇所と少し離れたところではそれと逆の刺激を受けたような効果がある。
 そこで、まずは白い部分からの影響をガウス形状のボカシにより、真似してみる。ある画素から少し離れた所に影響が及ぶのをシミュレートするのである。
 白い部分からの影響(実際には、比較問題となるので黒い部分からの影響と言っても良いだろうか?)は「白と逆の方向、すなわち黒い方向」に働く。
 そこで、上の画像を階調反転させる。すなわち、ある画素から少し離れた所に元の明るさと逆の影響が及ぶことをシミュレートするのである。そしてさらに、階調のカーブを鋭くしてやる。
 
 上で計算したものとオリジナルの画像を加算してやる。これが、人間が感じる画像をシミュレートしたものである。
 白い格子の交差点部が黒く見えているのがわかると思う。といっても、もともとその部分は黒く見えていたとは思うが。

 下に、シミュレート画像とオリジナル画像を並べてみる。

シミュレートした画像
オリジナル画像

 このようにして、オリジナル画像を見たときに感じる錯覚をシミュレートできたことになる(もどきだけど)。

 さて、上では簡単のためにグレイスケールで遊んでみたが、最初に示した赤白の場合のようなカラーの例を示してみる。次に示す四角形の中央部は、右と左ではいずれも右の方が赤っぽく見えるはずである。緑に囲まれた領域は、本来の色に対して、緑と逆の赤色に見えるのである。上に示した白黒格子と全く同じ理屈である。
 

右と左ではいずれも右の方が赤っぽく見える

 さて、この右下の画像中の赤は通常の「赤」よりもさらに鮮やかな「赤」を実現していることになる。左下のものと同じ赤100%の色であるが、左よりももっと鮮やかに見えている筈だ。右下と比べると、左下の赤は落ち着いた赤色に見えてしまうのではないだろうか?
 この右下の赤、すなわち緑に囲まれた赤は、物理的にCRTあるいは液晶(今あなたがこのWEBページを見ているデバイス)などの表現可能領域を越えた、さらに鮮やかな赤色に見えているわけだ。ヒトの視覚のデバイス特性が故に鮮やかに見えることになる。

 さて、鮮やかな「赤」と言えば、「ポケモンチェック」によれば、日本民間放送連盟のガイドラインには

  1. 映像や光の点滅は、原則として1秒間に3回を超える使用を避けるとともに、次の点に留意する。
    1. 「鮮やかな赤色」の点滅は慎重に扱う。
    2. 前項1の条件を満たした上で1秒間に3回を超える点滅が必要なときには、5回を限度とし、かつ、画面の輝度変化を20パーセント以下に押さえる。加えて、2秒を超える使用は行わない。
  2. コントラストの強い画面の反転や、画面の輝度変化が20パーセントを超える急激な場面転換は、原則として1秒間に3回を超えて使用しない。
  3. 規則的なパターン模様(縞模様、渦巻き模様、同心円模様など)が、画面の大部分を占めることも避ける。
とあるらしい。私は「赤」と「緑」の細かいパターンというのは見ていると、何故だか「チカチカして」気持ちが悪くなるのである。かといって、「赤」と「緑」のパターンであっても、細かくなければクリスマス気分で好きなのである。その証拠にでは、その色使いを使っている位である。パターンが細かくない限りにおいては、緑と赤が鮮やかさを互いに引き立てて良い感じに見えるのである。

 しかし、その「赤」と「緑」パターンが細かくなると、何故だか不快なのだ。色覚の時空間特性を考えると、「赤」と「緑」の細かいパターンというのは、もしかしたら読む際に刺激が強すぎるのではないか、と想像してみたりする。根拠はたいしてないのだけれど。
 

2008-07-14[n年前へ]

「メディアの特性」と「制御工学の安定性」 

 渋谷で飲んだ帰り、道玄坂の坂を駅に向かって下っていくと、隣を歩く人が「あんな風に名づけ、メディアが取り上げるから、そんなものが増えてしまうんですよね」と言った。メディアに関わるその人が、そんなことを言った。その人の視線の先を眺めると、渋谷駅前のビルの上に「モンスターペアレント」という広告が大きく光っていた。

 光る広告を見た後に、「1,2ヵ月前のログに、検索語として、漂白剤や洗浄剤の商品名が多かったこと」をなぜか連想した。その検索語を示す何桁にもおよぶ検索ログを見て、「メディアが名づけ・報道すること」や「検索サービスがユーザに与えるもの」について、考えさせられたことを思い出した。

 その言葉を聞き道玄坂を下りつつ、「制御工学のフィードバック」を考えた。「出力(結果)を入力(原因)側に戻す」ことを意味するフィードバックにおいて、「出力の増加が入力の増加をさらに生む」ような「戻し方」を正のフィードバックという。

 正のフィードバックが働いている場合、(特に系のループ利得が1を越える場合)何らかの破綻が起こるまで出力が増大しつづける。また、この領域では初期値の違いが時間の経過にしたがって無限に引き伸ばされるため、僅かな初期値の違いがシステムの挙動を大きく変える(カオスな振る舞いとなる)場合がある。これは複雑性や多様性を生み出す原動力となりうる。
 そして、その逆に「出力の増加分を入力を減らす」ように働く、出力(結果)の入力(原因)側への戻し方を「負のフィードバック」と呼ぶ。
 負のフィードバックが働く場合は、フィードバック系の増幅率は裸の増幅率より小さな値となる。この増幅率の余裕分の範囲で、出力の増加は増幅率を引き下げるように働き、出力の低下は増幅率を引き上げるように働くので、出力の変動を抑えることができる。(不安定性を消し、安定にすることができる)

 電子機器・メカ機器で多く使われるフィードバックシステムは、「負のフィードバック」だ。なぜなら、それにより「システムの安定化」を実現化することができるからである。逆に言えば、そういう風にシステムを作らなければ、安定して機器を動かすことはできない。

 その一方、ユーザーインターフェースをつかさどる機器は、「正のフィードバック」として動くものも多い。たとえば、車のハンドルを動かすパワーステアリングなどは、入力の増幅が出力の増幅を生み出す「正のフィードバック」システムだ。少ない力で人の手助けをするシステムを作ろうとするならば、「正のフィードバック」を使うのが自然で人に優しい、というわけである。そういった、ユーザの反応を増幅拡大して見せるポジティブ・フィードバック系が多い。

 ユーザの操作・反応がとても重要であり、同時にマスメディアでもあるようなツールを作ろうとするときには、この「フィードバック」特性を意識することは、きっと何かの知見を与える、と思う。「正のフィードバック」と「負のフィードバック」、そして、それらのフィードバック・システムが生み出すシステム、そういったものの挙動をシステムに関わる人々が想像してみることは、きっと何かの役に立つのではないだろうか、と思う。

 どちらが良いとか悪いといった単純な二元的な話ではなくて、複雑なシステムの挙動に対して道具が与える影響を考えてみることはきっと無駄にはならないだろう、と思う。

2011-07-08[n年前へ]

”カット(切り取り)”でないエクセルの”カット”から「統一感と便利さ」を考える 

 エクセルの「カット」は、「選択領域を削除する(そして、選択部にあった内容をクリップボードに一時的に格納しておく)」という動作を行いません。 つまり、エクセルの「カット」は一般的なアプリケーションとは意味が違います。 エクセル上で領域選択を行い「カット」しても、その瞬間には「選択部にあった内容をクリップボードに一時的に格納しておく」ということだけしか行われず、 引き続き「ペースト」を行った場合にのみ、元の選択領域が消え・ペースト先へと内容を移動させるという動作が行われます。だから、たとえば「カット」直後に「ペースト」を行わなかったとしたら、「カット(という名の作業を行ったはずの)」した領域は実は「カットされる=切り取られる」ことがないのです。

 おそらく、エクセル使い・達人からすれば、そんな”移動”目的に特化されたカット機能の方が便利・使いやすい・メリットがあるということなのだろうと思います。 しかし、その便利さはユーザー・インターフェースの統一感、つまり「単純で数少ない基本原則を覚えさえすればどのように動くかがわかる」というメリットを失わさせてしまう両刃の剣でもあります。

 「ユーザー・インターフェースの統一感」と「特定目的のアプリケーションにおける機能重視のカスタマイズ」を考える時、どんなさじ加減・バランスにしたくなるでしょうか。たとえば、エクセルの「カット」機能を題材にしてみるならば、あなたならどんな動きにしたいと考えますか?

2015-02-21[n年前へ]

「おっぱいに対する複数指を使った接触状況をセンシングするユーザーインターフェース」を千円くらいで作ってみた!? 

 秋葉原でプラズマボール(ガラス球に触れると内部のプラズマが美しく輝く玩具)を980円で買い、100円ショップで税込み100円以下で買ったUSB 3D カメラを使って、半球面マルチタッチインターフェースを作ってみました…というか作り始めました。…半球形状に触ることができるというのは、つまりいわゆるひとつの「おっぱいに対する複数指を使った接触状況をセンシングするユーザーインターフェース」です。単純に言うと、球状のプラズマボールに指で触れたことによるプラズマ光をUSBカメラで検出し、その接触状況をセンシングして、半球形状の物体を複数の指でそのように触れているかをリアルタイムに検出しよう!という仕組みです。

 こんなユーザーインターフェースが何かの役に立つことがあるかどうかは…実際のところよくわかりません。けれど、なにはともあれ、「おっぱい(その他半球形状物体)に対する複数指を使った接触状況をセンシングするユーザーインターフェース」を千円くらいで作ってみました!?…あとは、タッチ状況に対してリアルタイムに応答する側を作り出させば、インタラクティブに反応する「何か」を作り出すことができるかも!?

「おっぱいに対する複数指を使った接触状況をセンシングするユーザーインターフェース」を千円くらいで作ってみた!?「おっぱいに対する複数指を使った接触状況をセンシングするユーザーインターフェース」を千円くらいで作ってみた!?








■Powered by yagm.net