目に優しいUIデザイン(1)

お餅のような心と体をもつ男、どうも江刺家です。

2012/01/26UPDATE
design()に転載＆連載移行しました。 
#目に優しいUIデザイン(1)
#目に優しいUIデザイン(2) 

主に業務系アプリケーションの開発がおおい弊社ですが、その開発過程でよく出てくるワードに「目が疲れない・飽きない・見やすい」という要求が多いです。

今回はこの「目が疲れない」について、掘り下げたいと思います。あくまで個人的経験・感覚によって記事をまとめています、「人間工学」だとか「なんとか相学」とか「統計データ」とか基にした話ではありませんのであしからず。

 

色デザインについて

もちろんBtoC・BtoBtoCの世界では喜んでもらうのが第一という観点からインパクト重視のデザインがよく見られます。ショッキングピンクの選択なんて朝飯前です。

かっこよく＝とりあえず黒（#000000）背景で指定しとけばいいや。ってなデザイナーも沢山しってます。文字色（FontColor=Orange）なんてもあったりします。

 

否定はしません。目立つ＆アクセシビリティの観点からもハイコントラストなカラーパレットの選択が推奨されています。背景を黒くしとけば、画面がしまりますのでとりあえずカッコいい印象を与えます。広告系デザイナーとしては正しい回答だと思います。が、業務システム開発の場合は別の視点から配色決定をする必要があります。

 

その最たる要求が「目が疲れない」という要求だと思っています。

理由として

• 毎日長時間見ることを目的としている画面であること
• 経理などの伝票系システムの場合数字を見ることが目的であり、認識率を優先するということ
• 業務担当者が見てすぐにわかる情報の集合体としての役割を要求されていること

補足として

• 人間の目というものは非常に曖昧（fuzzy）であり、日々の体調によって良し悪しなど変化するということ。
• お客様の利用環境。オフィスの窓位置・証明機器によって千差万別であるということ。

 

一昔前の業務UIカラー

自分がデザイナー（笑）をしていたのが7～8年前ですか・・・・・（遠い目

 そのころHTMLでUIを作っていましたが、そのころと今のお客様の要求はあまり変わっていないというのが自分の印象です。

 

当時はというと、VBライクにグレーを基調に配色を決めるか、水色を基調にしとけば無難というのが現場の定説でした。

乱暴な言い方をすれば、既存がVBでグレーだから水色にするだけで印象が変わったと上は喜んでくれる。という感じです。

 

おかげで自分が常駐していた会社さんの業務アプリは一時ほとんど水色になってたぐらいです（笑）

（ひとつ良い前例ができると「あのアプリみたいな～あのアプリを参考に～」となるのでみんな同じようなUIになるのです）

 

そもそも目が疲れない・・・・ってなに？

 

目の疲れには三種類あると思っています。

ひとつは、眼球の動き

ひとつの画面内で眼球の動きが少なく次の目的地（情報）が分かることで、眼球動作疲労の軽減になります。眼球を動かす外側の筋肉疲労。

ふたつ目は情報の認識率

類似した情報が並んだ画面や、小さな文字で表現された画面の場合人間の目は無意識に欲しい情報にフォーカスを合わせます。カメラで言う「ズームイン」と「ピント合わせ」になります。眼球内の水晶体を前後に動かすことで発生する、眼球内部の疲労

みっつ目は、光量の調整

人間の目（瞳孔）はその場の光の加減によって収縮し、過剰な光の侵入を妨げ。光が少ない場面では多く取り入れるよう生理的にコントロールされています。その加減は非常に優秀で、現代の技巧をもってしても再現することはまだ実現できていません（たぶんｗ）カメラでいうシャッターの役目となります。眼球そのものの疲労。

 

人間の目はこのみっつの動作によって必要な情報だけを無意識に識別し、脳へ情報を送り込んで「理解」をしています。このみっつの疲労原因を解決したUIデザインをして初めて「目が疲れないUI」の完成となります。

 

それぞれに対する対応解決策

眼球の動きが疲労の原因であれば、動かす量を減らせばよい。

非常にシンプルな対応です。そのための対策がIA（information architecture：情報の構造化設計）と認識しています。

画面情報の配置に一定のルールを設け、流れるような操作を提供する。

具体的な例でいえば、「ヘッダー・フッター」の配置ですね。MS officeでは、大分類となるメニューバーは上部に集約し補足情報はフッターへまとめる。という対策を取ることでユーザーの目を上部に寄せています。最近は機能が増えてきて収集つかなくなってきている感じがしますが（笑）優秀なMSデザイナーはいつか解決策を見つけてくれると信じています。

