2018年05月29日ビジネスマイページにお気に入り「ゲシュタルトの法則」と聞いて、みなさんは何を思い浮かべるでしょうか。「ゲシュタルト崩壊」という言葉は聞いたことがあるかもしれませんが、その意味を正確に答えられる方は少ないのではないでしょうか。AIや機械学習の時代の到来で、Web関係者はユーザーのニーズや習性を理解することがますます重要になってきています。実は、そこで新たに注目を集めているのが、人間の視覚や知覚に関する法則である「ゲシュタルトの法則」なのです。「ゲシュタルトの法則」自体は、20世紀初頭にマックス・ヴェルトハイマーなどを中心にして研究された心理学に関する法則ですが、デザイン法則の基本として多くのデザイナーが学んでいます(あるいは無意識的に利用しているデザイナーもいます)。AIや機械学習の時代において、人間の特性を理解することはあらゆる分野で役に立つので、この法則のことを知っておいて損はないでしょう。今回は、ノンデザイナーこそ知っておきたい「ゲシュタルトの法則」を解説します。提案型デザイナーのススメリード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。修正、公開後の効果検証まで一連の流れに沿ってまとめています。資料をダウンロードノンデザイナーこそ知っておきたい「ゲシュタルトの法則」と「ゲシュタルト崩壊」とは?ゲシュタルトの法則ゲシュタルトの法則とは、人間は近いものや似ているものをグループ化したり、閉じた図形を見出そうとする性向があるという法則のことです。心理学者クルト・コフカの言葉を借りれば、人間は「部分の総和」ではなく全体性をもったまとまりのある構造を認識する傾向にあり、この全体性のある構造のことをドイツ語でゲシュタルト(Gestalt:「形態」の意味)と呼びます。ゲシュタルト崩壊ゲシュタルト崩壊とは、ゲシュタルトの法則がうまく当てはまらなくなった状態のことを指します。図形や文字などの全体像を把握することができず、構成する部分を部分的にしか認知できなくなった状態のことです。人間が何かを知覚する際、私たちは個々のパーツを見る前に全体性を認識します。デザイナーは(意識的もしくは無意識的に)このゲシュタルトの法則に基づいてデザインを行なっていきますが、実際どのような着眼点でデザインを行なっているのでしょうか。ここでは、ゲシュタルトの法則の根幹をなす、基本7法則について見ていきましょう。Proximity)近接の法則は、距離が近いもの同士が同じグループだと考えるという法則です。それぞれの要素数が異なっていても同じグループと認識します。アイコンとテキストを数段に分けて並べたいときに、詰めて配置するとセクションが分かれて見えないことがあります。十分に余白を取り、同じ意味内容のものを極力近づけて配置するのが大切です。Similarity)類同の法則は、同じ色や同じ形、同じ向きのもの同士が同じグループだと認識されやすいという法則です。近接の要素同様、それぞれの要素数が異なっていてもグループと認識します。アイコンやテキストを並べたいときには、周りのアイコンの大きさを揃えておきましょう。一つだけ色や形が違うと、大きなグループの中で一つだけ別の役割のグループのように見えます。Continuity)連続の法則は、図形はつながった形になりやすいという法則です。上記左の図形は、2直線が交差していると判断され、「4本の線の集合」や「2つの『く』の字の形の集まり」とは認識されないでしょう。Webデザインにおいては、グリッドレイアウトでのデザインが連続の法則を利用していると言われています。Pinterestのフィードをパソコンのブラウザで見たときには、縦のコンテンツを1グループとして連続したものだと認識するはずです。Closure)閉合の法則は、閉じた形をしているものは1つの同じグループだと認識されやすいという法則です。同じグループだとは認識されにくいでしょう。scroll)デザインです。Instagramの冒頭にあるアバターリストのを見ればわかるように、最後のアバターが欠けているように見せていますが、こうすることによってまだ続きがあるように見えます。Fate)共通運命の法則は、同じ方向に動くものや同じ周期で点滅するものなどが同じグループだと認識されやすいという法則です。道路に連なっている自動車の向きが違えば、真逆の方向に向かっている2つのグループを認識することができます。デザインで応用されている例で一番わかりやすいのが、ブラウザの右側に出てくるようなスクロールバーです。私たちが操作を行い画面をスクロールすると、同じようにスクロールバーも上がったり下がったりします。これにより、全体の位置がわかったり、スクロールの方向が正しかったりするのかを認識することができます。Area)面積の法則は、重なっている2つの図形では面積の小さいほうが手前にあるように見えるという法則です。面積の法則は、ヒーロー画像におけるタイポグラフィに利用されています。全面的に画像を敷いてその上に文字を置くと、文字のほうが占有面積が小さいので、浮き出て見えるのです。WWFのパンダのロゴマークのように、ネガティブスペースを活用したロゴマークも、面積の法則を活用して、図形を立体的に見せています。Symmetry)対称の法則は、左右対称な図形ほど認識されやすいという法則です。有名な「ルビンの壺」の図はよく引き合いに出されますが、対称的な輪郭があると意図せずに壺の絵や人の顔を認識し、入れ替えて認識することができます。シンメトリーを活用したデザインはWeb業界の中ではよく用いられており、それを顕著にしたものがスプリットスクリーンと呼ばれるものです。左右対称にすると一つのグループとして認識しやすくなります。ゲシュタルトの法則がUXやデザインにおいて重要な理由ゲシュタルトの法則はWebを語る上で無視できないものになっています。それは、人間は無意識的にゲシュタルトの法則に基づいて知覚しているからです。メニューがバラバラな場所に位置していたり、予測不可能な場所に置かれていたらどうでしょうか。当然ながら、使いづらくストレスがたまり、UXは劇的に悪化してしまいます。同じ意味内容のメニューをまとめて設置したり、意味段落を分けて文章を書いたりすれば、ユーザーはまとまりを意識しながらWebコンテンツを見ることができるので、ストレスなく閲覧することができるでしょう。昨今見かける「ブルータリズム」のウェブデザインはある種の「ゲシュタルト崩壊」を意図して再現したホームページだと言うことができます。前衛的で斬新な表現方法でありながらも、使いづらくため息が出てしまうのは、ゲシュタルトの法則から外れているからでしょう。参考:今までの常識を覆す?斬新すぎる「ブルータル」なWebデザインを取り入れたホームページ11選まとめゲシュタルトの法則はある意味でデザイナーの「常識」とも言えるデザイン法則ですが、もともとは人間の視知覚に関する心理学から登場した法則です。「ゲシュタルト崩壊」という言葉だけが先行してしまい、意味をよく理解していないかもしれませんが、言葉の意味をしっかりと理解して、ぜひ制作現場で会話のネタとして取り入れてみてはいかがでしょうか。美しいと感じるデザインのほとんどは、ゲシュタルト法則にのっとった、まとまりのあるものになっているはずです。ある種の「感覚」だけを頼りにデザインをしている場合は、ゲシュタルトの法則のどれにあてはまるかを考えながらデザインしてみるのもいいでしょう。提案型デザイナーのススメリード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。修正、公開後の効果検証まで一連の流れに沿ってまとめています。資料をダウンロードテキストテキストとは、純粋に文字のみで構成されるデータのことをいいます。太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。詳しく見るテキストテキストとは、純粋に文字のみで構成されるデータのことをいいます。太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。詳しく見るレイアウトレイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。詳しく見るコンテンツコンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。CD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。詳しく見るクロールクロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。詳しく見るクロールクロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。詳しく見るクロールクロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。詳しく見るクロールクロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。詳しく見るコンテンツコンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。CD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。涼ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。“振り返り”に役立つ5つのフレームワーク。ビジネススキル戦略設計無駄な努力とお別れ。