ネコの手も借りたい情報設計
四匹目「プレグナンツの法則」

こんばんは。キャットパッド藤井です。

実践で役に立つ設計キーワードをぼちぼち取り上げています。第四回は、ゲシュタルト心理学から、レイアウト・ワイヤーフレームにおいて基礎理論となる「プレグナンツの法則」です。表紙は松伏総合公園の池の畔にお住まいの三毛猫さんでした。

• 前→三匹目「カモノハシ問題」
• 次→五匹目「序列」

ゲシュタルト？心理学？

慢性的な中二病を患っている諸君には、ワクワクする言葉の響きですが、その実「なーんだ。そんなこと知ってるよ！」というモノばかりです。がっかりしないでくださいね。

プレグナンツの法則とは「law of prägnanz」、つまり「簡潔さの法則」という意味です。ざっくり説明すると、人は「視野に与えられた図形が、全体として、最も単純で最も規則的で安定した秩序ある形にまとまろうとする」という法則です。

いきなり難しいです。例題で説明していきましょう。まずは下の写真を見て下さい。

写真を見せられたとき、あなたは、「あ、猫だ」と認識するはずです。「耳があって、目があって、毛が生えてて… ずばり、これは猫ですね！」という面倒な認識は、ほとんどの方はしないはずです。最も単純に「あ、猫だ」となるのが普通でしょう。

なぜ、このような認識が可能かというと、人は過去の経験から「写真に写っているなにか」と「自分の知っている猫という動物」を一瞬でマッチングして、認識しているんですね。スゴイなー。ただし、この認識能力は猫を既に知っている人に限定されます。

この能力の優れている点は、認識に必要とするエネルギーが非常に小さいという点にあるのではと考えます。つまり認識の省エネ化ですね。

人間は対象を認識する際に、できるだけ簡潔な結論に落とし込もうとする（全体として、最も単純な形にまとめようとする）傾向があります。今回の場合は、「猫」にまとめられていますね。

これ、何の役に立つの？

最も単純な形にまとめようとする傾向には、いくつかのパターンがあることが分かっています。今回はその中でも画面設計やビジュアルデザインに応用しやすそうなものを紹介しておきます。

近接の要因

近くに配置されたものは、まとまって見えます。

「ラベルとコントロールを近くに配置する」や「同じような要素は近くに配置する」は、各要素がグループとして認識されやすくなります。うーん。当たり前ですね！

類同の要因

同じ形や同じ色は、グループに見えます。

例えば、表やリストは同じ形・色の要素を繰り返し配置しますよね。もし、リスト要素の１つ１つが個性的な形をしていたら、それがリストであるということを認識しづらくなってしまいます。

共通運命の要因

同じ動きをするものは、まとまって見えます。下の図にマウスオーバーしてみて下さい。上に移動したものと、下に移動したもので、２つのグループがあるように見えませんか？ 今回のサンプルでは全て同時に動かしていますが、ある程度タイミングがズレていてもグループとして認識できます。

最近では、Webでもインタラクティブで、かつ、動きのあるデザインが増えてきました。覚えておいて損はないと思います。

閉合の要因

カッコで括ると、まとまる。言うことありません。

よい連続の要因

つらを合わせると、まとまって見えます。逆に、段差があると別のグループのように見えます。

フラットデザインでは、この「よい連続の要因」を強く感じるのではないかと思います。

経験の要因

見たことのあるもの、既に知っているものなど、経験によって培われた認識が、まとまりをもたせる。

下の図を見て下さい。なにか隠れているのが分かりますでしょうか。

分かった方は、かなりの猫好きだと思います。では、次に下の図にマウスを重ねてみてください。

お分かりでしょうか。猫は二匹いたんですね。

さて、今、みなさんはこの絵の中に猫が二匹いることを知っています。それを踏まえて、もう一度この絵を眺めてみて下さい。もうどこに猫がいるのか分かりますよね。これこそが経験の要因です。

まとめ

カッコ良さそうな名前の割には、デザインの基礎理論みたいな内容だったと思います。

大切なのは、意図的にこれらの要因を駆使して多重の提案ができるかどうかです。直感だけに頼らない、論理的な問題解決こそが、デザイナー・設計者としての腕の見せ所なのです。

カオスな明日にネコパンチ！　キャットパッド藤井でした〜。

• 前→三匹目「カモノハシ問題」
• 次→五匹目「序列」