”視覚の法則”脳だって楽をしたい...ので負荷を減らすデザインを考える

脳みそも実は楽をしたいんです。人間と同じですね。
（例外：SEVEN DEXの※ストイック中村 ）
実は、楽をしたいと言う事と視覚表現は結構密接に関係しているんです...！

初めまして、SEVEN DEXのデザイナーまつだです。アナログデザイナーから転身してからよく感じる事ですが、視覚表現の組み立ては特にUIにおいてとても大事（なんでもそうですが）だなとヒシヒシと感じています。
アナログデザイナー時代の感覚的視覚表現（なんかカッコいいじゃんデザイン）ではなく、論理的視覚表現について反省文を綴ります。

※ストイック中村とは、SEVEN DEX代表のひとり。
EASYモードなんてつまらない、何事にも全部HARDモードで挑み成し遂げる男、それがストイック中村である。その一面は「かえれま10をやってみた」の中盤をご覧いただきたい。

私の反省と論理的視覚表現の芽生え

大学卒業後、パッケージ・ブランドデザインの業界へ２年ほど修行僧をしていました。駆け出しデザイナーにありがちの「なんとなくかっこいい」と言う理由だけでビジュアルを創ってしまうなんとも恥ずかしい事を私もしていました...。勿論、センスも必要ですが「創るならちゃんと論理的に考えなさい！」と過去の己に言ってやりたいです。

視覚表現も論理的に進めるべき。
そう気付き始めたのは旦那の口癖「非効率的な働き方だな」を100回程聞いた頃でした。

ん、非効率的？確かに！
デザイナーって結構非効率的かも！

終電生活の私に対して言っていたのですが、自分のデザインプロセス・アナログデザイン業界に対しても言える事だと妙に腹落ちしてしまいました。
「コンセプトも良いし、見た目もいいからOK」ではダメ。そこに行き着く前に論理的に考えおけば最速でそこに辿り着き、ブラッシュアップの時間も確保できたし手戻りもないはず。

今までなんて無駄な時間を使っていたんだと激しく反省しました。そこで、モノゴトのプロセスや論理的思考を求めて転業界し、今に至ります。

反省からの思考①
そもそも視覚における脳の処理とは...

（調べた事を簡単に概要だけまとめてます！）
そもそも視ることとは光情報が網膜から脳に伝わり、視覚野にその情報が達してはじめて何を視たのか認識しています。脳で作像していると言っても良いでしょう。その証拠に、自分の鼻は意識しなければ見えていません。意識した時に鼻の情報が脳で作像されているのです。

面白いことに認識する過程で一度情報が視床を通過する時に情報の整理・分析が行われています。なので、必要なものだけを選択する仕組みを脳が行っている事になります。
ザックリと言うと視覚における処理の特徴は２つです。

● 三次元で処理したがること（奥行きの知覚）
● 負荷の少ないまとめ方が行われていること

視ることとは脳が楽に処理できるよう効率的な捉え方をしていることだったのです！

下図の左側は平面で描かれた四角が２つ並んでいますが、「白い四角と黒い四角が在る」よりも「白い立方体とその影」に見えませんか？これは、脳の空間認識が強く作用しているからです。

「たぶん、こう言う構造であろう」と過去からの経験で仮定して周りの環境を捉えています。なぜなら、その方が楽だから！
まず、人間が存在している空間は３次元でありその環境にずっと身を投じているので３次元で考える思考になっています。人間と同じ３次元の状況にする方が処理負荷は少なく単純なのです。

おまけ話
なぜだ！現実と違ってみえる「錯視」

引用：https://vvstore.jp/i/vv_000000000133367/

期待してたのに...現実と違うよ...！何年か前にビレッジバンガードさんで見かけたTシャツ。物凄い錯視効果です。
悲しい事に処理負荷を抑えているからこそ起こる、目の錯覚。うまく使えば良い事もきっとあるでしょう。立体的な表現は偉大ですね。

下図は錯視の例でも有名なポンゾ錯視を再現してみました。環境（背景の線）での奥行を感じている為、奥の対象物が大きく見える現象です。

３次元のチョコと、２次元の環境（線）で錯視を作ってみましたが、やはり環境に奥行きを感じてしまう為、錯覚が起こっています。
どっちのチョコを選ぶかと言われると、私は必ず上を選びますね。でも現実は一緒の大きさ...ツライ....でもこの現象を知らなければ気持ちは満足しているはず！