WEBデザインの世界では、情報は左上から右下へという暗黙のルールが存在しています。explorer風の情報配置が好まれるのはこのためだと思います。

情報の認識率向上を上げるには

これはFlexUIが具体的に対応していると思っています。例としては、FlexのPopupManagerが取っている対策で「PopupWindow」の下の画面にぼかしフィルターをかけることで背景としての視認性を著しく下げることでPopupWindowのみを浮き立たせています。これは写真などでよく使われる技法なのですが「見せたいモノのみ」にフォーカスを合わせ余計な情報はぼかしてしまうことで撮影者の意図（目線）を表現します。逆に風景写真（ネイチャー系）は情報量・細かさが命なので、画面の隅々までピントが合うようにして撮影を行います。

その他にも「色」を使って無意識の認識率を操ることもできます。が、ちょっと長いので次回にします。

瞳孔の疲労をさげるには

ローコントラストな色選択を行うことで簡単に行えます。先に述べたグレー基調・水色基調が良い例です。

一番何も考えていないUIが「背景白(#FFFFFF)背景色黒(#000000)」で構成された画面です。先にも述べましたが、人間の目というのは光の侵入を無意識にコントロールしています。

その両端に位置する色が「白：黒」なのですから、それをユーザーに敷いている時点で「疲れるための配色」となります。

 

では、疲れない色。とは？

 

カメラの世界には標準反射率という用語があります。

 標準反射率

読み方：ひょうじゅんはんしゃりつ

適正露出を決める基準となる数値。被写体が光を反射する割合（白い物で約90％、黒い物で約4％）の、あらゆる物の平均値である反射率18％のこと。

日本人の肌の反射率に近い数値でもある。この反射率をもつグレーの被写体を、見た目通りのグレーに再現できるように露出計は働くと言える。

(引用：http://www.weblio.jp/)

 人間というのは昔から自然界のものを見て、認識してきました。

一番目に移してきたものはおそらく「自分の手＝人の肌」であると考えます。

 

カメラの露出計はその人間の目でみたものを見たままにとらえるために

レンズから入射した光の量を18%になるようコントロールすることで適正な露出を算出し写真を撮っています。

 

つまり、人間の眼も入射光を18%程度にコントロールしています。

白：黒で提供された情報を人間が認識するためにはいちいち瞳孔を収縮し情報を得ているわけです。

 

瞳孔をひらいた状態、閉じた状態。どちらが良いかという事ではなくニュートラル（自然状態）が一番目には優しい状態であるといえます。

人間の筋肉は「引く力」と「押す力」によって身体を動かしていますが、押しても引いてもいない自然体の状態を必ず持っています。

眼球：瞳孔にとってその状態になるような色が標準反射率となるわけです。

 

標準反射率で構成された画面とは？

原点回帰となってしまうかもしれませんが、ＶＢライクなグレーなどは目には非常に優しい配色であると考えます。

 

グレーがいいといわれても・・・・・・・・・・・・・・・・

もちろん、目に優しいからといってグレー一色でまとめて「デザインでござい」と出されては困ります（笑

そこで個人的にいつも利用しているのは「和色」です。

[和色大辞典]

http://www.colordic.org/w/

 

まとめ

目新しいものだけがよいのではなく、先人の積み重ねてきたＵＩの配置。配色にはすべて意味がありそれを引き継ぐことも一つのデザインであると考えています。

もちろん、この逆の選択をすればインパクトをあたえるＵＩも作れます。広告の世界では非常に重要な要素です。

 

どちらも否定ではなく必要なものであり選択です。

弊社のUIデザインとはその選択の提供を行います。

 

この世には曖昧な要求というものはないと思っています、表現するだけの言葉を知らないだけです。自分の役目はその曖昧さをヒアリングし、翻訳し認識をそろえることと認識しています。

「思ってたのと違う～」というのは正しい回答です。それを提供する側に理解するだけの度量がないだけの話です。ただ、それを理解し提供するには時間が必要だということはご理解いただきたく願います。

 

よいデザインを欲するのであれば十分な時間、工数をご検討ください。時間も工数もないのであれば、それなりのデザインに留まります。どの程度の時間・工数がかかるのかは遠慮なく弊社営業までお問い合わせくださいませ（笑

 

非常に長文となりましたが、最後までお読みいただきましてありがとうございました。