反省からの思考②
脳の処理負荷の少ないデザイン

脳に楽させること＝視易いデザインになる！
ので、何を気を実際にすれば良いのかを視覚の法則というものを使ってまとめてみました。

1. 安心感を生むまとまり（内側の法則）
読んで欲しい文章や情報は、まとまり（余白をつくる・囲う）をつくることで余分な情報が入ってこない為、集中して読んでもらうことができます。
邪魔が入ると情報が多くなり脳への処理負荷がかかってしまいます。

Point
・集中させたい部分には、十分な余白をつくる
・コンテンツの分類分をする
・情報を分別する時は境界線でまとまりをつくる

【+α】
余白は大事とよく聞きますが、なぜ大事かわかりますか？それは、静的にする為です。静的にすることで、落ち着いて目視することができるので情報を読み取ることができます。余白が少ないと圧迫感（動的現象）を感じるので混乱が起こり情報が読み取りにくくなります。また、コンテンツの両端に十分な余白があることで、中心に空間を感じる＝まとまりが生まれるので余分な情報をシャットアウトしてくれます。
これは、ユーザーにとっての快適性に繋がります。

2. 統一性をもたせるデザイン（類同の法則）
同じ意味や役割（見出しタイトルやセクション、アイコン）は統一することで情報量を少なくできて理解しやすい。

Point
・何が同列なコンテンツかを決定する
・遷移がある場合は普遍性をどこに置くか検討する
（同じサイト内、同じブランドであることがわかる）

【＋α】
大きさ違い・色違い・位置違い、バラけた情報は知覚しにくく、違いを１つ１つ捉える事になるので処理も重く時間がかかります。なので、同列のコンテンツは統一性を持たせます。
これは、ユーザーにとっての迷いを軽減させる事に繋がっています。

3. 動的なコンテンツは三次元デザイン（奥行きの知覚）
ボタンなどの操作をしてもらうコンテンツは人間の反射を刺激する三次元デザインで理解を早めることができます。

Point
・遷移、クリックできるコンテンツの整理
・ホバー事のギャップを少なく
・二次元、三次元のメリハリをつける

【＋α】
脳が大好きな三次元の世界。動的なコンテンツ（主にボタン）は処理負荷が少ない直感的に理解できる三次元表現が有効です。
ボタンには囲いやベタ塗りが主流ですが、なぜそうなのかを考えるとアナログだな〜と感じます。まず、現実世界で押せるものは大抵立体的です。立体的と言うことは影などがあり境界線も生まれています。また、押すことで影のつき方や色味が変化します。それに基づいて二次元での表現もその感覚に寄せてデザインされています。
これは、ユーザーにとって直感で操作させる事に繋がります。

極論、負荷を少なくするには効率的な表現にすれば良い。
ただそれだけですが、物凄く大事で粒度によっては難しくなるのでこのスキルをどんどん極めて行きたいです。

【資料用】視覚の法則まとめ

どうやったら見た目がよくなるんだ...！視覚の法則をいくつか知っていれば、そんな事で100パターンだしたりして悩むこともきっと激減します。
そう、脳の処理負荷も少なく、私たちへの負荷も少なくしてくれるなんと素敵な事なのだろう。

内側の法則（レイアウトをまとめる時に便利）
「＜」は右側に空間を感じるので内側だと脳は認識してしまいます。　
「 ＜ ＞ ＜ ＞ ＜ ＞ 」こういった纏まった空間が発生している場合、内側と内側をワンセットで閉じた図形として判断しています。
例えば、線で囲わなくても十分な余白が両端にあれば中心のコンテンツがまとまって見えます。

類同の法則（ボタンやアイコンには共通性をもたせる）
同じ形・形態のものはまとまりとして認識します。一箇所にコンテンツをまとめられれば良いですが、ボタンやアイコンなどはどうしても散らばってしまうので一貫性を持たせていますよね。それもこの法則がある為。

なめらかな連続の法則（単純な構造の流れを意識して読みやすく）
単純な形や簡潔な構造を見出すのも楽さを求めるの脳の働きです。曲線の連続で「S」、直線の連続で「ー」にしか見えません。しかし、可能性としては交わっている点を切り離すと３パターンは生み出せます。

まだまだありますが、基本的な３つだけご紹介しました。
後ほど、追記します！